diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx index 94b307533c..2aa45d3491 100644 --- a/packages/propel/src/combobox/combobox.tsx +++ b/packages/propel/src/combobox/combobox.tsx @@ -220,11 +220,14 @@ function ComboboxOption({ value, children, disabled, className }: ComboboxOption ); } -// Compound component export -const Combobox = Object.assign(ComboboxRoot, { - Button: ComboboxButton, - Options: ComboboxOptions, - Option: ComboboxOption, -}); + +const Combobox = ComboboxRoot as typeof ComboboxRoot & { + Button: typeof ComboboxButton; + Options: typeof ComboboxOptions; + Option: typeof ComboboxOption; +}; +Combobox.Button = ComboboxButton; +Combobox.Options = ComboboxOptions; +Combobox.Option = ComboboxOption; export { Combobox }; diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx index e462a7f2d7..31aca50ddd 100644 --- a/packages/propel/src/command/command.tsx +++ b/packages/propel/src/command/command.tsx @@ -31,11 +31,15 @@ function CommandItem({ ...props }: React.ComponentProps; } -const Command = Object.assign(CommandComponent, { - Input: CommandInput, - List: CommandList, - Empty: CommandEmpty, - Item: CommandItem, -}); +const Command = CommandComponent as typeof CommandComponent & { + Input: typeof CommandInput; + List: typeof CommandList; + Empty: typeof CommandEmpty; + Item: typeof CommandItem; +}; +Command.Input = CommandInput; +Command.List = CommandList; +Command.Empty = CommandEmpty; +Command.Item = CommandItem; export { Command }; diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx index 494cceb670..1a880ae211 100644 --- a/packages/propel/src/context-menu/context-menu.tsx +++ b/packages/propel/src/context-menu/context-menu.tsx @@ -128,15 +128,23 @@ ContextMenuItem.displayName = "ContextMenuItem"; ContextMenuSeparator.displayName = "ContextMenuSeparator"; ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger"; -// compound components -const ContextMenu = Object.assign(ContextMenuRoot, { - Trigger: ContextMenuTrigger, - Portal: ContextMenuPortal, - Content: ContextMenuContent, - Item: ContextMenuItem, - Separator: ContextMenuSeparator, - Submenu: ContextMenuSubmenu, - SubmenuTrigger: ContextMenuSubmenuTrigger, -}); + +const ContextMenu = ContextMenuRoot as typeof ContextMenuRoot & { + Trigger: typeof ContextMenuTrigger; + Portal: typeof ContextMenuPortal; + Content: typeof ContextMenuContent; + Item: typeof ContextMenuItem; + Separator: typeof ContextMenuSeparator; + Submenu: typeof ContextMenuSubmenu; + SubmenuTrigger: typeof ContextMenuSubmenuTrigger; +}; + +ContextMenu.Trigger = ContextMenuTrigger; +ContextMenu.Portal = ContextMenuPortal; +ContextMenu.Content = ContextMenuContent; +ContextMenu.Item = ContextMenuItem; +ContextMenu.Separator = ContextMenuSeparator; +ContextMenu.Submenu = ContextMenuSubmenu; +ContextMenu.SubmenuTrigger = ContextMenuSubmenuTrigger; export { ContextMenu }; diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx index 018a3418aa..cdc58571c3 100644 --- a/packages/propel/src/dialog/root.tsx +++ b/packages/propel/src/dialog/root.tsx @@ -45,7 +45,7 @@ const getPositionClassNames = (position: DialogPosition) => "top-8 left-1/2 -translate-x-1/2": position === "top", }); -const DialogPortal = memo(function DialogPortal({ children, ...props }) { +const DialogPortal = memo(function DialogPortal({ children, ...props }: React.ComponentProps) { return ( {children} @@ -54,12 +54,12 @@ const DialogPortal = memo(function DialogPortal({ children, ...props }) { }); DialogPortal.displayName = "DialogPortal"; -const DialogOverlay = memo(function DialogOverlay({ className, ...props }) { +const DialogOverlay = memo(function DialogOverlay({ className, ...props }: React.ComponentProps) { return ; }); DialogOverlay.displayName = "DialogOverlay"; -const DialogComponent = memo(function DialogComponent({ children, ...props }) { +const DialogComponent = memo(function DialogComponent({ children, ...props }: DialogProps) { return ( {children} @@ -68,7 +68,7 @@ const DialogComponent = memo(function DialogComponent({ children, ...props }) { }); DialogComponent.displayName = "Dialog"; -const DialogTrigger = memo(function DialogTrigger({ children, ...props }) { +const DialogTrigger = memo(function DialogTrigger({ children, ...props }: React.ComponentProps) { return ( {children} @@ -100,7 +100,7 @@ const DialogPanel = forwardRef(function DialogPanel( }); DialogPanel.displayName = "DialogPanel"; -const DialogTitle = memo(function DialogTitle({ className, children, ...props }) { +const DialogTitle = memo(function DialogTitle({ className, children, ...props }: DialogTitleProps) { return ( (function PopoverContent({ children, className, placement, @@ -23,7 +23,7 @@ const PopoverContent = React.memo(function PopoverContent({ containerRef, positionerClassName, ...props -}) { +}: PopoverContentProps) { // side and align calculations const { finalSide, finalAlign } = React.useMemo(() => { if (placement) { @@ -45,28 +45,29 @@ const PopoverContent = React.memo(function PopoverContent({ }); // wrapper components -const PopoverTrigger = React.memo(function PopoverTrigger(props) { +const PopoverTrigger = React.memo(function PopoverTrigger(props: React.ComponentProps) { return ; }); -const PopoverPortal = React.memo(function PopoverPortal(props) { +const PopoverPortal = React.memo(function PopoverPortal(props: React.ComponentProps) { return ; }); -const PopoverPositioner = React.memo(function PopoverPositioner(props) { +const PopoverPositioner = React.memo(function PopoverPositioner(props: React.ComponentProps) { return ; }); // compound components -const Popover = Object.assign( - React.memo>(function Popover(props) { - return ; - }), - { - Button: PopoverTrigger, - Panel: PopoverContent, - } -); +const PopoverRoot = React.memo>(function Popover(props) { + return ; +}); + +const Popover = PopoverRoot as typeof PopoverRoot & { + Button: typeof PopoverTrigger; + Panel: typeof PopoverContent; +}; +Popover.Button = PopoverTrigger; +Popover.Panel = PopoverContent; // display names PopoverContent.displayName = "PopoverContent"; diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx index bc899c24dd..a62467120f 100644 --- a/packages/propel/src/skeleton/root.tsx +++ b/packages/propel/src/skeleton/root.tsx @@ -2,12 +2,18 @@ import React from "react"; // helpers import { cn } from "../utils/classname"; -type SkeletonProps = { +export type SkeletonProps = { children: React.ReactNode; className?: string; ariaLabel?: string; }; +export type SkeletonItemProps = { + height?: string; + width?: string; + className?: string; +}; + function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) { return (
@@ -16,13 +22,7 @@ function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" ); } -type ItemProps = { - height?: string; - width?: string; - className?: string; -}; - -function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) { +function SkeletonItem({ height = "auto", width = "auto", className = "" }: SkeletonItemProps) { return (
& React.RefAttributes> -> & { - List: React.ForwardRefExoticComponent< - React.ComponentProps & React.RefAttributes> - >; - Trigger: React.ForwardRefExoticComponent< - React.ComponentProps & { size?: "sm" | "md" | "lg" } & React.RefAttributes< - React.ElementRef - > - >; - Content: React.ForwardRefExoticComponent< - React.ComponentProps & React.RefAttributes> - >; - Indicator: React.ForwardRefExoticComponent & React.RefAttributes>; -}; - const TabsRoot = React.forwardRef(function TabsRoot( { className, ...props }: React.ComponentProps, ref: React.ForwardedRef> @@ -104,11 +87,21 @@ const TabsIndicator = React.forwardRef(function TabsIndicator( ); }); -export const Tabs = Object.assign(TabsRoot, { - List: TabsList, - Trigger: TabsTrigger, - Content: TabsContent, - Indicator: TabsIndicator, -}) satisfies TabsCompound; +TabsRoot.displayName = "TabsRoot"; +TabsList.displayName = "TabsList"; +TabsTrigger.displayName = "TabsTrigger"; +TabsContent.displayName = "TabsContent"; +TabsIndicator.displayName = "TabsIndicator"; -export { TabsList, TabsTrigger, TabsContent, TabsIndicator }; +const Tabs = TabsRoot as typeof TabsRoot & { + List: typeof TabsList; + Trigger: typeof TabsTrigger; + Content: typeof TabsContent; + Indicator: typeof TabsIndicator; +}; +Tabs.List = TabsList; +Tabs.Trigger = TabsTrigger; +Tabs.Content = TabsContent; +Tabs.Indicator = TabsIndicator; + +export { Tabs }; diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx index b939ad1caf..06c8e05942 100644 --- a/packages/propel/src/toolbar/toolbar.tsx +++ b/packages/propel/src/toolbar/toolbar.tsx @@ -165,11 +165,15 @@ ToolbarSeparator.displayName = "ToolbarSeparator"; ToolbarSubmitButton.displayName = "ToolbarSubmitButton"; // compound components -const Toolbar = Object.assign(ToolbarRoot, { - Group: ToolbarGroup, - Item: ToolbarItem, - Separator: ToolbarSeparator, - SubmitButton: ToolbarSubmitButton, -}); +const Toolbar = ToolbarRoot as typeof ToolbarRoot & { + Group: typeof ToolbarGroup; + Item: typeof ToolbarItem; + Separator: typeof ToolbarSeparator; + SubmitButton: typeof ToolbarSubmitButton; +}; +Toolbar.Group = ToolbarGroup; +Toolbar.Item = ToolbarItem; +Toolbar.Separator = ToolbarSeparator; +Toolbar.SubmitButton = ToolbarSubmitButton; export { Toolbar };