@bioturing/components 0.30.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/choice-list/component.js +26 -28
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/code-block/component.js +10 -10
- package/dist/components/combobox/component.js +148 -143
- package/dist/components/combobox/component.js.map +1 -1
- package/dist/components/command-palette/component.js +79 -0
- package/dist/components/command-palette/component.js.map +1 -0
- package/dist/components/command-palette/style.css +1 -0
- package/dist/components/dropdown-menu/component.js +119 -189
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/item.css +1 -1
- package/dist/components/dropdown-menu/item.js +82 -60
- package/dist/components/dropdown-menu/item.js.map +1 -1
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/dropdown-menu/useDropdownMenu.js +127 -0
- package/dist/components/dropdown-menu/useDropdownMenu.js.map +1 -0
- package/dist/components/input/component.js +24 -23
- package/dist/components/input/component.js.map +1 -1
- package/dist/components/keyboard-shortcut/component.js +72 -0
- package/dist/components/keyboard-shortcut/component.js.map +1 -0
- package/dist/components/keyboard-shortcut/style.css +1 -0
- package/dist/components/loader/component.js +15 -0
- package/dist/components/loader/component.js.map +1 -0
- package/dist/components/loader/style.css +1 -0
- package/dist/components/popup-panel/style.css +1 -1
- package/dist/components/scroll-area/component.js +83 -64
- package/dist/components/scroll-area/component.js.map +1 -1
- package/dist/components/select/component.js.map +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/toast/style.css +1 -1
- package/dist/index.d.ts +236 -66
- package/dist/index.js +203 -197
- package/dist/index.js.map +1 -1
- package/dist/metadata.js +47 -2
- package/dist/metadata.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { useControlled } from \"@base-ui-components/utils/useControlled\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n useAntdCssVarClassname,\n useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\nimport { DropdownMenuItem } from \"./item\";\n\nimport \"./style.css\";\nimport { DropdownMenuDivider } from \"./divider\";\n\nexport type DropdownMenuItemType =\n | {\n /**\n * The type of the menu item\n */\n type: \"item\";\n /**\n * The label of the menu item\n */\n label?: React.ReactNode;\n /**\n * Whether the menu item is disabled\n */\n disabled?: boolean;\n /**\n * The icon of the menu item\n */\n icon?: React.ReactNode;\n /**\n * The key of the menu item\n */\n key: React.Key;\n /**\n * The onClick event handler of the menu item\n */\n onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n /**\n * The onMouseEnter event handler of the menu item\n */\n onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n /**\n * The onMouseLeave event handler of the menu item\n */\n onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n /**\n * The onMouseOver event handler of the menu item\n */\n onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n /**\n * The onMouseOut event handler of the menu item\n */\n onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n /**\n * The className of the menu item\n */\n className?: string;\n /**\n * Whether the menu item is a danger item\n */\n danger?: boolean;\n /**\n * The ref of the menu item\n */\n ref?: React.Ref<HTMLElement>;\n }\n | {\n /**\n * The type of the menu item\n */\n type: \"divider\";\n }\n | {\n /**\n * The type of the menu item\n */\n type: \"header\";\n /**\n * The title of the menu item\n */\n title?: React.ReactNode;\n /**\n * The className of the menu item\n */\n className?: string;\n };\n\nexport interface DropdownMenuProps {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n group?: string;\n groupLabel?: string;\n item?: string;\n itemIcon?: string;\n itemText?: string;\n separator?: string;\n positioner?: string;\n };\n /**\n * Custom render function for menu items\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: Omit<\n React.ComponentProps<typeof Command.Input>,\n \"size\" | \"ref\"\n >;\n /**\n * Whether to match the width of the popup with the trigger\n * @default false\n */\n popupMatchTriggerWidth?: boolean;\n\n /**\n * Content to display before the list\n */\n beforeList?: React.ReactNode;\n /**\n * Content to display after the list\n */\n afterList?: React.ReactNode;\n /**\n * Whether to keep the dropdown open when an item is selected\n * @default false\n */\n keepOpenOnSelect?: boolean;\n /**\n * Control the highlighted state of the menu item\n */\n highlightedItemKey?: React.Key;\n /**\n * Control the selected state of the menu item\n */\n selectedItemKeys?: React.Key[];\n /**\n * Whether to show checkbox\n * @default false\n */\n showCheckbox?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\ninterface DropdownMenuGroup {\n label: React.ReactNode | null;\n items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n searchProps = {\n placeholder: \"Search...\",\n },\n popupMatchTriggerWidth,\n beforeList,\n afterList,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n}: DropdownMenuProps) => {\n const [open, setOpen] = useControlled({\n controlled: outsideOpen,\n default: false,\n name: \"open\",\n });\n const onOpenChange = useCallback(\n (newValue: boolean) => {\n setOpen(newValue);\n outsideOnOpenChange?.(newValue);\n },\n [setOpen, outsideOnOpenChange]\n );\n const cls = useCls();\n const antdCssVarClassname = useAntdCssVarClassname();\n const baseUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n // If no groups exist yet and current item is not a header, create default group\n if (acc.length === 0 && current.type !== \"header\") {\n acc.push({\n label: null,\n items: [],\n });\n }\n\n // If it's a header, create a new group\n if (current.type === \"header\") {\n acc.push({\n label: current.title,\n items: [],\n });\n }\n // If it's an item and we have at least one group, add it to the last group's items\n else if (\n (current.type === \"item\" || current.type === \"divider\") &&\n acc.length > 0\n ) {\n acc[acc.length - 1].items.push(current);\n }\n // Skip dividers\n return acc;\n }, []);\n\n const renderMenuItem = useCallback(\n (item: DropdownMenuItemType, i: number, j: number) => {\n if (item.type === \"item\") {\n return (\n <DropdownMenuItem\n key={i + \"-\" + j}\n item={item}\n inCombobox={showSearch}\n selected={selectedItemKeys?.includes(item.key)}\n onSelect={\n showSearch\n ? () => {\n const e = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n }) as unknown as React.MouseEvent<HTMLElement, MouseEvent>;\n item.onClick(e);\n if (!keepOpenOnSelect) onOpenChange?.(false);\n }\n : undefined\n }\n itemRender={itemRender}\n showCheckbox={showCheckbox}\n getItemKeywords={getItemKeywords}\n />\n );\n } else if (item.type === \"divider\") {\n return (\n <DropdownMenuDivider\n key={i + \"-\" + j}\n inCombobox={showSearch}\n className={classNames?.separator}\n />\n );\n }\n return null;\n },\n [\n classNames,\n itemRender,\n onOpenChange,\n showSearch,\n keepOpenOnSelect,\n selectedItemKeys,\n showCheckbox,\n ]\n );\n\n const renderGroup = useCallback(\n (group: DropdownMenuGroup, index: number) => (\n <Menu.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n >\n {group.label && (\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n )}\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Menu.Group>\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderGroupShowSearch = useCallback(\n (group: DropdownMenuGroup, index: number) =>\n group.label ? (\n <Command.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n heading={\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n }\n >\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Command.Group>\n ) : (\n group.items.map((item, j) => renderMenuItem(item, index, j))\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderMenuInner = useCallback(\n () =>\n showSearch ? (\n <Command\n className={cls(\"dropdown-menu-container\")}\n disablePointerSelection={showSearch}\n defaultValue={\n highlightedItemKey ? String(highlightedItemKey) : undefined\n }\n >\n <FormItemInputContext.Provider value={{}}>\n <Command.Input\n {...searchProps}\n key=\"search\"\n render={\n <Input\n allowClear\n className={cls(\"dropdown-menu-search\")}\n placeholder=\"Search\"\n />\n }\n />\n </FormItemInputContext.Provider>\n {beforeList}\n <ScrollArea fadeEdges>\n <Command.List className={cls(\"dropdown-menu-list\")}>\n <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n No results found.\n </Command.Empty>\n {itemGroups.map(renderGroupShowSearch)}\n </Command.List>\n </ScrollArea>\n {afterList}\n </Command>\n ) : (\n <div className={cls(\"dropdown-menu-container\")}>\n {beforeList}\n <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n {afterList}\n </div>\n ),\n [\n showSearch,\n cls,\n highlightedItemKey,\n searchProps,\n beforeList,\n itemGroups,\n renderGroupShowSearch,\n afterList,\n renderGroup,\n ]\n );\n\n const BaseComponent = showSearch ? Popover : Menu;\n\n return (\n <BaseComponent.Root\n openOnHover={openOnHover}\n open={open}\n onOpenChange={onOpenChange}\n >\n <BaseComponent.Trigger\n render={children}\n ref={buttonRef}\n className={clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n antdCssVarClassname\n )}\n />\n <BaseComponent.Portal>\n <BaseComponent.Positioner\n side={baseUIPlacement.side}\n align={baseUIPlacement.align}\n sideOffset={4}\n className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n >\n <BaseComponent.Popup\n className={clsx(\n cls(\n \"dropdown-menu\",\n showCheckbox && \"dropdown-menu-show-checkbox\",\n popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\"\n ),\n className,\n classNames?.popup,\n antdCssVarClassname\n )}\n style={\n {\n \"--size-width\":\n size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties\n }\n >\n {renderMenuInner()}\n </BaseComponent.Popup>\n </BaseComponent.Positioner>\n </BaseComponent.Portal>\n </BaseComponent.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","size","showSearch","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","showCheckbox","getItemKeywords","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","renderMenuItem","item","i","j","jsx","DropdownMenuItem","e","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupShowSearch","Command","renderMenuInner","FormItemInputContext","createElement","Input","ScrollArea","BaseComponent","Popover","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/dropdown-menu/component.tsx"],"sourcesContent":["\"use client\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport {\n clsx,\n DROPDOWN_COLLISION_AVOIDANCE,\n parseAntdPlacement,\n useAntdCssVarClassname,\n useCls,\n} from \"../utils\";\nimport { Command } from \"../cmdk\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\n// Import component-specific styles\nimport { Input } from \"../input\";\nimport { PopupPanelSize } from \"../popup-panel/constants\";\n\nimport { DropdownMenuItemType } from \"./types\";\nimport { useDropdownMenu, UseDropdownMenuProps } from \"./useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\n\nimport \"./style.css\";\n\nexport interface DropdownMenuProps\n extends Omit<UseDropdownMenuProps, \"classNames\"> {\n /** Array of menu items to be displayed in the dropdown */\n items: DropdownMenuItemType[];\n /** Custom render function for the trigger element */\n children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n /**\n * Placement of the dropdown relative to the trigger element\n * @default \"bottomLeft\"\n */\n placement?: PopoverProps[\"placement\"];\n /**\n * Whether to open the dropdown on hover instead of click\n * @default false\n */\n openOnHover?: boolean;\n /**\n * Controlled open state of the dropdown\n */\n open?: boolean;\n /**\n * Callback fired when the dropdown open state changes\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * Default open state of the dropdown\n */\n defaultOpen?: boolean;\n /**\n * Additional CSS class for the dropdown component\n */\n className?: string;\n /**\n * Custom class names for different parts of the dropdown\n * @default {}\n */\n classNames?: {\n root?: string;\n trigger?: string;\n popup?: string;\n itemIcon?: string;\n itemText?: string;\n positioner?: string;\n } & UseDropdownMenuProps[\"classNames\"];\n\n /**\n * Whether to show search input\n * @default false\n */\n showSearch?: boolean;\n /**\n * Size of the dropdown menu\n * @default \"auto\"\n */\n size?: \"auto\" | keyof typeof PopupPanelSize;\n /**\n * Search placeholder\n */\n searchProps?: Omit<\n React.ComponentProps<typeof Command.Input>,\n \"size\" | \"ref\"\n >;\n /**\n * Whether to match the width of the popup with the trigger\n * @default false\n */\n popupMatchTriggerWidth?: boolean;\n /**\n * Content to display before the list\n */\n beforeList?: React.ReactNode;\n /**\n * Content to display after the list\n */\n afterList?: React.ReactNode;\n}\n\nexport const DropdownMenu = ({\n children,\n items,\n placement,\n openOnHover,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n defaultOpen,\n className,\n itemRender,\n classNames,\n size = \"auto\",\n showSearch,\n inCombobox: inComboboxProp,\n searchProps = {\n placeholder: \"Search...\",\n },\n popupMatchTriggerWidth,\n beforeList,\n afterList,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n getItemKeywords,\n showCheckbox,\n itemLabelRender,\n}: DropdownMenuProps) => {\n const inCombobox =\n typeof inComboboxProp === \"boolean\" ? inComboboxProp : showSearch;\n const [open, onOpenChange] = useControlledState(\n outsideOpen,\n outsideOnOpenChange,\n defaultOpen\n );\n const cls = useCls();\n const antdCssVarClassname = useAntdCssVarClassname();\n const baseUIPlacement = parseAntdPlacement(placement);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { itemGroups, renderGroup } = useDropdownMenu({\n items,\n keepOpenOnSelect,\n highlightedItemKey,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n itemLabelRender,\n itemRender,\n inCombobox,\n onOpenChange,\n classNames: {\n item: classNames?.item,\n itemIcon: classNames?.itemIcon,\n itemSuffix: classNames?.itemSuffix,\n group: classNames?.group,\n groupLabel: classNames?.groupLabel,\n divider: classNames?.divider,\n },\n });\n const renderMenuInner = useCallback(\n () =>\n showSearch ? (\n <Command\n className={cls(\"dropdown-menu-container\")}\n disablePointerSelection={showSearch}\n defaultValue={\n highlightedItemKey ? String(highlightedItemKey) : undefined\n }\n // filter={(value, search, keywords) => {\n // console.log({ value, search, keywords });\n // const extendValue = value + \" \" + keywords.join(\" \");\n // if (extendValue.toLowerCase().includes(search.toLowerCase()))\n // return 1;\n // return 0;\n // }}\n >\n <FormItemInputContext.Provider value={{}}>\n <Command.Input\n {...searchProps}\n key=\"search\"\n render={\n <Input\n allowClear\n className={cls(\"dropdown-menu-search\")}\n placeholder=\"Search\"\n />\n }\n />\n </FormItemInputContext.Provider>\n {beforeList}\n <ScrollArea fadeEdges>\n <Command.List className={cls(\"dropdown-menu-list\")}>\n <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n No results found.\n </Command.Empty>\n {itemGroups.map(renderGroup)}\n </Command.List>\n </ScrollArea>\n {afterList}\n </Command>\n ) : (\n <div className={cls(\"dropdown-menu-container\")}>\n {beforeList}\n <ScrollArea fadeEdges>{itemGroups.map(renderGroup)}</ScrollArea>\n {afterList}\n </div>\n ),\n [\n showSearch,\n cls,\n highlightedItemKey,\n searchProps,\n beforeList,\n itemGroups,\n afterList,\n renderGroup,\n ]\n );\n const BaseComponent = showSearch ? Popover : Menu;\n\n return (\n <BaseComponent.Root\n openOnHover={openOnHover}\n open={open}\n onOpenChange={onOpenChange}\n >\n <BaseComponent.Trigger\n render={children}\n ref={buttonRef}\n className={clsx(\n cls(\"dropdown-menu-trigger\"),\n classNames?.trigger,\n antdCssVarClassname\n )}\n />\n <BaseComponent.Portal>\n <BaseComponent.Positioner\n side={baseUIPlacement.side}\n align={baseUIPlacement.align}\n sideOffset={4}\n className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n collisionAvoidance={DROPDOWN_COLLISION_AVOIDANCE}\n >\n <BaseComponent.Popup\n className={clsx(\n cls(\n \"dropdown-menu\",\n showCheckbox && \"dropdown-menu-show-checkbox\",\n popupMatchTriggerWidth && \"dropdown-menu-match-trigger-width\"\n ),\n className,\n classNames?.popup,\n antdCssVarClassname\n )}\n style={\n {\n \"--size-width\":\n size in PopupPanelSize ? PopupPanelSize[size] : undefined,\n } as React.CSSProperties\n }\n >\n {renderMenuInner()}\n </BaseComponent.Popup>\n </BaseComponent.Positioner>\n </BaseComponent.Portal>\n </BaseComponent.Root>\n );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","defaultOpen","className","itemRender","classNames","size","showSearch","inComboboxProp","searchProps","popupMatchTriggerWidth","beforeList","afterList","keepOpenOnSelect","highlightedItemKey","selectedItemKeys","getItemKeywords","showCheckbox","itemLabelRender","inCombobox","open","onOpenChange","useControlledState","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","baseUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","renderGroup","useDropdownMenu","renderMenuInner","useCallback","jsxs","Command","jsx","FormItemInputContext","createElement","Input","ScrollArea","BaseComponent","Popover","Menu","clsx","DROPDOWN_COLLISION_AVOIDANCE","PopupPanelSize"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:flex;align-items:center;transition:all .3s var(--ds-motion-ease-out)}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover,.ds-dropdown-menu-item[data-active=true],.ds-dropdown-menu-item[data-selected=true],.ds-dropdown-menu-item[data-highlighted=true]{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true]{background:var(--ds-control-item-bg-active)
|
|
1
|
+
@layer components{.ds-dropdown-menu-search{margin-bottom:.25rem}.ds-dropdown-menu-divider{border-bottom:1px solid var(--ds-color-split);margin:.25rem 0}.ds-dropdown-menu-header{font-size:.75rem;font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--ds-color-text-tertiary);padding:.75rem .75rem .25rem}.ds-dropdown-menu-header:first-child{padding-top:.5rem}.ds-dropdown-menu-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-dropdown-menu-match-trigger-width{width:min(var(--anchor-width),var(--available-width))}.ds-dropdown-menu-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);cursor:pointer;display:flex;align-items:center;transition:all .3s var(--ds-motion-ease-out);color:var(--ds-color-text)}.ds-dropdown-menu-item:focus{outline:none}.ds-dropdown-menu-item:hover,.ds-dropdown-menu-item[data-active=true],.ds-dropdown-menu-item[data-selected=true],.ds-dropdown-menu-item[data-highlighted=true]{background:var(--ds-control-item-bg-hover)}.ds-dropdown-menu-item:active,.ds-dropdown-menu-item:focus,.ds-dropdown-menu-item[data-focus=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu:not(.ds-dropdown-menu-show-checkbox) .ds-dropdown-menu-item[data-actual-selected=true]{background:var(--ds-control-item-bg-active)}.ds-dropdown-menu-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-dropdown-menu-item .ds-checkbox-wrapper{margin-right:.5rem}.ds-dropdown-menu-item .ds-dropdown-menu-item-icon{display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:1rem;color:var(--ds-color-icon)}.ds-dropdown-menu-item .ds-dropdown-menu-item-text{flex-grow:1}.ds-dropdown-menu-item .ds-dropdown-menu-item-suffix{margin-left:.75rem;font-size:.75rem;line-height:1.25rem;color:var(--color-ds-color-text-tertiary);display:flex;flex-grow:0;flex-shrink:0;align-items:flex-end}.ds-dropdown-menu-item[data-danger=true]{color:var(--ds-color-error)}.ds-dropdown-menu-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-dropdown-menu-item[data-danger=true]:active,.ds-dropdown-menu-item[data-danger=true]:focus,.ds-dropdown-menu-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-dropdown-menu-item[data-danger=true] .ds-dropdown-menu-item-icon{color:var(--ds-color-error)}}
|
|
@@ -1,38 +1,40 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as w, Fragment as y, jsx as r } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo as h } from "react";
|
|
4
|
-
import { Command as
|
|
5
|
-
import { Menu as
|
|
4
|
+
import { Command as q } from "../cmdk/index.js";
|
|
5
|
+
import { Menu as z } from "@base-ui-components/react/menu";
|
|
6
6
|
import './item.css';/* empty css */
|
|
7
|
-
import { Checkbox as
|
|
8
|
-
import { reactNodeToString as
|
|
9
|
-
import { useCls as
|
|
10
|
-
import { clsx as
|
|
11
|
-
|
|
7
|
+
import { Checkbox as O } from "antd";
|
|
8
|
+
import { reactNodeToString as T } from "../utils/reactToString.js";
|
|
9
|
+
import { useCls as A } from "../utils/antdUtils.js";
|
|
10
|
+
import { clsx as M } from "../utils/cn.js";
|
|
11
|
+
import { WithRenderProp as j } from "../utils/WithRenderProp.js";
|
|
12
|
+
const Z = ({
|
|
12
13
|
item: o,
|
|
13
|
-
inCombobox:
|
|
14
|
-
selected:
|
|
15
|
-
itemRender:
|
|
16
|
-
|
|
14
|
+
inCombobox: p = !1,
|
|
15
|
+
selected: v = !1,
|
|
16
|
+
itemRender: u,
|
|
17
|
+
itemLabelRender: f,
|
|
18
|
+
itemProps: E = {},
|
|
17
19
|
classNames: n,
|
|
18
|
-
onSelect:
|
|
19
|
-
showCheckbox:
|
|
20
|
-
indeterminate:
|
|
21
|
-
renderAsNativeElement:
|
|
22
|
-
getItemKeywords:
|
|
20
|
+
onSelect: S,
|
|
21
|
+
showCheckbox: t,
|
|
22
|
+
indeterminate: g,
|
|
23
|
+
renderAsNativeElement: P,
|
|
24
|
+
getItemKeywords: i
|
|
23
25
|
}) => {
|
|
24
|
-
const d =
|
|
25
|
-
() =>
|
|
26
|
-
[
|
|
27
|
-
),
|
|
28
|
-
className:
|
|
29
|
-
d("dropdown-menu-item",
|
|
26
|
+
const d = A(), D = h(
|
|
27
|
+
() => p ? q.Item : z.Item,
|
|
28
|
+
[p]
|
|
29
|
+
), x = h(() => ({
|
|
30
|
+
className: M(
|
|
31
|
+
d("dropdown-menu-item", p && "dropdown-menu-item-combobox"),
|
|
30
32
|
n == null ? void 0 : n.item,
|
|
31
33
|
o.className
|
|
32
34
|
),
|
|
33
35
|
disabled: o.disabled,
|
|
34
36
|
"data-danger": o.danger,
|
|
35
|
-
"data-actual-selected":
|
|
37
|
+
"data-actual-selected": v,
|
|
36
38
|
ref: o.ref,
|
|
37
39
|
onClick: o.onClick,
|
|
38
40
|
onMouseEnter: o.onMouseEnter,
|
|
@@ -40,20 +42,20 @@ const J = ({
|
|
|
40
42
|
onMouseOver: o.onMouseOver,
|
|
41
43
|
onMouseOut: o.onMouseOut,
|
|
42
44
|
"data-value": typeof o.label == "string" ? o.label : String(o.key),
|
|
43
|
-
render:
|
|
44
|
-
children:
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
render: u ? (k) => u(o, k) : void 0,
|
|
46
|
+
children: p ? /* @__PURE__ */ w(y, { children: [
|
|
47
|
+
t && /* @__PURE__ */ r(
|
|
48
|
+
O,
|
|
47
49
|
{
|
|
48
|
-
checked:
|
|
50
|
+
checked: v,
|
|
49
51
|
tabIndex: -1,
|
|
50
|
-
indeterminate:
|
|
52
|
+
indeterminate: g
|
|
51
53
|
}
|
|
52
54
|
),
|
|
53
55
|
o.icon && /* @__PURE__ */ r(
|
|
54
56
|
"span",
|
|
55
57
|
{
|
|
56
|
-
className:
|
|
58
|
+
className: M(
|
|
57
59
|
d("dropdown-menu-item-icon"),
|
|
58
60
|
n == null ? void 0 : n.itemIcon
|
|
59
61
|
),
|
|
@@ -61,28 +63,30 @@ const J = ({
|
|
|
61
63
|
}
|
|
62
64
|
),
|
|
63
65
|
/* @__PURE__ */ r(
|
|
64
|
-
|
|
66
|
+
j,
|
|
65
67
|
{
|
|
66
|
-
|
|
68
|
+
render: f ? (k) => f(o, k) : void 0,
|
|
69
|
+
as: "span",
|
|
70
|
+
className: M(
|
|
67
71
|
d("dropdown-menu-item-text"),
|
|
68
72
|
n == null ? void 0 : n.itemText
|
|
69
73
|
),
|
|
70
74
|
children: o.label
|
|
71
75
|
}
|
|
72
76
|
)
|
|
73
|
-
] }) : /* @__PURE__ */
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
] }) : /* @__PURE__ */ w(y, { children: [
|
|
78
|
+
t && /* @__PURE__ */ r(
|
|
79
|
+
O,
|
|
76
80
|
{
|
|
77
|
-
checked:
|
|
81
|
+
checked: v,
|
|
78
82
|
tabIndex: -1,
|
|
79
|
-
indeterminate:
|
|
83
|
+
indeterminate: g
|
|
80
84
|
}
|
|
81
85
|
),
|
|
82
86
|
o.icon && /* @__PURE__ */ r(
|
|
83
87
|
"span",
|
|
84
88
|
{
|
|
85
|
-
className:
|
|
89
|
+
className: M(
|
|
86
90
|
d("dropdown-menu-item-icon"),
|
|
87
91
|
n == null ? void 0 : n.itemIcon
|
|
88
92
|
),
|
|
@@ -90,13 +94,21 @@ const J = ({
|
|
|
90
94
|
}
|
|
91
95
|
),
|
|
92
96
|
/* @__PURE__ */ r(
|
|
97
|
+
j,
|
|
98
|
+
{
|
|
99
|
+
render: f ? (k) => f(o, k) : void 0,
|
|
100
|
+
as: "span",
|
|
101
|
+
children: o.label
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
o.suffix && /* @__PURE__ */ r(
|
|
93
105
|
"span",
|
|
94
106
|
{
|
|
95
|
-
className:
|
|
96
|
-
d("dropdown-menu-item-
|
|
97
|
-
n == null ? void 0 : n.
|
|
107
|
+
className: M(
|
|
108
|
+
d("dropdown-menu-item-suffix"),
|
|
109
|
+
n == null ? void 0 : n.itemSuffix
|
|
98
110
|
),
|
|
99
|
-
children: o.
|
|
111
|
+
children: o.suffix
|
|
100
112
|
}
|
|
101
113
|
)
|
|
102
114
|
] })
|
|
@@ -104,31 +116,41 @@ const J = ({
|
|
|
104
116
|
n == null ? void 0 : n.item,
|
|
105
117
|
n == null ? void 0 : n.itemIcon,
|
|
106
118
|
n == null ? void 0 : n.itemText,
|
|
119
|
+
n == null ? void 0 : n.itemSuffix,
|
|
107
120
|
d,
|
|
108
|
-
u,
|
|
109
|
-
e,
|
|
110
|
-
o,
|
|
111
121
|
p,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
122
|
+
g,
|
|
123
|
+
o,
|
|
124
|
+
u,
|
|
125
|
+
v,
|
|
126
|
+
t,
|
|
127
|
+
f
|
|
128
|
+
]), F = h(
|
|
129
|
+
() => i ? i(o) : [String(o.key), T(o.label)],
|
|
130
|
+
[i, o]
|
|
131
|
+
);
|
|
132
|
+
if (u)
|
|
133
|
+
return console.log(u), u(o, {
|
|
134
|
+
...x,
|
|
135
|
+
...E
|
|
119
136
|
});
|
|
120
|
-
const { render:
|
|
121
|
-
return
|
|
122
|
-
|
|
137
|
+
const { render: I, ...W } = x;
|
|
138
|
+
return console.log(
|
|
139
|
+
"keywords",
|
|
140
|
+
i ? i(o) : [String(o.key), T(o.label)]
|
|
141
|
+
), P ? I ? I(x) : /* @__PURE__ */ r("div", { onClick: S, ...W }) : /* @__PURE__ */ r(
|
|
142
|
+
D,
|
|
123
143
|
{
|
|
124
144
|
value: String(o.key),
|
|
125
|
-
keywords:
|
|
126
|
-
onSelect:
|
|
127
|
-
|
|
145
|
+
keywords: F || void 0,
|
|
146
|
+
onSelect: () => {
|
|
147
|
+
S(o);
|
|
148
|
+
},
|
|
149
|
+
...x
|
|
128
150
|
}
|
|
129
151
|
);
|
|
130
152
|
};
|
|
131
153
|
export {
|
|
132
|
-
|
|
154
|
+
Z as DropdownMenuItem
|
|
133
155
|
};
|
|
134
156
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/dropdown-menu/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { Ref, useMemo } from \"react\";\nimport { clsx, reactNodeToString, useCls, WithRenderProp } from \"../utils\";\nimport type { DropdownMenuItemType } from \"./types\";\nimport { Command } from \"../cmdk\";\nimport { Menu } from \"@base-ui-components/react/menu\";\n\nimport \"./item.css\";\nimport { Checkbox } from \"antd\";\n\nexport interface DropdownMenuItemProps {\n /** The menu item data */\n item: DropdownMenuItemType & { type: \"item\" };\n /** Custom render function for the item */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n itemLabelRender?: (\n item: DropdownMenuItemType & { type: \"item\" },\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /** Additional props to pass to the item */\n itemProps?: React.HTMLAttributes<HTMLElement>;\n /** Class names from parent DropdownMenu */\n classNames?: {\n item?: string;\n itemIcon?: string;\n itemText?: string;\n itemSuffix?: string;\n };\n onSelect?: (item: DropdownMenuItemType & { type: \"item\" }) => void;\n /**\n * Whether the menu item is in a combobox\n */\n inCombobox?: boolean;\n /**\n * Whether the menu item is in a menu\n */\n renderAsNativeElement?: boolean;\n /**\n * Whether the menu item is selected (for combobox)\n * @default false\n */\n selected?: boolean;\n /**\n * Whether to show checkbox (only for decoration purpose)\n */\n showCheckbox?: boolean;\n /**\n * Whether the menu item checkbox is indeterminate (for combobox)\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({\n item,\n inCombobox = false,\n selected = false,\n itemRender,\n itemLabelRender,\n itemProps = {},\n classNames,\n onSelect,\n showCheckbox,\n indeterminate,\n renderAsNativeElement,\n getItemKeywords,\n}) => {\n const cls = useCls();\n\n const MenuItem = useMemo(\n () => (inCombobox ? Command.Item : Menu.Item),\n [inCombobox]\n );\n\n const props = useMemo(() => {\n return {\n className: clsx(\n cls(\"dropdown-menu-item\", inCombobox && \"dropdown-menu-item-combobox\"),\n classNames?.item,\n item.className\n ),\n disabled: item.disabled,\n \"data-danger\": item.danger,\n \"data-actual-selected\": selected,\n ref: item.ref as Ref<HTMLDivElement>,\n onClick: item.onClick,\n onMouseEnter: item.onMouseEnter,\n onMouseLeave: item.onMouseLeave,\n onMouseOver: item.onMouseOver,\n onMouseOut: item.onMouseOut,\n \"data-value\":\n typeof item.label === \"string\" ? item.label : String(item.key),\n render: itemRender\n ? (itemProps: React.HTMLAttributes<HTMLElement>) =>\n itemRender(item, itemProps)\n : undefined,\n children: inCombobox ? (\n <>\n {showCheckbox && (\n <Checkbox\n checked={selected}\n tabIndex={-1}\n indeterminate={indeterminate}\n />\n )}\n {item.icon && (\n <span\n className={clsx(\n cls(\"dropdown-menu-item-icon\"),\n classNames?.itemIcon\n )}\n >\n {item.icon}\n </span>\n )}\n <WithRenderProp\n render={\n itemLabelRender\n ? (props) => itemLabelRender(item, props)\n : undefined\n }\n as={\"span\"}\n className={clsx(\n cls(\"dropdown-menu-item-text\"),\n classNames?.itemText\n )}\n >\n {item.label}\n </WithRenderProp>\n </>\n ) : (\n <>\n {showCheckbox && (\n <Checkbox\n checked={selected}\n tabIndex={-1}\n indeterminate={indeterminate}\n />\n )}\n {item.icon && (\n <span\n className={clsx(\n cls(\"dropdown-menu-item-icon\"),\n classNames?.itemIcon\n )}\n >\n {item.icon}\n </span>\n )}\n <WithRenderProp\n render={\n itemLabelRender\n ? (props) => itemLabelRender(item, props)\n : undefined\n }\n as={\"span\"}\n >\n {item.label}\n </WithRenderProp>\n {item.suffix && (\n <span\n className={clsx(\n cls(\"dropdown-menu-item-suffix\"),\n classNames?.itemSuffix\n )}\n >\n {item.suffix}\n </span>\n )}\n </>\n ),\n };\n }, [\n classNames?.item,\n classNames?.itemIcon,\n classNames?.itemText,\n classNames?.itemSuffix,\n cls,\n inCombobox,\n indeterminate,\n item,\n itemRender,\n selected,\n showCheckbox,\n itemLabelRender,\n ]);\n const keywords = useMemo(\n () =>\n getItemKeywords\n ? getItemKeywords(item)\n : [String(item.key), reactNodeToString(item.label)],\n [getItemKeywords, item]\n );\n // If custom render function is provided, use it\n if (itemRender) {\n console.log(itemRender);\n return itemRender(item, {\n ...props,\n ...itemProps,\n });\n }\n const { render, ...restProps } = props;\n console.log(\n \"keywords\",\n getItemKeywords\n ? getItemKeywords(item)\n : [String(item.key), reactNodeToString(item.label)]\n );\n // Default rendering\n return renderAsNativeElement ? (\n render ? (\n render(props)\n ) : (\n <div onClick={onSelect} {...restProps} />\n )\n ) : (\n <MenuItem\n value={String(item.key)}\n keywords={keywords || undefined}\n onSelect={() => {\n onSelect(item);\n }}\n {...props}\n ></MenuItem>\n );\n};\n"],"names":["DropdownMenuItem","item","inCombobox","selected","itemRender","itemLabelRender","itemProps","classNames","onSelect","showCheckbox","indeterminate","renderAsNativeElement","getItemKeywords","cls","useCls","MenuItem","useMemo","Command","Menu","props","clsx","jsxs","Fragment","jsx","Checkbox","WithRenderProp","keywords","reactNodeToString","render","restProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-dropdown-menu-root{z-index:
|
|
1
|
+
@layer components{.ds-dropdown-menu-root{z-index:var(--ds-z-index-dropdown)}.ds-dropdown-menu{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;padding:.25rem;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);max-width:min(var(--size-width),var(--available-width));max-height:var(--available-height);display:flex;flex-direction:column}.ds-dropdown-menu[data-ending-style],.ds-dropdown-menu[data-starting-style]{transform:scale(.9);opacity:0}.ds-dropdown-menu:focus{outline:none}.ds-dropdown-menu .ds-dropdown-menu-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-dropdown-menu .ds-dropdown-menu-search{flex-shrink:0}.ds-dropdown-menu .ds-dropdown-menu-list,.ds-dropdown-menu .ds-dropdown-menu-list [cmdk-list-sizer]{flex-shrink:1;min-height:0;display:flex;flex-direction:column}}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { jsx as d, jsxs as L } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback as G, useMemo as y } from "react";
|
|
3
|
+
import { DropdownMenuItem as j } from "./item.js";
|
|
4
|
+
import { DropdownMenuDivider as E } from "./divider.js";
|
|
5
|
+
import { Menu as b } from "@base-ui-components/react";
|
|
6
|
+
import { Command as T } from "../cmdk/index.js";
|
|
7
|
+
import { useCls as q } from "../utils/antdUtils.js";
|
|
8
|
+
import { reactNodeToString as z } from "../utils/reactToString.js";
|
|
9
|
+
import { clsx as h } from "../utils/cn.js";
|
|
10
|
+
const X = ({
|
|
11
|
+
items: M,
|
|
12
|
+
inCombobox: e = !1,
|
|
13
|
+
classNames: o = {},
|
|
14
|
+
selectedItemKeys: f,
|
|
15
|
+
keepOpenOnSelect: v,
|
|
16
|
+
showCheckbox: w = !1,
|
|
17
|
+
getItemKeywords: S = (i) => [String(i.key), z(i.label)],
|
|
18
|
+
onOpenChange: l,
|
|
19
|
+
itemRender: g,
|
|
20
|
+
itemLabelRender: k
|
|
21
|
+
}) => {
|
|
22
|
+
const i = q(), n = G(
|
|
23
|
+
(r, u, p) => r.type === "item" ? /* @__PURE__ */ d(
|
|
24
|
+
j,
|
|
25
|
+
{
|
|
26
|
+
item: r,
|
|
27
|
+
inCombobox: e,
|
|
28
|
+
selected: f == null ? void 0 : f.includes(r.key),
|
|
29
|
+
onSelect: e ? r.onSelect ? r.onSelect : () => {
|
|
30
|
+
const t = new MouseEvent("click", {
|
|
31
|
+
bubbles: !0,
|
|
32
|
+
cancelable: !0
|
|
33
|
+
});
|
|
34
|
+
r.onClick(t), v || l == null || l(!1);
|
|
35
|
+
} : void 0,
|
|
36
|
+
itemRender: g,
|
|
37
|
+
showCheckbox: w,
|
|
38
|
+
getItemKeywords: S,
|
|
39
|
+
itemLabelRender: k,
|
|
40
|
+
classNames: {
|
|
41
|
+
item: o.item,
|
|
42
|
+
itemIcon: o.itemIcon,
|
|
43
|
+
itemSuffix: o.itemSuffix
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
u + "-" + p
|
|
47
|
+
) : r.type === "divider" ? /* @__PURE__ */ d(
|
|
48
|
+
E,
|
|
49
|
+
{
|
|
50
|
+
inCombobox: e,
|
|
51
|
+
className: o == null ? void 0 : o.divider
|
|
52
|
+
},
|
|
53
|
+
u + "-" + p
|
|
54
|
+
) : null,
|
|
55
|
+
[
|
|
56
|
+
o,
|
|
57
|
+
g,
|
|
58
|
+
l,
|
|
59
|
+
e,
|
|
60
|
+
v,
|
|
61
|
+
f,
|
|
62
|
+
w,
|
|
63
|
+
S,
|
|
64
|
+
k
|
|
65
|
+
]
|
|
66
|
+
), D = G(
|
|
67
|
+
(r, u) => /* @__PURE__ */ L(
|
|
68
|
+
b.Group,
|
|
69
|
+
{
|
|
70
|
+
className: h(i("dropdown-menu-group"), o == null ? void 0 : o.group),
|
|
71
|
+
children: [
|
|
72
|
+
r.label && /* @__PURE__ */ d(
|
|
73
|
+
b.GroupLabel,
|
|
74
|
+
{
|
|
75
|
+
className: h(
|
|
76
|
+
i("dropdown-menu-header"),
|
|
77
|
+
o == null ? void 0 : o.groupLabel
|
|
78
|
+
),
|
|
79
|
+
children: /* @__PURE__ */ d("span", { children: r.label })
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
r.items.map((p, t) => n(p, u, t))
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
"group" + u
|
|
86
|
+
),
|
|
87
|
+
[i, o, n]
|
|
88
|
+
), m = G(
|
|
89
|
+
(r, u) => r.label ? /* @__PURE__ */ d(
|
|
90
|
+
T.Group,
|
|
91
|
+
{
|
|
92
|
+
className: h(i("dropdown-menu-group"), o == null ? void 0 : o.group),
|
|
93
|
+
heading: /* @__PURE__ */ d(
|
|
94
|
+
b.GroupLabel,
|
|
95
|
+
{
|
|
96
|
+
className: h(
|
|
97
|
+
i("dropdown-menu-header"),
|
|
98
|
+
o == null ? void 0 : o.groupLabel
|
|
99
|
+
),
|
|
100
|
+
children: /* @__PURE__ */ d("span", { children: r.label })
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
children: r.items.map((p, t) => n(p, u, t))
|
|
104
|
+
},
|
|
105
|
+
"group" + u
|
|
106
|
+
) : r.items.map((p, t) => n(p, u, t)),
|
|
107
|
+
[i, o, n]
|
|
108
|
+
);
|
|
109
|
+
return {
|
|
110
|
+
itemGroups: y(
|
|
111
|
+
() => M.reduce((r, u) => (r.length === 0 && u.type !== "header" && r.push({
|
|
112
|
+
label: null,
|
|
113
|
+
items: []
|
|
114
|
+
}), u.type === "header" ? r.push({
|
|
115
|
+
label: u.title,
|
|
116
|
+
items: []
|
|
117
|
+
}) : (u.type === "item" || u.type === "divider") && r.length > 0 && r[r.length - 1].items.push(u), r), []),
|
|
118
|
+
[M]
|
|
119
|
+
),
|
|
120
|
+
renderMenuItem: n,
|
|
121
|
+
renderGroup: e ? m : D
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
export {
|
|
125
|
+
X as useDropdownMenu
|
|
126
|
+
};
|
|
127
|
+
//# sourceMappingURL=useDropdownMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDropdownMenu.js","sources":["../../../src/components/dropdown-menu/useDropdownMenu.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport { DropdownMenuItemType, DropdownMenuGroup } from \"./types\";\nimport { DropdownMenuItem } from \"./item\";\nimport { DropdownMenuDivider } from \"./divider\";\nimport { reactNodeToString, clsx, useCls } from \"../utils\";\nimport { Menu } from \"@base-ui-components/react\";\nimport { Command } from \"../cmdk\";\n\nexport interface UseDropdownMenuProps {\n /**\n * Callback function to handle the open state change of the dropdown menu.\n */\n onOpenChange?: (open: boolean) => void;\n items: DropdownMenuItemType[];\n inCombobox?: boolean;\n classNames?: {\n item?: string;\n itemIcon?: string;\n itemSuffix?: string;\n group?: string;\n groupLabel?: string;\n divider?: string;\n };\n /**\n * Custom render function for menu items\n */\n itemRender?: (\n item: DropdownMenuItemType,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Custom render function for menu item labels\n */\n itemLabelRender?: (\n item: DropdownMenuItemType & { type: \"item\" },\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /**\n * Whether to keep the dropdown open when an item is selected\n * @default false\n */\n keepOpenOnSelect?: boolean;\n /**\n * Control the highlighted state of the menu item\n */\n highlightedItemKey?: React.Key;\n /**\n * Control the selected state of the menu item\n */\n selectedItemKeys?: React.Key[];\n /**\n * Whether to show checkbox\n * @default false\n */\n showCheckbox?: boolean;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [String(item.key), reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: DropdownMenuItemType & { type: \"item\" }) => string[];\n}\n\nexport const useDropdownMenu = ({\n items,\n inCombobox = false,\n classNames = {},\n selectedItemKeys,\n keepOpenOnSelect,\n showCheckbox = false,\n getItemKeywords = (item) => [String(item.key), reactNodeToString(item.label)],\n onOpenChange,\n itemRender,\n itemLabelRender,\n}: UseDropdownMenuProps) => {\n const cls = useCls();\n const renderMenuItem = useCallback(\n (item: DropdownMenuItemType, i: number, j: number) => {\n if (item.type === \"item\") {\n return (\n <DropdownMenuItem\n key={i + \"-\" + j}\n item={item}\n inCombobox={inCombobox}\n selected={selectedItemKeys?.includes(item.key)}\n onSelect={\n inCombobox\n ? item.onSelect\n ? item.onSelect\n : () => {\n const e = new MouseEvent(\"click\", {\n bubbles: true,\n cancelable: true,\n }) as unknown as React.MouseEvent<\n HTMLElement,\n MouseEvent\n >;\n item.onClick(e);\n if (!keepOpenOnSelect) onOpenChange?.(false);\n }\n : undefined\n }\n itemRender={itemRender}\n showCheckbox={showCheckbox}\n getItemKeywords={getItemKeywords}\n itemLabelRender={itemLabelRender}\n classNames={{\n item: classNames.item,\n itemIcon: classNames.itemIcon,\n itemSuffix: classNames.itemSuffix,\n }}\n />\n );\n } else if (item.type === \"divider\") {\n return (\n <DropdownMenuDivider\n key={i + \"-\" + j}\n inCombobox={inCombobox}\n className={classNames?.divider}\n />\n );\n }\n return null;\n },\n [\n classNames,\n itemRender,\n onOpenChange,\n inCombobox,\n keepOpenOnSelect,\n selectedItemKeys,\n showCheckbox,\n getItemKeywords,\n itemLabelRender,\n ]\n );\n\n const renderGroup = useCallback(\n (group: DropdownMenuGroup, index: number) => (\n <Menu.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n >\n {group.label && (\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n )}\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Menu.Group>\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const renderGroupCombobox = useCallback(\n (group: DropdownMenuGroup, index: number) =>\n group.label ? (\n <Command.Group\n key={\"group\" + index}\n className={clsx(cls(\"dropdown-menu-group\"), classNames?.group)}\n heading={\n <Menu.GroupLabel\n className={clsx(\n cls(\"dropdown-menu-header\"),\n classNames?.groupLabel\n )}\n >\n <span>{group.label}</span>\n </Menu.GroupLabel>\n }\n >\n {group.items.map((item, j) => renderMenuItem(item, index, j))}\n </Command.Group>\n ) : (\n group.items.map((item, j) => renderMenuItem(item, index, j))\n ),\n [cls, classNames, renderMenuItem]\n );\n\n const itemGroups = useMemo(\n () =>\n items.reduce<DropdownMenuGroup[]>((acc, current) => {\n // If no groups exist yet and current item is not a header, create default group\n if (acc.length === 0 && current.type !== \"header\") {\n acc.push({\n label: null,\n items: [],\n });\n }\n\n // If it's a header, create a new group\n if (current.type === \"header\") {\n acc.push({\n label: current.title,\n items: [],\n });\n }\n // If it's an item and we have at least one group, add it to the last group's items\n else if (\n (current.type === \"item\" || current.type === \"divider\") &&\n acc.length > 0\n ) {\n acc[acc.length - 1].items.push(current);\n }\n // Skip dividers\n return acc;\n }, []),\n [items]\n );\n return {\n itemGroups,\n renderMenuItem,\n renderGroup: inCombobox ? renderGroupCombobox : renderGroup,\n };\n};\n"],"names":["useDropdownMenu","items","inCombobox","classNames","selectedItemKeys","keepOpenOnSelect","showCheckbox","getItemKeywords","item","reactNodeToString","onOpenChange","itemRender","itemLabelRender","cls","useCls","renderMenuItem","useCallback","i","j","jsx","DropdownMenuItem","e","DropdownMenuDivider","renderGroup","group","index","jsxs","Menu","clsx","renderGroupCombobox","Command","useMemo","acc","current"],"mappings":"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"}
|
|
@@ -2,32 +2,32 @@
|
|
|
2
2
|
import { jsx as r } from "react/jsx-runtime";
|
|
3
3
|
import { MagnifyingGlassIcon as p, EyeIcon as x, EyeClosedIcon as C } from "@bioturing/assets";
|
|
4
4
|
import { Input as n } from "antd";
|
|
5
|
-
import { forwardRef as
|
|
5
|
+
import { forwardRef as i, useCallback as d, useMemo as P } from "react";
|
|
6
6
|
import './style.css';/* empty css */
|
|
7
7
|
import { useCls as g } from "../utils/antdUtils.js";
|
|
8
8
|
import { Spin as z } from "../spin/component.js";
|
|
9
9
|
import { IconButton as M } from "../icon-button/component.js";
|
|
10
|
-
const T = (
|
|
10
|
+
const T = (t, s) => /* @__PURE__ */ r(n, { ref: s, ...t }), y = (t, s) => {
|
|
11
11
|
const o = P(() => ({
|
|
12
|
-
iconRender: (
|
|
12
|
+
iconRender: (e) => /* @__PURE__ */ r(
|
|
13
13
|
M,
|
|
14
14
|
{
|
|
15
15
|
size: "small",
|
|
16
|
-
label:
|
|
17
|
-
children:
|
|
16
|
+
label: e ? "Hide password" : "Show password",
|
|
17
|
+
children: e ? /* @__PURE__ */ r(x, {}) : /* @__PURE__ */ r(C, {})
|
|
18
18
|
}
|
|
19
19
|
),
|
|
20
|
-
...
|
|
21
|
-
}), [
|
|
20
|
+
...t
|
|
21
|
+
}), [t]);
|
|
22
22
|
return /* @__PURE__ */ r(n.Password, { ref: s, ...o });
|
|
23
23
|
}, A = ({
|
|
24
|
-
enterButton:
|
|
24
|
+
enterButton: t = !1,
|
|
25
25
|
onSearch: s,
|
|
26
26
|
prefix: o,
|
|
27
|
-
onPressEnter:
|
|
28
|
-
onClear:
|
|
29
|
-
loading:
|
|
30
|
-
...
|
|
27
|
+
onPressEnter: e,
|
|
28
|
+
onClear: a,
|
|
29
|
+
loading: u,
|
|
30
|
+
...c
|
|
31
31
|
}, l) => {
|
|
32
32
|
const I = g(), f = d(
|
|
33
33
|
(m) => {
|
|
@@ -37,29 +37,30 @@ const T = (e, s) => /* @__PURE__ */ r(n, { ref: s, ...e }), y = (e, s) => {
|
|
|
37
37
|
), w = d(() => {
|
|
38
38
|
s == null || s("", void 0, { source: "clear" });
|
|
39
39
|
}, [s]);
|
|
40
|
-
return
|
|
40
|
+
return t === !1 ? /* @__PURE__ */ r(
|
|
41
41
|
n,
|
|
42
42
|
{
|
|
43
43
|
ref: l,
|
|
44
|
-
prefix: o || (
|
|
45
|
-
onPressEnter:
|
|
46
|
-
onClear:
|
|
44
|
+
prefix: o || (u ? /* @__PURE__ */ r(z, { size: 16 }) : /* @__PURE__ */ r(p, { size: 16, className: I("input-search-icon") })),
|
|
45
|
+
onPressEnter: e || f,
|
|
46
|
+
onClear: a || w,
|
|
47
47
|
allowClear: !0,
|
|
48
|
-
...
|
|
48
|
+
...c
|
|
49
49
|
}
|
|
50
50
|
) : /* @__PURE__ */ r(
|
|
51
51
|
n.Search,
|
|
52
52
|
{
|
|
53
53
|
ref: l,
|
|
54
54
|
prefix: o,
|
|
55
|
-
onPressEnter:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
onPressEnter: e,
|
|
56
|
+
onSearch: s,
|
|
57
|
+
onClear: a,
|
|
58
|
+
loading: u,
|
|
59
|
+
enterButton: t === !0 ? /* @__PURE__ */ r(p, { size: 16 }) : t,
|
|
60
|
+
...c
|
|
60
61
|
}
|
|
61
62
|
);
|
|
62
|
-
}, E = (
|
|
63
|
+
}, E = (t, s) => /* @__PURE__ */ r(n.TextArea, { ref: s, ...t }), b = i(T), j = i(y), R = i(A), k = i(E), D = Object.assign(b, {
|
|
63
64
|
Password: j,
|
|
64
65
|
Search: R,
|
|
65
66
|
TextArea: k
|