@bioturing/components 0.46.1 → 0.46.3

package/dist/components/combobox/component.js

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