@bioturing/components 0.46.2 → 0.46.3

package/dist/components/combobox/component.js

@@ -1,366 +1,337 @@
 "use client";
-import { jsx as t, jsxs as C, Fragment as se } from "react/jsx-runtime";
-import { Combobox as c } from "@base-ui/react/combobox";
-import Te from "antd/es/config-provider/DisabledContext";
-import { FormItemInputContext as De } from "antd/es/form/context";
-import { forwardRef as Le, useRef as Se, useContext as ce, useCallback as x, useMemo as w, useState as Ve } from "react";
-import { BaseMenu as O } from "../base-menu/index.js";
+import { jsx as t, jsxs as g, Fragment as ne } from "react/jsx-runtime";
+import { Combobox as r } from "@base-ui/react/combobox";
+import Re from "antd/es/config-provider/DisabledContext";
+import { FormItemInputContext as Te } from "antd/es/form/context";
+import { forwardRef as Se, useRef as ke, useContext as re, useCallback as v, useMemo as y, useState as De } from "react";
+import { BaseMenu as M } from "../base-menu/index.js";
 import { XIcon as Me } from "@bioturing/assets";
-import { splitBySeparators as le } from "./utils.js";
+import { splitBySeparators as Ve } from "./utils.js";
+import { useComboboxTokenInput as Fe } from "./use-combobox-token-input.js";
 import './style.css';/* empty css          */
