@oneplatformdev/ui 0.1.99-beta.214 → 0.1.99-beta.216

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 0.1.99-beta.216 (2026-02-21)
+
+### 🚀 Features
+
+- **Combobox:** enhance nested options handling with deep space adjustments, toggle logic, and improved icon usage ([c66fc86](https://github.com/oneplatformdev/core-web/commit/c66fc86))
+- **Combobox:** add `type` prop for single/multi-select, update render logic and styling for selection tracking ([9e019e8](https://github.com/oneplatformdev/core-web/commit/9e019e8))
+- **Combobox:** introduce multi-select support with `MultiComboboxProps` and extend type handling for single and multi selection scenarios ([7e6de67](https://github.com/oneplatformdev/core-web/commit/7e6de67))
+- **Combobox:** introduce multi-select support with `MultiComboboxProps` and extend type handling for single and multi selection scenarios ([3993506](https://github.com/oneplatformdev/core-web/commit/3993506))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.216
+- Updated @oneplatformdev/hooks to 0.1.99-beta.216
+- Updated @oneplatformdev/tokens to 0.1.99-beta.216
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
+## 0.1.99-beta.215 (2026-02-19)
+
+### 🩹 Fixes
+
+- **Combobox:** rename `ref` to `comboboxRef` to resolve prop destructuring conflict ([e211cb0](https://github.com/oneplatformdev/core-web/commit/e211cb0))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.215
+- Updated @oneplatformdev/hooks to 0.1.99-beta.215
+- Updated @oneplatformdev/tokens to 0.1.99-beta.215
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
 ## 0.1.99-beta.214 (2026-02-19)
 
 ### 🚀 Features

package/Combobox/Combobox.d.ts

@@ -1,3 +1,5 @@
-import { ComboboxProps } from './Combobox.types';
-export declare const Combobox: <Data extends object>(props: ComboboxProps<Data>) => import("react/jsx-runtime").JSX.Element;
+import { JSX } from 'react';
+import { MultiComboboxProps, SingleComboboxProps } from './Combobox.types';
+export declare function Combobox<Data extends object>(props: SingleComboboxProps<Data>): JSX.Element;
+export declare function Combobox<Data extends object>(props: MultiComboboxProps<Data>): JSX.Element;
 //# sourceMappingURL=Combobox.d.ts.map

package/Combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqB1B,eAAO,MAAM,QAAQ,GAAI,IAAI,SAAS,MAAM,EAAI,OAAO,aAAa,CAAC,IAAI,CAAC,4CAiTzE,CAAA"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACK,GAAG,EAOd,MAAM,OAAO,CAAC;AAGf,OAAO,EAIkB,kBAAkB,EAAE,mBAAmB,EAC/D,MAAM,kBAAkB,CAAC;AAI1B,wBAAgB,QAAQ,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;AAC7F,wBAAgB,QAAQ,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC"}

package/Combobox/Combobox.js

@@ -1,257 +1,181 @@
-import { jsx as t, jsxs as p, Fragment as q } from "react/jsx-runtime";
-import { useState as f, useCallback as m, useEffect as pe, useMemo as z, useImperativeHandle as fe, useLayoutEffect as ue } from "react";
-import { LoadingMask as K } from "../LoadingMask/LoadingMask.js";
-import "../LoadingMask/RenderLoadingMask.js";
-import { Popover as me, PopoverTrigger as he, PopoverContent as ge } from "../Popover/Popover.js";
-import { Button as be } from "../Button/Button.js";
-import "../Button/buttonVariants.js";
-import { Command as ye, CommandInput as ve, CommandList as xe, CommandGroup as Ce, CommandEmpty as Q, CommandItem as we } from "../Command/Command.js";
-import { cn as C } from "@oneplatformdev/utils";
-import { useDebounceCallback as Ne } from "@oneplatformdev/hooks";
-import { X as Oe, ChevronDown as Se } from "lucide-react";
-import { ComboboxOptions as Le } from "./ComboboxOptions.js";
-const Ie = (k) => {
-  const { value: h, flattenOptions: n = [], selectedOption: D } = k;
-  if (!h) return "No value for render label";
-  const N = [n.find((g) => String(g.value).toLowerCase() === String(h).toLowerCase()), D].filter(Boolean).map((g) => g.label).find(Boolean);
-  return N || h;
-}, He = (k) => {
+import { jsx as T, jsxs as te } from "react/jsx-runtime";
+import { useState as h, useCallback as g, useEffect as ne, useMemo as k, useImperativeHandle as oe, useLayoutEffect as se } from "react";
+import { Popover as re } from "../Popover/Popover.js";
+import { useDebounceCallback as ae } from "@oneplatformdev/hooks";
+import { DEFAULT_COMBOBOX_TYPE as ie } from "./Combobox.types.js";
+import { ComboboxRenderTrigger as ce } from "./ComboboxRenderTrigger.js";
+import { ComboboxRenderContent as le } from "./ComboboxRenderContent.js";
+function pe(n) {
   const {
-    ref: h,
-    value: n,
-    onChange: D,
-    placeholder: w,
-    disabled: N,
-    searchLabel: g = "Type to search...",
-    fetchOptions: Y,
-    options: M,
-    emptyLabel: J = "No options",
-    emptyAction: O,
-    commandInputAction: E,
-    listHeadAction: S,
-    listFooterAction: L,
-    slotProps: T = {},
-    onMount: j,
-    defaultNodeDisabled: Z,
-    defaultNodeMatched: $,
-    defaultNodeMuted: ee,
-    defaultNodeInteractive: te,
-    renderTrigger: i,
-    renderList: B
-  } = k, [I, U] = f(!1), [s, R] = f(!1), [l, G] = f(""), [b, H] = f(), [o, u] = f(!1), [a, ne] = f([]), [oe, re] = f([]), y = m((e) => {
-    const c = (W) => {
-      const d = [], _ = (F) => {
-        if (F)
-          for (const x of F)
-            d.push(x), x.items && x.items.length && _(x.items);
+    value: u,
+    options: A,
+    placeholder: x,
+    disabled: B,
+    searchLabel: F,
+    emptyLabel: _,
+    fetchOptions: j,
+    renderTrigger: H,
+    commandInputAction: U,
+    renderList: z,
+    listHeadAction: G,
+    listFooterAction: N,
+    emptyAction: V,
+    slotProps: X
+  } = n, y = n.type ?? ie, [Y, P] = h(!1), [f, C] = h(!1), [b, w] = h(!1), [p, L] = h(""), [O, S] = h(/* @__PURE__ */ new Map()), [d, $] = h([]), [q, J] = h([]), v = g((e) => {
+    const s = (t) => {
+      const r = [], a = (i) => {
+        if (i)
+          for (const l of i)
+            r.push(l), l.items && l.items.length && a(l.items);
       };
-      _(W), re((F) => {
-        if (!d.find((P) => !!n && String(P.value) === String(n))) {
-          const P = b || F.find((de) => !!n && String(de.value) === String(n));
-          if (P) return [P, ...d];
+      a(t), J((i) => {
+        if (!r.find((o) => !!u && String(o.value) === String(u))) {
+          const c = ((O.size ? Array.from(O.values()) : void 0) || i).find((I) => !!u && String(I.value) === String(u));
+          if (c) return [c, ...r];
         }
-        return d;
+        return r;
       });
     };
-    ne((W) => {
-      const d = typeof e == "function" ? e(W) : e;
-      return c(d), d;
+    $((t) => {
+      const r = typeof e == "function" ? e(t) : e;
+      return s(r), S((a) => {
+        const i = new Map(a), l = Array.isArray(u) ? u : [u];
+        for (const o of l) {
+          if (!o || i.has(o)) continue;
+          const c = r.find((I) => String(I.value).toLowerCase() === String(o).toLowerCase());
+          c && i.set(c.value, c);
+        }
+        return i;
+      }), r;
     });
-  }, [b, n]);
-  pe(() => {
-    M?.length && y(M);
-  }, [M]);
-  const ae = async () => {
-    s || (V(), G(""));
-  }, V = m(async (e) => {
-    u(!0);
+  }, [O, u]);
+  ne(() => {
+    A?.length && v(A);
+  }, [A]);
+  const K = g(async (e) => {
+    w(e), e && (R(), L(""));
+  }, []), R = g(async (e) => {
+    C(!0);
     try {
-      const c = await Y(e);
-      y(c);
-    } catch (c) {
-      console.error("Unexpected error while get option:", c);
+      const s = await j(e);
+      v(s);
+    } catch (s) {
+      console.error("Unexpected error while get option:", s);
     } finally {
-      u(!1);
+      C(!1);
     }
-  }, [y]), ie = Ne(V, 1e3, {
+  }, [v]), Q = ae(R, 1e3, {
     leading: !1,
     trailing: !0
-  }), se = m((e) => {
-    u(!0), G(e), ie(e);
-  }, []), A = m((e) => {
-    D(e.value), H(e), u(!1);
-  }, []), le = m(() => {
-    A({ value: "", label: "" }), H(void 0), u(!1);
-  }, []), X = z(() => !!l && !a.length && !o, [o, a.length, l]), v = z(() => !a.length && !o, [o, a.length, l]), r = z(() => ({
-    options: a,
-    setOptions: y,
-    selectedOption: b,
-    setSelectedOption: H,
-    search: l || "",
-    setSearch: G,
-    onChangeOption: A,
-    open: s,
-    setOpen: R,
-    loading: o,
-    setLoading: u,
-    isEmptyList: v,
-    isSearchedEmptyList: X,
-    placeholder: w
-  }), [w, o, s, a, l, b, v, X, y, A]);
-  fe(h, () => r, [r]);
-  const ce = m(async () => {
-    if (j) {
-      U(!0);
+  }), W = g((e) => {
+    C(!0), L(e), Q(e);
+  }, []), M = g((e) => {
+    n.type === "single" && (S((s) => {
+      let t = new Map(s);
+      const r = t.has(e.value);
+      return t.has(e.value) ? t = /* @__PURE__ */ new Map() : t.set(e.value, e), r ? n.onChange?.(void 0) : n.onChange?.(e.value), t;
+    }), w(!1)), n.type === "multi" && S((s) => {
+      const t = new Map(s);
+      return t.has(e.value) ? t.delete(e.value) : t.set(e.value, e), n.onChange?.(Array.from(t.keys())), t;
+    });
+  }, [n.type, n.onChange]), Z = g(() => {
+    n.onChange(void 0), S(/* @__PURE__ */ new Map()), w(!1);
+  }, [n.onChange]), D = k(() => !!p && !d.length && !f, [f, d.length, p]), E = k(() => !d.length && !f, [f, d.length, p]), m = k(() => {
+    const e = {
+      options: d,
+      setOptions: v,
+      search: p || "",
+      setSearch: L,
+      onChangeOption: M,
+      open: b,
+      setOpen: w,
+      loading: f,
+      setLoading: C,
+      isEmptyList: E,
+      isSearchedEmptyList: D,
+      placeholder: x
+    }, s = Array.from(O.values());
+    if (y === "multi")
+      return { ...e, type: "multi", selectedOption: s, setSelectedOption: (a) => {
+        S((i) => {
+          const l = Array.from(i.values()), o = typeof a == "function" ? a(l) : a;
+          return o ? new Map(o.map((c) => [c.value, c])) : /* @__PURE__ */ new Map();
+        });
+      } };
+    if (y === "single") {
+      const t = s[0];
+      return { ...e, type: "single", selectedOption: t, setSelectedOption: (a) => {
+        S((i) => {
+          const [l] = Array.from(i.values()), o = typeof a == "function" ? a(l) : a, c = /* @__PURE__ */ new Map();
+          return o && c.set(o.value, o), c;
+        });
+      } };
+    }
+    throw new Error(`Combobox type ${y} is not supported`);
+  }, [x, f, b, d, p, O, E, D, v, M, n.type]);
+  oe(n.imperativeRef, () => m, [m]);
+  const ee = g(async () => {
+    if (n.onMount) {
+      P(!0);
       try {
-        await j(r);
+        n.onMount?.(m);
       } finally {
-        U(!1);
+        P(!1);
       }
     }
-  }, [j, r]);
-  return ue(() => {
-    ce();
-  }, []), /* @__PURE__ */ t("div", { className: "w-full", children: /* @__PURE__ */ p(
-    me,
+  }, [n.onMount, m]);
+  return se(() => {
+    ee();
+  }, []), /* @__PURE__ */ T("div", { className: "w-full", children: /* @__PURE__ */ te(
+    re,
     {
-      open: s,
-      onOpenChange: (e) => {
-        R(e), e && ae();
-      },
+      open: b,
+      onOpenChange: K,
       children: [
-        /* @__PURE__ */ t(he, { asChild: !0, className: "border-input", children: /* @__PURE__ */ p(
-          be,
+        /* @__PURE__ */ T(
+          ce,
           {
-            variant: i ? "none" : "contained",
-            color: "secondary",
-            role: "combobox",
-            "aria-expanded": s,
-            className: C(
-              "relative w-full justify-between bg-transparent",
-              !i && "font-normal text-sm",
-              "border border-border",
-              s && "border-2 outline-hidden ring-1 ring-ring",
-              "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
-              i && "p-0",
-              i && s && "p-0 border-1 ring-0 ring-transparent"
-            ),
-            disabled: N || I,
-            children: [
-              I && /* @__PURE__ */ t(K, { fullWidth: !0 }),
-              !I && i && i(r),
-              !I && !i && /* @__PURE__ */ p(q, { children: [
-                /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap",
-                    children: n ? Ie({ value: n, flattenOptions: oe, selectedOption: b }) : /* @__PURE__ */ t("span", { className: "text-gray-400", children: w })
-                  }
-                ),
-                n ? /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: C(
-                      "absolute top-0 right-1",
-                      "flex items-center justify-center",
-                      "w-9 aspect-square [&_svg]:size-5",
-                      "opacity-50 cursor-pointer hover:opacity-100"
-                    ),
-                    onClick: (e) => {
-                      e.stopPropagation(), le();
-                    },
-                    children: /* @__PURE__ */ t(Oe, {})
-                  }
-                ) : /* @__PURE__ */ t(Se, { className: "opacity-50 w-4 h-4" })
-              ] })
-            ]
+            value: u,
+            type: y,
+            open: b,
+            initialLoading: Y,
+            selectedOptions: O,
+            flattenOptions: q,
+            onSelect: M,
+            onClearSelections: Z,
+            callbackStateParams: m,
+            renderTrigger: H,
+            placeholder: x,
+            disabled: B
           }
-        ) }),
-        /* @__PURE__ */ t(
-          ge,
+        ),
+        /* @__PURE__ */ T(
+          le,
           {
-            className: C(
-              "w-(--radix-popper-anchor-width) max-w-none p-2"
-            ),
-            align: "start",
-            children: /* @__PURE__ */ p(ye, { shouldFilter: !1, children: [
-              /* @__PURE__ */ t(
-                ve,
-                {
-                  placeholder: g,
-                  value: l,
-                  onValueChange: se
-                }
-              ),
-              typeof E == "function" ? E(r) : E,
-              /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ p(
-                Ce,
-                {
-                  className: C(
-                    !a.length && "p-0 shadow-none",
-                    "px-0 py-2"
-                  ),
-                  children: [
-                    o && /* @__PURE__ */ t(K, { fullWidth: !0 }),
-                    !o && v && /* @__PURE__ */ t(q, { children: O ? /* @__PURE__ */ p(Q, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
-                      /* @__PURE__ */ t("span", { children: J }),
-                      typeof O == "function" ? O(r) : O
-                    ] }) : /* @__PURE__ */ t(Q, { children: J }) }),
-                    !o && !v && /* @__PURE__ */ p(q, { children: [
-                      S && /* @__PURE__ */ t(
-                        we,
-                        {
-                          asChild: !0,
-                          className: "w-full",
-                          children: typeof S == "function" ? S(r) : S
-                        },
-                        "combobox-list-head-action"
-                      ),
-                      B && B(r),
-                      !B && /* @__PURE__ */ t(
-                        Le,
-                        {
-                          searchTerm: l,
-                          value: n,
-                          options: a,
-                          onChangeOption: A,
-                          setOpen: R,
-                          defaultNodeDisabled: Z,
-                          defaultNodeMatched: $,
-                          defaultNodeMuted: ee,
-                          defaultNodeInteractive: te
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ) }),
-              !o && L && !v && /* @__PURE__ */ t(
-                "div",
-                {
-                  "data-slot": "command-footer-wrapper",
-                  ...(() => {
-                    const { bordered: e = !0, ...c } = T?.listFooterAction || {};
-                    return {
-                      ...c,
-                      "data-slot-bordered": JSON.stringify(e)
-                    };
-                  })(),
-                  className: C(
-                    "flex w-full items-center gap-2 px-0",
-                    (T?.listFooterAction?.bordered ?? !0) && "border-t px-0 pt-2",
-                    T?.listFooterAction?.className
-                  ),
-                  children: typeof L == "function" ? L(r) : L
-                }
-              )
-            ] })
+            value: u,
+            type: y,
+            options: d,
+            search: p,
+            onSearch: W,
+            onSelect: M,
+            loading: f,
+            isEmptyList: E,
+            callbackStateParams: m,
+            commandInputAction: U,
+            renderList: z,
+            listHeadAction: G,
+            listFooterAction: N,
+            emptyAction: V,
+            slotProps: X,
+            searchLabel: F,
+            emptyLabel: _
           }
         )
       ]
     }
   ) });
-};
+}
 export {
-  He as Combobox
+  pe as Combobox
 };
 //# sourceMappingURL=Combobox.js.map

package/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { LoadingMask } from '../LoadingMask';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Button } from '../Button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { ChevronDown, X } from 'lucide-react';\nimport {\n  ComboboxCallbackStateParams,\n  ComboboxOption,\n  ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\n\n// TODO: refactor next component | nlt code\nconst getSelectRenderLabel = <Data extends object>(params: {\n  value: ComboboxProps<Data>['value'];\n  flattenOptions: ComboboxOption<Data>[];\n  selectedOption?: ComboboxOption<Data>;\n}): string => {\n  const { value, flattenOptions = [], selectedOption } = params;\n  if (!value) return 'No value for render label';\n  const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\n  const label = [ flattenedOption, selectedOption ]\n    .filter(Boolean)\n    .map(o => o!.label)\n    .find(Boolean);\n  if (!label) return value;\n  return label;\n}\n\n// TODO: refactor next component | nlt code\nexport const Combobox = <Data extends object, >(props: ComboboxProps<Data>) => {\n  const {\n    ref,\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    searchLabel = 'Type to search...',\n    fetchOptions,\n    options: itemOptions,\n    emptyLabel = 'No options',\n    emptyAction,\n    commandInputAction,\n    listHeadAction,\n    listFooterAction,\n    slotProps = {},\n    onMount,\n    defaultNodeDisabled,\n    defaultNodeMatched,\n    defaultNodeMuted,\n    defaultNodeInteractive,\n    renderTrigger,\n    renderList,\n  } = props;\n  const [ initialLoading, setInitialLoading ] = useState(false);\n  const [ open, setOpen ] = useState(false);\n  const [ searchTerm, setSearchTerm ] = useState('');\n  const [ selectedOption, setSelectedOption ] = useState<ComboboxOption<Data>>();\n  const [ loading, setLoading ] = useState(false);\n\n  const [ options, setOptionsDispatch ] = useState<ComboboxOption<Data>[]>([]);\n  const [ flattenOptions, setFlattenOptions ] = useState<ComboboxOption<Data>[]>([]);\n  const setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>> = useCallback((stater) => {\n    const flatten = (next: ComboboxOption<Data>[]) => {\n      const res: ComboboxOption<Data>[] = [];\n      const walk = (nodes?: ComboboxOption<Data>[]) => {\n        if (!nodes) return;\n        for (const node of nodes) {\n          res.push(node);\n          if (node.items && node.items.length) walk(node.items);\n        }\n      };\n      walk(next);\n      setFlattenOptions((prev) => {\n        const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\n\n        if (!isIncludedInRes) {\n          const current = selectedOption || prev.find(o => !!value && String(o.value) === String(value))\n          if (current) return [ current, ...res ];\n        }\n\n        return res;\n      });\n    }\n    setOptionsDispatch((prev) => {\n      const next: ComboboxOption<Data>[] = typeof stater === 'function' ? stater(prev) : stater;\n      flatten(next);\n      return next;\n    });\n  }, [ selectedOption, value ])\n\n  useEffect(() => {\n    itemOptions?.length && setOptions(itemOptions);\n  }, [ itemOptions ]);\n\n  const handlePopoverOpen = async () => {\n    if (!open) {\n      void getData();\n      setSearchTerm('');\n    }\n  };\n\n  const getData = useCallback(async (search?: string) => {\n    setLoading(true);\n    try {\n      const fetchedOptions = await fetchOptions(search);\n      setOptions(fetchedOptions);\n    } catch (error) {\n      console.error('Unexpected error while get option:', error);\n    } finally {\n      setLoading(false);\n    }\n  }, [ setOptions ]);\n\n  const debouncedGetData = useDebounceCallback(getData, 1000, {\n    leading: false,\n    trailing: true,\n  });\n\n  const handleSearchChange = useCallback((value: string) => {\n    setLoading(true);\n    setSearchTerm(value);\n    debouncedGetData(value);\n  }, []);\n\n  const onChangeOption = useCallback((option: ComboboxOption<Data>) => {\n    onChange(option.value);\n    setSelectedOption(option);\n    setLoading(false);\n  }, []);\n\n  const handleClearSelection = useCallback(() => {\n    onChangeOption({ value: '', label: '' });\n    setSelectedOption(undefined);\n    setLoading(false);\n  }, []);\n\n  const isSearchedEmptyList = useMemo(() => {\n    return Boolean(searchTerm) && !options.length && !loading;\n  }, [ loading, options.length, searchTerm ])\n\n  const isEmptyList = useMemo(() => {\n    return !options.length && !loading;\n  }, [ loading, options.length, searchTerm ])\n\n  const comboboxCallbackStateParams =\n    useMemo((): ComboboxCallbackStateParams<Data> => {\n      return {\n        options,\n        setOptions,\n        selectedOption,\n        setSelectedOption,\n        search: searchTerm || '',\n        setSearch: setSearchTerm,\n        onChangeOption,\n        open,\n        setOpen,\n        loading,\n        setLoading,\n        isEmptyList,\n        isSearchedEmptyList,\n        placeholder\n      };\n    }, [ placeholder, loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions, onChangeOption ]);\n  useImperativeHandle(ref, () => comboboxCallbackStateParams, [comboboxCallbackStateParams]);\n\n  const runOnMount = useCallback(async () => {\n    if (!onMount) return;\n    setInitialLoading(true);\n    try {\n      await onMount(comboboxCallbackStateParams);\n    } finally {\n      setInitialLoading(false);\n    }\n  }, [ onMount, comboboxCallbackStateParams ]);\n\n  useLayoutEffect(() => {\n    runOnMount();\n  }, []);\n\n  return (\n    <div className=\"w-full\">\n      <Popover\n        open={open}\n        onOpenChange={(newOpen) => {\n          setOpen(newOpen);\n          if (newOpen) handlePopoverOpen();\n        }}\n      >\n        <PopoverTrigger asChild className=\"border-input\">\n          <Button\n            variant={renderTrigger ? 'none' : 'contained'}\n            color='secondary'\n            role=\"combobox\"\n            aria-expanded={open}\n            className={cn(\n              'relative w-full justify-between bg-transparent',\n              !renderTrigger && 'font-normal text-sm',\n              'border border-border',\n              open && 'border-2 outline-hidden ring-1 ring-ring',\n              'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n              renderTrigger && 'p-0',\n              renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\n            )}\n            disabled={disabled || initialLoading}\n          >\n            {initialLoading && <LoadingMask fullWidth/>}\n            {!initialLoading && renderTrigger && renderTrigger(comboboxCallbackStateParams)}\n            {!initialLoading && !renderTrigger && (\n              <>\n                  <span\n                    className=\"truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap\">\n                    {value\n                      ? getSelectRenderLabel({ value, flattenOptions, selectedOption })\n                      : <span className=\"text-gray-400\">{placeholder}</span>\n                    }\n                  </span>\n                {value ? (\n                  <div\n                    className={cn(\n                      'absolute top-0 right-1',\n                      'flex items-center justify-center',\n                      'w-9 aspect-square [&_svg]:size-5',\n                      'opacity-50 cursor-pointer hover:opacity-100'\n                    )}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      handleClearSelection();\n                    }}\n                  >\n                    <X/>\n                  </div>\n                ) : (\n                  <ChevronDown className=\"opacity-50 w-4 h-4\"/>\n                )}\n              </>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className={cn(\n            \"w-(--radix-popper-anchor-width) max-w-none p-2\"\n          )}\n          align=\"start\"\n        >\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchLabel}\n              value={searchTerm}\n              onValueChange={handleSearchChange}\n            />\n            {typeof commandInputAction === 'function'\n              ? commandInputAction(comboboxCallbackStateParams)\n              : commandInputAction}\n            <CommandList>\n              <CommandGroup\n                className={cn(\n                  !options.length && 'p-0 shadow-none',\n                  'px-0 py-2',\n                )}\n              >\n                {loading && <LoadingMask fullWidth/>}\n                {!loading && isEmptyList && (\n                  <>\n                    {emptyAction ? (\n                      <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n                        <span>{emptyLabel}</span>\n                        {typeof emptyAction === 'function'\n                          ? emptyAction(comboboxCallbackStateParams)\n                          : emptyAction}\n                      </CommandEmpty>\n                    ) : (\n                      <CommandEmpty>{emptyLabel}</CommandEmpty>\n                    )}\n                  </>\n                )}\n                {!loading && !isEmptyList && (\n                  <>\n                    {listHeadAction && (\n                      <CommandItem\n                        key='combobox-list-head-action'\n                        asChild\n                        className='w-full'\n                      >\n                        {typeof listHeadAction === 'function'\n                          ? listHeadAction(comboboxCallbackStateParams)\n                          : listHeadAction}\n                      </CommandItem>\n                    )}\n                    {renderList && renderList(comboboxCallbackStateParams)}\n                    {!renderList && (\n                      <ComboboxOptions\n                        searchTerm={searchTerm}\n                        value={value}\n                        options={options}\n                        onChangeOption={onChangeOption}\n                        setOpen={setOpen}\n                        defaultNodeDisabled={defaultNodeDisabled}\n                        defaultNodeMatched={defaultNodeMatched}\n                        defaultNodeMuted={defaultNodeMuted}\n                        defaultNodeInteractive={defaultNodeInteractive}\n                      />\n                    )}\n                  </>\n                )}\n              </CommandGroup>\n            </CommandList>\n\n            {/*LIST FOOTER ACTION*/}\n            {!loading && listFooterAction && !isEmptyList && (\n              <div\n                data-slot=\"command-footer-wrapper\"\n                {...((() => {\n                  const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n                  return {\n                    ...rest,\n                    'data-slot-bordered': JSON.stringify(bordered)\n                  }\n                })())}\n                className={cn(\n                  \"flex w-full items-center gap-2 px-0\",\n                  (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n                  slotProps?.listFooterAction?.className,\n                )}\n              >\n                {typeof listFooterAction === 'function'\n                  ? listFooterAction(comboboxCallbackStateParams)\n                  : listFooterAction}\n              </div>\n            )}\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","props","ref","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderTrigger","renderList","initialLoading","setInitialLoading","useState","open","setOpen","searchTerm","setSearchTerm","setSelectedOption","loading","setLoading","options","setOptionsDispatch","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","handleClearSelection","isSearchedEmptyList","useMemo","isEmptyList","comboboxCallbackStateParams","useImperativeHandle","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","X","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions","bordered","rest"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  Dispatch, JSX,\n  SetStateAction,\n  useCallback,\n  useEffect, useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { Popover } from '../Popover';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport {\n  ComboboxCallbackStateParams, ComboboxCallbackStateParamsRenderHandler,\n  ComboboxOption,\n  ComboboxProps, ComboboxSelectedType,\n  DEFAULT_COMBOBOX_TYPE, MultiComboboxProps, SingleComboboxProps,\n} from './Combobox.types';\nimport { ComboboxRenderTrigger } from \"./ComboboxRenderTrigger\";\nimport { ComboboxRenderContent } from \"./ComboboxRenderContent\";\n\nexport function Combobox<Data extends object>(props: SingleComboboxProps<Data>): JSX.Element;\nexport function Combobox<Data extends object>(props: MultiComboboxProps<Data>): JSX.Element;\n\nexport function Combobox<Data extends object = object>(\n  props: ComboboxProps<Data, 'single'> | ComboboxProps<Data, 'multi'>\n): JSX.Element {\n  const {\n    value,\n    options: itemOptions,\n    placeholder,\n    disabled,\n    searchLabel,\n    emptyLabel,\n    fetchOptions,\n    renderTrigger,\n    commandInputAction,\n    renderList,\n    listHeadAction,\n    listFooterAction,\n    emptyAction,\n    slotProps,\n  } = props;\n\n  const type: ComboboxSelectedType = props.type ?? DEFAULT_COMBOBOX_TYPE;\n  type StateSingle = ComboboxCallbackStateParams<Data, 'single'>;\n  type StateMulti = ComboboxCallbackStateParams<Data, 'multi'>;\n  type State = StateSingle | StateMulti;\n\n  const [ initialLoading, setInitialLoading ] = useState(false);\n  const [ loading, setLoading ] = useState(false);\n\n  const [ open, setOpen ] = useState(false);\n  const [ searchTerm, setSearchTerm ] = useState('');\n\n  const [ selectedOptions, setSelectedOptions ] = useState<\n    Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>\n  >(new Map());\n\n  const [ options, _setOptions ] = useState<ComboboxOption<Data>[]>([]);\n  const [ flattenOptions, setFlattenOptions ] = useState<ComboboxOption<Data>[]>([]);\n  const setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>> = useCallback((stater) => {\n    const flatten = (next: ComboboxOption<Data>[]) => {\n      const res: ComboboxOption<Data>[] = [];\n      const walk = (nodes?: ComboboxOption<Data>[]) => {\n        if (!nodes) return;\n        for (const node of nodes) {\n          res.push(node);\n          if (node.items && node.items.length) walk(node.items);\n        }\n      };\n      walk(next);\n      setFlattenOptions((prev) => {\n        const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\n\n        if (!isIncludedInRes) {\n          const selectedOption = selectedOptions.size ? Array.from(selectedOptions.values()) : undefined;\n          const current = (selectedOption || prev).find(o => !!value && String(o.value) === String(value))\n          if (current) return [ current, ...res ];\n        }\n\n        return res;\n      });\n    }\n    _setOptions((prev) => {\n      const next: ComboboxOption<Data>[] = typeof stater === 'function' ? stater(prev) : stater;\n      flatten(next);\n      setSelectedOptions(prevSelections => {\n        const nextSelections = new Map(prevSelections);\n        const vls = Array.isArray(value) ? value : [value];\n        for (const v of vls) {\n          if(!v) continue;\n          if(nextSelections.has(v)) continue;\n          const o = next.find(o => String(o.value).toLowerCase() === String(v).toLowerCase());\n          if(!o) continue;\n          nextSelections.set(o.value, o);\n        }\n        return nextSelections;\n      })\n      return next;\n    });\n  }, [ selectedOptions, value ])\n\n  useEffect(() => {\n    itemOptions?.length && setOptions(itemOptions);\n  }, [ itemOptions ]);\n\n  const handlePopoverOpen = useCallback(async (next: boolean) => {\n    setOpen(next);\n    if(next) {\n      void getData();\n      setSearchTerm('');\n    }\n  }, []);\n\n  const getData = useCallback(async (search?: string) => {\n    setLoading(true);\n    try {\n      const fetchedOptions = await fetchOptions(search);\n      setOptions(fetchedOptions);\n    } catch (error) {\n      console.error('Unexpected error while get option:', error);\n    } finally {\n      setLoading(false);\n    }\n  }, [ setOptions ]);\n  const debouncedGetData = useDebounceCallback(getData, 1000, {\n    leading: false,\n    trailing: true,\n  });\n\n  const handleSearchChange = useCallback((value: string) => {\n    setLoading(true);\n    setSearchTerm(value);\n    debouncedGetData(value);\n  }, []);\n\n  const onChangeOption = useCallback((option: ComboboxOption<Data>) => {\n    if(props.type === 'single') {\n      setSelectedOptions(prev => {\n        let next = new Map(prev);\n        const isSelected = next.has(option.value);\n\n        if(next.has(option.value)) next = new Map();\n        else next.set(option.value, option);\n\n        if(isSelected) props.onChange?.(undefined);\n        else props.onChange?.(option.value);\n\n        return next;\n      });\n      setOpen(false);\n    }\n\n    if(props.type === 'multi') {\n      setSelectedOptions(prev => {\n        const next = new Map(prev);\n        if(next.has(option.value)) next.delete(option.value);\n        else next.set(option.value, option);\n        props.onChange?.(Array.from(next.keys()));\n        return next;\n      });\n    }\n  }, [props.type, props.onChange]);\n\n  const handleClearSelections = useCallback(() => {\n    props.onChange(undefined);\n    setSelectedOptions(new Map());\n    setOpen(false);\n  }, [props.onChange]);\n\n  const isSearchedEmptyList = useMemo(() => {\n    return Boolean(searchTerm) && !options.length && !loading;\n  }, [ loading, options.length, searchTerm ])\n\n  const isEmptyList = useMemo(() => {\n    return !options.length && !loading;\n  }, [ loading, options.length, searchTerm ])\n\n  const callbackStateParams = useMemo((): State => {\n      const base = {\n        options,\n        setOptions,\n        search: searchTerm || '',\n        setSearch: setSearchTerm,\n        onChangeOption,\n        open,\n        setOpen,\n        loading,\n        setLoading,\n        isEmptyList,\n        isSearchedEmptyList,\n        placeholder,\n      }\n\n      const selectedOptionArray = Array.from(selectedOptions.values());\n\n      if(type === 'multi') {\n        const selectedOption = selectedOptionArray\n        const setSelectedOption: Dispatch<SetStateAction<ComboboxOption<Data>[] | undefined>> = (value) => {\n          setSelectedOptions((prevSet) => {\n            const prevStateArray = Array.from(prevSet.values());\n            const nextStateArray = typeof value === 'function'\n              ? (value as (prev: ComboboxOption<Data>[]) => ComboboxOption<Data>[])(prevStateArray)\n              : value;\n            if (!nextStateArray) return new Map();\n            return new Map(nextStateArray.map(o => [o.value, o]));\n          });\n        };\n        return { ...base, type: 'multi', selectedOption, setSelectedOption } satisfies StateMulti;\n      }\n\n      if(type === 'single') {\n        const selectedOption = selectedOptionArray[0]\n        const setSelectedOption: Dispatch<SetStateAction<ComboboxOption<Data> | undefined>> = (value) => {\n          setSelectedOptions((prevSet) => {\n            const [currentSingle] = Array.from(prevSet.values());\n            const nextValue = typeof value === 'function'\n              ? (value as (prev: ComboboxOption<Data> | undefined) => ComboboxOption<Data> | undefined)(currentSingle)\n              : value;\n\n            const nextMap = new Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>();\n            if (nextValue) nextMap.set(nextValue.value, nextValue);\n            return nextMap;\n          });\n        };\n        return { ...base, type: 'single', selectedOption, setSelectedOption } satisfies StateSingle;\n      }\n\n      throw new Error(`Combobox type ${type} is not supported`);\n\n    }, [ placeholder, loading, open, options, searchTerm, selectedOptions, isEmptyList, isSearchedEmptyList, setOptions, onChangeOption, props.type ]);\n  useImperativeHandle(props.imperativeRef, () => callbackStateParams, [callbackStateParams]);\n\n  const runOnMount = useCallback(async () => {\n    if (!props.onMount) return;\n    setInitialLoading(true);\n    try {\n      if (type === 'multi') {\n        (props as MultiComboboxProps<Data>).onMount?.(callbackStateParams as StateMulti);\n      } else {\n        (props as SingleComboboxProps<Data>).onMount?.(callbackStateParams as StateSingle);\n      }\n    } finally {\n      setInitialLoading(false);\n    }\n  }, [ props.onMount, callbackStateParams ]);\n  useLayoutEffect(() => {\n    runOnMount();\n  }, []);\n\n  return (\n    <div className=\"w-full\">\n      <Popover\n        open={open}\n        onOpenChange={handlePopoverOpen}\n      >\n        <ComboboxRenderTrigger\n          value={value}\n          type={type}\n          open={open}\n          initialLoading={initialLoading}\n          selectedOptions={selectedOptions}\n          flattenOptions={flattenOptions}\n          onSelect={onChangeOption}\n          onClearSelections={handleClearSelections}\n          callbackStateParams={callbackStateParams}\n          renderTrigger={renderTrigger as ComboboxCallbackStateParamsRenderHandler<Data>}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n\n        <ComboboxRenderContent\n          value={value}\n          type={type}\n          options={options}\n          search={searchTerm}\n          onSearch={handleSearchChange}\n          onSelect={onChangeOption}\n          loading={loading}\n          isEmptyList={isEmptyList}\n          callbackStateParams={callbackStateParams}\n          commandInputAction={commandInputAction as ComboboxCallbackStateParamsRenderHandler<Data>}\n          renderList={renderList as ComboboxCallbackStateParamsRenderHandler<Data>}\n          listHeadAction={listHeadAction as ComboboxCallbackStateParamsRenderHandler<Data>}\n          listFooterAction={listFooterAction as ComboboxCallbackStateParamsRenderHandler<Data>}\n          emptyAction={emptyAction as ComboboxCallbackStateParamsRenderHandler<Data>}\n          slotProps={slotProps}\n          searchLabel={searchLabel}\n          emptyLabel={emptyLabel}\n        />\n      </Popover>\n    </div>\n  );\n}\n"],"names":["Combobox","props","value","itemOptions","placeholder","disabled","searchLabel","emptyLabel","fetchOptions","renderTrigger","commandInputAction","renderList","listHeadAction","listFooterAction","emptyAction","slotProps","type","DEFAULT_COMBOBOX_TYPE","initialLoading","setInitialLoading","useState","loading","setLoading","open","setOpen","searchTerm","setSearchTerm","selectedOptions","setSelectedOptions","options","_setOptions","flattenOptions","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","o","prevSelections","nextSelections","vls","v","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","isSelected","handleClearSelections","isSearchedEmptyList","useMemo","isEmptyList","callbackStateParams","base","selectedOptionArray","prevSet","prevStateArray","nextStateArray","selectedOption","currentSingle","nextValue","nextMap","useImperativeHandle","runOnMount","useLayoutEffect","jsx","jsxs","Popover","ComboboxRenderTrigger","ComboboxRenderContent"],"mappings":"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"}