fix: add temporary fix for issue with pickChildren

some components were not rendered at all - one edge case with the button component still persists, waiting for PR to be merged
fragment-build · Apr 20, 2024 · 356a540 · 356a540
1 parent 2209cd2
commit 356a540
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/src/components/base/Breadcrumbs.ts b/src/components/base/Breadcrumbs.ts
@@ -5,4 +5,4 @@ import {
 import { withFragment } from '../../withFragment'
 
 export const Breadcrumbs = withFragment(NextBreadcrumbs, 'breadcrumbs');
-export const BreadcrumbItem = withFragment(NextBreadcrumbItem, 'breadcrumbItem');
+export const BreadcrumbItem = NextBreadcrumbItem;
diff --git a/src/components/base/Navbar.ts b/src/components/base/Navbar.ts
@@ -13,6 +13,6 @@ export const Navbar = withFragment(NextNavbar, 'navbar');
 export const NavbarBrand = withFragment(NextNavbarBrand, 'navbarBrand');
 export const NavbarContent = withFragment(NextNavbarContent, 'navbarContent');
 export const NavbarItem = withFragment(NextNavbarItem, 'navbarItem');
-export const NavbarMenu = withFragment(NextNavbarMenu, 'navbarMenu');
+export const NavbarMenu = NextNavbarMenu;
 export const NavbarMenuItem = withFragment(NextNavbarMenuItem, 'navbarMenuItem');
 export const NavbarMenuToggle = withFragment(NextNavbarMenuToggle, 'navbarMenuToggle');
diff --git a/src/context.ts b/src/context.ts
@@ -1,4 +1,4 @@
-import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbItemProps, BreadcrumbsProps, ButtonGroupProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, HTMLNextUIProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react";
+import { AccordionItemProps, AccordionProps, AutocompleteItemProps, AutocompleteProps, AutocompleteSectionProps, AvatarGroupProps, AvatarProps, BadgeProps, BreadcrumbsProps, ButtonGroupProps, ButtonProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, CircularProgressProps, CodeProps, DividerProps, DropdownItemProps, DropdownMenuProps, DropdownProps, DropdownSectionProps, DropdownTriggerProps, HTMLNextUIProps, ImageProps, InputProps, KbdProps, LinkProps, ListboxItemProps, ListboxProps, ListboxSectionProps, ModalBodyProps, ModalContentProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarBrandProps, NavbarContentProps, NavbarItemProps, NavbarMenuItemProps, NavbarMenuToggleProps, NavbarProps, PaginationCursorProps, PaginationItemProps, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupProps, RadioProps, ScrollShadowProps, SelectItemProps, SelectProps, SelectSectionProps, SkeletonProps, SliderProps, SnippetProps, SpacerProps, SpinnerProps, SwitchProps, TabItemProps, TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TabsProps, TextAreaProps, TooltipProps, UserProps } from "@nextui-org/react";
 import { createContext } from "react";
 import { RowProps } from '@react-types/table';
 import type { Props as ApexChartProps } from "react-apexcharts";
@@ -20,7 +20,6 @@ export interface FragmentUIContext {
     button?: Partial<ButtonProps>;
     buttonGroup?: Partial<ButtonGroupProps>;
     breadcrumbs?: Partial<BreadcrumbsProps>;
-    breadcrumbItem?: Partial<BreadcrumbItemProps>;
     card?: Partial<CardProps>;
     chart?: Partial<{[chartType in ChartProps['type']]: Partial<Pick<ApexChartProps, 'options' | 'series'>>}>;
     checkbox?: Partial<CheckboxProps>;
@@ -53,7 +52,6 @@ export interface FragmentUIContext {
     navbarBrand?: Partial<NavbarBrandProps>;
     navbarContent?: Partial<NavbarContentProps>;
     navbarItem?: Partial<NavbarItemProps>;
-    navbarMenu?: Partial<NavbarMenuProps>;
     navbarMenuItem?: Partial<NavbarMenuItemProps>;
     navbarMenuToggle?: Partial<NavbarMenuToggleProps>;
     pagination?: Partial<PaginationProps>;

diff --git a/src/withFragment.tsx b/src/withFragment.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, isValidElement, useContext } from "react";
+import { forwardRef, useContext } from "react";
 import defaultsDeep from "lodash.defaultsdeep";
 import { FragmentUIContext } from "./context";
 
@@ -22,9 +22,8 @@ export function withFragment<C extends React.ComponentType<any>>(Component: C, c
     (ComponentWithContext as any).getCollectionNode = Component.getCollectionNode;
   }
 
-  if (isValidElement(ComponentWithContext) && isValidElement(Component)) {
-    ComponentWithContext.type = Component.type;
-  }
+  // fix https://github.com/nextui-org/nextui/pull/2815
+  ComponentWithContext.displayName = Component.displayName;
 
   return ComponentWithContext as unknown as C;
 }