-import { SelectTrigger as v } from "../select-trigger/component.js";
-import { BaseMenuItem as ie } from "../base-menu/item.js";
-import { Empty as Fe } from "../empty/component.js";
-import { useControlledState as ae } from "../hooks/useControlledState.js";
-import { useCls as Oe } from "../utils/antdUtils.js";
-import { clsx as a } from "../utils/cn.js";
-import { reactNodeToString as E } from "../utils/reactToString.js";
-import { ScrollArea as $e } from "../scroll-area/component.js";
-const Be = (l) => /* @__PURE__ */ t(O.Root, { ...l }), Pe = (l) => /* @__PURE__ */ t(O.Popup, { ...l }), je = (l) => /* @__PURE__ */ t(O.Divider, { ...l }), Ke = (l) => /* @__PURE__ */ t(O.List, { ...l }), ke = ({
-  options: l = [],
-  value: de,
-  defaultValue: W,
-  onChange: $,
-  placeholder: R = "Select...",
-  disabled: ue = !1,
-  status: me,
-  allowClear: Q = !1,
-  multiple: r = !1,
-  showSearch: We = !0,
-  open: fe,
+import { SelectTrigger as p } from "../select-trigger/component.js";
+import { BaseMenuItem as se } from "../base-menu/item.js";
+import { Empty as Oe } from "../empty/component.js";
+import { useControlledState as ce } from "../hooks/useControlledState.js";
+import { useCls as $e } from "../utils/antdUtils.js";
+import { clsx as l } from "../utils/cn.js";
+import { reactNodeToString as le } from "../utils/reactToString.js";
+import { ScrollArea as Be } from "../scroll-area/component.js";
+const Le = (s) => /* @__PURE__ */ t(M.Root, { ...s }), Pe = (s) => /* @__PURE__ */ t(M.Popup, { ...s }), je = (s) => /* @__PURE__ */ t(M.Divider, { ...s }), Ee = (s) => /* @__PURE__ */ t(M.List, { ...s }), Ke = ({
+  options: s = [],
+  value: ae,
+  defaultValue: K,
+  onChange: V,
+  placeholder: w = "Select...",
+  disabled: ie = !1,
+  status: de,
+  allowClear: W = !1,
+  multiple: n = !1,
+  showSearch: He = !0,
+  open: me,
   onOpenChange: he,
-  className: be,
-  classNames: g,
-  size: B = "middle",
-  optionRender: U,
-  onSearch: P,
-  clearIcon: X,
-  suffixIcon: G,
-  placement: T = "bottomLeft",
+  className: ue,
+  classNames: b,
+  size: F = "middle",
+  optionRender: H,
+  onSearch: O,
+  clearIcon: Q,
+  suffixIcon: U,
+  placement: A = "bottomLeft",
   // showSelectionSummary: _showSelectionSummary = false,
   // selectionSummaryRender,
-  showSelectAll: H = !1,
-  optionLabelRender: D,
-  getOptionKeywords: J = (h) => [
-    String(h.value),
-    E(h.label)
+  showSelectAll: X = !1,
+  optionLabelRender: R,
+  getOptionKeywords: G = (u) => [
+    String(u.value),
+    le(u.label)
   ],
-  popupMatchSelectWidth: ge = !0,
-  addOnEnter: L = !1,
-  tokenSeparators: m,
-  autoHighlight: S = !0,
-  filterOption: V,
-  ...pe
-}, Ce) => {
-  const [h, Y] = ae(
-    de,
-    $,
-    W !== void 0 ? W : r ? [] : void 0
-  ), [j, y] = ae(fe, he, !1), i = Oe(), K = Se(null), { status: xe } = ce(De), ve = ce(Te), M = me || xe, A = ue || ve, f = x(
+  popupMatchSelectWidth: be = !0,
+  addOnEnter: $ = !1,
+  tokenSeparators: C,
+  autoHighlight: B = !0,
+  filterOption: T,
+  ...fe
+}, ge) => {
+  const [u, J] = ce(
+    ae,
+    V,
+    K !== void 0 ? K : n ? [] : void 0
+  ), [L, S] = ce(me, he, !1), c = $e(), P = ke(null), { status: pe } = re(Te), Ce = re(Re), k = de || pe, I = ie || Ce, m = v(
     (e) => {
-      Y(e), $?.(e);
+      J(e), V?.(e);
     },
-    [Y, $]
-  ), Z = x(() => {
-    if (r) {
-      const e = l.map((o) => o.value);
-      f(e);
+    [J, V]
+  ), Y = v(() => {
+    if (n) {
+      const e = s.map((o) => o.value);
+      m(e);
     }
-  }, [r, l, f]), _ = x(() => {
-    r && f([]);
-  }, [r, f]), z = x(() => {
-    f(r ? [] : void 0);
-  }, [r, f]), b = w(() => Array.isArray(h) ? h : h ? [h] : [], [h]), d = w(() => {
+  }, [n, s, m]), Z = v(() => {
+    n && m([]);
+  }, [n, m]), _ = v(() => {
+    m(n ? [] : void 0);
+  }, [n, m]), h = y(() => Array.isArray(u) ? u : u ? [u] : [], [u]), i = y(() => {
     const e = /* @__PURE__ */ new Map();
-    for (const o of l)
+    for (const o of s)
       e.set(o.value, o);
     return e;
-  }, [l]), F = w(() => {
-    if (!H || !r || l.length === 0)
+  }, [s]), D = y(() => {
+    if (!X || !n || s.length === 0)
       return null;
-    const e = b.filter((s) => d.has(s)), o = e.length === l.length && l.length > 0, n = e.length > 0 && e.length < l.length;
+    const e = h.filter((d) => i.has(d)), o = e.length === s.length && s.length > 0, a = e.length > 0 && e.length < s.length;
     return {
       checked: o,
-      indeterminate: n,
+      indeterminate: a,
       onToggle: () => {
-        n || o ? _() : Z();
+        a || o ? Z() : Y();
       }
     };
-  }, [H, r, l, d, b, _, Z]), we = w(() => l.map((e) => e.value), [l]), q = w(() => r ? b.length > 0 ? `${b.length} item${b.length === 1 ? "" : "s"} selected` : null : d.get(b[0])?.label || null, [r, b, d]), ee = a(
-    i("combobox-input"),
-    i(`combobox-input-${B}`),
-    M && i(`combobox-input-${M}`),
-    g?.input
-  ), ye = x(
+  }, [X, n, s, i, h, Z, Y]), xe = y(() => s.map((e) => e.value), [s]), z = y(() => n ? h.length > 0 ? `${h.length} item${h.length === 1 ? "" : "s"} selected` : null : i.get(h[0])?.label || null, [n, h, i]), q = l(
+    c("combobox-input"),
+    c(`combobox-input-${F}`),
+    k && c(`combobox-input-${k}`),
+    b?.input
+  ), ve = v(
     (e) => {
-      const o = d.get(e);
-      return E(o?.label || String(e));
+      const o = i.get(e);
+      return le(o?.label || String(e));
     },
-    [d]
-  ), [N, oe] = Ve(""), te = x(
-    (e) => {
-      const o = e.trim();
-      if (!o) return;
-      const n = o.toLowerCase();
-      for (const [s, u] of d)
-        if (String(s).toLowerCase() === n)
-          return u;
-      for (const s of d.values())
-        if (E(s.label).toLowerCase() === n)
-          return s;
-    },
-    [d]
-  ), ne = x(
-    (e) => {
-      if (!L || !e.trim()) return !1;
-      const o = r && m && m.length > 0 ? le(e, m) : [e.trim()], n = [];
-      for (const s of o) {
-        const u = te(s);
-        u && !u.disabled && n.push(u.value);
-      }
-      if (n.length === 0) return !1;
-      if (r) {
-        const s = Array.isArray(h) ? [...h] : [], u = [.../* @__PURE__ */ new Set([...s, ...n])];
-        f(u);
-      } else
-        f(n[0]), y(!1);
-      return !0;
-    },
-    [
-      L,
-      r,
-      m,
-      te,
-      h,
-      f,
-      y
-    ]
-  ), Ae = w(() => !m || m.length === 0 ? !1 : m.some((e) => N.includes(e)), [N, m]), Ne = r ? S && !Ae : S, re = x(
+    [i]
+  ), [j, ee] = De(""), { handleAddOnEnter: oe, handleInputValueChange: ye } = Fe({
+    addOnEnter: $,
+    multiple: n,
+    tokenSeparators: C,
+    optionMap: i,
+    value: u,
+    handleValueChange: m,
+    setOpen: S,
+    setSearchValue: ee,
+    onSearch: O
+  }), Ie = !!C?.length, Ne = n && Ie ? !1 : B, te = v(
     (e) => (o) => {
-      if (o.key === "Enter" && L && e) {
-        if (!r && S) return;
-        ne(e) && (o.preventDefault(), oe(""), P?.(""));
+      if (o.key === "Enter" && $ && e) {
+        if (!n && B) return;
+        oe(e) && (o.preventDefault(), ee(""), O?.(""));
       }
     },
-    [L, S, r, ne, P]
-  ), Ie = w(() => V === !1 ? null : typeof V == "function" ? (e, o) => {
-    const n = d.get(e);
-    return V(o, n);
+    [$, B, n, oe, O]
+  ), we = y(() => T === !1 ? null : typeof T == "function" ? (e, o) => {
+    const a = i.get(e);
+    return T(o, a);
   } : (e, o) => {
     if (!o) return !0;
-    const n = d.get(e);
-    if (!n) return !1;
-    const s = m && m.length > 0 ? le(o, m) : [o], u = J(n).map((I) => I.toLowerCase()), p = s.filter((I) => {
-      const k = I.toLowerCase();
-      return u.some((Re) => Re.includes(k));
+    const a = i.get(e);
+    if (!a) return !1;
+    const d = C && C.length > 0 ? Ve(o, C) : [o], x = G(a).map((N) => N.toLowerCase()), f = d.filter((N) => {
+      const E = N.toLowerCase();
+      return x.some((Ae) => Ae.includes(E));
     }).length;
-    if (p === 0) return !1;
-    if (s.length > 1 && p > 1) {
-      const I = o.toLowerCase();
-      return u.some((k) => k.includes(I));
+    if (f === 0) return !1;
+    if (d.length > 1 && f > 1) {
+      const N = o.toLowerCase();
+      return x.some((E) => E.includes(N));
     }
     return !0;
-  }, [V, d, m, J]);
-  return /* @__PURE__ */ t("div", { ref: Ce, className: a(i("combobox"), be), ...pe, children: /* @__PURE__ */ C(
-    c.Root,
+  }, [T, i, C, G]);
+  return /* @__PURE__ */ t("div", { ref: ge, className: l(c("combobox"), ue), ...fe, children: /* @__PURE__ */ g(
+    r.Root,
     {
-      value: r ? b : b[0] ?? null,
+      value: n ? h : h[0] ?? null,
       onValueChange: (e) => {
-        f(
-          r ? Array.isArray(e) ? e : [] : e
+        m(
+          n ? Array.isArray(e) ? e : [] : e
         );
       },
-      inputValue: N,
-      onInputValueChange: (e) => {
-        oe(e), P?.(e);
-      },
-      open: j,
-      onOpenChange: y,
-      multiple: r,
-      disabled: A,
+      inputValue: j,
+      onInputValueChange: ye,
+      open: L,
+      onOpenChange: S,
+      multiple: n,
+      disabled: I,
       autoHighlight: Ne,
-      items: we,
-      itemToStringLabel: ye,
-      filter: Ie,
+      items: xe,
+      itemToStringLabel: ve,
+      filter: we,
       children: [
-        r ? (
+        n ? (
           /* Multiple Selection Layout using SelectTrigger compound components */
-          /* @__PURE__ */ C(
-            v.Root,
+          /* @__PURE__ */ g(
+            p.Root,
             {
-              ref: K,
-              size: B,
-              disabled: A,
-              open: j,
-              status: M,
-              placeholder: R,
-              displayValue: q,
-              allowClear: Q,
-              suffixIcon: G,
-              clearIcon: X,
-              onClear: z,
-              onOpenChange: y,
-              className: a(g?.trigger, i("combobox-trigger-multiple")),
+              ref: P,
+              size: F,
+              disabled: I,
+              open: L,
+              status: k,
+              placeholder: w,
+              displayValue: z,
+              allowClear: W,
+              suffixIcon: U,
+              clearIcon: Q,
+              onClear: _,
+              onOpenChange: S,
+              className: l(b?.trigger, c("combobox-trigger-multiple")),
               as: "div",
               children: [
                 /* @__PURE__ */ t(
-                  v.Content,
+                  p.Content,
                   {
-                    contentRender: ({ className: e, children: o, ...n }) => /* @__PURE__ */ t(c.Chips, { className: a(i("combobox-chips"), e), ...n, children: /* @__PURE__ */ t(c.Value, { children: (s) => /* @__PURE__ */ C(se, { children: [
-                      s.map((u) => {
-                        const p = d.get(u);
-                        return /* @__PURE__ */ C(c.Chip, { className: a(i("combobox-chip")), children: [
-                          p?.icon && /* @__PURE__ */ t("span", { className: a(i("combobox-chip-icon")), children: p.icon }),
-                          /* @__PURE__ */ t("span", { className: a(i("combobox-chip-text")), children: p ? D ? D(p) : p.label : u }),
+                    contentRender: ({ className: e, children: o, ...a }) => /* @__PURE__ */ t(r.Chips, { className: l(c("combobox-chips"), e), ...a, children: /* @__PURE__ */ t(r.Value, { children: (d) => /* @__PURE__ */ g(ne, { children: [
+                      d.map((x) => {
+                        const f = i.get(x);
+                        return /* @__PURE__ */ g(r.Chip, { className: l(c("combobox-chip")), children: [
+                          f?.icon && /* @__PURE__ */ t("span", { className: l(c("combobox-chip-icon")), children: f.icon }),
+                          /* @__PURE__ */ t("span", { className: l(c("combobox-chip-text")), children: f ? R ? R(f) : f.label : x }),
                           /* @__PURE__ */ t(
-                            c.ChipRemove,
+                            r.ChipRemove,
                             {
-                              className: a(i("combobox-chip-remove")),
+                              className: l(c("combobox-chip-remove")),
                               children: /* @__PURE__ */ t(Me, {})
                             }
                           )
-                        ] }, u);
+                        ] }, x);
                       }),
                       /* @__PURE__ */ t(
-                        c.Input,
+                        r.Input,
                         {
-                          placeholder: s.length > 0 ? "" : R,
-                          className: ee,
-                          disabled: A,
-                          onKeyDown: re(N)
+                          placeholder: d.length > 0 ? "" : w,
+                          className: q,
+                          disabled: I,
+                          onKeyDown: te(j)
                         }
                       )
                     ] }) }) })
                   }
                 ),
                 /* @__PURE__ */ t(
-                  v.Clear,
+                  p.Clear,
                   {
-                    render: (e) => /* @__PURE__ */ t(c.Clear, { ...e })
+                    render: (e) => /* @__PURE__ */ t(r.Clear, { ...e })
                   }
                 ),
                 /* @__PURE__ */ t(
-                  v.Arrow,
+                  p.Arrow,
                   {
-                    render: (e, { icon: o }) => /* @__PURE__ */ t(c.Trigger, { ...e, children: /* @__PURE__ */ t(c.Icon, { children: o }) })
+                    render: (e, { icon: o }) => /* @__PURE__ */ t(r.Trigger, { ...e, children: /* @__PURE__ */ t(r.Icon, { children: o }) })
                   }
                 )
               ]
             }
           )
-        ) : /* @__PURE__ */ C(
-          v.Root,
+        ) : /* @__PURE__ */ g(
+          p.Root,
           {
-            ref: K,
+            ref: P,
             as: "div",
-            size: B,
-            disabled: A,
-            open: j,
-            status: M,
-            placeholder: R,
-            displayValue: q,
-            allowClear: Q,
-            suffixIcon: G,
-            clearIcon: X,
-            onClear: z,
-            onOpenChange: y,
-            className: a(g?.trigger, i("combobox-trigger-single")),
+            size: F,
+            disabled: I,
+            open: L,
+            status: k,
+            placeholder: w,
+            displayValue: z,
+            allowClear: W,
+            suffixIcon: U,
+            clearIcon: Q,
+            onClear: _,
+            onOpenChange: S,
+            className: l(b?.trigger, c("combobox-trigger-single")),
             children: [
               /* @__PURE__ */ t(
-                v.Content,
+                p.Content,
                 {
-                  contentRender: ({ className: e, children: o, ...n }) => /* @__PURE__ */ t(
-                    c.Input,
+                  contentRender: ({ className: e, children: o, ...a }) => /* @__PURE__ */ t(
+                    r.Input,
                     {
-                      placeholder: R,
-                      className: a(e, ee),
-                      disabled: A,
-                      onKeyDown: re(N),
-                      ...n
+                      placeholder: w,
+                      className: l(e, q),
+                      disabled: I,
+                      onKeyDown: te(j),
+                      ...a
                     }
                   )
                 }
               ),
               /* @__PURE__ */ t(
-                v.Clear,
+                p.Clear,
                 {
-                  render: (e) => /* @__PURE__ */ t(c.Clear, { ...e })
+                  render: (e) => /* @__PURE__ */ t(r.Clear, { ...e })
                 }
               ),
               /* @__PURE__ */ t(
-                v.Arrow,
+                p.Arrow,
                 {
-                  render: (e, { icon: o }) => /* @__PURE__ */ t(c.Trigger, { ...e, children: /* @__PURE__ */ t(c.Icon, { children: o }) })
+                  render: (e, { icon: o }) => /* @__PURE__ */ t(r.Trigger, { ...e, children: /* @__PURE__ */ t(r.Icon, { children: o }) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ t(c.Portal, { children: /* @__PURE__ */ t(
-          c.Positioner,
+        /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
+          r.Positioner,
           {
-            anchor: K.current,
+            anchor: P.current,
             sideOffset: 4,
-            side: T.startsWith("top") ? "top" : "bottom",
-            align: T.endsWith("Right") ? "end" : T === "top" || T === "bottom" ? "center" : "start",
-            render: Be,
+            side: A.startsWith("top") ? "top" : "bottom",
+            align: A.endsWith("Right") ? "end" : A === "top" || A === "bottom" ? "center" : "start",
+            render: Le,
             children: /* @__PURE__ */ t(
-              c.Popup,
+              r.Popup,
               {
-                className: a(
-                  i("combobox-popup"),
-                  !ge && i("combobox-popup--auto-width"),
-                  g?.portal
+                className: l(
+                  c("combobox-popup"),
+                  !be && c("combobox-popup--auto-width"),
+                  b?.portal
                 ),
                 render: Pe,
-                children: /* @__PURE__ */ C("div", { className: a(i("combobox-container")), children: [
-                  F && /* @__PURE__ */ C(se, { children: [
+                children: /* @__PURE__ */ g("div", { className: l(c("combobox-container")), children: [
+                  D && /* @__PURE__ */ g(ne, { children: [
                     /* @__PURE__ */ t(
-                      ie,
+                      se,
                       {
                         as: "button",
                         type: "button",
-                        className: a(i("combobox-select-all")),
-                        selected: F.checked,
-                        onClick: F.onToggle,
-                        indeterminate: F.indeterminate,
+                        className: l(c("combobox-select-all")),
+                        selected: D.checked,
+                        onClick: D.onToggle,
+                        indeterminate: D.indeterminate,
                         showCheckbox: !0,
                         children: "Select All"
                       }
                     ),
-                    /* @__PURE__ */ t(c.Separator, { render: je })
+                    /* @__PURE__ */ t(r.Separator, { render: je })
                   ] }),
-                  /* @__PURE__ */ C($e, { fadeEdges: !0, children: [
+                  /* @__PURE__ */ g(Be, { fadeEdges: !0, children: [
                     /* @__PURE__ */ t(
-                      c.List,
+                      r.List,
                       {
-                        className: a(i("combobox-list"), g?.list),
-                        render: Ke,
+                        className: l(c("combobox-list"), b?.list),
+                        render: Ee,
                         children: (e) => {
-                          const o = d.get(e);
+                          const o = i.get(e);
                           if (!o) return null;
-                          const n = b.includes(e);
-                          return U ? U(o, {}) : /* @__PURE__ */ t(
-                            ie,
+                          const a = h.includes(e);
+                          return H ? H(o, {}) : /* @__PURE__ */ t(
+                            se,
                             {
                               disabled: o.disabled,
-                              selected: n,
-                              showCheckbox: r,
+                              selected: a,
+                              showCheckbox: n,
                               icon: o.icon,
                               classNames: {
-                                root: a(g?.option),
-                                icon: g?.optionIcon,
-                                text: g?.optionText
+                                root: l(b?.option),
+                                icon: b?.optionIcon,
+                                text: b?.optionText
                               },
-                              labelRender: D ? (s) => D(o, s) : void 0,
-                              render: (s) => /* @__PURE__ */ t(
-                                c.Item,
+                              labelRender: R ? (d) => R(o, d) : void 0,
+                              render: (d) => /* @__PURE__ */ t(
+                                r.Item,
                                 {
                                   value: e,
                                   disabled: o.disabled,
-                                  ...s,
+                                  ...d,
                                   "data-disabled": o.disabled,
-                                  "data-selected": n
+                                  "data-selected": a
                                 }
                               ),
                               children: o.label
@@ -370,7 +341,7 @@ const Be = (l) => /* @__PURE__ */ t(O.Root, { ...l }), Pe = (l) => /* @__PURE__
                         }
                       }
                     ),
-                    /* @__PURE__ */ t(c.Empty, { className: a(i("combobox-empty")), children: /* @__PURE__ */ t(Fe, { description: "No options found" }) })
+                    /* @__PURE__ */ t(r.Empty, { className: l(c("combobox-empty")), children: /* @__PURE__ */ t(Oe, { description: "No options found" }) })
                   ] })
                 ] })
               }
@@ -380,11 +351,11 @@ const Be = (l) => /* @__PURE__ */ t(O.Root, { ...l }), Pe = (l) => /* @__PURE__
       ]
     }
   ) });
-}, Ee = Le(ke), co = Object.assign(Ee, {
+}, We = Se(Ke), ao = Object.assign(We, {
   // Add any sub components here if needed
 });
 export {
-  co as Combobox,
-  co as default
+  ao as Combobox,
+  ao as default
 };
 //# sourceMappingURL=component.js.map