@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/multi-select-D5QLBJM1.js

@@ -0,0 +1,614 @@
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as Ke, useContext as Me, useState as B, useRef as I, useMemo as V, useEffect as U, useCallback as je } from "react";
+import * as q from "@radix-ui/react-popover";
+import { _ as u } from "./index-4xgbg-sn.js";
+import { c as le } from "./index-D2ZczOXr.js";
+import { useTranslation as Pe } from "react-i18next";
+import { u as $e, F as Be } from "./form-field-context-B3APVHKx.js";
+import { T as ie } from "./tooltip-DvmfrNvB.js";
+import { c as Ue } from "./compose-refs-C0k0tdqF.js";
+import { u as Qe } from "./use-controllable-state-BiY4xTzM.js";
+import { u as Ye } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { g as Ge } from "./group-options-BvKhQ3xb.js";
+import { b as Q, c as He } from "./input-surface-xyERuLU_.js";
+import { u as Xe } from "./registry-DvAUVLHh.js";
+import { X as Je } from "./x-B5YnXwCz.js";
+import { C as We } from "./check-DrFSN__t.js";
+const Ze = {
+  id: "multi-select",
+  // Persisted multi-choice (selection state + set_selection) → select_multiple,
+  // plus type-to-filter and open/close of the option list.
+  capabilities: ["select_multiple", "filter", "open", "close"],
+  state: {
+    selection: {
+      type: "string[]",
+      descriptionKey: "ui.agent.multiSelect.state.selection",
+      description: "Values of currently-selected options.",
+      read: (a) => a.getSelection()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.multiSelect.state.query",
+      description: "Current filter query.",
+      read: (a) => a.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.multiSelect.state.isOpen",
+      description: "True when the option list is visible.",
+      read: (a) => a.getIsOpen()
+    }
+  },
+  actions: {
+    set_selection: {
+      // Persists the user's chosen options — reversible via the same UI.
+      safety: "write",
+      argsType: "{ values: string[] }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          values: {
+            type: "array",
+            items: { type: "string" },
+            description: "Option values to select (replaces the current selection)."
+          }
+        },
+        required: ["values"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.setSelection",
+      description: "Replace the current selection with the given list of values.",
+      examples: [
+        {
+          args: { values: ["a", "b"] },
+          note: 'Select exactly options "a" and "b".'
+        }
+      ],
+      invoke: (a, c) => {
+        a.setSelection(c.values);
+      }
+    },
+    clear_selection: {
+      // Discards the persisted selection — destructive (loses the choices).
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.clearSelection",
+      description: "Clear the current selection.",
+      invoke: (a) => {
+        a.clearSelection();
+      }
+    },
+    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.multiSelect.actions.applyFilter",
+      description: "Set the filter query for the option list.",
+      invoke: (a, c) => {
+        a.setQuery(c.query);
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.open",
+      description: "Open the option list.",
+      invoke: (a) => {
+        a.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.close",
+      description: "Close the option list.",
+      invoke: (a) => {
+        a.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "multi-select" },
+    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."
+    }
+  }
+}, et = le(
+  [
+    "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
+    He,
+    "ds:aria-[invalid=true]:border-destructive",
+    "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${Q.sm}`,
+        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${Q.md}`,
+        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${Q.lg}`
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), oe = le(
+  [
+    "ds:inline-flex ds:items-center ds:gap-1",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
+    "ds:text-foreground ds:select-none",
+    "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:forced-colors:focus-visible:outline-[CanvasText]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-xs)]",
+        md: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-sm)]",
+        lg: "ds:ps-3 ds:pe-1.5 ds:py-1 ds:text-[length:var(--font-size-base)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), tt = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "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:relative ds:before:absolute ds:before:inset-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""]'
+].join(" "), st = [
+  "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+  "ds:min-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(" "), rt = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
+  "ds:text-[var(--font-size-sm)] ds:text-foreground ds:outline-none ds:select-none",
+  "ds:data-[selected=true]:bg-muted ds:data-[selected=true]:text-foreground",
+  "ds:aria-[disabled=true]:pointer-events-none ds:aria-[disabled=true]:opacity-50",
+  "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50"
+].join(" "), ae = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
+  "ds:text-[var(--font-size-sm)] ds:font-medium ds:text-primary ds:outline-none ds:select-none",
+  "ds:data-[selected=true]:bg-muted"
+].join(" "), nt = "__ui-multiselect-select-all__", it = "__ui-multiselect-clear-all__", de = Ke(
+  function({
+    options: c,
+    value: ce,
+    defaultValue: ue,
+    onChange: pe,
+    onComplete: O,
+    placeholder: me,
+    maxSelections: v,
+    allowSelectAll: Y = !1,
+    allowClear: G = !1,
+    filter: D,
+    size: R = "md",
+    disabled: fe,
+    className: ge,
+    id: L,
+    // Pull `aria-label` out of the div spread so it names the combobox
+    // INPUT (the interactive control) rather than the wrapper div. Lets a
+    // consumer give the trigger a meaningful name when there's no visible
+    // label or FormField (e.g. a data-table floating filter naming itself
+    // after its column). Untouched callers fall back to the placeholder.
+    // ONLY set this when the control has no visible / FormField label —
+    // `aria-label` wins over an associated `<label>`, so passing both would
+    // silently override the visible text (WCAG 2.5.3 Label in Name).
+    "aria-label": he,
+    ...ve
+  }, be) {
+    const { t: p } = Pe(), b = $e(), y = Me(Be) !== null, [ye, z] = Qe({
+      value: ce,
+      defaultValue: ue ?? [],
+      onChange: pe
+    }), n = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), x = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, xe = y && b.required, X = y && b.invalid, we = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
+      const e = /* @__PURE__ */ new Map();
+      for (const t of c) e.set(t.value, t.label);
+      return e;
+    }, [c]), J = typeof v == "number" && n.length >= v, C = (e) => {
+      z(e);
+    }, Ce = (e) => {
+      if (n.includes(e)) {
+        C(n.filter((t) => t !== e));
+        return;
+      }
+      J || C([...n, e]);
+    }, M = (e) => {
+      const t = n.filter((s, o) => o !== e);
+      return C(t), t;
+    }, Ae = () => {
+      const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof v == "number" ? v : e.length;
+      C(e.slice(0, t));
+    }, Ne = () => {
+      C([]);
+    }, W = I(n);
+    U(() => {
+      W.current = n;
+    }, [n]);
+    const Z = I(f);
+    U(() => {
+      Z.current = f;
+    }, [f]);
+    const ee = I(k);
+    U(() => {
+      ee.current = k;
+    }, [k]);
+    const j = je(
+      (e) => {
+        z(e);
+      },
+      [z]
+    ), _e = V(
+      () => ({
+        getSelection: () => [...W.current],
+        getQuery: () => Z.current,
+        getIsOpen: () => ee.current,
+        setSelection: (e) => j(e),
+        clearSelection: () => j([]),
+        setQuery: (e) => K(e),
+        open: () => m(!0),
+        close: () => m(!1)
+      }),
+      [j]
+    );
+    Xe(Ze, _e, L);
+    const te = me ?? p("inputs.multiSelect.placeholder", "Select…"), se = V(() => {
+      if (!f) return c;
+      const e = f.toLowerCase();
+      return c.filter((t) => D ? D(f, t) : t.label.toLowerCase().includes(e));
+    }, [c, f, D]), Re = V(
+      () => Ge(se),
+      [se]
+    ), Te = (e) => {
+      var o;
+      const t = e.currentTarget;
+      if (e.key === "Backspace" && f === "" && n.length > 0) {
+        e.preventDefault();
+        const i = n.length - 1, d = M(i).length - 1;
+        d >= 0 && requestAnimationFrame(() => {
+          var g;
+          (g = x.current[d]) == null || g.focus();
+        });
+        return;
+      }
+      const s = t.selectionStart === 0 && t.selectionEnd === 0;
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && n.length > 0) {
+        const i = document.dir === "rtl" || t.dir === "rtl";
+        if (i && e.key === "ArrowRight" || !i && e.key === "ArrowLeft") {
+          e.preventDefault();
+          const d = n.length - 1;
+          (o = x.current[d]) == null || o.focus();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        m(!1);
+        return;
+      }
+      !k && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
+    }, Ee = (e) => (t) => {
+      var l, d, g, N;
+      if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
+        t.preventDefault(), t.stopPropagation();
+        const F = M(e);
+        if (F.length === 0) {
+          requestAnimationFrame(() => {
+            var _;
+            return (_ = S.current) == null ? void 0 : _.focus();
+          });
+          return;
+        }
+        const ze = Math.min(e, F.length - 1);
+        requestAnimationFrame(() => {
+          var _;
+          (_ = x.current[ze]) == null || _.focus();
+        });
+        return;
+      }
+      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", i = s ? "ArrowLeft" : "ArrowRight";
+      if (t.key === o) {
+        t.preventDefault();
+        const F = Math.max(0, e - 1);
+        (l = x.current[F]) == null || l.focus();
+        return;
+      }
+      if (t.key === i) {
+        t.preventDefault(), e < n.length - 1 ? (d = x.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
+        return;
+      }
+      t.key === "Escape" && (m(!1), (N = S.current) == null || N.focus());
+    }, [T, P] = B(
+      Number.POSITIVE_INFINITY
+    );
+    Ye(() => {
+      const e = H.current;
+      if (!e) return;
+      const t = () => {
+        const o = Array.from(
+          e.querySelectorAll('[data-ui-chip="true"]')
+        );
+        if (o.length === 0) {
+          P(Number.POSITIVE_INFINITY);
+          return;
+        }
+        const i = o[0].offsetTop;
+        let l = 0;
+        for (const d of o)
+          if (d.offsetTop === i) l++;
+          else break;
+        l === o.length ? P(Number.POSITIVE_INFINITY) : P(Math.max(1, l - 1));
+      };
+      t();
+      const s = new ResizeObserver(t);
+      return s.observe(e), () => s.disconnect();
+    }, [n.length, R]);
+    const E = n.map((e) => ({
+      value: e,
+      label: ke.get(e) ?? e
+    })), re = T === Number.POSITIVE_INFINITY || T >= E.length, Fe = re ? E : E.slice(0, T), ne = re ? [] : E.slice(T), A = ne.length, Ve = (e) => {
+      var s;
+      if (h) return;
+      const t = e.target;
+      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = S.current) == null || s.focus());
+    }, qe = (e) => {
+      if (h) {
+        m(!1);
+        return;
+      }
+      m(e), e || (K(""), O == null || O(n));
+    }, Oe = Y || G, De = p("inputs.multiSelect.selected", {
+      count: n.length,
+      defaultValue: `${n.length} selected`
+    }), { onClick: $, ...Le } = ve;
+    return /* @__PURE__ */ r(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ w(q.Root, { open: k, onOpenChange: qe, children: [
+      /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ w(
+        "div",
+        {
+          ref: Se,
+          className: et({ size: R, className: ge }),
+          "aria-disabled": h || void 0,
+          "aria-invalid": X || void 0,
+          "data-component": "multi-select",
+          "data-component-id": L,
+          onClick: (e) => {
+            $ == null || $(e), Ve(e);
+          },
+          ...Le,
+          children: [
+            Fe.map((e, t) => (
+              // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- chip pill receives focus via roving tabindex; chip removal uses an inner button
+              /* @__PURE__ */ w(
+                "span",
+                {
+                  ref: (s) => {
+                    x.current[t] = s;
+                  },
+                  tabIndex: h ? -1 : 0,
+                  "data-ui-chip": "true",
+                  className: oe({ size: R }),
+                  onKeyDown: Ee(t),
+                  "aria-label": e.label,
+                  children: [
+                    /* @__PURE__ */ r("span", { children: e.label }),
+                    /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        "data-ui-chip-dismiss": "true",
+                        "aria-label": p("inputs.multiSelect.remove", {
+                          label: e.label,
+                          defaultValue: `Remove ${e.label}`
+                        }),
+                        disabled: h,
+                        onClick: (s) => {
+                          s.stopPropagation(), M(t), requestAnimationFrame(() => {
+                            var o;
+                            return (o = S.current) == null ? void 0 : o.focus();
+                          });
+                        },
+                        className: tt,
+                        children: /* @__PURE__ */ r(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
+                      }
+                    )
+                  ]
+                },
+                e.value
+              )
+            )),
+            A > 0 ? /* @__PURE__ */ r(
+              ie,
+              {
+                label: ne.map((e) => e.label).join(", "),
+                delayDuration: 200,
+                children: /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: oe({ size: R }),
+                    tabIndex: 0,
+                    role: "button",
+                    "aria-label": p("inputs.multiSelect.overflow", {
+                      count: A,
+                      defaultValue: `+${A} more`
+                    }),
+                    children: /* @__PURE__ */ r("span", { children: p("inputs.multiSelect.overflow", {
+                      count: A,
+                      defaultValue: `+${A} more`
+                    }) })
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ r(
+              u.Input,
+              {
+                ref: S,
+                value: f,
+                onValueChange: K,
+                onKeyDown: Te,
+                onFocus: () => {
+                  h || m(!0);
+                },
+                placeholder: n.length === 0 ? te : "",
+                id: Ie,
+                "aria-label": y ? void 0 : he,
+                "aria-describedby": we,
+                "aria-invalid": X || void 0,
+                "aria-required": xe || void 0,
+                disabled: h,
+                className: [
+                  "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
+                  "ds:placeholder:text-muted-foreground ds:text-start",
+                  "ds:disabled:cursor-not-allowed"
+                ].join(" ")
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(q.Portal, { children: /* @__PURE__ */ r(
+        q.Content,
+        {
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          align: "start",
+          sideOffset: 4,
+          className: st,
+          children: /* @__PURE__ */ w(
+            u.List,
+            {
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-label": te,
+              className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
+              children: [
+                Oe ? /* @__PURE__ */ w(u.Group, { children: [
+                  Y ? /* @__PURE__ */ r(
+                    u.Item,
+                    {
+                      value: nt,
+                      onSelect: Ae,
+                      className: ae,
+                      children: p("inputs.multiSelect.selectAll", "Select all")
+                    }
+                  ) : null,
+                  G ? /* @__PURE__ */ r(
+                    u.Item,
+                    {
+                      value: it,
+                      onSelect: Ne,
+                      className: ae,
+                      children: p("inputs.multiSelect.clearAll", "Clear all")
+                    }
+                  ) : null
+                ] }) : null,
+                /* @__PURE__ */ r(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: p("inputs.multiSelect.noOptions", "No options found") }),
+                Re.map(({ group: e, items: t }, s) => {
+                  const o = t.map((i) => {
+                    const l = n.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ w(
+                      u.Item,
+                      {
+                        value: i.value,
+                        "data-option-id": i.value,
+                        disabled: g,
+                        onSelect: () => {
+                          g || Ce(i.value);
+                        },
+                        "aria-selected": l,
+                        "aria-disabled": g || void 0,
+                        className: rt,
+                        children: [
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: [
+                                "ds:inline-flex ds:items-center ds:justify-center ds:me-[var(--spacing-xs)] ds:shrink-0",
+                                "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border ds:border-border",
+                                l ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
+                              ].join(" "),
+                              "aria-hidden": "true",
+                              children: l ? /* @__PURE__ */ r(We, { className: "ds:size-3.5" }) : null
+                            }
+                          ),
+                          i.startAdornment ? (
+                            // Decorative by contract — the accessible name comes
+                            // from the option label.
+                            /* @__PURE__ */ r(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)]",
+                                children: i.startAdornment
+                              }
+                            )
+                          ) : null,
+                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: i.label })
+                        ]
+                      },
+                      i.value
+                    );
+                    return d ? /* @__PURE__ */ r(
+                      ie,
+                      {
+                        label: p("inputs.multiSelect.maxReached", {
+                          count: v,
+                          defaultValue: `Maximum ${v} selections`
+                        }),
+                        delayDuration: 200,
+                        children: N
+                      },
+                      i.value
+                    ) : N;
+                  });
+                  return e ? /* @__PURE__ */ r(
+                    u.Group,
+                    {
+                      heading: e,
+                      className: "ds:[&_[cmdk-group-heading]]:ps-2 ds:[&_[cmdk-group-heading]]:pe-2 ds:[&_[cmdk-group-heading]]:py-1 ds:[&_[cmdk-group-heading]]:type-eyebrow ds:[&_[cmdk-group-heading]]:text-muted-foreground",
+                      children: o
+                    },
+                    `group-${e}`
+                  ) : /* @__PURE__ */ r(u.Group, { children: o }, `group-${s}`);
+                })
+              ]
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+de.displayName = "MultiSelect";
+const xt = de;
+export {
+  xt as M,
+  et as a,
+  Ze as m
+};
+//# sourceMappingURL=multi-select-D5QLBJM1.js.map