@bioturing/components 0.26.2 → 0.28.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/combobox/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport { useControlled } from \"@base-ui-components/utils/useControlled\";\nimport { clsx, useCls } from \"../utils\";\nimport {\n  DropdownMenu,\n  DropdownMenuProps,\n  DropdownMenuItem,\n  type DropdownMenuItemType,\n} from \"../dropdown-menu\";\nimport type { PopoverProps } from \"antd/es/popover\";\nimport { ComboboxTrigger, ComboboxTriggerProps } from \"./trigger\";\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  /** 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?: ComboboxTriggerProps;\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 = false,\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  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 = Array.isArray(value) ? value : value ? [value] : [];\n  const selectedOptions = selectedValues\n    .map((val) => options.find((opt) => opt.value === val))\n    .filter(Boolean);\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        cls(\"combobox\"),\n        className,\n        disabled && \"pointer-events-none opacity-50\"\n      )}\n      {...rest}\n    >\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        <ComboboxTrigger\n          selectedOptions={selectedOptions}\n          placeholder={placeholder}\n          multiple={multiple}\n          disabled={disabled}\n          open={open}\n          size={size}\n          allowClear={allowClear}\n          suffixIcon={suffixIcon}\n          clearIcon={clearIcon}\n          classNames={classNames}\n          onClear={() => handleValueChange(multiple ? [] : undefined)}\n          showSelectionSummary={showSelectionSummary}\n          selectionSummaryRender={selectionSummaryRender}\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","disabled","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","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","clsx","DropdownMenu","ComboboxTrigger","MainCombobox","forwardRef","Combobox"],"mappings":"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"}

package/dist/components/combobox/style.css

