@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.
Files changed (36) hide show
  1. package/dist/components/choice-list/component.js +26 -28
  2. package/dist/components/choice-list/component.js.map +1 -1
  3. package/dist/components/code-block/component.js +10 -10
  4. package/dist/components/combobox/component.js +148 -143
  5. package/dist/components/combobox/component.js.map +1 -1
  6. package/dist/components/command-palette/component.js +79 -0
  7. package/dist/components/command-palette/component.js.map +1 -0
  8. package/dist/components/command-palette/style.css +1 -0
  9. package/dist/components/dropdown-menu/component.js +119 -189
  10. package/dist/components/dropdown-menu/component.js.map +1 -1
  11. package/dist/components/dropdown-menu/item.css +1 -1
  12. package/dist/components/dropdown-menu/item.js +82 -60
  13. package/dist/components/dropdown-menu/item.js.map +1 -1
  14. package/dist/components/dropdown-menu/style.css +1 -1
  15. package/dist/components/dropdown-menu/useDropdownMenu.js +127 -0
  16. package/dist/components/dropdown-menu/useDropdownMenu.js.map +1 -0
  17. package/dist/components/input/component.js +24 -23
  18. package/dist/components/input/component.js.map +1 -1
  19. package/dist/components/keyboard-shortcut/component.js +72 -0
  20. package/dist/components/keyboard-shortcut/component.js.map +1 -0
  21. package/dist/components/keyboard-shortcut/style.css +1 -0
  22. package/dist/components/loader/component.js +15 -0
  23. package/dist/components/loader/component.js.map +1 -0
  24. package/dist/components/loader/style.css +1 -0
  25. package/dist/components/popup-panel/style.css +1 -1
  26. package/dist/components/scroll-area/component.js +83 -64
  27. package/dist/components/scroll-area/component.js.map +1 -1
  28. package/dist/components/select/component.js.map +1 -1
  29. package/dist/components/theme-provider/style.css +1 -1
  30. package/dist/components/toast/style.css +1 -1
  31. package/dist/index.d.ts +236 -66
  32. package/dist/index.js +203 -197
  33. package/dist/index.js.map +1 -1
  34. package/dist/metadata.js +47 -2
  35. package/dist/metadata.js.map +1 -1
  36. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/combobox/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n useContext,\n} from \"react\";\nimport { useControlled } from \"@base-ui-components/utils/useControlled\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\nimport { ValidateStatus } from \"antd/es/form/FormItem\";\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\nimport { clsx, useCls } from \"../utils\";\nimport { SelectTrigger } from \"../select-trigger\";\nimport {\n DropdownMenu,\n DropdownMenuProps,\n DropdownMenuItem,\n type DropdownMenuItemType,\n} from \"../dropdown-menu\";\nimport type { PopoverProps } from \"antd/es/popover\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useControlledState } from \"../hooks\";\nimport { DropdownMenuDivider } from \"../dropdown-menu/divider\";\n\nexport interface ComboboxOption {\n value: string | number;\n label: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n}\n\nexport interface ComboboxProps {\n /** Array of options to be displayed in the combobox */\n options?: ComboboxOption[];\n /** Current value of the combobox */\n value?: string | number | Array<string | number>;\n /** Default value when uncontrolled */\n defaultValue?: string | number | Array<string | number>;\n /** Callback when value changes */\n onChange?: (value: string | number | Array<string | number>) => void;\n /** Placeholder text for the input */\n placeholder?: string;\n /** Whether the combobox is disabled */\n disabled?: boolean;\n /** Validation status */\n status?: ValidateStatus;\n /** Whether to allow clearing the selection */\n allowClear?: boolean;\n /** Whether to allow multiple selections */\n multiple?: boolean;\n /** Maximum number of tags to show */\n maxTagCount?: number;\n /** Whether to show search functionality */\n showSearch?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Placement of the dropdown */\n placement?: PopoverProps[\"placement\"];\n /** Custom className for the component */\n className?: string;\n /** Custom class names for different parts */\n classNames?: {\n trigger?: string;\n input?: string;\n option?: string;\n optionIcon?: string;\n optionText?: string;\n };\n /** Size of the combobox */\n size?: \"small\" | \"middle\" | \"large\";\n /** Loading state */\n loading?: boolean;\n /** Custom render for options */\n optionRender?: (\n option: ComboboxOption,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /** Filter function for search */\n filterOption?: boolean | ((input: string, option: ComboboxOption) => boolean);\n /** Callback when search input changes */\n onSearch?: (value: string) => void;\n /** Custom dropdown render */\n dropdownRender?: (menu: React.ReactElement) => React.ReactElement;\n /** Custom clear icon */\n clearIcon?: React.ReactNode;\n /** Custom suffix icon */\n suffixIcon?: React.ReactNode;\n /**\n * Props to pass to the dropdown menu\n */\n dropdownMenuProps?: DropdownMenuProps;\n /**\n * Props to pass to the combobox trigger\n */\n triggerProps?: React.ComponentPropsWithoutRef<typeof SelectTrigger>;\n searchProps?: {\n placeholder?: string;\n onValueChange?: (value: string) => void;\n value?: string;\n };\n /**\n * Show selection summary instead of individual tags when multiple\n * @default false\n */\n showSelectionSummary?: boolean;\n /**\n * Render function for the selection summary in multiple case\n * @default (selectedValues) => `${selectedValues.length} items selected`\n */\n selectionSummaryRender?: (\n selectedValues: Array<string | number>\n ) => React.ReactNode;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n /**\n * Render function for the select all option\n */\n selectAllRender?: (props: {\n onSelectAll: () => void;\n onDeselectAll: () => void;\n checked: boolean;\n indeterminate: boolean;\n }) => React.ReactNode;\n}\n\nconst ComboboxInner = (\n {\n options = [],\n value: controlledValue,\n defaultValue,\n onChange,\n placeholder = \"Select...\",\n disabled: disabledProp = false,\n status: statusProp,\n allowClear = false,\n multiple = false,\n maxTagCount,\n showSearch = true,\n open: controlledOpen,\n onOpenChange,\n placement = \"bottomLeft\",\n className,\n classNames,\n size = \"middle\",\n loading: _loading = false,\n optionRender,\n filterOption = true,\n onSearch,\n dropdownRender,\n clearIcon,\n suffixIcon,\n dropdownMenuProps,\n triggerProps,\n searchProps,\n showSelectionSummary = false,\n selectionSummaryRender,\n showSelectAll = false,\n selectAllRender,\n ...rest\n }: ComboboxProps,\n ref: React.ForwardedRef<HTMLDivElement>\n) => {\n const [initialDefaultValue] = useState(\n defaultValue !== undefined ? defaultValue : multiple ? [] : undefined\n );\n const [value, setValue] = useControlled({\n controlled: controlledValue,\n default: initialDefaultValue,\n name: \"value\",\n });\n\n const [open, setOpen] = useControlledState(\n controlledOpen,\n onOpenChange,\n false\n );\n const [searchValue, setSearchValue] = useState(\"\");\n const cls = useCls();\n\n // Get form context values\n const {\n status: contextStatus,\n // hasFeedback,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const handleValueChange = useCallback(\n (newValue: string | number | Array<string | number>) => {\n setValue(newValue);\n onChange?.(newValue);\n },\n [setValue, onChange]\n );\n\n const handleOptionSelect = useCallback(\n (optionValue: string | number) => {\n if (multiple) {\n const currentValues = Array.isArray(value) ? value : [];\n const newValues = currentValues.includes(optionValue)\n ? currentValues.filter((v) => v !== optionValue)\n : [...currentValues, optionValue];\n handleValueChange(newValues);\n } else {\n handleValueChange(optionValue);\n // onOpenChange?.(false);\n }\n },\n [multiple, value, handleValueChange]\n );\n\n const handleSearchChange = useCallback(\n (newValue: string) => {\n setSearchValue(newValue);\n onSearch?.(newValue);\n },\n [onSearch]\n );\n\n // Check if option is selected\n const isSelected = useCallback(\n (optionValue: string | number) => {\n if (multiple) {\n return Array.isArray(value) && value.includes(optionValue);\n }\n return value === optionValue;\n },\n [multiple, value]\n );\n\n // Filter options based on search\n const filteredOptions = useMemo(() => {\n if (!showSearch || !searchValue) return options;\n\n return options.filter((option) => {\n if (typeof filterOption === \"function\") {\n return filterOption(searchValue, option);\n }\n if (filterOption === false) return true;\n\n const label =\n typeof option.label === \"string\" ? option.label : String(option.value);\n return label.toLowerCase().includes(searchValue.toLowerCase());\n });\n }, [options, showSearch, searchValue, filterOption]);\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = filteredOptions.map((option) => option.value);\n handleValueChange(allValues);\n }\n }, [multiple, filteredOptions, handleValueChange]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n handleValueChange([]);\n }\n }, [multiple, handleValueChange]);\n\n // Convert options to DropdownMenu items\n const dropdownItems: DropdownMenuItemType[] = useMemo(() => {\n return filteredOptions.map((option) => {\n return {\n type: \"item\",\n key: option.value,\n icon: option.icon,\n label: option.label,\n disabled: option.disabled,\n onClick: () => !option.disabled && handleOptionSelect(option.value),\n };\n });\n }, [filteredOptions, handleOptionSelect]);\n\n // Select all component for beforeList\n const selectAllComponent = useMemo(() => {\n if (!showSelectAll || !multiple || filteredOptions.length === 0) {\n return null;\n }\n\n const selectedValues = Array.isArray(value) ? value : [];\n const filteredOptionValues = filteredOptions.map((opt) => opt.value);\n const selectedFromFiltered = selectedValues.filter((val) =>\n filteredOptionValues.includes(val)\n );\n const checked =\n selectedFromFiltered.length === filteredOptions.length &&\n filteredOptions.length > 0;\n const indeterminate =\n selectedFromFiltered.length > 0 &&\n selectedFromFiltered.length < filteredOptions.length;\n\n const selectAllItem: DropdownMenuItemType & { type: \"item\" } = {\n type: \"item\",\n key: \"select_all\",\n label: \"Select All\",\n onClick: () => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n },\n };\n\n return (\n <>\n <DropdownMenuItem\n key=\"select_all\"\n item={selectAllItem}\n inCombobox={showSearch}\n selected={checked}\n showCheckbox\n indeterminate={indeterminate}\n renderAsNativeElement\n onSelect={() => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n />\n <DropdownMenuDivider />\n </>\n );\n }, [\n showSelectAll,\n multiple,\n filteredOptions,\n value,\n showSearch,\n handleDeselectAll,\n handleSelectAll,\n ]);\n\n // Prepare trigger data\n const selectedValues = useMemo(() => {\n return Array.isArray(value) ? value : value ? [value] : [];\n }, [value]);\n const selectedOptions = selectedValues\n .map((val) => options.find((opt) => opt.value === val))\n .filter(Boolean);\n\n // Generate display value and prefix for SelectTrigger\n const { displayValue, displayPrefix } = useMemo(() => {\n if (selectedOptions.length === 0) {\n return { displayValue: undefined, displayPrefix: undefined };\n }\n\n if (multiple) {\n const summaryText = `${selectedOptions.length} ${\n selectedOptions.length === 1 ? \"item\" : \"items\"\n } selected`;\n if (showSelectionSummary) {\n if (selectionSummaryRender) {\n return {\n displayValue: selectionSummaryRender(selectedValues),\n displayPrefix: undefined,\n };\n }\n // Default summary with icons\n return {\n displayValue: summaryText,\n // TODO: Create icon component for multiple selection summary\n displayPrefix: undefined,\n };\n }\n // For non-summary multiple selection\n return selectedOptions.length === 1\n ? {\n displayValue: selectedOptions[0].label,\n displayPrefix: selectedOptions[0].icon,\n }\n : {\n displayValue: summaryText,\n displayPrefix: undefined,\n };\n }\n\n // Single selection\n const selectedOption = selectedOptions[0];\n return {\n displayValue: selectedOption?.label,\n displayPrefix: selectedOption?.icon,\n };\n }, [\n selectedOptions,\n multiple,\n showSelectionSummary,\n selectionSummaryRender,\n selectedValues,\n ]);\n\n return (\n <div ref={ref} className={clsx(cls(\"combobox\"), className)} {...rest}>\n <DropdownMenu\n items={dropdownItems}\n open={open}\n onOpenChange={setOpen}\n placement={placement}\n showSearch={showSearch}\n searchProps={{\n placeholder: \"Search options...\",\n onValueChange: handleSearchChange,\n value: searchValue,\n ...searchProps,\n }}\n className={clsx(cls(\"combobox-dropdown\"))}\n classNames={{\n trigger: clsx(cls(\"combobox-trigger-wrapper\")),\n popup: clsx(cls(\"combobox-popup\")),\n item: clsx(cls(\"combobox-option\"), classNames?.option),\n ...classNames,\n }}\n popupMatchTriggerWidth\n keepOpenOnSelect={multiple}\n highlightedItemKey={multiple ? undefined : selectedValues[0]}\n showCheckbox={multiple}\n beforeList={selectAllComponent}\n selectedItemKeys={selectedValues}\n {...dropdownMenuProps}\n >\n <SelectTrigger\n value={displayValue}\n prefix={displayPrefix}\n placeholder={placeholder}\n disabled={disabled}\n status={mergedStatus}\n open={open}\n size={size}\n allowClear={allowClear}\n suffixIcon={suffixIcon}\n clearIcon={clearIcon}\n classNames={{\n trigger: classNames?.trigger,\n ...triggerProps?.classNames,\n }}\n onClear={() => handleValueChange(multiple ? [] : undefined)}\n onOpenChange={setOpen}\n role=\"combobox\"\n {...triggerProps}\n />\n </DropdownMenu>\n </div>\n );\n};\n\nconst MainCombobox = forwardRef(ComboboxInner);\n\nexport const Combobox = Object.assign(MainCombobox, {\n // Add any sub components here if needed\n});\n\nexport default Combobox;\n"],"names":["ComboboxInner","options","controlledValue","defaultValue","onChange","placeholder","disabledProp","statusProp","allowClear","multiple","maxTagCount","showSearch","controlledOpen","onOpenChange","placement","className","classNames","size","_loading","optionRender","filterOption","onSearch","dropdownRender","clearIcon","suffixIcon","dropdownMenuProps","triggerProps","searchProps","showSelectionSummary","selectionSummaryRender","showSelectAll","selectAllRender","rest","ref","initialDefaultValue","useState","value","setValue","useControlled","open","setOpen","useControlledState","searchValue","setSearchValue","cls","useCls","contextStatus","useContext","FormItemInputContext","contextDisabled","DisabledContext","mergedStatus","disabled","handleValueChange","useCallback","newValue","handleOptionSelect","optionValue","currentValues","newValues","v","handleSearchChange","filteredOptions","useMemo","option","handleSelectAll","allValues","handleDeselectAll","dropdownItems","selectAllComponent","selectedValues","filteredOptionValues","opt","selectedFromFiltered","val","checked","indeterminate","jsxs","Fragment","jsx","DropdownMenuItem","DropdownMenuDivider","selectedOptions","displayValue","displayPrefix","summaryText","selectedOption","clsx","DropdownMenu","SelectTrigger","MainCombobox","forwardRef","Combobox"],"mappings":";;;;;;;;;;;;;;AAqIA,MAAMA,KAAgB,CACpB;AAAA,EACE,SAAAC,IAAU,CAAC;AAAA,EACX,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAUC,IAAe;AAAA,EACzB,QAAQC;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAASC,KAAW;AAAA,EACpB,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,wBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,iBAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACG,QAAA,CAACC,CAAmB,IAAIC;AAAA,IAC5BhC,MAAiB,SAAYA,IAAeM,IAAW,CAAA,IAAK;AAAA,EAC9D,GACM,CAAC2B,GAAOC,CAAQ,IAAIC,GAAc;AAAA,IACtC,YAAYpC;AAAA,IACZ,SAASgC;AAAA,IACT,MAAM;AAAA,EAAA,CACP,GAEK,CAACK,GAAMC,CAAO,IAAIC;AAAA,IACtB7B;AAAA,IACAC;AAAA,IACA;AAAA,EACF,GACM,CAAC6B,GAAaC,EAAc,IAAIR,EAAS,EAAE,GAC3CS,IAAMC,GAAO,GAGb;AAAA,IACJ,QAAQC;AAAA;AAAA;AAAA,EAAA,IAGNC,EAAWC,EAAoB,GAC7BC,KAAkBF,EAAWG,EAAe,GAG5CC,KAAe5C,KAAcuC,IAC7BM,KAAW9C,KAAgB2C,IAE3BI,IAAoBC;AAAA,IACxB,CAACC,MAAuD;AACtD,MAAAlB,EAASkB,CAAQ,GACjBnD,KAAA,QAAAA,EAAWmD;AAAA,IACb;AAAA,IACA,CAAClB,GAAUjC,CAAQ;AAAA,EACrB,GAEMoD,IAAqBF;AAAA,IACzB,CAACG,MAAiC;AAChC,UAAIhD,GAAU;AACZ,cAAMiD,IAAgB,MAAM,QAAQtB,CAAK,IAAIA,IAAQ,CAAC,GAChDuB,IAAYD,EAAc,SAASD,CAAW,IAChDC,EAAc,OAAO,CAACE,MAAMA,MAAMH,CAAW,IAC7C,CAAC,GAAGC,GAAeD,CAAW;AAClC,QAAAJ,EAAkBM,CAAS;AAAA,MAAA;AAE3B,QAAAN,EAAkBI,CAAW;AAAA,IAGjC;AAAA,IACA,CAAChD,GAAU2B,GAAOiB,CAAiB;AAAA,EACrC,GAEMQ,KAAqBP;AAAA,IACzB,CAACC,MAAqB;AACpB,MAAAZ,GAAeY,CAAQ,GACvBlC,KAAA,QAAAA,EAAWkC;AAAA,IACb;AAAA,IACA,CAAClC,CAAQ;AAAA,EACX;AAGmB,EAAAiC;AAAA,IACjB,CAACG,MACKhD,IACK,MAAM,QAAQ2B,CAAK,KAAKA,EAAM,SAASqB,CAAW,IAEpDrB,MAAUqB;AAAA,IAEnB,CAAChD,GAAU2B,CAAK;AAAA,EAAA;AAIZ,QAAA0B,IAAkBC,EAAQ,MAC1B,CAACpD,KAAc,CAAC+B,IAAoBzC,IAEjCA,EAAQ,OAAO,CAAC+D,MACjB,OAAO5C,KAAiB,aACnBA,EAAasB,GAAasB,CAAM,IAErC5C,MAAiB,KAAc,MAGjC,OAAO4C,EAAO,SAAU,WAAWA,EAAO,QAAQ,OAAOA,EAAO,KAAK,GAC1D,YAAY,EAAE,SAAStB,EAAY,aAAa,CAC9D,GACA,CAACzC,GAASU,GAAY+B,GAAatB,CAAY,CAAC,GAE7C6C,IAAkBX,EAAY,MAAM;AACxC,QAAI7C,GAAU;AACZ,YAAMyD,IAAYJ,EAAgB,IAAI,CAACE,MAAWA,EAAO,KAAK;AAC9D,MAAAX,EAAkBa,CAAS;AAAA,IAAA;AAAA,EAE5B,GAAA,CAACzD,GAAUqD,GAAiBT,CAAiB,CAAC,GAE3Cc,IAAoBb,EAAY,MAAM;AAC1C,IAAI7C,KACF4C,EAAkB,CAAA,CAAE;AAAA,EACtB,GACC,CAAC5C,GAAU4C,CAAiB,CAAC,GAG1Be,KAAwCL,EAAQ,MAC7CD,EAAgB,IAAI,CAACE,OACnB;AAAA,IACL,MAAM;AAAA,IACN,KAAKA,EAAO;AAAA,IACZ,MAAMA,EAAO;AAAA,IACb,OAAOA,EAAO;AAAA,IACd,UAAUA,EAAO;AAAA,IACjB,SAAS,MAAM,CAACA,EAAO,YAAYR,EAAmBQ,EAAO,KAAK;AAAA,EACpE,EACD,GACA,CAACF,GAAiBN,CAAkB,CAAC,GAGlCa,KAAqBN,EAAQ,MAAM;AACvC,QAAI,CAACjC,KAAiB,CAACrB,KAAYqD,EAAgB,WAAW;AACrD,aAAA;AAGT,UAAMQ,IAAiB,MAAM,QAAQlC,CAAK,IAAIA,IAAQ,CAAC,GACjDmC,IAAuBT,EAAgB,IAAI,CAACU,MAAQA,EAAI,KAAK,GAC7DC,IAAuBH,EAAe;AAAA,MAAO,CAACI,MAClDH,EAAqB,SAASG,CAAG;AAAA,IACnC,GACMC,IACJF,EAAqB,WAAWX,EAAgB,UAChDA,EAAgB,SAAS,GACrBc,IACJH,EAAqB,SAAS,KAC9BA,EAAqB,SAASX,EAAgB;AAehD,WAEI,gBAAAe,GAAAC,IAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UAEC,MAjByD;AAAA,YAC7D,MAAM;AAAA,YACN,KAAK;AAAA,YACL,OAAO;AAAA,YACP,SAAS,MAAM;AACb,cAAIJ,KAAiBD,IACDR,EAAA,IAEFF,EAAA;AAAA,YAClB;AAAA,UAEJ;AAAA,UAOM,YAAYtD;AAAA,UACZ,UAAUgE;AAAA,UACV,cAAY;AAAA,UACZ,eAAAC;AAAA,UACA,uBAAqB;AAAA,UACrB,UAAU,MAAM;AACd,YAAIA,KAAiBD,IACDR,EAAA,IAEFF,EAAA;AAAA,UAClB;AAAA,QACF;AAAA,QAbI;AAAA,MAcN;AAAA,wBACCgB,IAAoB,CAAA,CAAA;AAAA,IAAA,GACvB;AAAA,EAAA,GAED;AAAA,IACDnD;AAAA,IACArB;AAAA,IACAqD;AAAA,IACA1B;AAAA,IACAzB;AAAA,IACAwD;AAAA,IACAF;AAAA,EAAA,CACD,GAGKK,IAAiBP,EAAQ,MACtB,MAAM,QAAQ3B,CAAK,IAAIA,IAAQA,IAAQ,CAACA,CAAK,IAAI,CAAC,GACxD,CAACA,CAAK,CAAC,GACJ8C,IAAkBZ,EACrB,IAAI,CAACI,MAAQzE,EAAQ,KAAK,CAACuE,MAAQA,EAAI,UAAUE,CAAG,CAAC,EACrD,OAAO,OAAO,GAGX,EAAE,cAAAS,IAAc,eAAAC,GAAc,IAAIrB,EAAQ,MAAM;AAChD,QAAAmB,EAAgB,WAAW;AAC7B,aAAO,EAAE,cAAc,QAAW,eAAe,OAAU;AAG7D,QAAIzE,GAAU;AACN,YAAA4E,IAAc,GAAGH,EAAgB,MAAM,IAC3CA,EAAgB,WAAW,IAAI,SAAS,OAC1C;AACA,aAAItD,IACEC,IACK;AAAA,QACL,cAAcA,EAAuByC,CAAc;AAAA,QACnD,eAAe;AAAA,MACjB,IAGK;AAAA,QACL,cAAce;AAAA;AAAA,QAEd,eAAe;AAAA,MACjB,IAGKH,EAAgB,WAAW,IAC9B;AAAA,QACE,cAAcA,EAAgB,CAAC,EAAE;AAAA,QACjC,eAAeA,EAAgB,CAAC,EAAE;AAAA,MAAA,IAEpC;AAAA,QACE,cAAcG;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IAAA;AAIA,UAAAC,IAAiBJ,EAAgB,CAAC;AACjC,WAAA;AAAA,MACL,cAAcI,KAAA,gBAAAA,EAAgB;AAAA,MAC9B,eAAeA,KAAA,gBAAAA,EAAgB;AAAA,IACjC;AAAA,EAAA,GACC;AAAA,IACDJ;AAAA,IACAzE;AAAA,IACAmB;AAAA,IACAC;AAAA,IACAyC;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAS,EAAC,OAAI,EAAA,KAAA9C,GAAU,WAAWsD,EAAK3C,EAAI,UAAU,GAAG7B,CAAS,GAAI,GAAGiB,GAC9D,UAAA,gBAAA+C;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,OAAOpB;AAAA,MACP,MAAA7B;AAAA,MACA,cAAcC;AAAA,MACd,WAAA1B;AAAA,MACA,YAAAH;AAAA,MACA,aAAa;AAAA,QACX,aAAa;AAAA,QACb,eAAekD;AAAA,QACf,OAAOnB;AAAA,QACP,GAAGf;AAAA,MACL;AAAA,MACA,WAAW4D,EAAK3C,EAAI,mBAAmB,CAAC;AAAA,MACxC,YAAY;AAAA,QACV,SAAS2C,EAAK3C,EAAI,0BAA0B,CAAC;AAAA,QAC7C,OAAO2C,EAAK3C,EAAI,gBAAgB,CAAC;AAAA,QACjC,MAAM2C,EAAK3C,EAAI,iBAAiB,GAAG5B,KAAA,gBAAAA,EAAY,MAAM;AAAA,QACrD,GAAGA;AAAA,MACL;AAAA,MACA,wBAAsB;AAAA,MACtB,kBAAkBP;AAAA,MAClB,oBAAoBA,IAAW,SAAY6D,EAAe,CAAC;AAAA,MAC3D,cAAc7D;AAAA,MACd,YAAY4D;AAAA,MACZ,kBAAkBC;AAAA,MACjB,GAAG7C;AAAA,MAEJ,UAAA,gBAAAsD;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,QAAQC;AAAA,UACR,aAAA/E;AAAA,UACA,UAAA+C;AAAA,UACA,QAAQD;AAAA,UACR,MAAAZ;AAAA,UACA,MAAAtB;AAAA,UACA,YAAAT;AAAA,UACA,YAAAgB;AAAA,UACA,WAAAD;AAAA,UACA,YAAY;AAAA,YACV,SAASP,KAAA,gBAAAA,EAAY;AAAA,YACrB,GAAGU,KAAA,gBAAAA,EAAc;AAAA,UACnB;AAAA,UACA,SAAS,MAAM2B,EAAkB5C,IAAW,CAAA,IAAK,MAAS;AAAA,UAC1D,cAAc+B;AAAA,UACd,MAAK;AAAA,UACJ,GAAGd;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEJ;AAEJ,GAEMgE,KAAeC,GAAW3F,EAAa,GAEhC4F,KAAW,OAAO,OAAOF,IAAc;AAAA;AAEpD,CAAC;"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/combobox/component.tsx"],"sourcesContent":["\"use client\";\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\nimport { ValidateStatus } from \"antd/es/form/FormItem\";\nimport type { PopoverProps } from \"antd/es/popover\";\nimport React, {\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n} from \"react\";\nimport {\n DropdownMenu,\n DropdownMenuItem,\n DropdownMenuProps,\n type DropdownMenuItemType,\n} from \"../dropdown-menu\";\nimport { SelectTrigger } from \"../select-trigger\";\nimport { clsx, reactNodeToString, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport { DropdownMenuDivider } from \"../dropdown-menu/divider\";\nimport { useControlledState } from \"../hooks\";\nimport \"./style.css\";\n\nexport type ComboboxOption<\n T extends React.Key,\n O extends Record<string, unknown> = {},\n> = {\n value: T;\n label: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n} & O;\n\nexport interface ComboboxProps<\n T extends React.Key,\n M extends boolean,\n O extends Record<string, unknown> = {},\n> {\n /** Array of options to be displayed in the combobox */\n options?: ComboboxOption<T, O>[];\n /** Current value of the combobox */\n value?: M extends true ? T[] : T;\n /** Default value when uncontrolled */\n defaultValue?: M extends true ? T[] : T;\n /** Callback when value changes */\n onChange?: (value: M extends true ? T[] : T) => void;\n /** Placeholder text for the input */\n placeholder?: string;\n /** Whether the combobox is disabled */\n disabled?: boolean;\n /** Validation status */\n status?: ValidateStatus;\n /** Whether to allow clearing the selection */\n allowClear?: boolean;\n /** Whether to allow multiple selections */\n multiple?: M;\n /** Maximum number of tags to show */\n maxTagCount?: number;\n /** Whether to show search functionality */\n showSearch?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Placement of the dropdown */\n placement?: PopoverProps[\"placement\"];\n /** Custom className for the component */\n className?: string;\n /** Custom class names for different parts */\n classNames?: {\n trigger?: string;\n input?: string;\n option?: string;\n optionIcon?: string;\n optionText?: string;\n };\n /** Size of the combobox */\n size?: \"small\" | \"middle\" | \"large\";\n /** Loading state */\n loading?: boolean;\n /** Custom render for options */\n optionRender?: (\n option: ComboboxOption<T, O>,\n props: React.HTMLAttributes<HTMLElement>,\n ) => React.ReactElement;\n /** Filter function for search */\n filterOption?:\n | boolean\n | ((input: string, option: ComboboxOption<T, O>) => boolean);\n /** Callback when search input changes */\n onSearch?: (value: string) => void;\n /** Custom dropdown render */\n dropdownRender?: (menu: React.ReactElement) => React.ReactElement;\n /** Custom clear icon */\n clearIcon?: React.ReactNode;\n /** Custom suffix icon */\n suffixIcon?: React.ReactNode;\n /**\n * Props to pass to the dropdown menu\n */\n dropdownMenuProps?: DropdownMenuProps;\n /**\n * Props to pass to the combobox trigger\n */\n triggerProps?: React.ComponentPropsWithoutRef<typeof SelectTrigger>;\n searchProps?: {\n placeholder?: string;\n onValueChange?: (value: string) => void;\n value?: string;\n };\n /**\n * Show selection summary instead of individual tags when multiple\n * @default false\n */\n showSelectionSummary?: boolean;\n /**\n * Render function for the selection summary in multiple case\n * @default (selectedValues) => `${selectedValues.length} items selected`\n */\n selectionSummaryRender?: (selectedValues: T[]) => React.ReactNode;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n /**\n * Render function for the select all option\n */\n selectAllRender?: (props: {\n onSelectAll: () => void;\n onDeselectAll: () => void;\n checked: boolean;\n indeterminate: boolean;\n }) => React.ReactNode;\n /**\n * Function to extract keywords from the item for search filtering\n * @default (option) => [String(option.key), reactNodeToString(option.label)]\n */\n getOptionKeywords?: (option: ComboboxOption<T, O>) => string[];\n /**\n * Render function for the option label\n */\n optionLabelRender?: (\n option: ComboboxOption<T, O>,\n props?: React.HTMLAttributes<HTMLElement>,\n ) => React.ReactElement;\n}\n\nconst ComboboxInner = <\n T extends React.Key,\n M extends boolean,\n O extends Record<string, unknown> = {},\n>(\n {\n options = [],\n value: controlledValue,\n defaultValue,\n onChange,\n placeholder = \"Select...\",\n disabled: disabledProp = false,\n status: statusProp,\n allowClear = false,\n multiple = false as M,\n maxTagCount,\n showSearch = true,\n open: controlledOpen,\n onOpenChange,\n placement = \"bottomLeft\",\n className,\n classNames,\n size = \"middle\",\n loading: _loading = false,\n optionRender,\n onSearch,\n dropdownRender,\n clearIcon,\n suffixIcon,\n dropdownMenuProps,\n triggerProps,\n searchProps,\n showSelectionSummary = false,\n selectionSummaryRender,\n showSelectAll = false,\n selectAllRender,\n optionLabelRender,\n getOptionKeywords = (option: ComboboxOption<T, O>) => [\n String(option.value),\n reactNodeToString(option.label),\n ],\n ...rest\n }: ComboboxProps<T, M, O>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n const [value, setValue] = useControlledState(\n controlledValue,\n onChange,\n defaultValue !== undefined ? defaultValue : multiple ? [] : undefined,\n );\n\n const [open, setOpen] = useControlledState(\n controlledOpen,\n onOpenChange,\n false,\n );\n const cls = useCls();\n\n // Get form context values\n const {\n status: contextStatus,\n // hasFeedback,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const handleValueChange = useCallback(\n (newValue: M extends true ? T[] : T) => {\n setValue(newValue);\n onChange?.(newValue);\n },\n [setValue, onChange],\n );\n\n const handleOptionSelect = useCallback(\n (optionValue: T) => {\n if (multiple) {\n const currentValues = (Array.isArray(value) ? value : []) as T[];\n const newValues = currentValues.includes(optionValue)\n ? currentValues.filter((v) => v !== optionValue)\n : [...currentValues, optionValue];\n (handleValueChange as (v: T[]) => void)(newValues);\n } else {\n (handleValueChange as (v: T) => void)(optionValue);\n // onOpenChange?.(false);\n }\n },\n [multiple, value, handleValueChange],\n );\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = options.map((option) => option.value);\n (handleValueChange as (v: T[]) => void)(allValues);\n }\n }, [multiple, options, handleValueChange]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n (handleValueChange as (v: T[]) => void)([]);\n }\n }, [multiple, handleValueChange]);\n\n // Convert options to DropdownMenu items\n const dropdownItems: DropdownMenuItemType[] = useMemo(() => {\n return options.map((option) => {\n return {\n type: \"item\",\n // todo: make this type better\n key: option.value as React.Key,\n icon: option.icon,\n label: option.label,\n disabled: option.disabled,\n onClick: () => !option.disabled && handleOptionSelect(option.value),\n };\n });\n }, [options, handleOptionSelect]);\n\n // Select all component for beforeList\n const selectAllComponent = useMemo(() => {\n if (!showSelectAll || !multiple || options.length === 0) {\n return null;\n }\n\n const selectedValues = Array.isArray(value) ? value : [];\n const filteredOptionValues = options.map((opt) => opt.value);\n const selectedFromFiltered = selectedValues.filter((val) =>\n filteredOptionValues.includes(val),\n );\n const checked =\n selectedFromFiltered.length === options.length && options.length > 0;\n const indeterminate =\n selectedFromFiltered.length > 0 &&\n selectedFromFiltered.length < options.length;\n\n const selectAllItem: DropdownMenuItemType & { type: \"item\" } = {\n type: \"item\",\n key: \"select_all\",\n label: \"Select All\",\n onClick: () => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n },\n };\n\n return (\n <>\n <DropdownMenuItem\n key=\"select_all\"\n item={selectAllItem}\n inCombobox={showSearch}\n selected={checked}\n showCheckbox\n indeterminate={indeterminate}\n renderAsNativeElement\n onSelect={() => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n />\n <DropdownMenuDivider />\n </>\n );\n }, [\n showSelectAll,\n multiple,\n options,\n value,\n showSearch,\n handleDeselectAll,\n handleSelectAll,\n ]);\n\n // Prepare trigger data\n const selectedValues = useMemo(() => {\n return Array.isArray(value) ? value : value ? [value] : [];\n }, [value]);\n const selectedOptions = selectedValues\n .map((val) => options.find((opt) => opt.value === val))\n .filter(Boolean);\n\n // Generate display value and prefix for SelectTrigger\n const { displayValue, displayPrefix } = useMemo(() => {\n if (selectedOptions.length === 0) {\n return { displayValue: undefined, displayPrefix: undefined };\n }\n\n if (multiple) {\n const summaryText = `${selectedOptions.length} ${\n selectedOptions.length === 1 ? \"item\" : \"items\"\n } selected`;\n if (showSelectionSummary) {\n if (selectionSummaryRender) {\n return {\n displayValue: selectionSummaryRender(selectedValues),\n displayPrefix: undefined,\n };\n }\n // Default summary with icons\n return {\n displayValue: summaryText,\n // TODO: Create icon component for multiple selection summary\n displayPrefix: undefined,\n };\n }\n // For non-summary multiple selection\n return selectedOptions.length === 1\n ? {\n displayValue: selectedOptions[0].label,\n displayPrefix: selectedOptions[0].icon,\n }\n : {\n displayValue: summaryText,\n displayPrefix: undefined,\n };\n }\n\n // Single selection\n const selectedOption = selectedOptions[0];\n return {\n displayValue: selectedOption?.label,\n displayPrefix: selectedOption?.icon,\n };\n }, [\n selectedOptions,\n multiple,\n showSelectionSummary,\n selectionSummaryRender,\n selectedValues,\n ]);\n\n return (\n <div ref={ref} className={clsx(cls(\"combobox\"), className)} {...rest}>\n <DropdownMenu\n items={dropdownItems}\n open={open}\n onOpenChange={setOpen}\n placement={placement}\n showSearch={showSearch}\n searchProps={{\n placeholder: \"Search options...\",\n ...searchProps,\n }}\n className={clsx(cls(\"combobox-dropdown\"))}\n classNames={{\n trigger: clsx(cls(\"combobox-trigger-wrapper\")),\n popup: clsx(cls(\"combobox-popup\")),\n item: clsx(cls(\"combobox-option\"), classNames?.option),\n ...classNames,\n }}\n popupMatchTriggerWidth\n keepOpenOnSelect={multiple}\n highlightedItemKey={multiple ? undefined : selectedValues[0]}\n showCheckbox={multiple}\n beforeList={selectAllComponent}\n selectedItemKeys={selectedValues}\n getItemKeywords={\n getOptionKeywords\n ? (item) => {\n const selectedOption = options.find(\n (option) => option.value === item.key,\n );\n if (!selectedOption) {\n return [];\n }\n return getOptionKeywords(selectedOption);\n }\n : undefined\n }\n itemLabelRender={\n optionLabelRender\n ? (item, props) => {\n const selectedOption = options.find(\n (option) => option.value === item.key,\n );\n if (!selectedOption) {\n return null;\n }\n return optionLabelRender?.(selectedOption, props);\n }\n : undefined\n }\n {...dropdownMenuProps}\n >\n <SelectTrigger\n value={displayValue}\n prefix={displayPrefix}\n placeholder={placeholder}\n disabled={disabled}\n status={mergedStatus}\n open={open}\n size={size}\n allowClear={allowClear}\n suffixIcon={suffixIcon}\n clearIcon={clearIcon}\n classNames={{\n trigger: classNames?.trigger,\n ...triggerProps?.classNames,\n }}\n onClear={() => {\n if (multiple) {\n (handleValueChange as (v: T[]) => void)([]);\n } else {\n handleValueChange(undefined);\n }\n }}\n onOpenChange={setOpen}\n role=\"combobox\"\n {...triggerProps}\n />\n </DropdownMenu>\n </div>\n );\n};\n\nconst MainCombobox = forwardRef(ComboboxInner) as <\n T extends React.Key,\n M extends boolean,\n O extends Record<string, unknown> = {},\n>(\n props: ComboboxProps<T, M, O> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReturnType<typeof ComboboxInner>;\n\nexport const Combobox = Object.assign(MainCombobox, {\n // Add any sub components here if needed\n});\n\nexport default Combobox;\n"],"names":["ComboboxInner","options","controlledValue","defaultValue","onChange","placeholder","disabledProp","statusProp","allowClear","multiple","maxTagCount","showSearch","controlledOpen","onOpenChange","placement","className","classNames","size","_loading","optionRender","onSearch","dropdownRender","clearIcon","suffixIcon","dropdownMenuProps","triggerProps","searchProps","showSelectionSummary","selectionSummaryRender","showSelectAll","selectAllRender","optionLabelRender","getOptionKeywords","option","reactNodeToString","rest","ref","value","setValue","useControlledState","open","setOpen","cls","useCls","contextStatus","useContext","FormItemInputContext","contextDisabled","DisabledContext","mergedStatus","disabled","handleValueChange","useCallback","newValue","handleOptionSelect","optionValue","currentValues","newValues","v","handleSelectAll","allValues","handleDeselectAll","dropdownItems","useMemo","selectAllComponent","selectedValues","filteredOptionValues","opt","selectedFromFiltered","val","checked","indeterminate","jsxs","Fragment","jsx","DropdownMenuItem","DropdownMenuDivider","selectedOptions","displayValue","displayPrefix","summaryText","selectedOption","clsx","DropdownMenu","item","props","SelectTrigger","MainCombobox","forwardRef","Combobox"],"mappings":";;;;;;;;;;;;;;AAuJA,MAAMA,KAAgB,CAKpB;AAAA,EACE,SAAAC,IAAU,CAAC;AAAA,EACX,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAUC,IAAe;AAAA,EACzB,QAAQC;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAASC,KAAW;AAAA,EACpB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,wBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAC,IAAoB,CAACC,MAAiC;AAAA,IACpD,OAAOA,EAAO,KAAK;AAAA,IACnBC,GAAkBD,EAAO,KAAK;AAAA,EAChC;AAAA,EACA,GAAGE;AACL,GACAC,MACG;AACG,QAAA,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxBrC;AAAA,IACAE;AAAA,IACAD,MAAiB,SAAYA,IAAeM,IAAW,CAAA,IAAK;AAAA,EAC9D,GAEM,CAAC+B,GAAMC,CAAO,IAAIF;AAAA,IACtB3B;AAAA,IACAC;AAAA,IACA;AAAA,EACF,GACM6B,IAAMC,GAAO,GAGb;AAAA,IACJ,QAAQC;AAAA;AAAA;AAAA,EAAA,IAGNC,EAAWC,EAAoB,GAC7BC,IAAkBF,EAAWG,EAAe,GAG5CC,IAAe1C,KAAcqC,GAC7BM,KAAW5C,KAAgByC,GAE3BI,IAAoBC;AAAA,IACxB,CAACC,MAAuC;AACtC,MAAAf,EAASe,CAAQ,GACjBjD,KAAA,QAAAA,EAAWiD;AAAA,IACb;AAAA,IACA,CAACf,GAAUlC,CAAQ;AAAA,EACrB,GAEMkD,IAAqBF;AAAA,IACzB,CAACG,MAAmB;AAClB,UAAI9C,GAAU;AACZ,cAAM+C,IAAiB,MAAM,QAAQnB,CAAK,IAAIA,IAAQ,CAAC,GACjDoB,IAAYD,EAAc,SAASD,CAAW,IAChDC,EAAc,OAAO,CAACE,MAAMA,MAAMH,CAAW,IAC7C,CAAC,GAAGC,GAAeD,CAAW;AACjC,QAAAJ,EAAuCM,CAAS;AAAA,MAAA;AAEhD,QAAAN,EAAqCI,CAAW;AAAA,IAGrD;AAAA,IACA,CAAC9C,GAAU4B,GAAOc,CAAiB;AAAA,EACrC,GAEMQ,IAAkBP,EAAY,MAAM;AACxC,QAAI3C,GAAU;AACZ,YAAMmD,IAAY3D,EAAQ,IAAI,CAACgC,MAAWA,EAAO,KAAK;AACrD,MAAAkB,EAAuCS,CAAS;AAAA,IAAA;AAAA,EAElD,GAAA,CAACnD,GAAUR,GAASkD,CAAiB,CAAC,GAEnCU,IAAoBT,EAAY,MAAM;AAC1C,IAAI3C,KACD0C,EAAuC,CAAA,CAAE;AAAA,EAC5C,GACC,CAAC1C,GAAU0C,CAAiB,CAAC,GAG1BW,KAAwCC,EAAQ,MAC7C9D,EAAQ,IAAI,CAACgC,OACX;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,KAAKA,EAAO;AAAA,IACZ,MAAMA,EAAO;AAAA,IACb,OAAOA,EAAO;AAAA,IACd,UAAUA,EAAO;AAAA,IACjB,SAAS,MAAM,CAACA,EAAO,YAAYqB,EAAmBrB,EAAO,KAAK;AAAA,EACpE,EACD,GACA,CAAChC,GAASqD,CAAkB,CAAC,GAG1BU,KAAqBD,EAAQ,MAAM;AACvC,QAAI,CAAClC,KAAiB,CAACpB,KAAYR,EAAQ,WAAW;AAC7C,aAAA;AAGT,UAAMgE,IAAiB,MAAM,QAAQ5B,CAAK,IAAIA,IAAQ,CAAC,GACjD6B,IAAuBjE,EAAQ,IAAI,CAACkE,MAAQA,EAAI,KAAK,GACrDC,IAAuBH,EAAe;AAAA,MAAO,CAACI,MAClDH,EAAqB,SAASG,CAAG;AAAA,IACnC,GACMC,IACJF,EAAqB,WAAWnE,EAAQ,UAAUA,EAAQ,SAAS,GAC/DsE,IACJH,EAAqB,SAAS,KAC9BA,EAAqB,SAASnE,EAAQ;AAexC,WAEI,gBAAAuE,GAAAC,IAAA,EAAA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UAEC,MAjByD;AAAA,YAC7D,MAAM;AAAA,YACN,KAAK;AAAA,YACL,OAAO;AAAA,YACP,SAAS,MAAM;AACb,cAAIJ,KAAiBD,IACDT,EAAA,IAEFF,EAAA;AAAA,YAClB;AAAA,UAEJ;AAAA,UAOM,YAAYhD;AAAA,UACZ,UAAU2D;AAAA,UACV,cAAY;AAAA,UACZ,eAAAC;AAAA,UACA,uBAAqB;AAAA,UACrB,UAAU,MAAM;AACd,YAAIA,KAAiBD,IACDT,EAAA,IAEFF,EAAA;AAAA,UAClB;AAAA,QACF;AAAA,QAbI;AAAA,MAcN;AAAA,wBACCiB,IAAoB,CAAA,CAAA;AAAA,IAAA,GACvB;AAAA,EAAA,GAED;AAAA,IACD/C;AAAA,IACApB;AAAA,IACAR;AAAA,IACAoC;AAAA,IACA1B;AAAA,IACAkD;AAAA,IACAF;AAAA,EAAA,CACD,GAGKM,IAAiBF,EAAQ,MACtB,MAAM,QAAQ1B,CAAK,IAAIA,IAAQA,IAAQ,CAACA,CAAK,IAAI,CAAC,GACxD,CAACA,CAAK,CAAC,GACJwC,IAAkBZ,EACrB,IAAI,CAACI,MAAQpE,EAAQ,KAAK,CAACkE,MAAQA,EAAI,UAAUE,CAAG,CAAC,EACrD,OAAO,OAAO,GAGX,EAAE,cAAAS,IAAc,eAAAC,GAAc,IAAIhB,EAAQ,MAAM;AAChD,QAAAc,EAAgB,WAAW;AAC7B,aAAO,EAAE,cAAc,QAAW,eAAe,OAAU;AAG7D,QAAIpE,GAAU;AACN,YAAAuE,IAAc,GAAGH,EAAgB,MAAM,IAC3CA,EAAgB,WAAW,IAAI,SAAS,OAC1C;AACA,aAAIlD,IACEC,IACK;AAAA,QACL,cAAcA,EAAuBqC,CAAc;AAAA,QACnD,eAAe;AAAA,MACjB,IAGK;AAAA,QACL,cAAce;AAAA;AAAA,QAEd,eAAe;AAAA,MACjB,IAGKH,EAAgB,WAAW,IAC9B;AAAA,QACE,cAAcA,EAAgB,CAAC,EAAE;AAAA,QACjC,eAAeA,EAAgB,CAAC,EAAE;AAAA,MAAA,IAEpC;AAAA,QACE,cAAcG;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IAAA;AAIA,UAAAC,IAAiBJ,EAAgB,CAAC;AACjC,WAAA;AAAA,MACL,cAAcI,KAAA,gBAAAA,EAAgB;AAAA,MAC9B,eAAeA,KAAA,gBAAAA,EAAgB;AAAA,IACjC;AAAA,EAAA,GACC;AAAA,IACDJ;AAAA,IACApE;AAAA,IACAkB;AAAA,IACAC;AAAA,IACAqC;AAAA,EAAA,CACD;AAGC,SAAA,gBAAAS,EAAC,OAAI,EAAA,KAAAtC,GAAU,WAAW8C,EAAKxC,EAAI,UAAU,GAAG3B,CAAS,GAAI,GAAGoB,GAC9D,UAAA,gBAAAuC;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,OAAOrB;AAAA,MACP,MAAAtB;AAAA,MACA,cAAcC;AAAA,MACd,WAAA3B;AAAA,MACA,YAAAH;AAAA,MACA,aAAa;AAAA,QACX,aAAa;AAAA,QACb,GAAGe;AAAA,MACL;AAAA,MACA,WAAWwD,EAAKxC,EAAI,mBAAmB,CAAC;AAAA,MACxC,YAAY;AAAA,QACV,SAASwC,EAAKxC,EAAI,0BAA0B,CAAC;AAAA,QAC7C,OAAOwC,EAAKxC,EAAI,gBAAgB,CAAC;AAAA,QACjC,MAAMwC,EAAKxC,EAAI,iBAAiB,GAAG1B,KAAA,gBAAAA,EAAY,MAAM;AAAA,QACrD,GAAGA;AAAA,MACL;AAAA,MACA,wBAAsB;AAAA,MACtB,kBAAkBP;AAAA,MAClB,oBAAoBA,IAAW,SAAYwD,EAAe,CAAC;AAAA,MAC3D,cAAcxD;AAAA,MACd,YAAYuD;AAAA,MACZ,kBAAkBC;AAAA,MAClB,iBACEjC,IACI,CAACoD,MAAS;AACR,cAAMH,IAAiBhF,EAAQ;AAAA,UAC7B,CAACgC,MAAWA,EAAO,UAAUmD,EAAK;AAAA,QACpC;AACA,eAAKH,IAGEjD,EAAkBiD,CAAc,IAF9B,CAAC;AAAA,MAE6B,IAEzC;AAAA,MAEN,iBACElD,IACI,CAACqD,GAAMC,MAAU;AACf,cAAMJ,IAAiBhF,EAAQ;AAAA,UAC7B,CAACgC,MAAWA,EAAO,UAAUmD,EAAK;AAAA,QACpC;AACA,eAAKH,IAGElD,KAAA,gBAAAA,EAAoBkD,GAAgBI,KAFlC;AAAA,MAEuC,IAElD;AAAA,MAEL,GAAG7D;AAAA,MAEJ,UAAA,gBAAAkD;AAAA,QAACY;AAAA,QAAA;AAAA,UACC,OAAOR;AAAA,UACP,QAAQC;AAAA,UACR,aAAA1E;AAAA,UACA,UAAA6C;AAAA,UACA,QAAQD;AAAA,UACR,MAAAT;AAAA,UACA,MAAAvB;AAAA,UACA,YAAAT;AAAA,UACA,YAAAe;AAAA,UACA,WAAAD;AAAA,UACA,YAAY;AAAA,YACV,SAASN,KAAA,gBAAAA,EAAY;AAAA,YACrB,GAAGS,KAAA,gBAAAA,EAAc;AAAA,UACnB;AAAA,UACA,SAAS,MAAM;AACb,YACG0B,EADC1C,IACsC,CAAA,IAEtB,MAFwB;AAAA,UAI9C;AAAA,UACA,cAAcgC;AAAA,UACd,MAAK;AAAA,UACJ,GAAGhB;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEJ;AAEJ,GAEM8D,KAAeC,GAAWxF,EAAa,GAQhCyF,KAAW,OAAO,OAAOF,IAAc;AAAA;AAEpD,CAAC;"}
