@alfadocs/ui-kit 1.47.0 → 1.48.0

package/dist/_chunks/combobox-B_rLwmSv.js

@@ -0,0 +1,578 @@
+import { jsx as s, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as We, useContext as Xe, useMemo as G, useState as L, useRef as p, useEffect as E, useCallback as Je } from "react";
+import * as F from "@radix-ui/react-popover";
+import { R as Ye, _ as g, P as Ze } from "./index-4xgbg-sn.js";
+import { c as V } from "./index-D2ZczOXr.js";
+import { useTranslation as Qe } from "react-i18next";
+import { u as et, F as tt } from "./form-field-context-B3APVHKx.js";
+import { c as st } from "./compose-refs-C0k0tdqF.js";
+import { n as W } from "./normalize-diacritics-BNGbFNlJ.js";
+import { g as ot } from "./group-options-BvKhQ3xb.js";
+import { b as rt } from "./menu-row-BAr8bx1I.js";
+import { u as nt } from "./use-controllable-state-BiY4xTzM.js";
+import { u as X } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { I as it, a as J, d as Y, c as at } from "./input-surface-xyERuLU_.js";
+import { u as lt } from "./registry-DvAUVLHh.js";
+import { X as dt } from "./x-B5YnXwCz.js";
+import { C as ct } from "./check-DrFSN__t.js";
+const ut = {
+  id: "combobox",
+  // Persisted single choice (value state + set_value) → select_single + set_value,
+  // plus type-to-filter and open/close of the option list.
+  capabilities: ["select_single", "set_value", "filter", "open", "close"],
+  state: {
+    value: {
+      type: "string | null",
+      descriptionKey: "ui.agent.combobox.state.value",
+      description: "Currently-selected option value, or null when nothing is selected.",
+      read: (r) => r.getValue()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.combobox.state.query",
+      description: "Current filter query in the combobox input.",
+      read: (r) => r.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.combobox.state.isOpen",
+      description: "True when the option list is visible.",
+      read: (r) => r.getIsOpen()
+    }
+  },
+  actions: {
+    set_value: {
+      // Persists the user's chosen option — reversible via the same UI.
+      safety: "write",
+      argsType: "{ value: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          value: {
+            type: ["string", "null"],
+            description: "Option value to select, or null to clear."
+          }
+        },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.setValue",
+      description: "Set the selected value programmatically.",
+      examples: [{ args: { value: "it" }, note: 'Select the "it" option.' }],
+      invoke: (r, l) => {
+        r.setValue(l.value);
+      }
+    },
+    apply_filter: {
+      // Pure ephemeral filter of the visible options — no persisted change.
+      safety: "read",
+      argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          query: { type: "string", description: "Filter text for the list." }
+        },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.applyFilter",
+      description: "Set the filter query for the option list.",
+      invoke: (r, l) => {
+        r.setQuery(l.query);
+      }
+    },
+    clear_selection: {
+      // Discards the persisted choice — destructive (loses the selection).
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.clearSelection",
+      description: "Clear the current selection.",
+      invoke: (r) => {
+        r.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.open",
+      description: "Open the option list.",
+      invoke: (r) => {
+        r.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.close",
+      description: "Close the option list.",
+      invoke: (r) => {
+        r.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "combobox" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Each option emits its value as data-option-id."
+    }
+  }
+}, ft = V(
+  [
+    "ds:peer ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
+    "ds:outline-none ds:border-0",
+    "ds:disabled:cursor-not-allowed"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-sm)]",
+        md: "ds:text-[length:var(--font-size-base)]",
+        lg: "ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), mt = V(
+  [
+    "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
+    at
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${J.sm} ${Y.sm}`,
+        md: `${J.md} ${Y.md}`,
+        lg: `${J.lg} ${Y.lg}`
+      },
+      tone: it
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "default"
+    }
+  }
+), pt = V(
+  [
+    "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-[var(--radix-popover-trigger-width)]",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:animate-in ds:fade-in ds:zoom-in-95",
+    "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
+    "ds:data-[state=closed]:zoom-out-95",
+    "ds:data-[side=bottom]:slide-in-from-top-2",
+    "ds:data-[side=top]:slide-in-from-bottom-2",
+    "ds:motion-reduce:animate-none"
+  ].join(" ")
+), ue = V(
+  [
+    "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:text-foreground ds:outline-none ds:select-none",
+    rt.selected,
+    "ds:aria-disabled:pointer-events-none ds:aria-disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:min-h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-base)]",
+        lg: "ds:min-h-12 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), bt = [
+  "ds:ps-3 ds:pe-3 ds:py-1.5",
+  "type-eyebrow ds:text-muted-foreground"
+].join(" "), vt = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", ht = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", gt = {
+  sm: "ds:size-3.5",
+  md: "ds:size-4",
+  lg: "ds:size-5"
+};
+function xt({
+  search: r,
+  label: l,
+  iconClass: j,
+  size: H,
+  onSelect: P
+}) {
+  return Ze(($) => $.filtered.count) > 0 ? null : /* @__PURE__ */ I(
+    g.Item,
+    {
+      value: `__combobox-create__${r}`,
+      keywords: [],
+      forceMount: !0,
+      onSelect: () => P(r),
+      className: ue({ size: H }),
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `ds:inline-flex ds:items-center ds:justify-center ${j}`
+          }
+        ),
+        /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: l })
+      ]
+    }
+  );
+}
+const fe = We(
+  function({
+    options: l,
+    value: j,
+    defaultValue: H,
+    onValueChange: P,
+    placeholder: Z,
+    clearable: $ = !1,
+    disabled: me,
+    readOnly: pe,
+    required: be,
+    name: ve,
+    id: q,
+    size: R = "md",
+    tone: he = "default",
+    filter: T,
+    allowCreate: ge = !1,
+    onCreate: O,
+    open: Q,
+    onOpenChange: x,
+    onQueryChange: a,
+    emptyMessage: xe,
+    className: ye,
+    "aria-label": ee,
+    "aria-invalid": Re,
+    "aria-describedby": Se,
+    autoComplete: Ne
+  }, we) {
+    const { t: S } = Qe(), y = et(), N = Xe(tt) !== null, [ke, z] = nt({
+      value: j,
+      defaultValue: H ?? "",
+      onChange: P
+    }), b = ke ?? "", B = G(
+      () => l.find((e) => e.value === b),
+      [l, b]
+    ), c = (B == null ? void 0 : B.label) ?? "", [u, f] = L(c), [Ee, te] = L(!1), _ = Q !== void 0, n = _ ? Q : Ee, w = p(!1), C = c !== "" && u === c, D = p(null), se = p(null), oe = p(null), [Ie, ze] = L(0), re = p(!1);
+    X(() => {
+      if (!re.current) {
+        re.current = !0;
+        return;
+      }
+      C && ze((e) => e + 1);
+    }, [C]);
+    const A = p(!1);
+    E(() => {
+      A.current = !1;
+    }, [u, n]);
+    const U = p(!1);
+    X(() => {
+      if (!n || !C || !b) return;
+      const e = oe.current, t = e == null ? void 0 : e.querySelector(
+        `[data-option-id="${CSS.escape(b)}"]`
+      );
+      if (!e || !t) return;
+      const i = e.getBoundingClientRect(), m = t.getBoundingClientRect(), o = e.offsetHeight > 0 ? i.height / e.offsetHeight : 1, h = (m.top - i.top) / (o || 1), Le = m.height / (o || 1);
+      e.scrollTop += h - (e.clientHeight - Le) / 2, U.current = !0;
+      try {
+        t.dispatchEvent(new PointerEvent("pointermove", { bubbles: !0 }));
+      } finally {
+        U.current = !1;
+      }
+    }, [n]), X(() => {
+      var e;
+      (e = D.current) == null || e.setAttribute("aria-expanded", String(n));
+    }), E(() => {
+      n || f(c);
+    }, [c, n]);
+    const _e = q ?? (N ? y.id : void 0), k = (N ? y.disabled : !1) || !!me, v = !!pe, Ce = (N ? y.required : !1) || !!be, ne = N ? y.invalid : !!Re, De = ne ? "error" : he, Ae = N && y.describedBy ? y.describedBy : Se, ie = Z ?? S("inputs.combobox.placeholder", "Search…"), Fe = G(
+      () => (e, t, i) => {
+        if (w.current || c !== "" && t === c) return 1;
+        const m = W(e), o = W(t), h = i == null ? void 0 : i.map(W);
+        return T ? T(
+          m,
+          o,
+          (h == null ? void 0 : h[0]) ?? ""
+        ) : Ye(
+          m,
+          o,
+          h
+        );
+      },
+      [T, c]
+    ), ae = (e) => {
+      z(e);
+    }, d = (e) => {
+      _ || te(e), x == null || x(e);
+    }, Ve = (e) => {
+      const t = l.find((i) => i.value === e);
+      ae(e), f((t == null ? void 0 : t.label) ?? ""), d(!1);
+    }, je = (e) => {
+      O == null || O(e), d(!1);
+    }, He = (e) => {
+      v || (f(e), w.current || a == null || a(e), !n && e.length > 0 && !w.current && d(!0));
+    }, Pe = () => {
+      !k && !v && d(!0);
+    }, $e = () => {
+      !n && !k && !v && d(!0);
+    }, qe = () => {
+      w.current = !0;
+    }, Te = () => {
+      var t;
+      if (w.current = !1, v) return;
+      const e = ((t = D.current) == null ? void 0 : t.value) ?? "";
+      f(e), a == null || a(e), e.length > 0 && d(!0);
+    }, Oe = (e) => {
+      if (!e.nativeEvent.isComposing) {
+        if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !n && !k && !v) {
+          e.preventDefault(), d(!0);
+          return;
+        }
+        if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" || /* cmdk's own Ctrl+N, J, P and K move the highlight too. */
+        e.ctrlKey && ["n", "j", "p", "k"].includes(e.key)) && (A.current = !0), e.key === "Enter" && (!n || !A.current && (C || u === ""))) {
+          e.preventDefault(), n && d(!1);
+          return;
+        }
+        e.key === "Escape" && n && (e.preventDefault(), d(!1), f(c));
+      }
+    }, Be = (e) => {
+      var t;
+      e.preventDefault(), e.stopPropagation(), ae(""), f(""), a == null || a(""), d(!0), (t = D.current) == null || t.focus();
+    }, Ue = (e) => {
+      v && e || (d(e), e || f(c));
+    }, le = p(b);
+    E(() => {
+      le.current = b;
+    }, [b]);
+    const de = p(u);
+    E(() => {
+      de.current = u;
+    }, [u]);
+    const ce = p(n);
+    E(() => {
+      ce.current = n;
+    }, [n]);
+    const K = Je(
+      (e) => {
+        _ || te(e), x == null || x(e);
+      },
+      [_, x]
+    ), Ke = G(
+      () => ({
+        getValue: () => le.current || null,
+        getQuery: () => de.current,
+        getIsOpen: () => ce.current,
+        setValue: (e) => {
+          const t = e ?? "";
+          z(t);
+          const i = l.find((m) => m.value === t);
+          f((i == null ? void 0 : i.label) ?? "");
+        },
+        setQuery: (e) => {
+          f(e), a == null || a(e);
+        },
+        clear: () => {
+          z(""), f(""), a == null || a("");
+        },
+        open: () => K(!0),
+        close: () => K(!1)
+      }),
+      [z, l, K, a]
+    );
+    lt(ut, Ke, q);
+    const Me = $ && !!b && !k && !v, Ge = ot(l), M = gt[R];
+    return /* @__PURE__ */ s(F.Root, { open: n, onOpenChange: Ue, children: /* @__PURE__ */ I(
+      g,
+      {
+        filter: Fe,
+        shouldFilter: !0,
+        loop: !0,
+        label: ee ?? ie,
+        className: "ds:w-full",
+        children: [
+          /* @__PURE__ */ s(F.Anchor, { asChild: !0, children: /* @__PURE__ */ I(
+            "div",
+            {
+              ref: se,
+              className: mt({
+                size: R,
+                tone: De,
+                className: ye
+              }),
+              "data-component": "combobox",
+              "data-component-id": q,
+              children: [
+                /* @__PURE__ */ s(
+                  g.Input,
+                  {
+                    ref: st(we, D),
+                    value: u,
+                    onValueChange: He,
+                    id: _e,
+                    name: ve,
+                    placeholder: ie,
+                    disabled: k,
+                    readOnly: v,
+                    required: Ce,
+                    autoComplete: Ne,
+                    "aria-describedby": Ae,
+                    "aria-invalid": ne || void 0,
+                    onFocus: Pe,
+                    onClick: $e,
+                    onKeyDown: Oe,
+                    onCompositionStart: qe,
+                    onCompositionEnd: Te,
+                    className: ft({ size: R })
+                  }
+                ),
+                Me ? /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": S("inputs.combobox.clear", "Clear selection"),
+                    onClick: Be,
+                    onPointerDown: (e) => e.stopPropagation(),
+                    className: [
+                      "ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
+                      "ds:text-muted-foreground ds:hover:text-foreground",
+                      "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                      "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+                      "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+                      "ds:size-4 ds:shrink-0",
+                      /* A 24px hit area with no visual change. */
+                      "ds:relative ds:before:absolute ds:before:inset-[calc(var(--spacing-xs)*-1)] ds:before:content-['']"
+                    ].join(" "),
+                    children: /* @__PURE__ */ s(dt, { "aria-hidden": "true", className: "ds:size-3.5" })
+                  }
+                ) : null
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ s(F.Portal, { forceMount: !0, children: /* @__PURE__ */ s(
+            F.Content,
+            {
+              forceMount: !0,
+              hidden: !n,
+              "aria-label": ee ?? S("inputs.combobox.popupLabel", "Options"),
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              onCloseAutoFocus: (e) => e.preventDefault(),
+              onInteractOutside: (e) => {
+                var i;
+                const t = e.target;
+                t && ((i = se.current) != null && i.contains(t)) && e.preventDefault();
+              },
+              sideOffset: 4,
+              align: "start",
+              className: pt(),
+              children: /* @__PURE__ */ I(
+                g.List,
+                {
+                  ref: oe,
+                  className: vt,
+                  onPointerMove: () => {
+                    U.current || (A.current = !0);
+                  },
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ s(g.Empty, { className: ht, children: /* @__PURE__ */ s("div", { role: "option", "aria-selected": !1, "aria-disabled": "true", children: xe ?? S("inputs.combobox.empty", "No results found") }) }),
+                    Ge.map(({ group: e, items: t }, i) => {
+                      const m = t.map((o) => {
+                        const h = o.value === b;
+                        return /* @__PURE__ */ I(
+                          g.Item,
+                          {
+                            value: o.value,
+                            "data-option-id": o.value,
+                            keywords: [o.label],
+                            disabled: o.disabled,
+                            onSelect: Ve,
+                            className: ue({ size: R }),
+                            children: [
+                              /* @__PURE__ */ s(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: `ds:inline-flex ds:items-center ds:justify-center ${M}`,
+                                  children: h ? /* @__PURE__ */ s(ct, { className: M }) : null
+                                }
+                              ),
+                              o.startAdornment ? (
+                                // Decorative by contract — the option's accessible
+                                // name comes from its label. Hide so a text-bearing
+                                // adornment can't leak into the computed name.
+                                /* @__PURE__ */ s(
+                                  "span",
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "ds:inline-flex ds:items-center ds:shrink-0",
+                                    children: o.startAdornment
+                                  }
+                                )
+                              ) : null,
+                              /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: o.label }),
+                              o.description ? /* @__PURE__ */ s("span", { className: "type-meta ds:text-muted-foreground", children: o.description }) : null,
+                              o.endContent ? (
+                                // Deliberately NOT aria-hidden — unlike
+                                // `startAdornment`, this slot carries meaning
+                                // (a price, a count) and must reach the
+                                // option's accessible name. `ms-auto` pins it
+                                // to the inline-end and flips under RTL.
+                                /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: o.endContent })
+                              ) : null
+                            ]
+                          },
+                          `${o.value}\0${o.label}`
+                        );
+                      });
+                      return e ? /* @__PURE__ */ s(
+                        g.Group,
+                        {
+                          heading: /* @__PURE__ */ s("span", { className: bt, children: e }),
+                          children: m
+                        },
+                        `group-${e}`
+                      ) : /* @__PURE__ */ s(g.Group, { children: m }, `group-${i}`);
+                    }),
+                    ge && u.length > 0 ? /* @__PURE__ */ s(
+                      xt,
+                      {
+                        search: u,
+                        label: S("inputs.combobox.create", 'Create "{{value}}"', {
+                          value: u
+                        }),
+                        iconClass: M,
+                        size: R,
+                        onSelect: je
+                      }
+                    ) : null
+                  ]
+                },
+                Ie
+              )
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+fe.displayName = "Combobox";
+const Ht = fe;
+export {
+  Ht as C,
+  pt as a,
+  ft as b,
+  ut as c,
+  ue as d,
+  mt as e
+};
+//# sourceMappingURL=combobox-B_rLwmSv.js.map