@bioturing/components 0.30.0 → 0.31.0

package/dist/components/combobox/component.js.map

@@ -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":"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"}
+{"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, reactNodeToString, 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   * Function to extract keywords from the item for search filtering\n   * @default (option) => [String(option.key), reactNodeToString(option.label)]\n   */\n  getOptionKeywords?: (\n    option: DropdownMenuItemType & { type: \"item\" }\n  ) => string[];\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    getOptionKeywords = (option: DropdownMenuItemType & { type: \"item\" }) => [\n      String(option.key),\n      reactNodeToString(option.label),\n    ],\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  // 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        getItemKeywords={getOptionKeywords}\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","getOptionKeywords","option","reactNodeToString","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","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":"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"}

package/dist/components/command-palette/component.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs as s, Fragment as S, jsx as r } from "react/jsx-runtime";
+import { useEffect as E, useCallback as L } from "react";
+import { Command as m } from "../cmdk/index.js";
+import { useDropdownMenu as D } from "../dropdown-menu/useDropdownMenu.js";
+import './style.css';/* empty css          */
+import { WithAntdTokens as b } from "../utils/WithAntdTokens.js";
+import { useCls as x } from "../utils/antdUtils.js";
+import { useControlledState as A } from "../hooks/useControlledState.js";
+import { ScrollArea as j } from "../scroll-area/component.js";
+const G = [
+  { key: "k", metaKey: !0 },
+  { key: "k", ctrlKey: !0 }
+];
+function I(t, e) {
+  return t.key.toLowerCase() === e.key.toLowerCase() && !!t.metaKey == !!e.metaKey && !!t.ctrlKey == !!e.ctrlKey && !!t.altKey == !!e.altKey && !!t.shiftKey == !!e.shiftKey;
+}
+const H = ({
+  open: t,
+  onOpenChange: e,
+  defaultOpen: h,
+  items: k = [],
+  shortcuts: i = G,
+  placeholder: c = "Type a command or search...",
+  emptyText: l = "No results found.",
+  label: C = "Command Palette",
+  className: K,
+  classNames: o
+}) => {
+  const n = x(), [a, d] = A(
+    t,
+    e,
+    h
+  );
+  E(() => {
+    const y = (f) => {
+      i.find(
+        (g) => I(f, g)
+      ) && (f.preventDefault(), d(!a));
+    };
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+  }, [i, a, d]);
+  const { renderGroup: u, itemGroups: p } = D({
+    items: k,
+    inCombobox: !0,
+    onOpenChange: e
+  }), w = L(
+    () => /* @__PURE__ */ s(S, { children: [
+      /* @__PURE__ */ r(m.Input, { placeholder: c }),
+      /* @__PURE__ */ r(j, { fadeEdges: !0, children: /* @__PURE__ */ s(
+        m.List,
+        {
+          className: n("dropdown-menu-list", "command-palette-list"),
+          children: [
+            /* @__PURE__ */ r(m.Empty, { className: n("dropdown-menu-empty"), children: l }),
+            p.map(u)
+          ]
+        }
+      ) })
+    ] }),
+    [n, l, p, c, u]
+  );
+  return /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+    m.Dialog,
+    {
+      open: a,
+      onOpenChange: d,
+      label: C,
+      overlayClassName: n("command-palette-overlay", o == null ? void 0 : o.mask),
+      contentClassName: n("command-palette-content", o == null ? void 0 : o.content),
+      className: n("command-palette", K),
+      children: w()
+    }
+  ) });
+};
+export {
+  H as CommandPalette
+};
+//# sourceMappingURL=component.js.map

package/dist/components/command-palette/component.js.map

@@ -0,0 +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;"}

package/dist/components/command-palette/style.css

@@ -0,0 +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}}}

package/dist/components/dropdown-menu/component.js