@@ -0,0 +1 @@
+@layer components{.ds-combobox{position:relative;display:inline-block;cursor:pointer;width:100%}.ds-combobox:focus,.ds-combobox:focus-visible{outline:none}.ds-combobox-selector{position:relative;background-color:var( --ds-select-selector-bg, var(--ds-color-bg-container) );border:1px solid var(--ds-color-border);border-radius:6px;transition:all .2s;width:100%;height:auto;padding:var(--ds-select-option-padding, 6px 12px);display:flex;flex-wrap:wrap;align-items:center;gap:4}.ds-combobox:hover .ds-combobox-selector{border-color:var( --ds-select-hover-border-color, var(--ds-color-primary-hover) )}.ds-combobox:focus-visible .ds-combobox-selector{outline:var(--ds-line-width-focus) solid var(--ds-color-primary-border);outline-offset:1px;transition:outline-offset 0s,outline 0s}.ds-combobox-open .ds-combobox-selector{border-color:var(--ds-select-active-border-color, var(--ds-color-primary));box-shadow:0 0 0 2px var(--ds-select-active-outline-color, var(--ds-color-primary-bg))}.ds-combobox-disabled .ds-combobox-selector{background-color:var( --ds-select-multiple-selector-bg-disabled, var(--ds-color-bg-container-disabled) );border-color:var(--ds-color-border);cursor:not-allowed;color:var(--ds-color-text-disabled)}.ds-combobox-selection-wrap{display:flex;flex-wrap:wrap;align-items:center;flex:1;width:100%;position:relative}.ds-combobox-selection-search{position:relative;flex:1;min-width:0}.ds-combobox-selection-search-input{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;background:transparent;border:none;outline:none;cursor:pointer}.ds-combobox-selection-placeholder{flex:1;color:var(--ds-color-text-placeholder);pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-combobox-selection-text{flex:1;color:var(--ds-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-combobox-arrow{display:flex;align-items:center;color:var(--ds-color-text-quaternary);font-size:12px;width:12px;height:12px;pointer-events:none}.ds-combobox-arrow-icon{display:flex;align-items:center;justify-content:center}.ds-combobox-selection-suffix{height:12px;width:12px;position:relative;font-size:12px}.ds-combobox-selection-suffix .ds-combobox-arrow{position:absolute;top:0;left:0}.ds-combobox-selection-suffix .ds-combobox-clear{position:absolute;top:0;right:0;color:var(--ds-color-text-tertiary);transition:opacity .3s ease}:is(.ds-combobox-selection-suffix .ds-combobox-clear):hover{color:var(--ds-color-icon-hover)}.ds-combobox:hover .ds-combobox-clear{opacity:1}.ds-combobox-clear:hover{color:var(--ds-color-text-secondary)}.ds-combobox-small .ds-combobox-selector{padding:1px 8px;min-height:24px;line-height:20px}.ds-combobox-small .ds-combobox-arrow,.ds-combobox-small .ds-combobox-clear{right:7px}.ds-combobox-middle .ds-combobox-selector{padding:5px 12px;min-height:32px;line-height:20px}.ds-combobox-large .ds-combobox-selector{padding:9px 12px;min-height:40px;line-height:20px}.ds-combobox-open .ds-combobox-arrow-icon{transform:rotate(180deg)}.ds-combobox-option-wrapper{display:flex;align-items:center;gap:8px}.ds-combobox-option-wrapper .ds-checkbox{pointer-events:none}-selected.ds-combobox-option-wrapper{font-weight:700;background-color:var(--ds-select-option-active-bg)}.ds-combobox-option-wrapper .ds-combobox-option-text{flex:1}.ds-combobox-option-wrapper .ds-combobox-option-icon{flex-shrink:0;flex-grow:0}}

package/dist/components/combobox/trigger.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { XCircleIcon as j, CaretDownIcon as k } from "@bioturing/assets";
+import { useCls as I } from "../utils/antdUtils.js";
+import { clsx as v } from "../utils/cn.js";
+const y = $(
+  ({
+    selectedOptions: c,
+    placeholder: x = "Select...",
+    multiple: n = !1,
+    disabled: b = !1,
+    open: s = !1,
+    size: h = "middle",
+    allowClear: m = !1,
+    suffixIcon: d,
+    clearIcon: g,
+    classNames: r,
+    className: f,
+    onClear: l,
+    showSelectionSummary: p = !1,
+    selectionSummaryRender: i,
+    ...u
+  }, N) => {
+    const o = I(), w = () => {
+      if (c.length === 0)
+        return /* @__PURE__ */ e("span", { className: o("combobox-selection-placeholder"), children: x });
+      if (n) {
+        if (p) {
+          const a = c.map((T) => T.value);
+          return /* @__PURE__ */ e("span", { className: o("combobox-selection-summary"), children: i ? i(a) : `${c.length} items selected` });
+        }
+        return /* @__PURE__ */ e("span", { className: o("combobox-selection-text"), children: c.length === 1 ? c[0].label : `${c.length} items selected` });
+      } else
+        return /* @__PURE__ */ e("span", { className: o("combobox-selection-text"), children: c[0].label });
+    }, C = (a) => {
+      a.stopPropagation(), l == null || l();
+    };
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        ref: N,
+        className: v(
+          o("combobox"),
+          o(`combobox-${h}`),
+          n && o("combobox-multiple"),
+          b && o("combobox-disabled"),
+          s && o("combobox-open"),
+          o("combobox-trigger"),
+          r == null ? void 0 : r.trigger,
+          f
+        ),
+        disabled: b,
+        role: "combobox",
+        "aria-expanded": s,
+        ...u,
+        children: /* @__PURE__ */ t("span", { className: o("combobox-selector"), children: [
+          /* @__PURE__ */ e("span", { className: o("combobox-selection-wrap"), children: w() }),
+          /* @__PURE__ */ t("span", { className: o("combobox-selection-suffix"), children: [
+            m && c.length > 0 && /* @__PURE__ */ e(
+              "span",
+              {
+                className: o("combobox-clear"),
+                unselectable: "on",
+                "aria-hidden": "true",
+                onClick: C,
+                children: g || /* @__PURE__ */ e("span", { className: o("combobox-clear-icon"), children: /* @__PURE__ */ e(j, { weight: "fill" }) })
+              }
+            ),
+            (!m || c.length === 0) && /* @__PURE__ */ e(
+              "span",
+              {
+                className: o("combobox-arrow"),
+                unselectable: "on",
+                "aria-hidden": "true",
+                children: d || /* @__PURE__ */ e("span", { className: o("combobox-arrow-icon"), children: /* @__PURE__ */ e(k, { weight: "bold" }) })
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+y.displayName = "ComboboxTrigger";
+export {
+  y as ComboboxTrigger
+};
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","sources":["../../../src/components/combobox/trigger.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { CaretDownIcon, XCircleIcon, XIcon } from \"@bioturing/assets\";\nimport { clsx, useCls } from \"../utils\";\nimport type { ComboboxOption } from \"./component\";\n\nexport interface ComboboxTriggerProps\n  extends React.ComponentPropsWithoutRef<\"button\"> {\n  /** Selected options */\n  selectedOptions: ComboboxOption[];\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether multiple selection is enabled */\n  multiple?: boolean;\n  /** Whether the component is disabled */\n  disabled?: boolean;\n  /** Whether the dropdown is open */\n  open?: boolean;\n  /** Size variant */\n  size?: \"small\" | \"middle\" | \"large\";\n  /** Whether to show clear button */\n  allowClear?: boolean;\n  /** Custom suffix icon */\n  suffixIcon?: React.ReactNode;\n  /** Custom clear icon */\n  clearIcon?: React.ReactNode;\n  /** Custom class names */\n  classNames?: {\n    trigger?: string;\n  };\n  /** Clear handler */\n  onClear?: () => void;\n  /** Show selection summary instead of individual tags when multiple */\n  showSelectionSummary?: boolean;\n  /** Render function for the selection summary in multiple case */\n  selectionSummaryRender?: (selectedValues: Array<string | number>) => React.ReactNode;\n}\n\nexport const ComboboxTrigger = forwardRef<\n  HTMLButtonElement,\n  ComboboxTriggerProps\n>(\n  (\n    {\n      selectedOptions,\n      placeholder = \"Select...\",\n      multiple = false,\n      disabled = false,\n      open = false,\n      size = \"middle\",\n      allowClear = false,\n      suffixIcon,\n      clearIcon,\n      classNames,\n      className,\n      onClear,\n      showSelectionSummary = false,\n      selectionSummaryRender,\n      ...rest\n    },\n    ref\n  ) => {\n    const cls = useCls();\n\n    const renderTriggerContent = () => {\n      if (selectedOptions.length === 0) {\n        return (\n          <span className={cls(\"combobox-selection-placeholder\")}>\n            {placeholder}\n          </span>\n        );\n      }\n\n      if (multiple) {\n        // Show selection summary if enabled\n        if (showSelectionSummary) {\n          const selectedValues = selectedOptions.map(opt => opt.value);\n          return (\n            <span className={cls(\"combobox-selection-summary\")}>\n              {selectionSummaryRender\n                ? selectionSummaryRender(selectedValues)\n                : `${selectedOptions.length} items selected`}\n            </span>\n          );\n        }\n        \n        // Default: Simple text display for multiple selections - no tags\n        return (\n          <span className={cls(\"combobox-selection-text\")}>\n            {selectedOptions.length === 1\n              ? selectedOptions[0].label\n              : `${selectedOptions.length} items selected`}\n          </span>\n        );\n      } else {\n        return (\n          <span className={cls(\"combobox-selection-text\")}>\n            {selectedOptions[0].label}\n          </span>\n        );\n      }\n    };\n\n    const handleClearClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onClear?.();\n    };\n\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          cls(\"combobox\"),\n          cls(`combobox-${size}`),\n          multiple && cls(\"combobox-multiple\"),\n          disabled && cls(\"combobox-disabled\"),\n          open && cls(\"combobox-open\"),\n          cls(\"combobox-trigger\"),\n          classNames?.trigger,\n          className\n        )}\n        disabled={disabled}\n        role=\"combobox\"\n        aria-expanded={open}\n        {...rest}\n      >\n        <span className={cls(\"combobox-selector\")}>\n          <span className={cls(\"combobox-selection-wrap\")}>\n            {renderTriggerContent()}\n          </span>\n          <span className={cls(\"combobox-selection-suffix\")}>\n            {allowClear && selectedOptions.length > 0 && (\n              <span\n                className={cls(\"combobox-clear\")}\n                unselectable=\"on\"\n                aria-hidden=\"true\"\n                onClick={handleClearClick}\n              >\n                {clearIcon || (\n                  <span className={cls(\"combobox-clear-icon\")}>\n                    <XCircleIcon weight=\"fill\" />\n                  </span>\n                )}\n              </span>\n            )}\n            {(!allowClear || selectedOptions.length === 0) && (\n              <span\n                className={cls(\"combobox-arrow\")}\n                unselectable=\"on\"\n                aria-hidden=\"true\"\n              >\n                {suffixIcon || (\n                  <span className={cls(\"combobox-arrow-icon\")}>\n                    <CaretDownIcon weight=\"bold\" />\n                  </span>\n                )}\n              </span>\n            )}\n          </span>\n        </span>\n      </button>\n    );\n  }\n);\n\nComboboxTrigger.displayName = \"ComboboxTrigger\";\n"],"names":["ComboboxTrigger","forwardRef","selectedOptions","placeholder","multiple","disabled","open","size","allowClear","suffixIcon","clearIcon","classNames","className","onClear","showSelectionSummary","selectionSummaryRender","rest","ref","cls","useCls","renderTriggerContent","selectedValues","opt","jsx","handleClearClick","e","clsx","jsxs","XCircleIcon","CaretDownIcon"],"mappings":"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"}

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

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