@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/components/Combobox/combobox.js

@@ -0,0 +1,608 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { X, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { nakedCellRowModeAlign, fieldWrapperStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from "../Field/field-wrapper.js";
+import { useFieldContext } from "../Field/field-context.js";
+import { Tag } from "../Tag/tag.js";
+import { ItemSuffix, ItemInlineAction, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
+import { OverflowIndicator } from "../OverflowIndicator/overflow-indicator.js";
+import { SelectMenu } from "../SelectMenu/select-menu.js";
+import { useIsTouchDevice } from "../../hooks/use-is-touch-device.js";
+const GAP = 4;
+const tagPadding = {
+  sm: "px-[calc((var(--field-height-sm)_-_1.25rem)_/_2)]",
+  md: "px-[calc((var(--field-height-md)_-_1.5rem)_/_2)]",
+  lg: "px-[calc((var(--field-height-lg)_-_1.5rem)_/_2)]"
+};
+function useOverflowCount(containerRef, tagEls, overflowEl, totalCount, enabled, gap = GAP, visibleCountOverride) {
+  const [state, setState] = React.useState({ visibleCount: totalCount, ready: !enabled });
+  const lastOverflowWRef = React.useRef(60);
+  React.useEffect(() => {
+    if (!enabled || totalCount === 0) {
+      setState({ visibleCount: totalCount, ready: true });
+      return;
+    }
+    if (visibleCountOverride !== void 0) {
+      for (let i = 0; i < tagEls.current.length; i++) {
+        const el = tagEls.current[i];
+        if (el) el.hidden = i >= visibleCountOverride;
+      }
+      const ofEl = overflowEl.current;
+      if (ofEl) ofEl.hidden = visibleCountOverride >= totalCount;
+      setState({ visibleCount: visibleCountOverride, ready: true });
+      return;
+    }
+    if (totalCount === 1) {
+      for (let i = 0; i < tagEls.current.length; i++) {
+        const el = tagEls.current[i];
+        if (el) el.hidden = i >= 1;
+      }
+      const ofEl = overflowEl.current;
+      if (ofEl) ofEl.hidden = true;
+      setState({ visibleCount: 1, ready: true });
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+    const calc = () => {
+      const cs = getComputedStyle(container);
+      const available = container.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+      container.style.setProperty("--combobox-tag-area-inline-size", `${available}px`);
+      for (const el of tagEls.current) if (el) el.hidden = false;
+      const ofEl = overflowEl.current;
+      if (ofEl) ofEl.hidden = false;
+      const measuredOverflowW = (ofEl == null ? void 0 : ofEl.offsetWidth) || 0;
+      if (measuredOverflowW > 0) lastOverflowWRef.current = measuredOverflowW;
+      const overflowW = lastOverflowWRef.current;
+      let used = 0, count = 0;
+      for (let i = 0; i < totalCount; i++) {
+        const el = tagEls.current[i];
+        if (!el) continue;
+        const tagRoot = el.querySelector("[data-tag-root]");
+        const w = tagRoot ? tagRoot.getBoundingClientRect().width : el.offsetWidth;
+        const next = used + (count > 0 ? gap : 0) + w;
+        const remaining = totalCount - count - 1;
+        if (remaining > 0 && next + gap + overflowW > available) break;
+        if (remaining === 0 && next > available) break;
+        used = next;
+        count++;
+      }
+      for (let i = 0; i < tagEls.current.length; i++) {
+        const el = tagEls.current[i];
+        if (el) el.hidden = i >= count;
+      }
+      if (ofEl) ofEl.hidden = count >= totalCount;
+      const containerRect = container.getBoundingClientRect();
+      while (count > 0) {
+        const lastEl = tagEls.current[count - 1];
+        const tagRoot = lastEl == null ? void 0 : lastEl.querySelector("[data-tag-root]");
+        if (!tagRoot) break;
+        const tagRect = tagRoot.getBoundingClientRect();
+        if (tagRect.right <= containerRect.right + 0.5) break;
+        count--;
+        if (lastEl) lastEl.hidden = true;
+      }
+      if (ofEl) ofEl.hidden = count >= totalCount;
+      setState((prev) => prev.visibleCount === count && prev.ready ? prev : { visibleCount: count, ready: true });
+    };
+    calc();
+    let rafId1 = 0, rafId2 = 0;
+    const scheduleCalc = () => {
+      if (rafId1) {
+        cancelAnimationFrame(rafId1);
+        rafId1 = 0;
+      }
+      if (rafId2) {
+        cancelAnimationFrame(rafId2);
+        rafId2 = 0;
+      }
+      rafId1 = requestAnimationFrame(() => {
+        rafId1 = 0;
+        rafId2 = requestAnimationFrame(() => {
+          rafId2 = 0;
+          calc();
+        });
+      });
+    };
+    scheduleCalc();
+    const containerObs = new ResizeObserver(scheduleCalc);
+    containerObs.observe(container);
+    const itemObs = new ResizeObserver(scheduleCalc);
+    for (const el of tagEls.current) {
+      if (el) itemObs.observe(el);
+    }
+    return () => {
+      if (rafId1) cancelAnimationFrame(rafId1);
+      if (rafId2) cancelAnimationFrame(rafId2);
+      containerObs.disconnect();
+      itemObs.disconnect();
+    };
+  }, [containerRef, totalCount, enabled, gap, visibleCountOverride]);
+  return state;
+}
+function OverflowTagList({ containerRef, items, size, wrap, renderTag, renderHiddenTag, onRemove, trailing, tagWrapperClassName, overflowWrapperClassName, gap = GAP, overflowShape = "tag", visibleCountOverride }) {
+  const tagEls = React.useRef([]);
+  const overflowEl = React.useRef(null);
+  const { visibleCount, ready } = useOverflowCount(containerRef, tagEls, overflowEl, items.length, !wrap, gap, visibleCountOverride);
+  tagEls.current.length = items.length;
+  if (wrap) return /* @__PURE__ */ jsxs(Fragment, { children: [
+    items.map((item, i) => renderTag(item, i)),
+    trailing
+  ] });
+  const overflow = items.length - visibleCount;
+  const hiddenItems = items.slice(visibleCount);
+  return /* @__PURE__ */ jsxs("span", { className: "contents", children: [
+    items.map((item, i) => (
+      // 2026-05-14 I5 fix(per codex M31 verdict + user 抓「avatar stack 堆疊方向不一致」):
+      // 加 z-index per-index — 前 item z 高(對齊 MultiPersonDisplay zIndex: visible.length - i
+      // canonical + MUI AvatarGroup surplus pattern)。display + edit stack 堆疊方向統一。
+      /* @__PURE__ */ jsx("div", { ref: (el) => {
+        tagEls.current[i] = el;
+      }, className: cn("shrink-0 max-w-full", tagWrapperClassName), style: { zIndex: items.length - i }, children: renderTag(item, i) }, item.value)
+    )),
+    /* @__PURE__ */ jsx("div", { ref: overflowEl, className: cn("shrink-0", overflowWrapperClassName), children: /* @__PURE__ */ jsx(OverflowIndicator, { count: overflow, shape: overflowShape, size, children: hiddenItems.map((item) => renderHiddenTag ? /* @__PURE__ */ jsx(React.Fragment, { children: renderHiddenTag(item) }, item.value) : /* @__PURE__ */ jsx(Tag, { size: "sm", onDismiss: onRemove ? () => onRemove(item.value) : void 0, children: item.label }, item.value)) }) }),
+    trailing
+  ] });
+}
+function ComboboxTagStack({
+  value,
+  options,
+  tagSize = "md",
+  wrap = false,
+  containerRef: externalRef,
+  disabled = false
+}) {
+  const ownRef = React.useRef(null);
+  if (!value || value.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
+  const items = value.map((v) => {
+    var _a;
+    return { value: v, label: ((_a = options == null ? void 0 : options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
+  });
+  const disabledClass = disabled ? "bg-disabled text-fg-disabled" : void 0;
+  const content = /* @__PURE__ */ jsx(
+    OverflowTagList,
+    {
+      containerRef: externalRef ?? ownRef,
+      items,
+      size: tagSize,
+      wrap,
+      renderTag: (item) => /* @__PURE__ */ jsx(Tag, { size: tagSize, className: cn("shrink-0", disabledClass), children: item.label })
+    }
+  );
+  if (externalRef) return content;
+  return /* @__PURE__ */ jsx("div", { ref: ownRef, className: cn("flex-1 min-w-0 flex items-center", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"), style: { gap: GAP }, children: content });
+}
+const getIconSize = (size) => ICON_SIZE[size];
+function ReadonlyMultiSelect({
+  mode,
+  variant: variantProp,
+  size,
+  options,
+  value,
+  wrap,
+  className,
+  showDisplayEndIcon = false
+}) {
+  const resolvedMode = mode ?? "readonly";
+  const variant = variantProp ?? "default";
+  const sz = size ?? "md";
+  const iconSize = sz === "lg" ? 20 : 16;
+  const containerRef = React.useRef(null);
+  const hasTags = ((value == null ? void 0 : value.length) ?? 0) > 0;
+  if (resolvedMode === "display") {
+    if (!showDisplayEndIcon) {
+      if (!hasTags) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(sz), "text-fg-muted", className), children: EMPTY_DISPLAY });
+      return /* @__PURE__ */ jsx(ComboboxTagStack, { value, options, tagSize: sz, wrap });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(fieldWrapperStyles({ mode: "display", variant, size: sz }), hasTags && tagPadding[sz], className),
+        "data-field-mode": "display",
+        children: [
+          hasTags ? /* @__PURE__ */ jsx(ComboboxTagStack, { value, options, tagSize: sz, wrap }) : /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0", "text-fg-muted"), children: EMPTY_DISPLAY }),
+          /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: "shrink-0 text-fg-muted", "aria-hidden": true }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        fieldWrapperStyles({ mode: resolvedMode, variant, size: sz }),
+        hasTags && tagPadding[sz],
+        // 2026-05-18 #6A Round 1 Step 1/4(per user 拍板「決策6選a」+ codex M31 Step 5 verdict cite combobox.tsx:451):
+        // readonly/disabled path 對齊 L293 display wrapper 已 ship 的 overflow-hidden fix。
+        // M10 propagation:原 overflow-visible 讓 readonly tag 越界蓋 indicator,跟 display 不對稱。
+        wrap ? "flex-wrap py-1" : "overflow-hidden",
+        className
+      ),
+      style: { gap: GAP, ...wrap ? { height: "auto" } : void 0 },
+      "data-field-mode": resolvedMode,
+      children: hasTags ? /* @__PURE__ */ jsx(
+        ComboboxTagStack,
+        {
+          value,
+          options,
+          tagSize: sz,
+          wrap,
+          containerRef,
+          disabled: resolvedMode === "disabled"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY })
+    }
+  );
+}
+function NativeCombobox({
+  mode = "edit",
+  variant: variantProp,
+  error = false,
+  size = "md",
+  options,
+  value = [],
+  onChange,
+  placeholder,
+  className,
+  disabled,
+  wrap = false,
+  clearable = false,
+  showDisplayEndIcon = false,
+  __triggerRef
+}) {
+  const fieldCtx = useFieldContext();
+  const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+  const resolvedMode = disabled ? "disabled" : mode;
+  const iconSize = getIconSize(size);
+  const showClear = clearable && value.length > 0 && resolvedMode === "edit";
+  const handleRemove = (v) => onChange == null ? void 0 : onChange(value.filter((x) => x !== v));
+  const handleAdd = (v) => {
+    if (!value.includes(v)) onChange == null ? void 0 : onChange([...value, v]);
+  };
+  if (resolvedMode !== "edit") {
+    return /* @__PURE__ */ jsx(ReadonlyMultiSelect, { mode: resolvedMode, variant, size, options, value, wrap, className, showDisplayEndIcon });
+  }
+  const items = value.map((v) => {
+    var _a;
+    return { value: v, label: ((_a = options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
+  });
+  const unselected = options.filter((o) => !value.includes(o.value));
+  const selectRef = React.useRef(null);
+  const tagAreaRef = React.useRef(null);
+  const tagHeight = size === "sm" ? 20 : 24;
+  const selectDropdown = unselected.length > 0 ? /* @__PURE__ */ jsxs(
+    "select",
+    {
+      ref: selectRef,
+      value: "",
+      onChange: (e) => handleAdd(e.target.value),
+      className: cn(
+        "bg-transparent outline-none border-none p-0 text-[inherit] font-[inherit] leading-[inherit] text-fg-muted cursor-pointer appearance-none",
+        value.length > 0 ? "absolute inset-0 w-full h-full opacity-0 z-0 cursor-pointer" : "relative z-10 flex-1 min-w-20"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder ?? "選擇..." }),
+        unselected.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: __triggerRef,
+      className: cn(
+        fieldWrapperStyles({ mode: "edit", variant, size }),
+        value.length > 0 && tagPadding[size],
+        "relative",
+        wrap && "items-start py-1",
+        error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
+        className
+      ),
+      style: { paddingRight: "0.75rem", ...wrap ? { height: "auto" } : void 0 },
+      "data-field-mode": "edit",
+      "data-error": error ? "" : void 0,
+      onClick: (e) => {
+        var _a, _b, _c;
+        if (e.target === e.currentTarget) {
+          (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
+          (_c = selectRef.current) == null ? void 0 : _c.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tagAreaRef,
+            className: cn("flex-1 min-w-0 flex items-center relative", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"),
+            style: { gap: GAP },
+            onClick: (e) => {
+              var _a, _b, _c;
+              if (e.target === e.currentTarget) {
+                (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
+                (_c = selectRef.current) == null ? void 0 : _c.focus();
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              OverflowTagList,
+              {
+                containerRef: tagAreaRef,
+                items,
+                size,
+                wrap,
+                renderTag: (item) => /* @__PURE__ */ jsx(
+                  Tag,
+                  {
+                    size,
+                    className: "shrink-0 relative z-10",
+                    onClick: () => {
+                      var _a, _b, _c;
+                      (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
+                      (_c = selectRef.current) == null ? void 0 : _c.focus();
+                    },
+                    onDismiss: () => handleRemove(item.value),
+                    children: item.label
+                  }
+                ),
+                onRemove: handleRemove,
+                trailing: value.length === 0 ? selectDropdown : void 0
+              }
+            )
+          }
+        ),
+        value.length > 0 && selectDropdown,
+        /* @__PURE__ */ jsxs(
+          ItemSuffix,
+          {
+            className: cn("relative z-10 pointer-events-none", wrap && "self-start"),
+            style: wrap ? { height: tagHeight } : void 0,
+            children: [
+              showClear && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  size: size ?? "md",
+                  action: { icon: X, label: "清除全部", onClick: () => onChange == null ? void 0 : onChange([]) }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: "shrink-0 text-fg-muted pointer-events-none", "aria-hidden": true })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CustomCombobox({
+  mode = "edit",
+  variant: variantProp,
+  error: errorProp = false,
+  size = "md",
+  options,
+  value = [],
+  onChange,
+  placeholder,
+  className,
+  disabled: disabledProp,
+  wrap = false,
+  clearable = false,
+  searchable = false,
+  loading,
+  searchIn = "menu",
+  searchPlaceholder = "搜尋…",
+  // i18n-allow: DS default
+  searchAriaLabel = "搜尋選項",
+  // i18n-allow: DS default
+  emptyPlaceholder = "選擇…",
+  // i18n-allow: DS default
+  defaultOpen = false,
+  onOpenChange,
+  __triggerRef,
+  tagRenderer,
+  renderHiddenTag,
+  tagWrapperClassName,
+  overflowWrapperClassName,
+  tagAreaGapPx,
+  visibleCountOverride,
+  tagAreaPaddingLeftPx,
+  overflowShape,
+  showDisplayEndIcon = false,
+  "aria-label": ariaLabel
+}) {
+  const tagAreaGap = tagAreaGapPx ?? GAP;
+  const fieldCtx = useFieldContext();
+  const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+  const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
+  const resolvedMode = disabled ? "disabled" : mode;
+  const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+  const iconSize = getIconSize(size);
+  const showClear = clearable && value.length > 0 && resolvedMode === "edit";
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [search, setSearch] = React.useState("");
+  const inputRef = React.useRef(null);
+  const listboxId = React.useId();
+  React.useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+  if (resolvedMode !== "edit") {
+    return /* @__PURE__ */ jsx(ReadonlyMultiSelect, { mode: resolvedMode, variant, size, options, value, wrap, className, showDisplayEndIcon });
+  }
+  const items = React.useMemo(
+    () => value.map((v) => {
+      var _a;
+      return { value: v, label: ((_a = options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
+    }),
+    [value, options]
+  );
+  const tagAreaRef = React.useRef(null);
+  const tagHeight = size === "sm" ? 20 : 24;
+  const handleRemove = (v) => onChange == null ? void 0 : onChange(value.filter((x) => x !== v));
+  const filteredOptions = React.useMemo(
+    () => searchable && searchIn === "trigger" && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options,
+    [searchable, searchIn, search, options]
+  );
+  const menuOptions = React.useMemo(
+    () => filteredOptions.map((opt) => ({
+      value: opt.value,
+      label: opt.label,
+      icon: opt.icon,
+      avatar: opt.avatar,
+      description: opt.description,
+      disabled: opt.disabled,
+      group: opt.group
+    })),
+    [filteredOptions]
+  );
+  const chevronEl = /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: cn("shrink-0 text-fg-muted transition-transform", open && "rotate-180"), "aria-hidden": true });
+  const trigger = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: __triggerRef,
+      id: fieldCtx == null ? void 0 : fieldCtx.id,
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": listboxId,
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "aria-invalid": error || void 0,
+      "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+      "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
+      "aria-errormessage": error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0,
+      className: cn(
+        fieldWrapperStyles({ mode: "edit", variant, size }),
+        value.length > 0 && tagPadding[size],
+        "relative cursor-pointer",
+        wrap && "items-start py-1",
+        // 2026-05-06 v13.3 SSOT retire:per-control `open && 'border-primary'` 移除。Field default
+        // 統一處理 — open=灰深(data-state)/ focus=藍(focus-within !important)。改一處全 control 跟動。
+        error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
+        className
+      ),
+      style: { paddingRight: "0.75rem", ...wrap ? { height: "auto" } : void 0 },
+      "data-field-mode": "edit",
+      "data-error": error ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: tagAreaRef, className: cn("flex-1 min-w-0 flex items-center relative", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"), style: { gap: tagAreaGap, paddingLeft: tagAreaPaddingLeftPx }, children: value.length > 0 ? /* @__PURE__ */ jsx(
+          OverflowTagList,
+          {
+            containerRef: tagAreaRef,
+            items,
+            size,
+            wrap,
+            tagWrapperClassName,
+            overflowWrapperClassName,
+            gap: tagAreaGap,
+            overflowShape,
+            visibleCountOverride,
+            renderTag: (item) => tagRenderer ? tagRenderer(item, () => handleRemove(item.value)) : /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size,
+                className: "shrink-0 relative z-10",
+                onDismiss: () => handleRemove(item.value),
+                children: item.label
+              }
+            ),
+            renderHiddenTag,
+            onRemove: handleRemove,
+            trailing: searchable && searchIn === "trigger" ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                placeholder: items.length === 0 ? placeholder : "",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpen(true);
+                },
+                "aria-label": searchAriaLabel,
+                className: "flex-1 min-w-[60px] bg-transparent outline-none text-body leading-compact relative z-10"
+              }
+            ) : void 0
+          }
+        ) : (
+          /* 2026-05-12 Stream C Issue 3 fix(codex Q3 Cluster C):placeholder span 必 flex-1 min-w-0
+             truncate,narrow container 時單行省略(對齊 Combobox text-tag truncate canonical)。
+             原 hardcode wraps in narrow trigger → user 抓「placeholder 文字 wrap multi-line」。 */
+          /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-fg-muted", children: placeholder ?? emptyPlaceholder })
+        ) }),
+        /* @__PURE__ */ jsxs(
+          ItemSuffix,
+          {
+            className: cn("relative z-10 pointer-events-none", wrap && "self-start"),
+            style: wrap ? { height: tagHeight } : void 0,
+            children: [
+              showClear && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
+                ItemInlineAction,
+                {
+                  size: size ?? "md",
+                  action: {
+                    icon: X,
+                    label: "清除全部",
+                    // i18n-allow: DS default inline-action label
+                    onClick: (e) => {
+                      e == null ? void 0 : e.stopPropagation();
+                      onChange == null ? void 0 : onChange([]);
+                    }
+                  }
+                }
+              ) }),
+              chevronEl
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    SelectMenu,
+    {
+      loading,
+      options: menuOptions,
+      value,
+      onValueChange: onChange,
+      multiple: true,
+      searchable: searchable && searchIn === "menu",
+      searchPlaceholder,
+      size,
+      open,
+      onOpenChange: (o) => {
+        setOpen(o);
+        onOpenChange == null ? void 0 : onOpenChange(o);
+      },
+      onOpenAutoFocus: searchIn === "trigger" ? (e) => {
+        var _a;
+        e.preventDefault();
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      } : void 0,
+      contentId: listboxId,
+      children: trigger
+    }
+  );
+}
+const Combobox = React.forwardRef(
+  (props, ref) => {
+    const isMobile = useIsTouchDevice();
+    if (isMobile) return /* @__PURE__ */ jsx(NativeCombobox, { ...props, __triggerRef: ref });
+    return /* @__PURE__ */ jsx(CustomCombobox, { ...props, __triggerRef: ref });
+  }
+);
+Combobox.displayName = "Combobox";
+const comboboxMeta = {
+  component: "Combobox",
+  family: 4,
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-disabled", "bg-transparent"],
+    fg: ["text-fg-disabled", "text-fg-muted"],
+    ring: []
+  }
+};
+export {
+  Combobox,
+  comboboxMeta
+};
+//# sourceMappingURL=combobox.js.map