@@ -1,230 +1,158 @@
 "use client";
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { useCallback as w, useRef as X, createElement as Y } from "react";
-import { Menu as P } from "@base-ui-components/react/menu";
-import { useControlled as Z } from "@base-ui-components/utils/useControlled";
-import { Popover as $ } from "@base-ui-components/react/popover";
-import { Command as g } from "../cmdk/index.js";
-import { FormItemInputContext as O } from "antd/es/form/context";
-import { PopupPanelSize as S } from "../popup-panel/constants.js";
-import { DropdownMenuItem as K } from "./item.js";
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useRef as T, useCallback as U, createElement as W } from "react";
+import { Menu as q } from "@base-ui-components/react/menu";
+import { Popover as H } from "@base-ui-components/react/popover";
+import { Command as d } from "../cmdk/index.js";
+import { FormItemInputContext as J } from "antd/es/form/context";
+import { PopupPanelSize as b } from "../popup-panel/constants.js";
+import { useDropdownMenu as Q } from "./useDropdownMenu.js";
 import './style.css';/* empty css          */
-import { DropdownMenuDivider as a } from "./divider.js";
-import { parseAntdPlacement as N } from "../utils/placement.js";
-import { Input as s } from "../input/component.js";
-import { ScrollArea as _ } from "../scroll-area/component.js";
-import { DROPDOWN_COLLISION_AVOIDANCE as oo } from "../utils/constants.js";
-import { useCls as ro, useAntdCssVarClassname as no } from "../utils/antdUtils.js";
-import { clsx as u } from "../utils/cn.js";
-const Mo = ({
-  children: j,
-  items: z,
-  placement: B,
-  openOnHover: F,
-  open: T,
-  onOpenChange: v,
-  className: U,
-  itemRender: E,
+import { parseAntdPlacement as X } from "../utils/placement.js";
+import { Input as Y } from "../input/component.js";
+import { ScrollArea as h } from "../scroll-area/component.js";
+import { DROPDOWN_COLLISION_AVOIDANCE as Z } from "../utils/constants.js";
+import { useControlledState as $ } from "../hooks/useControlledState.js";
+import { useCls as K, useAntdCssVarClassname as a } from "../utils/antdUtils.js";
+import { clsx as l } from "../utils/cn.js";
+const vo = ({
+  children: A,
+  items: S,
+  placement: D,
+  openOnHover: E,
+  open: c,
+  onOpenChange: M,
+  defaultOpen: R,
+  className: V,
+  itemRender: k,
   classNames: o,
-  size: k = "auto",
-  showSearch: t,
-  searchProps: y = {
+  size: C = "auto",
+  showSearch: e,
+  inCombobox: w,
+  searchProps: v = {
     placeholder: "Search..."
   },
-  popupMatchTriggerWidth: W,
-  beforeList: C,
-  afterList: D,
-  keepOpenOnSelect: I,
-  highlightedItemKey: G,
-  selectedItemKeys: h,
-  showCheckbox: M,
-  getItemKeywords: q
+  popupMatchTriggerWidth: y,
+  beforeList: p,
+  afterList: u,
+  keepOpenOnSelect: j,
+  highlightedItemKey: m,
+  selectedItemKeys: G,
+  getItemKeywords: _,
+  showCheckbox: I
 }) => {
-  const [H, x] = Z({
-    controlled: T,
-    default: !1,
-    name: "open"
-  }), l = w(
-    (r) => {
-      x(r), v == null || v(r);
-    },
-    [x, v]
-  ), d = ro(), L = no(), R = N(B), J = X(null), A = z.reduce((r, n) => (r.length === 0 && n.type !== "header" && r.push({
-    label: null,
-    items: []
-  }), n.type === "header" ? r.push({
-    label: n.title,
-    items: []
-  }) : (n.type === "item" || n.type === "divider") && r.length > 0 && r[r.length - 1].items.push(n), r), []), m = w(
-    (r, n, p) => r.type === "item" ? /* @__PURE__ */ e(
-      K,
-      {
-        item: r,
-        inCombobox: t,
-        selected: h == null ? void 0 : h.includes(r.key),
-        onSelect: t ? () => {
-          const i = new MouseEvent("click", {
-            bubbles: !0,
-            cancelable: !0
-          });
-          r.onClick(i), I || l == null || l(!1);
-        } : void 0,
-        itemRender: E,
-        showCheckbox: M,
-        getItemKeywords: q
-      },
-      n + "-" + p
-    ) : r.type === "divider" ? /* @__PURE__ */ e(
-      a,
-      {
-        inCombobox: t,
-        className: o == null ? void 0 : o.separator
-      },
-      n + "-" + p
-    ) : null,
-    [
-      o,
-      E,
-      l,
-      t,
-      I,
-      h,
-      M
-    ]
-  ), V = w(
-    (r, n) => /* @__PURE__ */ b(
-      P.Group,
-      {
-        className: u(d("dropdown-menu-group"), o == null ? void 0 : o.group),
-        children: [
-          r.label && /* @__PURE__ */ e(
-            P.GroupLabel,
-            {
-              className: u(
-                d("dropdown-menu-header"),
-                o == null ? void 0 : o.groupLabel
-              ),
-              children: /* @__PURE__ */ e("span", { children: r.label })
-            }
-          ),
-          r.items.map((p, i) => m(p, n, i))
-        ]
-      },
-      "group" + n
-    ),
-    [d, o, m]
-  ), c = w(
-    (r, n) => r.label ? /* @__PURE__ */ e(
-      g.Group,
-      {
-        className: u(d("dropdown-menu-group"), o == null ? void 0 : o.group),
-        heading: /* @__PURE__ */ e(
-          P.GroupLabel,
-          {
-            className: u(
-              d("dropdown-menu-header"),
-              o == null ? void 0 : o.groupLabel
-            ),
-            children: /* @__PURE__ */ e("span", { children: r.label })
-          }
-        ),
-        children: r.items.map((p, i) => m(p, n, i))
-      },
-      "group" + n
-    ) : r.items.map((p, i) => m(p, n, i)),
-    [d, o, m]
-  ), Q = w(
-    () => t ? /* @__PURE__ */ b(
-      g,
+  const z = typeof w == "boolean" ? w : e, [B, P] = $(
+    c,
+    M,
+    R
+  ), r = K(), x = a(), O = X(D), F = T(null), { itemGroups: f, renderGroup: g } = Q({
+    items: S,
+    keepOpenOnSelect: j,
+    selectedItemKeys: G,
+    showCheckbox: I,
+    getItemKeywords: _,
+    itemRender: k,
+    inCombobox: z,
+    onOpenChange: P,
+    classNames: {
+      item: o == null ? void 0 : o.item,
+      itemIcon: o == null ? void 0 : o.itemIcon,
+      itemSuffix: o == null ? void 0 : o.itemSuffix,
+      group: o == null ? void 0 : o.group,
+      groupLabel: o == null ? void 0 : o.groupLabel,
+      divider: o == null ? void 0 : o.divider
+    }
+  }), L = U(
+    () => e ? /* @__PURE__ */ i(
+      d,
       {
-        className: d("dropdown-menu-container"),
-        disablePointerSelection: t,
-        defaultValue: G ? String(G) : void 0,
+        className: r("dropdown-menu-container"),
+        disablePointerSelection: e,
+        defaultValue: m ? String(m) : void 0,
         children: [
-          /* @__PURE__ */ e(O.Provider, { value: {}, children: /* @__PURE__ */ Y(
-            g.Input,
+          /* @__PURE__ */ n(J.Provider, { value: {}, children: /* @__PURE__ */ W(
+            d.Input,
             {
-              ...y,
+              ...v,
               key: "search",
-              render: /* @__PURE__ */ e(
-                s,
+              render: /* @__PURE__ */ n(
+                Y,
                 {
                   allowClear: !0,
-                  className: d("dropdown-menu-search"),
+                  className: r("dropdown-menu-search"),
                   placeholder: "Search"
                 }
               )
             }
           ) }),
-          C,
-          /* @__PURE__ */ e(_, { fadeEdges: !0, children: /* @__PURE__ */ b(g.List, { className: d("dropdown-menu-list"), children: [
-            /* @__PURE__ */ e(g.Empty, { className: d("dropdown-menu-empty"), children: "No results found." }),
-            A.map(c)
+          p,
+          /* @__PURE__ */ n(h, { fadeEdges: !0, children: /* @__PURE__ */ i(d.List, { className: r("dropdown-menu-list"), children: [
+            /* @__PURE__ */ n(d.Empty, { className: r("dropdown-menu-empty"), children: "No results found." }),
+            f.map(g)
           ] }) }),
-          D
+          u
         ]
       }
-    ) : /* @__PURE__ */ b("div", { className: d("dropdown-menu-container"), children: [
-      C,
-      /* @__PURE__ */ e(_, { fadeEdges: !0, children: A.map(V) }),
-      D
+    ) : /* @__PURE__ */ i("div", { className: r("dropdown-menu-container"), children: [
+      p,
+      /* @__PURE__ */ n(h, { fadeEdges: !0, children: f.map(g) }),
+      u
     ] }),
     [
-      t,
-      d,
-      G,
-      y,
-      C,
-      A,
-      c,
-      D,
-      V
+      e,
+      r,
+      m,
+      v,
+      p,
+      f,
+      u,
+      g
     ]
-  ), f = t ? $ : P;
-  return /* @__PURE__ */ b(
-    f.Root,
+  ), t = e ? H : q;
+  return /* @__PURE__ */ i(
+    t.Root,
     {
-      openOnHover: F,
-      open: H,
-      onOpenChange: l,
+      openOnHover: E,
+      open: B,
+      onOpenChange: P,
       children: [
-        /* @__PURE__ */ e(
-          f.Trigger,
+        /* @__PURE__ */ n(
+          t.Trigger,
           {
-            render: j,
-            ref: J,
-            className: u(
-              d("dropdown-menu-trigger"),
+            render: A,
+            ref: F,
+            className: l(
+              r("dropdown-menu-trigger"),
               o == null ? void 0 : o.trigger,
-              L
+              x
             )
           }
         ),
-        /* @__PURE__ */ e(f.Portal, { children: /* @__PURE__ */ e(
-          f.Positioner,
+        /* @__PURE__ */ n(t.Portal, { children: /* @__PURE__ */ n(
+          t.Positioner,
           {
-            side: R.side,
-            align: R.align,
+            side: O.side,
+            align: O.align,
             sideOffset: 4,
-            className: u(d("dropdown-menu-root"), o == null ? void 0 : o.root),
-            collisionAvoidance: oo,
-            children: /* @__PURE__ */ e(
-              f.Popup,
+            className: l(r("dropdown-menu-root"), o == null ? void 0 : o.root),
+            collisionAvoidance: Z,
+            children: /* @__PURE__ */ n(
+              t.Popup,
               {
-                className: u(
-                  d(
+                className: l(
+                  r(
                     "dropdown-menu",
-                    M && "dropdown-menu-show-checkbox",
-                    W && "dropdown-menu-match-trigger-width"
+                    I && "dropdown-menu-show-checkbox",
+                    y && "dropdown-menu-match-trigger-width"
                   ),
-                  U,
+                  V,
                   o == null ? void 0 : o.popup,
-                  L
+                  x
                 ),
                 style: {
-                  "--size-width": k in S ? S[k] : void 0
+                  "--size-width": C in b ? b[C] : void 0
                 },
-                children: Q()
+                children: L()
               }
             )
           }
@@ -234,6 +162,6 @@ const Mo = ({
   );
 };
 export {
-  Mo as DropdownMenu
+  vo as DropdownMenu
 };
 //# sourceMappingURL=component.js.map