@bioturing/components 0.44.1 → 0.46.0

package/dist/components/combobox/component.js

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