@bioturing/components 0.33.1 → 0.35.2

package/dist/components/combobox/component.js

@@ -1,237 +1,347 @@
 "use client";
-import { jsxs as oe, Fragment as ne, jsx as f } from "react/jsx-runtime";
-import ae from "antd/es/config-provider/DisabledContext";
-import { FormItemInputContext as ie } from "antd/es/form/context";
-import { forwardRef as ce, useContext as T, useCallback as u, useMemo as b } from "react";
-import { DropdownMenuDivider as de } from "../dropdown-menu/divider.js";
+import { jsx as o, jsxs as f, Fragment as q } from "react/jsx-runtime";
+import { Combobox as t } from "@base-ui-components/react/combobox";
+import se from "antd/es/config-provider/DisabledContext";
+import { FormItemInputContext as ae } from "antd/es/form/context";
+import { forwardRef as ie, useRef as de, useContext as G, useCallback as y, useMemo as O } from "react";
+import { BaseMenu as I } from "../base-menu/index.js";
+import { XIcon as me } from "@bioturing/assets";
 import './style.css';/* empty css          */
-import { DropdownMenuItem as fe } from "../dropdown-menu/item.js";
-import { DropdownMenu as me } from "../dropdown-menu/component.js";
-import { SelectTrigger as ue } from "../select-trigger/component.js";
-import { useControlledState as F } from "../hooks/useControlledState.js";
-import { useCls as be } from "../utils/antdUtils.js";
-import { clsx as m } from "../utils/cn.js";
-import { reactNodeToString as pe } from "../utils/reactToString.js";
-const ge = ({
-  options: s = [],
-  value: j,
-  defaultValue: k,
-  onChange: p,
-  placeholder: _ = "Select...",
-  disabled: K = !1,
-  status: L,
-  allowClear: R = !1,
-  multiple: l = !1,
-  maxTagCount: he,
-  showSearch: g = !0,
-  open: $,
-  onOpenChange: B,
-  placement: E = "bottomLeft",
-  className: W,
-  classNames: x,
-  size: q = "middle",
-  loading: ye = !1,
-  optionRender: ve,
-  onSearch: Ce,
-  dropdownRender: Ae,
-  clearIcon: z,
-  suffixIcon: G,
-  dropdownMenuProps: H,
-  triggerProps: O,
-  searchProps: J,
-  showSelectionSummary: I = !1,
-  selectionSummaryRender: h,
-  showSelectAll: V = !1,
-  selectAllRender: ke,
-  optionLabelRender: D,
-  getOptionKeywords: P = (r) => [
-    String(r.value),
-    pe(r.label)
+import { SelectTrigger as u } from "../select-trigger/component.js";
+import { BaseMenuItem as H } from "../base-menu/item.js";
+import { Empty as be } from "../empty/component.js";
+import { useControlledState as J } from "../hooks/useControlledState.js";
+import { useCls as he } from "../utils/antdUtils.js";
+import { clsx as s } from "../utils/cn.js";
+import { reactNodeToString as L } from "../utils/reactToString.js";
+const ue = ({
+  options: c = [],
+  value: Q,
+  defaultValue: w,
+  onChange: A,
+  placeholder: C = "Select...",
+  disabled: W = !1,
+  status: Y,
+  allowClear: D = !1,
+  multiple: r = !1,
+  showSearch: fe = !0,
+  open: Z,
+  onOpenChange: z,
+  className: ee,
+  classNames: b,
+  size: T = "middle",
+  optionRender: F,
+  onSearch: M,
+  clearIcon: P,
+  suffixIcon: j,
+  // showSelectionSummary: _showSelectionSummary = false,
+  // selectionSummaryRender,
+  showSelectAll: B = !1,
+  optionLabelRender: v,
+  getOptionKeywords: pe = (h) => [
+    String(h.value),
+    L(h.label)
   ],
-  ...Q
-}, U) => {
-  const [r, S] = F(
-    j,
-    p,
-    k !== void 0 ? k : l ? [] : void 0
-  ), [w, M] = F(
-    $,
-    B,
+  ...oe
+}, ne) => {
+  const [h, E] = J(
+    Q,
+    A,
+    w !== void 0 ? w : r ? [] : void 0
+  ), [R, k] = J(
+    Z,
+    z,
     !1
-  ), c = be(), {
-    status: X
-    // hasFeedback,
-    // feedbackIcon,
-  } = T(ie), Y = T(ae), Z = L || X, ee = K || Y, n = u(
-    (e) => {
-      S(e), p?.(e);
-    },
-    [S, p]
-  ), N = u(
+  ), l = he(), $ = de(null), { status: te } = G(ae), re = G(se), N = Y || te, p = W || re, m = y(
     (e) => {
-      if (l) {
-        const t = Array.isArray(r) ? r : [], o = t.includes(e) ? t.filter((i) => i !== e) : [...t, e];
-        n(o);
-      } else
-        n(e);
+      E(e), A?.(e);
     },
-    [l, r, n]
-  ), y = u(() => {
-    if (l) {
-      const e = s.map((t) => t.value);
-      n(e);
+    [E, A]
+  ), K = y(() => {
+    if (r) {
+      const e = c.map((n) => n.value);
+      m(e);
     }
-  }, [l, s, n]), v = u(() => {
-    l && n([]);
-  }, [l, n]), te = b(() => s.map((e) => ({
-    type: "item",
-    // todo: make this type better
-    key: e.value,
-    icon: e.icon,
-    label: e.label,
-    disabled: e.disabled,
-    onClick: () => !e.disabled && N(e.value)
-  })), [s, N]), le = b(() => {
-    if (!V || !l || s.length === 0)
+  }, [r, c, m]), V = y(() => {
+    r && m([]);
+  }, [r, m]), _ = y(() => {
+    m(r ? [] : void 0);
+  }, [r, m]), d = O(() => Array.isArray(h) ? h : h ? [h] : [], [h]), S = O(() => {
+    if (!B || !r || c.length === 0)
       return null;
-    const e = Array.isArray(r) ? r : [], t = s.map((A) => A.value), o = e.filter(
-      (A) => t.includes(A)
-    ), i = o.length === s.length && s.length > 0, C = o.length > 0 && o.length < s.length;
-    return /* @__PURE__ */ oe(ne, { children: [
-      /* @__PURE__ */ f(
-        fe,
-        {
-          item: {
-            type: "item",
-            key: "select_all",
-            label: "Select All",
-            onClick: () => {
-              C || i ? v() : y();
-            }
-          },
-          inCombobox: g,
-          selected: i,
-          showCheckbox: !0,
-          indeterminate: C,
-          renderAsNativeElement: !0,
-          onSelect: () => {
-            C || i ? v() : y();
-          }
-        },
-        "select_all"
-      ),
-      /* @__PURE__ */ f(de, {})
-    ] });
-  }, [
-    V,
-    l,
-    s,
-    r,
-    g,
-    v,
-    y
-  ]), d = b(() => Array.isArray(r) ? r : r ? [r] : [], [r]), a = d.map((e) => s.find((t) => t.value === e)).filter(Boolean), { displayValue: re, displayPrefix: se } = b(() => {
-    if (a.length === 0)
-      return { displayValue: void 0, displayPrefix: void 0 };
-    if (l) {
-      const t = `${a.length} ${a.length === 1 ? "item" : "items"} selected`;
-      return I ? h ? {
-        displayValue: h(d),
-        displayPrefix: void 0
-      } : {
-        displayValue: t,
-        // TODO: Create icon component for multiple selection summary
-        displayPrefix: void 0
-      } : a.length === 1 ? {
-        displayValue: a[0].label,
-        displayPrefix: a[0].icon
-      } : {
-        displayValue: t,
-        displayPrefix: void 0
-      };
-    }
-    const e = a[0];
+    const e = d.filter(
+      (a) => c.some((g) => g.value === a)
+    ), n = e.length === c.length && c.length > 0, i = e.length > 0 && e.length < c.length;
     return {
-      displayValue: e?.label,
-      displayPrefix: e?.icon
+      checked: n,
+      indeterminate: i,
+      onToggle: () => {
+        i || n ? V() : K();
+      }
     };
   }, [
-    a,
-    l,
-    I,
-    h,
-    d
-  ]);
-  return /* @__PURE__ */ f("div", { ref: U, className: m(c("combobox"), W), ...Q, children: /* @__PURE__ */ f(
-    me,
+    B,
+    r,
+    c,
+    d,
+    V,
+    K
+  ]), ce = O(() => c.map((e) => e.value), [c]), U = O(() => r ? d.length > 0 ? `${d.length} item${d.length === 1 ? "" : "s"} selected` : null : c.find(
+    (n) => n.value === d[0]
+  )?.label || null, [r, d, c]), X = s(
+    l("combobox-input"),
+    l(`combobox-input-${T}`),
+    N && l(`combobox-input-${N}`),
+    b?.input
+  );
+  return /* @__PURE__ */ o("div", { ref: ne, className: s(l("combobox"), ee), ...oe, children: /* @__PURE__ */ f(
+    t.Root,
     {
-      items: te,
-      open: w,
-      onOpenChange: M,
-      placement: E,
-      showSearch: g,
-      searchProps: {
-        placeholder: "Search options...",
-        ...J
+      value: r ? d : d[0] ?? null,
+      onValueChange: (e) => {
+        m(
+          r ? Array.isArray(e) ? e : [] : e
+        );
       },
-      className: m(c("combobox-dropdown")),
-      classNames: {
-        trigger: m(c("combobox-trigger-wrapper")),
-        popup: m(c("combobox-popup")),
-        item: m(c("combobox-option"), x?.option),
-        ...x
+      open: R,
+      onOpenChange: k,
+      multiple: r,
+      disabled: p,
+      items: ce,
+      itemToStringLabel: (e) => {
+        const n = c.find((i) => i.value === e);
+        return L(n?.label || String(e));
       },
-      popupMatchTriggerWidth: !0,
-      keepOpenOnSelect: l,
-      highlightedItemKey: l ? void 0 : d[0],
-      showCheckbox: l,
-      beforeList: le,
-      selectedItemKeys: d,
-      getItemKeywords: P ? (e) => {
-        const t = s.find(
-          (o) => o.value === e.key
-        );
-        return t ? P(t) : [];
-      } : void 0,
-      itemLabelRender: D ? (e, t) => {
-        const o = s.find(
-          (i) => i.value === e.key
-        );
-        return o ? D?.(o, t) : null;
-      } : void 0,
-      ...H,
-      children: /* @__PURE__ */ f(
-        ue,
-        {
-          value: re,
-          prefix: se,
-          placeholder: _,
-          disabled: ee,
-          status: Z,
-          open: w,
-          size: q,
-          allowClear: R,
-          suffixIcon: G,
-          clearIcon: z,
-          classNames: {
-            trigger: x?.trigger,
-            ...O?.classNames
-          },
-          onClear: () => {
-            n(l ? [] : void 0);
-          },
-          onOpenChange: M,
-          role: "combobox",
-          ...O
-        }
-      )
+      children: [
+        r ? (
+          /* Multiple Selection Layout using SelectTrigger compound components */
+          /* @__PURE__ */ f(
+            u.Root,
+            {
+              ref: $,
+              size: T,
+              disabled: p,
+              open: R,
+              status: N,
+              placeholder: C,
+              displayValue: U,
+              allowClear: D,
+              suffixIcon: j,
+              clearIcon: P,
+              onClear: _,
+              onOpenChange: k,
+              className: s(
+                b?.trigger,
+                l("combobox-trigger-multiple")
+              ),
+              as: "div",
+              children: [
+                /* @__PURE__ */ o(
+                  u.Content,
+                  {
+                    contentRender: ({ className: e, children: n, ...i }) => /* @__PURE__ */ o(
+                      t.Chips,
+                      {
+                        className: s(l("combobox-chips"), e),
+                        ...i,
+                        children: /* @__PURE__ */ o(t.Value, { children: (a) => /* @__PURE__ */ f(q, { children: [
+                          a.map((g) => {
+                            const x = c.find(
+                              (le) => le.value === g
+                            );
+                            return /* @__PURE__ */ f(
+                              t.Chip,
+                              {
+                                className: s(l("combobox-chip")),
+                                children: [
+                                  x?.icon && /* @__PURE__ */ o(
+                                    "span",
+                                    {
+                                      className: s(l("combobox-chip-icon")),
+                                      children: x.icon
+                                    }
+                                  ),
+                                  /* @__PURE__ */ o("span", { className: s(l("combobox-chip-text")), children: x ? v ? v(x) : x.label : g }),
+                                  /* @__PURE__ */ o(
+                                    t.ChipRemove,
+                                    {
+                                      className: s(l("combobox-chip-remove")),
+                                      children: /* @__PURE__ */ o(me, {})
+                                    }
+                                  )
+                                ]
+                              },
+                              g
+                            );
+                          }),
+                          /* @__PURE__ */ o(
+                            t.Input,
+                            {
+                              placeholder: a.length > 0 ? "" : C,
+                              className: X,
+                              disabled: p,
+                              onChange: (g) => {
+                                M?.(g.target.value);
+                              }
+                            }
+                          )
+                        ] }) })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  u.Clear,
+                  {
+                    render: (e) => /* @__PURE__ */ o(t.Clear, { ...e })
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  u.Arrow,
+                  {
+                    render: (e, { icon: n }) => /* @__PURE__ */ o(t.Trigger, { ...e, children: /* @__PURE__ */ o(t.Icon, { children: n }) })
+                  }
+                )
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ f(
+          u.Root,
+          {
+            ref: $,
+            as: "div",
+            size: T,
+            disabled: p,
+            open: R,
+            status: N,
+            placeholder: C,
+            displayValue: U,
+            allowClear: D,
+            suffixIcon: j,
+            clearIcon: P,
+            onClear: _,
+            onOpenChange: k,
+            className: s(
+              b?.trigger,
+              l("combobox-trigger-single")
+            ),
+            children: [
+              /* @__PURE__ */ o(
+                u.Content,
+                {
+                  contentRender: ({ className: e, children: n, ...i }) => /* @__PURE__ */ o(
+                    t.Input,
+                    {
+                      placeholder: C,
+                      className: s(e, X),
+                      disabled: p,
+                      onChange: (a) => {
+                        M?.(a.target.value);
+                      },
+                      ...i
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ o(
+                u.Clear,
+                {
+                  render: (e) => /* @__PURE__ */ o(t.Clear, { ...e })
+                }
+              ),
+              /* @__PURE__ */ o(
+                u.Arrow,
+                {
+                  render: (e, { icon: n }) => /* @__PURE__ */ o(t.Trigger, { ...e, children: /* @__PURE__ */ o(t.Icon, { children: n }) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(t.Portal, { children: /* @__PURE__ */ o(
+          t.Positioner,
+          {
+            anchor: $.current,
+            sideOffset: 4,
+            render: (e) => /* @__PURE__ */ o(I.Root, { ...e }),
+            children: /* @__PURE__ */ f(
+              t.Popup,
+              {
+                className: s(l("combobox-popup"), b?.portal),
+                render: (e) => /* @__PURE__ */ o(I.Popup, { ...e }),
+                children: [
+                  S && /* @__PURE__ */ f(q, { children: [
+                    /* @__PURE__ */ o(
+                      H,
+                      {
+                        as: "button",
+                        type: "button",
+                        className: s(l("combobox-select-all")),
+                        selected: S.checked,
+                        onClick: S.onToggle,
+                        indeterminate: S.indeterminate,
+                        showCheckbox: !0,
+                        children: "Select All"
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      t.Separator,
+                      {
+                        render: (e) => /* @__PURE__ */ o(I.Divider, { ...e })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ o(
+                    t.List,
+                    {
+                      className: s(l("combobox-list"), b?.list),
+                      render: (e) => /* @__PURE__ */ o(I.List, { ...e }),
+                      children: (e) => {
+                        const n = c.find((a) => a.value === e), i = d.includes(e);
+                        return F ? F(n, {}) : /* @__PURE__ */ o(
+                          H,
+                          {
+                            disabled: n.disabled,
+                            selected: i,
+                            showCheckbox: r,
+                            icon: n.icon,
+                            classNames: {
+                              root: s(b?.option),
+                              icon: b?.optionIcon,
+                              text: b?.optionText
+                            },
+                            labelRender: v ? (a) => v(n, a) : void 0,
+                            render: (a) => /* @__PURE__ */ o(
+                              t.Item,
+                              {
+                                value: e,
+                                disabled: n.disabled,
+                                ...a,
+                                "data-disabled": n.disabled,
+                                "data-selected": i
+                              }
+                            ),
+                            children: n.label
+                          },
+                          n.value
+                        );
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ o(t.Empty, { className: s(l("combobox-empty")), children: /* @__PURE__ */ o(be, { description: "No options found" }) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
     }
   ) });
-}, xe = ce(ge), Le = Object.assign(xe, {
+}, ge = ie(ue), Fe = Object.assign(ge, {
   // Add any sub components here if needed
 });
 export {
-  Le as Combobox,
-  Le as default
+  Fe as Combobox,
+  Fe as default
 };
 //# sourceMappingURL=component.js.map