@@ -0,0 +1,79 @@
1
+ "use client";
2
+ import { jsxs as s, Fragment as S, jsx as r } from "react/jsx-runtime";
3
+ import { useEffect as E, useCallback as L } from "react";
4
+ import { Command as m } from "../cmdk/index.js";
5
+ import { useDropdownMenu as D } from "../dropdown-menu/useDropdownMenu.js";
6
+ import './style.css';/* empty css */
7
+ import { WithAntdTokens as b } from "../utils/WithAntdTokens.js";
8
+ import { useCls as x } from "../utils/antdUtils.js";
9
+ import { useControlledState as A } from "../hooks/useControlledState.js";
10
+ import { ScrollArea as j } from "../scroll-area/component.js";
11
+ const G = [
12
+ { key: "k", metaKey: !0 },
13
+ { key: "k", ctrlKey: !0 }
14
+ ];
15
+ function I(t, e) {
16
+ return t.key.toLowerCase() === e.key.toLowerCase() && !!t.metaKey == !!e.metaKey && !!t.ctrlKey == !!e.ctrlKey && !!t.altKey == !!e.altKey && !!t.shiftKey == !!e.shiftKey;
17
+ }
18
+ const H = ({
19
+ open: t,
20
+ onOpenChange: e,
21
+ defaultOpen: h,
22
+ items: k = [],
23
+ shortcuts: i = G,
24
+ placeholder: c = "Type a command or search...",
25
+ emptyText: l = "No results found.",
26
+ label: C = "Command Palette",
27
+ className: K,
28
+ classNames: o
29
+ }) => {
30
+ const n = x(), [a, d] = A(
31
+ t,
32
+ e,
33
+ h
34
+ );
35
+ E(() => {
36
+ const y = (f) => {
37
+ i.find(
38
+ (g) => I(f, g)
39
+ ) && (f.preventDefault(), d(!a));
40
+ };
41
+ return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
42
+ }, [i, a, d]);
43
+ const { renderGroup: u, itemGroups: p } = D({
44
+ items: k,
45
+ inCombobox: !0,
46
+ onOpenChange: e
47
+ }), w = L(
48
+ () => /* @__PURE__ */ s(S, { children: [
49
+ /* @__PURE__ */ r(m.Input, { placeholder: c }),
50
+ /* @__PURE__ */ r(j, { fadeEdges: !0, children: /* @__PURE__ */ s(
51
+ m.List,
52
+ {
53
+ className: n("dropdown-menu-list", "command-palette-list"),
54
+ children: [
55
+ /* @__PURE__ */ r(m.Empty, { className: n("dropdown-menu-empty"), children: l }),
56
+ p.map(u)
57
+ ]
58
+ }
59
+ ) })
60
+ ] }),
61
+ [n, l, p, c, u]
62
+ );
63
+ return /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
64
+ m.Dialog,
65
+ {
66
+ open: a,
67
+ onOpenChange: d,
68
+ label: C,
69
+ overlayClassName: n("command-palette-overlay", o == null ? void 0 : o.mask),
70
+ contentClassName: n("command-palette-content", o == null ? void 0 : o.content),
71
+ className: n("command-palette", K),
72
+ children: w()
73
+ }
74
+ ) });
75
+ };
76
+ export {
77
+ H as CommandPalette
78
+ };
79
+ //# sourceMappingURL=component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/command-palette/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { Command } from \"../cmdk\";\nimport { DropdownMenuItemType } from \"../dropdown-menu/types\";\nimport { useDropdownMenu } from \"../dropdown-menu/useDropdownMenu\";\nimport { useControlledState } from \"../hooks\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { useCls, WithAntdTokens } from \"../utils\";\nimport \"./style.css\";\n\nexport type CommandPaletteShortcut = {\n key: string;\n metaKey?: boolean;\n ctrlKey?: boolean;\n altKey?: boolean;\n shiftKey?: boolean;\n};\n\nexport interface CommandPaletteProps {\n /** Whether the command palette is open */\n open?: boolean;\n /** Callback fired when the open state changes */\n onOpenChange?: (open: boolean) => void;\n /**\n * Default open state\n */\n defaultOpen?: boolean;\n /** Items to display in the command palette */\n items?: DropdownMenuItemType[];\n /** Keyboard shortcuts to open the palette */\n shortcuts?: CommandPaletteShortcut[];\n /** Placeholder text for the search input */\n placeholder?: string;\n /** Text to show when no results are found */\n emptyText?: string;\n /** Accessible label for the command palette */\n label?: string;\n /** Additional CSS class names */\n className?: string;\n classNames?: {\n root?: string;\n mask?: string;\n content?: string;\n group?: string;\n item?: string;\n groupLabel?: string;\n };\n}\n\nconst defaultShortcuts: CommandPaletteShortcut[] = [\n { key: \"k\", metaKey: true },\n { key: \"k\", ctrlKey: true },\n];\n\nfunction matchesShortcut(\n event: KeyboardEvent,\n shortcut: CommandPaletteShortcut,\n): boolean {\n return (\n event.key.toLowerCase() === shortcut.key.toLowerCase() &&\n !!event.metaKey === !!shortcut.metaKey &&\n !!event.ctrlKey === !!shortcut.ctrlKey &&\n !!event.altKey === !!shortcut.altKey &&\n !!event.shiftKey === !!shortcut.shiftKey\n );\n}\n\n// Default items for testing/demo purposes\n// const defaultItems: DropdownMenuItemType[] = [\n// {\n// type: \"item\",\n// key: \"search\",\n// label: \"Search files\",\n// onClick: () => console.log(\"Search files\"),\n// },\n// {\n// type: \"item\",\n// key: \"new-file\",\n// label: \"New file\",\n// onClick: () => console.log(\"New file\"),\n// },\n// {\n// type: \"item\",\n// key: \"settings\",\n// label: \"Open settings\",\n// onClick: () => console.log(\"Open settings\"),\n// },\n// ];\n\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\n open,\n onOpenChange,\n defaultOpen,\n items = [],\n shortcuts = defaultShortcuts,\n placeholder = \"Type a command or search...\",\n emptyText = \"No results found.\",\n label = \"Command Palette\",\n className,\n classNames,\n}) => {\n const cls = useCls();\n const [actualOpen, setActualOpen] = useControlledState(\n open,\n onOpenChange,\n defaultOpen,\n );\n\n // Set up keyboard shortcuts\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const matchingShortcut = shortcuts.find((shortcut) =>\n matchesShortcut(event, shortcut),\n );\n\n if (matchingShortcut) {\n event.preventDefault();\n setActualOpen(!actualOpen);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [shortcuts, actualOpen, setActualOpen]);\n\n const { renderGroup, itemGroups } = useDropdownMenu({\n items,\n inCombobox: true,\n onOpenChange,\n });\n\n const renderMenuInner = useCallback(\n () => (\n <>\n <Command.Input placeholder={placeholder} />\n {/*{beforeList}*/}\n <ScrollArea fadeEdges>\n <Command.List\n className={cls(\"dropdown-menu-list\", \"command-palette-list\")}\n >\n <Command.Empty className={cls(\"dropdown-menu-empty\")}>\n {emptyText}\n </Command.Empty>\n {itemGroups.map(renderGroup)}\n </Command.List>\n </ScrollArea>\n {/*{afterList}*/}\n </>\n ),\n [cls, emptyText, itemGroups, placeholder, renderGroup],\n );\n return (\n <WithAntdTokens>\n <Command.Dialog\n open={actualOpen}\n onOpenChange={setActualOpen}\n label={label}\n overlayClassName={cls(\"command-palette-overlay\", classNames?.mask)}\n contentClassName={cls(\"command-palette-content\", classNames?.content)}\n className={cls(\"command-palette\", className)}\n >\n {renderMenuInner()}\n </Command.Dialog>\n </WithAntdTokens>\n );\n};\n"],"names":["defaultShortcuts","matchesShortcut","event","shortcut","CommandPalette","open","onOpenChange","defaultOpen","items","shortcuts","placeholder","emptyText","label","className","classNames","cls","useCls","actualOpen","setActualOpen","useControlledState","useEffect","handleKeyDown","renderGroup","itemGroups","useDropdownMenu","renderMenuInner","useCallback","jsxs","Fragment","jsx","Command","ScrollArea","WithAntdTokens"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAA6C;AAAA,EACjD,EAAE,KAAK,KAAK,SAAS,GAAK;AAAA,EAC1B,EAAE,KAAK,KAAK,SAAS,GAAK;AAC5B;AAEA,SAASC,EACPC,GACAC,GACS;AACT,SACED,EAAM,IAAI,YAAkB,MAAAC,EAAS,IAAI,YAAY,KACrD,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,WAAY,CAAC,CAACC,EAAS,WAC/B,CAAC,CAACD,EAAM,UAAW,CAAC,CAACC,EAAS,UAC9B,CAAC,CAACD,EAAM,YAAa,CAAC,CAACC,EAAS;AAEpC;AAwBO,MAAMC,IAAgD,CAAC;AAAA,EAC5D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,WAAAC,IAAYT;AAAA,EACZ,aAAAU,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,YAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAYC,CAAa,IAAIC;AAAA,IAClCd;AAAA,IACAC;AAAA,IACAC;AAAA,EACF;AAGA,EAAAa,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACnB,MAAyB;AAK9C,MAJyBO,EAAU;AAAA,QAAK,CAACN,MACvCF,EAAgBC,GAAOC,CAAQ;AAAA,MACjC,MAGED,EAAM,eAAe,GACrBgB,EAAc,CAACD,CAAU;AAAA,IAE7B;AAES,oBAAA,iBAAiB,WAAWI,CAAa,GAC3C,MAAM,SAAS,oBAAoB,WAAWA,CAAa;AAAA,EACjE,GAAA,CAACZ,GAAWQ,GAAYC,CAAa,CAAC;AAEzC,QAAM,EAAE,aAAAI,GAAa,YAAAC,EAAW,IAAIC,EAAgB;AAAA,IAClD,OAAAhB;AAAA,IACA,YAAY;AAAA,IACZ,cAAAF;AAAA,EAAA,CACD,GAEKmB,IAAkBC;AAAA,IACtB,MAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAC,EAAAC,EAAQ,OAAR,EAAc,aAAApB,EAA0B,CAAA;AAAA,MAEzC,gBAAAmB,EAACE,GAAW,EAAA,WAAS,IACnB,UAAA,gBAAAJ;AAAA,QAACG,EAAQ;AAAA,QAAR;AAAA,UACC,WAAWf,EAAI,sBAAsB,sBAAsB;AAAA,UAE3D,UAAA;AAAA,YAAA,gBAAAc,EAACC,EAAQ,OAAR,EAAc,WAAWf,EAAI,qBAAqB,GAChD,UACHJ,GAAA;AAAA,YACCY,EAAW,IAAID,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAE/B,CAAA;AAAA,IAAA,GAEF;AAAA,IAEF,CAACP,GAAKJ,GAAWY,GAAYb,GAAaY,CAAW;AAAA,EACvD;AACA,2BACGU,GACC,EAAA,UAAA,gBAAAH;AAAA,IAACC,EAAQ;AAAA,IAAR;AAAA,MACC,MAAMb;AAAA,MACN,cAAcC;AAAA,MACd,OAAAN;AAAA,MACA,kBAAkBG,EAAI,2BAA2BD,KAAA,gBAAAA,EAAY,IAAI;AAAA,MACjE,kBAAkBC,EAAI,2BAA2BD,KAAA,gBAAAA,EAAY,OAAO;AAAA,MACpE,WAAWC,EAAI,mBAAmBF,CAAS;AAAA,MAE1C,UAAgBY,EAAA;AAAA,IAAA;AAAA,EAAA,GAErB;AAEJ;"}
@@ -0,0 +1 @@
1
+ @layer components{.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--ds-z-index-modal-mask)}.ds-command-palette-content{position:fixed;top:20%;left:50%;transform:translate(-50%);width:90%;max-width:640px;max-height:60vh;background:var(--ds-color-bg-elevated);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius-lg);box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;overflow:hidden;z-index:var(--ds-z-index-modal);animation:commandPaletteIn var(--ds-motion-duration-fast) var(--ds-motion-ease-out)}.ds-command-palette-content:focus:not(:focus-visible){outline:none}.ds-command-palette{display:flex;flex-direction:column;height:100%}.ds-command-palette-list{padding:.5rem}.ds-command-palette [cmdk-input]{font-family:var(--ds-font-family);font-size:1rem;border:none;outline:none;background:transparent;padding:var(--ds-padding) var(--ds-padding-md);color:var(--ds-color-text);border-bottom:1px solid var(--ds-color-border);width:100%}.ds-command-palette [cmdk-input]::placeholder{color:var(--color-ds-color-text-placeholder)}.ds-command-palette [cmdk-empty]{display:flex;align-items:center;justify-content:center;height:5rem}@keyframes commandPaletteIn{0%{opacity:0;transform:translate(-50%) scale(.95) translateY(-10px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}@media (prefers-color-scheme: dark){.ds-command-palette-overlay{background-color:var(--ds-color-bg-mask)}}@media (max-width: 640px){.ds-command-palette-content{top:10%;width:95%;max-height:70vh}}}
@@ -1,230 +1,160 @@
1
1
  "use client";
2
- import { jsx as e, jsxs as b } from "react/jsx-runtime";
3
- import { useCallback as w, useRef as X, createElement as Y } from "react";
4
- import { Menu as P } from "@base-ui-components/react/menu";
5
- import { useControlled as Z } from "@base-ui-components/utils/useControlled";
6
- import { Popover as $ } from "@base-ui-components/react/popover";
7
- import { Command as g } from "../cmdk/index.js";
8
- import { FormItemInputContext as O } from "antd/es/form/context";
9
- import { PopupPanelSize as S } from "../popup-panel/constants.js";
10
- import { DropdownMenuItem as K } from "./item.js";
2
+ import { jsxs as i, jsx as n } from "react/jsx-runtime";
3
+ import { useRef as U, useCallback as W, createElement as q } from "react";
4
+ import { Menu as H } from "@base-ui-components/react/menu";
5
+ import { Popover as J } from "@base-ui-components/react/popover";
6
+ import { Command as d } from "../cmdk/index.js";
7
+ import { FormItemInputContext as Q } from "antd/es/form/context";
8
+ import { PopupPanelSize as b } from "../popup-panel/constants.js";
9
+ import { useDropdownMenu as X } from "./useDropdownMenu.js";
11
10
  import './style.css';/* empty css */
12
- import { DropdownMenuDivider as a } from "./divider.js";
13
- import { parseAntdPlacement as N } from "../utils/placement.js";
14
- import { Input as s } from "../input/component.js";
15
- import { ScrollArea as _ } from "../scroll-area/component.js";
16
- import { DROPDOWN_COLLISION_AVOIDANCE as oo } from "../utils/constants.js";
17
- import { useCls as ro, useAntdCssVarClassname as no } from "../utils/antdUtils.js";
18
- import { clsx as u } from "../utils/cn.js";
19
- const Mo = ({
20
- children: j,
21
- items: z,
22
- placement: B,
23
- openOnHover: F,
24
- open: T,
25
- onOpenChange: v,
26
- className: U,
27
- itemRender: E,
11
+ import { parseAntdPlacement as Y } from "../utils/placement.js";
12
+ import { Input as Z } from "../input/component.js";
13
+ import { ScrollArea as h } from "../scroll-area/component.js";
14
+ import { DROPDOWN_COLLISION_AVOIDANCE as $ } from "../utils/constants.js";
15
+ import { useControlledState as K } from "../hooks/useControlledState.js";
16
+ import { useCls as a, useAntdCssVarClassname as N } from "../utils/antdUtils.js";
17
+ import { clsx as l } from "../utils/cn.js";
18
+ const Io = ({
19
+ children: A,
20
+ items: S,
21
+ placement: D,
22
+ openOnHover: E,
23
+ open: c,
24
+ onOpenChange: M,
25
+ defaultOpen: R,
26
+ className: V,
27
+ itemRender: k,
28
28
  classNames: o,
29
- size: k = "auto",
30
- showSearch: t,
31
- searchProps: y = {
29
+ size: C = "auto",
30
+ showSearch: e,
31
+ inCombobox: w,
32
+ searchProps: v = {
32
33
  placeholder: "Search..."
33
34
  },
34
- popupMatchTriggerWidth: W,
35
- beforeList: C,
36
- afterList: D,
37
- keepOpenOnSelect: I,
38
- highlightedItemKey: G,
39
- selectedItemKeys: h,
40
- showCheckbox: M,
41
- getItemKeywords: q
35
+ popupMatchTriggerWidth: y,
36
+ beforeList: p,
37
+ afterList: u,
38
+ keepOpenOnSelect: j,
39
+ highlightedItemKey: m,
40
+ selectedItemKeys: G,
41
+ getItemKeywords: _,
42
+ showCheckbox: I,
43
+ itemLabelRender: z
42
44
  }) => {
43
- const [H, x] = Z({
44
- controlled: T,
45
- default: !1,
46
- name: "open"
47
- }), l = w(
48
- (r) => {
49
- x(r), v == null || v(r);
50
- },
51
- [x, v]
52
- ), d = ro(), L = no(), R = N(B), J = X(null), A = z.reduce((r, n) => (r.length === 0 && n.type !== "header" && r.push({
53
- label: null,
54
- items: []
55
- }), n.type === "header" ? r.push({
56
- label: n.title,
57
- items: []
58
- }) : (n.type === "item" || n.type === "divider") && r.length > 0 && r[r.length - 1].items.push(n), r), []), m = w(
59
- (r, n, p) => r.type === "item" ? /* @__PURE__ */ e(
60
- K,
61
- {
62
- item: r,
63
- inCombobox: t,
64
- selected: h == null ? void 0 : h.includes(r.key),
65
- onSelect: t ? () => {
66
- const i = new MouseEvent("click", {
67
- bubbles: !0,
68
- cancelable: !0
69
- });
70
- r.onClick(i), I || l == null || l(!1);
71
- } : void 0,
72
- itemRender: E,
73
- showCheckbox: M,
74
- getItemKeywords: q
75
- },
76
- n + "-" + p
77
- ) : r.type === "divider" ? /* @__PURE__ */ e(
78
- a,
79
- {
80
- inCombobox: t,
81
- className: o == null ? void 0 : o.separator
82
- },
83
- n + "-" + p
84
- ) : null,
85
- [
86
- o,
87
- E,
88
- l,
89
- t,
90
- I,
91
- h,
92
- M
93
- ]
94
- ), V = w(
95
- (r, n) => /* @__PURE__ */ b(
96
- P.Group,
97
- {
98
- className: u(d("dropdown-menu-group"), o == null ? void 0 : o.group),
99
- children: [
100
- r.label && /* @__PURE__ */ e(
101
- P.GroupLabel,
102
- {
103
- className: u(
104
- d("dropdown-menu-header"),
105
- o == null ? void 0 : o.groupLabel
106
- ),
107
- children: /* @__PURE__ */ e("span", { children: r.label })
108
- }
109
- ),
110
- r.items.map((p, i) => m(p, n, i))
111
- ]
112
- },
113
- "group" + n
114
- ),
115
- [d, o, m]
116
- ), c = w(
117
- (r, n) => r.label ? /* @__PURE__ */ e(
118
- g.Group,
119
- {
120
- className: u(d("dropdown-menu-group"), o == null ? void 0 : o.group),
121
- heading: /* @__PURE__ */ e(
122
- P.GroupLabel,
123
- {
124
- className: u(
125
- d("dropdown-menu-header"),
126
- o == null ? void 0 : o.groupLabel
127
- ),
128
- children: /* @__PURE__ */ e("span", { children: r.label })
129
- }
130
- ),
131
- children: r.items.map((p, i) => m(p, n, i))
132
- },
133
- "group" + n
134
- ) : r.items.map((p, i) => m(p, n, i)),
135
- [d, o, m]
136
- ), Q = w(
137
- () => t ? /* @__PURE__ */ b(
138
- g,
45
+ const B = typeof w == "boolean" ? w : e, [F, P] = K(
46
+ c,
47
+ M,
48
+ R
49
+ ), r = a(), x = N(), O = Y(D), L = U(null), { itemGroups: f, renderGroup: g } = X({
50
+ items: S,
51
+ keepOpenOnSelect: j,
52
+ selectedItemKeys: G,
53
+ showCheckbox: I,
54
+ getItemKeywords: _,
55
+ itemLabelRender: z,
56
+ itemRender: k,
57
+ inCombobox: B,
58
+ onOpenChange: P,
59
+ classNames: {
60
+ item: o == null ? void 0 : o.item,
61
+ itemIcon: o == null ? void 0 : o.itemIcon,
62
+ itemSuffix: o == null ? void 0 : o.itemSuffix,
63
+ group: o == null ? void 0 : o.group,
64
+ groupLabel: o == null ? void 0 : o.groupLabel,
65
+ divider: o == null ? void 0 : o.divider
66
+ }
67
+ }), T = W(
68
+ () => e ? /* @__PURE__ */ i(
69
+ d,
139
70
  {
140
- className: d("dropdown-menu-container"),
141
- disablePointerSelection: t,
142
- defaultValue: G ? String(G) : void 0,
71
+ className: r("dropdown-menu-container"),
72
+ disablePointerSelection: e,
73
+ defaultValue: m ? String(m) : void 0,
143
74
  children: [
144
- /* @__PURE__ */ e(O.Provider, { value: {}, children: /* @__PURE__ */ Y(
145
- g.Input,
75
+ /* @__PURE__ */ n(Q.Provider, { value: {}, children: /* @__PURE__ */ q(
76
+ d.Input,
146
77
  {
147
- ...y,
78
+ ...v,
148
79
  key: "search",
149
- render: /* @__PURE__ */ e(
150
- s,
80
+ render: /* @__PURE__ */ n(
81
+ Z,
151
82
  {
152
83
  allowClear: !0,
153
- className: d("dropdown-menu-search"),
84
+ className: r("dropdown-menu-search"),
154
85
  placeholder: "Search"
155
86
  }
156
87
  )
157
88
  }
158
89
  ) }),
159
- C,
160
- /* @__PURE__ */ e(_, { fadeEdges: !0, children: /* @__PURE__ */ b(g.List, { className: d("dropdown-menu-list"), children: [
161
- /* @__PURE__ */ e(g.Empty, { className: d("dropdown-menu-empty"), children: "No results found." }),
162
- A.map(c)
90
+ p,
91
+ /* @__PURE__ */ n(h, { fadeEdges: !0, children: /* @__PURE__ */ i(d.List, { className: r("dropdown-menu-list"), children: [
92
+ /* @__PURE__ */ n(d.Empty, { className: r("dropdown-menu-empty"), children: "No results found." }),
93
+ f.map(g)
163
94
  ] }) }),
164
- D
95
+ u
165
96
  ]
166
97
  }
167
- ) : /* @__PURE__ */ b("div", { className: d("dropdown-menu-container"), children: [
168
- C,
169
- /* @__PURE__ */ e(_, { fadeEdges: !0, children: A.map(V) }),
170
- D
98
+ ) : /* @__PURE__ */ i("div", { className: r("dropdown-menu-container"), children: [
99
+ p,
100
+ /* @__PURE__ */ n(h, { fadeEdges: !0, children: f.map(g) }),
101
+ u
171
102
  ] }),
172
103
  [
173
- t,
174
- d,
175
- G,
176
- y,
177
- C,
178
- A,
179
- c,
180
- D,
181
- V
104
+ e,
105
+ r,
106
+ m,
107
+ v,
108
+ p,
109
+ f,
110
+ u,
111
+ g
182
112
  ]
183
- ), f = t ? $ : P;
184
- return /* @__PURE__ */ b(
185
- f.Root,
113
+ ), t = e ? J : H;
114
+ return /* @__PURE__ */ i(
115
+ t.Root,
186
116
  {
187
- openOnHover: F,
188
- open: H,
189
- onOpenChange: l,
117
+ openOnHover: E,
118
+ open: F,
119
+ onOpenChange: P,
190
120
  children: [
191
- /* @__PURE__ */ e(
192
- f.Trigger,
121
+ /* @__PURE__ */ n(
122
+ t.Trigger,
193
123
  {
194
- render: j,
195
- ref: J,
196
- className: u(
197
- d("dropdown-menu-trigger"),
124
+ render: A,
125
+ ref: L,
126
+ className: l(
127
+ r("dropdown-menu-trigger"),
198
128
  o == null ? void 0 : o.trigger,
199
- L
129
+ x
200
130
  )
201
131
  }
202
132
  ),
203
- /* @__PURE__ */ e(f.Portal, { children: /* @__PURE__ */ e(
204
- f.Positioner,
133
+ /* @__PURE__ */ n(t.Portal, { children: /* @__PURE__ */ n(
134
+ t.Positioner,
205
135
  {
206
- side: R.side,
207
- align: R.align,
136
+ side: O.side,
137
+ align: O.align,
208
138
  sideOffset: 4,
209
- className: u(d("dropdown-menu-root"), o == null ? void 0 : o.root),
210
- collisionAvoidance: oo,
211
- children: /* @__PURE__ */ e(
212
- f.Popup,
139
+ className: l(r("dropdown-menu-root"), o == null ? void 0 : o.root),
140
+ collisionAvoidance: $,
141
+ children: /* @__PURE__ */ n(
142
+ t.Popup,
213
143
  {
214
- className: u(
215
- d(
144
+ className: l(
145
+ r(
216
146
  "dropdown-menu",
217
- M && "dropdown-menu-show-checkbox",
218
- W && "dropdown-menu-match-trigger-width"
147
+ I && "dropdown-menu-show-checkbox",
148
+ y && "dropdown-menu-match-trigger-width"
219
149
  ),
220
- U,
150
+ V,
221
151
  o == null ? void 0 : o.popup,
222
- L
152
+ x
223
153
  ),
224
154
  style: {
225
- "--size-width": k in S ? S[k] : void 0
155
+ "--size-width": C in b ? b[C] : void 0
226
156
  },
227
- children: Q()
157
+ children: T()
228
158
  }
229
159
  )
230
160
  }
@@ -234,6 +164,6 @@ const Mo = ({
234
164
  );
235
165
  };
236
166
  export {
237
- Mo as DropdownMenu
167
+ Io as DropdownMenu
238
168
  };
239
169
  //# sourceMappingURL=component.js.map