@bioturing/components 0.46.0 → 0.46.2

package/dist/components/combobox/component.js

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