@oneplatformdev/ui 0.1.99-beta.63 → 0.1.99-beta.65

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.1.99-beta.65 (2026-01-16)
+
+### 🚀 Features
+
+- **Dialog:** enhance text wrapping and line clamping for better readability ([639fdf5](https://github.com/oneplatformdev/core-web/commit/639fdf5))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.65
+- Updated @oneplatformdev/hooks to 0.1.99-beta.65
+- Updated @oneplatformdev/tokens to 0.1.99-beta.65
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
+## 0.1.99-beta.64 (2026-01-16)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.64
+- Updated @oneplatformdev/hooks to 0.1.99-beta.64
+- Updated @oneplatformdev/tokens to 0.1.99-beta.64
+
 ## 0.1.99-beta.63 (2026-01-16)
 
 ### 🚀 Features

package/Combobox/Combobox.d.ts

@@ -1,4 +1,3 @@
 import { ComboboxProps } from './Combobox.types';
-import * as React from "react";
-export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Combobox: <Data extends object>(props: ComboboxProps<Data>) => import("react/jsx-runtime").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;AAG1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,eAAO,MAAM,QAAQ,sFAyQpB,CAAC"}
+{"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,EAAG,OAAO,aAAa,CAAC,IAAI,CAAC,4CAuQxE,CAAA"}

package/Combobox/Combobox.js

@@ -1,205 +1,203 @@
 import { jsx as e, jsxs as p, Fragment as A } from "react/jsx-runtime";
-import { forwardRef as re, useState as s, useCallback as m, useEffect as ae, useMemo as F, useLayoutEffect as ie } from "react";
+import { useState as s, useCallback as m, useEffect as oe, useMemo as F, useLayoutEffect as re } from "react";
 import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
 import "../LoadingMask/RenderLoadingMask.js";
-import { Popover as se, PopoverTrigger as le, PopoverContent as ce } from "../Popover/Popover.js";
-import { Button as de } from "../Button/Button.js";
+import { Popover as ae, PopoverTrigger as ie, PopoverContent as se } from "../Popover/Popover.js";
+import { Button as le } from "../Button/Button.js";
 import "../Button/buttonVariants.js";
-import { Command as pe, CommandInput as me, CommandList as fe, CommandGroup as ue, CommandEmpty as _, CommandItem as he } from "../Command/Command.js";
+import { Command as ce, CommandInput as de, CommandList as pe, CommandGroup as me, CommandEmpty as _, CommandItem as fe } from "../Command/Command.js";
 import { cn as M } from "@oneplatformdev/utils";
-import { useDebounceCallback as ge } from "@oneplatformdev/hooks";
-import { X as be, ChevronsUpDown as ye } from "lucide-react";
-import { ComboboxOptions as ve } from "./ComboboxOptions.js";
-const Ce = (N) => {
-  const { value: f, flattenOptions: n = [], selectedOption: L } = N;
-  if (!f) return "No value for render label";
-  const v = [n.find((u) => String(u.value).toLowerCase() === String(f).toLowerCase()), L].filter(Boolean).map((u) => u.label).find(Boolean);
-  return v || f;
-}, je = re(
-  (N, f) => {
-    const {
-      value: n,
-      onChange: L,
-      placeholder: R,
-      disabled: v,
-      searchLabel: u = "Type to search...",
-      fetchOptions: J,
-      options: I,
-      emptyLabel: T = "No options",
-      emptyAction: C,
-      commandInputAction: B,
-      listHeadAction: w,
-      listFooterAction: x,
-      onMount: k
-    } = N, [G, U] = s(!1), [l, P] = s(!1), [a, D] = s(""), [h, E] = s(), [r, c] = s(!1), [o, K] = s([]), [Q, Y] = s([]), g = m((t) => {
-      const b = (j) => {
-        const i = [], V = (O) => {
-          if (O)
-            for (const y of O)
-              i.push(y), y.items && y.items.length && V(y.items);
-        };
-        V(j), Y((O) => {
-          if (!i.find((S) => !!n && String(S.value) === String(n))) {
-            const S = h || O.find((oe) => !!n && String(oe.value) === String(n));
-            if (S) return [S, ...i];
-          }
-          return i;
-        });
+import { useDebounceCallback as ue } from "@oneplatformdev/hooks";
+import { X as he, ChevronsUpDown as ge } from "lucide-react";
+import { ComboboxOptions as be } from "./ComboboxOptions.js";
+const ye = (S) => {
+  const { value: n, flattenOptions: N = [], selectedOption: L } = S;
+  if (!n) return "No value for render label";
+  const y = [N.find((f) => String(f.value).toLowerCase() === String(n).toLowerCase()), L].filter(Boolean).map((f) => f.label).find(Boolean);
+  return y || n;
+}, De = (S) => {
+  const {
+    value: n,
+    onChange: N,
+    placeholder: L,
+    disabled: T,
+    searchLabel: y = "Type to search...",
+    fetchOptions: f,
+    options: I,
+    emptyLabel: R = "No options",
+    emptyAction: v,
+    commandInputAction: B,
+    listHeadAction: C,
+    listFooterAction: w,
+    onMount: k
+  } = S, [G, U] = s(!1), [l, P] = s(!1), [a, D] = s(""), [u, E] = s(), [r, c] = s(!1), [o, J] = s([]), [K, Q] = s([]), h = m((t) => {
+    const g = (j) => {
+      const i = [], V = (x) => {
+        if (x)
+          for (const b of x)
+            i.push(b), b.items && b.items.length && V(b.items);
       };
-      K((j) => {
-        const i = typeof t == "function" ? t(j) : t;
-        return b(i), i;
+      V(j), Q((x) => {
+        if (!i.find((O) => !!n && String(O.value) === String(n))) {
+          const O = u || x.find((ne) => !!n && String(ne.value) === String(n));
+          if (O) return [O, ...i];
+        }
+        return i;
       });
-    }, [h, n]);
-    ae(() => {
-      I?.length && g(I);
-    }, [I]);
-    const Z = async () => {
-      l || (W(), D(""));
-    }, W = m(async (t) => {
-      c(!0);
+    };
+    J((j) => {
+      const i = typeof t == "function" ? t(j) : t;
+      return g(i), i;
+    });
+  }, [u, n]);
+  oe(() => {
+    I?.length && h(I);
+  }, [I]);
+  const Y = async () => {
+    l || (W(), D(""));
+  }, W = m(async (t) => {
+    c(!0);
+    try {
+      const g = await f(t);
+      h(g);
+    } catch (g) {
+      console.error("Unexpected error while get option:", g);
+    } finally {
+      c(!1);
+    }
+  }, [h]), Z = ue(W, 1e3, {
+    leading: !1,
+    trailing: !0
+  }), $ = m((t) => {
+    c(!0), D(t), Z(t);
+  }, []), q = m((t) => {
+    N(t.value), E(t), c(!1);
+  }, []), ee = m(() => {
+    q({ value: "", label: "" }), E(void 0), c(!1);
+  }, []), z = F(() => !!a && !o.length && !r, [r, o.length, a]), H = F(() => !o.length && !r, [r, o.length, a]), d = F(() => ({
+    options: o,
+    setOptions: h,
+    selectedOption: u,
+    setSelectedOption: E,
+    search: a || "",
+    setSearch: D,
+    open: l,
+    setOpen: P,
+    loading: r,
+    setLoading: c,
+    isEmptyList: H,
+    isSearchedEmptyList: z
+  }), [r, l, o, a, u, H, z, h]), te = m(async () => {
+    if (k) {
+      U(!0);
       try {
-        const b = await J(t);
-        g(b);
-      } catch (b) {
-        console.error("Unexpected error while get option:", b);
+        await k(d);
       } finally {
-        c(!1);
+        U(!1);
       }
-    }, [g]), $ = ge(W, 1e3, {
-      leading: !1,
-      trailing: !0
-    }), ee = m((t) => {
-      c(!0), D(t), $(t);
-    }, []), q = m((t) => {
-      L(t.value), E(t), c(!1);
-    }, []), te = m(() => {
-      q({ value: "", label: "" }), E(void 0), c(!1);
-    }, []), z = F(() => !!a && !o.length && !r, [r, o.length, a]), H = F(() => !o.length && !r, [r, o.length, a]), d = F(() => ({
-      options: o,
-      setOptions: g,
-      selectedOption: h,
-      setSelectedOption: E,
-      search: a || "",
-      setSearch: D,
+    }
+  }, [k, d]);
+  return re(() => {
+    te();
+  }, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
+    ae,
+    {
       open: l,
-      setOpen: P,
-      loading: r,
-      setLoading: c,
-      isEmptyList: H,
-      isSearchedEmptyList: z
-    }), [r, l, o, a, h, H, z, g]), ne = m(async () => {
-      if (k) {
-        U(!0);
-        try {
-          await k(d);
-        } finally {
-          U(!1);
-        }
-      }
-    }, [k, d]);
-    return ie(() => {
-      ne();
-    }, []), /* @__PURE__ */ e("div", { className: "w-full", ref: f, children: /* @__PURE__ */ p(
-      se,
-      {
-        open: l,
-        onOpenChange: (t) => {
-          P(t), t && Z();
-        },
-        children: [
-          /* @__PURE__ */ e(le, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
-            de,
-            {
-              color: "secondary",
-              role: "combobox",
-              "aria-expanded": l,
-              className: M(
-                "relative w-full justify-between font-normal text-sm bg-transparent",
-                "border border-border",
-                l && "border-2 outline-hidden ring-1 ring-ring",
-                "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+      onOpenChange: (t) => {
+        P(t), t && Y();
+      },
+      children: [
+        /* @__PURE__ */ e(ie, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
+          le,
+          {
+            color: "secondary",
+            role: "combobox",
+            "aria-expanded": l,
+            className: M(
+              "relative w-full justify-between font-normal text-sm bg-transparent",
+              "border border-border",
+              l && "border-2 outline-hidden ring-1 ring-ring",
+              "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+            ),
+            disabled: T || G,
+            children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(A, { children: [
+              /* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ? ye({ value: n, flattenOptions: K, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: L }) }),
+              n ? /* @__PURE__ */ e(
+                "div",
+                {
+                  className: M(
+                    "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: (t) => {
+                    t.stopPropagation(), ee();
+                  },
+                  children: /* @__PURE__ */ e(he, {})
+                }
+              ) : /* @__PURE__ */ e(ge, { className: "opacity-50 w-4 h-4" })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          se,
+          {
+            className: "w-(--radix-popper-anchor-width) max-w-none p-0",
+            align: "start",
+            children: /* @__PURE__ */ p(ce, { shouldFilter: !1, children: [
+              /* @__PURE__ */ e(
+                de,
+                {
+                  placeholder: y,
+                  value: a,
+                  onValueChange: $
+                }
               ),
-              disabled: v || G,
-              children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(A, { children: [
-                /* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ? Ce({ value: n, flattenOptions: Q, selectedOption: h }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: R }) }),
-                n ? /* @__PURE__ */ e(
-                  "div",
-                  {
-                    className: M(
-                      "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: (t) => {
-                      t.stopPropagation(), te();
+              typeof B == "function" ? B(d) : B,
+              /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ p(me, { className: M(!o.length && "p-0 shadow-none"), children: [
+                r && /* @__PURE__ */ e(X, { fullWidth: !0 }),
+                !r && !!a && /* @__PURE__ */ e(A, { children: v ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+                  /* @__PURE__ */ e("span", { children: R }),
+                  typeof v == "function" ? v(d) : v
+                ] }) : /* @__PURE__ */ e(_, { children: R }) }),
+                !r && /* @__PURE__ */ p(A, { children: [
+                  !!o.length && C && /* @__PURE__ */ e(
+                    fe,
+                    {
+                      asChild: !0,
+                      className: "w-full",
+                      children: typeof C == "function" ? C(d) : C
                     },
-                    children: /* @__PURE__ */ e(be, {})
-                  }
-                ) : /* @__PURE__ */ e(ye, { className: "opacity-50 w-4 h-4" })
-              ] })
-            }
-          ) }),
-          /* @__PURE__ */ e(
-            ce,
-            {
-              className: "w-(--radix-popper-anchor-width) max-w-none p-0",
-              align: "start",
-              children: /* @__PURE__ */ p(pe, { shouldFilter: !1, children: [
-                /* @__PURE__ */ e(
-                  me,
-                  {
-                    placeholder: u,
-                    value: a,
-                    onValueChange: ee
-                  }
-                ),
-                typeof B == "function" ? B(d) : B,
-                /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ p(ue, { className: M(!o.length && "p-0 shadow-none"), children: [
-                  r && /* @__PURE__ */ e(X, { fullWidth: !0 }),
-                  !r && !!a && /* @__PURE__ */ e(A, { children: C ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
-                    /* @__PURE__ */ e("span", { children: T }),
-                    typeof C == "function" ? C(d) : C
-                  ] }) : /* @__PURE__ */ e(_, { children: T }) }),
-                  !r && /* @__PURE__ */ p(A, { children: [
-                    !!o.length && w && /* @__PURE__ */ e(
-                      he,
-                      {
-                        asChild: !0,
-                        className: "w-full",
-                        children: typeof w == "function" ? w(d) : w
-                      },
-                      "combobox-list-head-action"
-                    ),
-                    /* @__PURE__ */ e(
-                      ve,
-                      {
-                        value: n,
-                        options: o,
-                        onChangeOption: q,
-                        setOpen: P
-                      }
-                    )
-                  ] })
-                ] }) }),
-                !!o.length && x && /* @__PURE__ */ e(
-                  "div",
-                  {
-                    "data-slot": "command-footer-wrapper",
-                    className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
-                    children: typeof x == "function" ? x(d) : x
-                  }
-                )
-              ] })
-            }
-          )
-        ]
-      }
-    ) });
-  }
-);
+                    "combobox-list-head-action"
+                  ),
+                  /* @__PURE__ */ e(
+                    be,
+                    {
+                      value: n,
+                      options: o,
+                      onChangeOption: q,
+                      setOpen: P
+                    }
+                  )
+                ] })
+              ] }) }),
+              !!o.length && w && /* @__PURE__ */ e(
+                "div",
+                {
+                  "data-slot": "command-footer-wrapper",
+                  className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
+                  children: typeof w == "function" ? w(d) : w
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  je as Combobox
+  De 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  forwardRef, SetStateAction,\n  useCallback,\n  useEffect,\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 { ChevronsUpDown, SearchIcon, X } from 'lucide-react';\nimport {\n  ComboboxCallbackStateParams,\n  ComboboxOption,\n  ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport * as React from \"react\"; // TODO: refactor next component | nlt code\n\n\nconst getSelectRenderLabel = (params: {\n  value: ComboboxProps['value'];\n  flattenOptions: ComboboxOption[];\n  selectedOption?: ComboboxOption;\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 = forwardRef<HTMLDivElement, ComboboxProps>(\n  (props, ref) => {\n    const {\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      onMount,\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>();\n    const [loading, setLoading] = useState(false);\n\n    const [options, setOptionsDispatch] = useState<ComboboxOption[]>([]);\n    const [flattenOptions, setFlattenOptions] = useState<ComboboxOption[]>([]);\n    const setOptions: Dispatch<SetStateAction<ComboboxOption[]>> = useCallback((stater) => {\n      const flatten = (next: ComboboxOption[]) => {\n        const res: ComboboxOption[] = [];\n        const walk = (nodes?: ComboboxOption[]) => {\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[] = 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) => {\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 => {\n        return {\n          options,\n          setOptions,\n          selectedOption,\n          setSelectedOption,\n          search: searchTerm || '',\n          setSearch: setSearchTerm,\n          open,\n          setOpen,\n          loading,\n          setLoading,\n          isEmptyList,\n          isSearchedEmptyList,\n        };\n      }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions]);\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\" ref={ref}>\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              color='secondary'\n              role=\"combobox\"\n              aria-expanded={open}\n              className={cn(\n                'relative w-full justify-between font-normal text-sm bg-transparent',\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              )}\n              disabled={disabled || initialLoading}\n            >\n              {initialLoading ? (\n                  <LoadingMask fullWidth />\n              ) : (\n                <>\n                  <span 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                    <ChevronsUpDown className=\"opacity-50 w-4 h-4\" />\n                  )}\n                </>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\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 className={cn(!options.length && 'p-0 shadow-none')}>\n                  {loading && <LoadingMask fullWidth />}\n                  {!loading && Boolean(searchTerm) && (\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 && (\n                    <>\n                      {Boolean(options.length) && 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                      <ComboboxOptions\n                        value={value}\n                        options={options}\n                        onChangeOption={onChangeOption}\n                        setOpen={setOpen}\n                      />\n                    </>\n                  )}\n                </CommandGroup>\n              </CommandList>\n\n              {/*LIST FOOTER ACTION*/}\n              {Boolean(options.length) && listFooterAction && (\n                <div\n                  data-slot=\"command-footer-wrapper\"\n                  className=\"flex w-full min-h-9 items-center gap-2 border-t px-3\"\n                >\n                  {typeof listFooterAction === 'function'\n                    ? listFooterAction(comboboxCallbackStateParams)\n                    : listFooterAction}\n                </div>\n              )}\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n    );\n  }\n);\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","forwardRef","props","ref","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","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","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\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 { ChevronsUpDown, 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    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    onMount,\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        open,\n        setOpen,\n        loading,\n        setLoading,\n        isEmptyList,\n        isSearchedEmptyList,\n      };\n    }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions]);\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            color='secondary'\n            role=\"combobox\"\n            aria-expanded={open}\n            className={cn(\n              'relative w-full justify-between font-normal text-sm bg-transparent',\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            )}\n            disabled={disabled || initialLoading}\n          >\n            {initialLoading ? (\n              <LoadingMask fullWidth />\n            ) : (\n              <>\n                  <span 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                  <ChevronsUpDown className=\"opacity-50 w-4 h-4\" />\n                )}\n              </>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\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 className={cn(!options.length && 'p-0 shadow-none')}>\n                {loading && <LoadingMask fullWidth />}\n                {!loading && Boolean(searchTerm) && (\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 && (\n                  <>\n                    {Boolean(options.length) && 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                    <ComboboxOptions\n                      value={value}\n                      options={options}\n                      onChangeOption={onChangeOption}\n                      setOpen={setOpen}\n                    />\n                  </>\n                )}\n              </CommandGroup>\n            </CommandList>\n\n            {/*LIST FOOTER ACTION*/}\n            {Boolean(options.length) && listFooterAction && (\n              <div\n                data-slot=\"command-footer-wrapper\"\n                className=\"flex w-full min-h-9 items-center gap-2 border-t px-3\"\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","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","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","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}

package/Combobox/Combobox.types.d.ts

@@ -1,14 +1,18 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-export interface ComboboxOption {
+export interface ComboboxOption<Data extends object = object> {
     value: string;
     label: string;
-    items?: ComboboxOption[];
+    items?: ComboboxOption<Data>[];
+    node?: Data;
+    path?: string[];
+    parent?: string;
+    level?: number;
 }
-export interface ComboboxCallbackStateParams {
-    options: ComboboxOption[];
-    setOptions: Dispatch<SetStateAction<ComboboxOption[]>>;
-    selectedOption?: ComboboxOption;
-    setSelectedOption: Dispatch<SetStateAction<ComboboxOption | undefined>>;
+export interface ComboboxCallbackStateParams<Data extends object = object> {
+    options: ComboboxOption<Data>[];
+    setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>>;
+    selectedOption?: ComboboxOption<Data>;
+    setSelectedOption: Dispatch<SetStateAction<ComboboxOption<Data> | undefined>>;
     search: string;
     setSearch: Dispatch<SetStateAction<string>>;
     open: boolean;
@@ -18,35 +22,35 @@ export interface ComboboxCallbackStateParams {
     isEmptyList: boolean;
     isSearchedEmptyList: boolean;
 }
-export interface IComboboxOptionsNodeProps {
+export interface IComboboxOptionsNodeProps<Data extends object = object> {
     value?: string;
-    option: ComboboxOption;
-    onChangeOption?: (option: ComboboxOption) => void;
+    option: ComboboxOption<Data>;
+    onChangeOption?: (option: ComboboxOption<Data>) => void;
     deep?: number;
     setOpen: Dispatch<SetStateAction<boolean>>;
 }
-export interface IComboboxOptionsProps extends Omit<IComboboxOptionsNodeProps, 'option'> {
-    options?: ComboboxOption[];
+export interface IComboboxOptionsProps<Data extends object = object> extends Omit<IComboboxOptionsNodeProps<Data>, 'option'> {
+    options?: ComboboxOption<Data>[];
 }
-export interface ComboboxProps {
+export interface ComboboxProps<Data extends object = object> {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
     searchLabel?: string;
     disabled?: boolean;
-    fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
-    options?: ComboboxOption[];
+    fetchOptions: (search?: string) => Promise<ComboboxOption<Data>[]>;
+    options?: ComboboxOption<Data>[];
     /** Command Empty list label*/
     emptyLabel?: string;
     /** Command Empty list action */
-    emptyAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+    emptyAction?: ((params: ComboboxCallbackStateParams<Data>) => ReactNode) | ReactNode;
     /** Command Input footer action */
-    commandInputAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+    commandInputAction?: ((params: ComboboxCallbackStateParams<Data>) => ReactNode) | ReactNode;
     /** Command List first element action */
-    listHeadAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+    listHeadAction?: ((params: ComboboxCallbackStateParams<Data>) => ReactNode) | ReactNode;
     /** Command List footer element action */
-    listFooterAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+    listFooterAction?: ((params: ComboboxCallbackStateParams<Data>) => ReactNode) | ReactNode;
     /** Callback for load data on start component */
-    onMount?: (params: ComboboxCallbackStateParams) => Promise<void>;
+    onMount?: (params: ComboboxCallbackStateParams<Data>) => Promise<void>;
 }
 //# sourceMappingURL=Combobox.types.d.ts.map

package/Combobox/Combobox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IACvD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAA;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC/E,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACtF,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAClF,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACpF,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE"}
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"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"}

package/Combobox/ComboboxOptionItem.d.ts

@@ -1,5 +1,4 @@
+import { PropsWithChildren } from 'react';
 import { IComboboxOptionsNodeProps } from './Combobox.types';
-export declare const ComboboxOptionItem: import('react').ForwardRefExoticComponent<IComboboxOptionsNodeProps & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ComboboxOptionItem: <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ComboboxOptionItem.d.ts.map

package/Combobox/ComboboxOptionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAM7D,eAAO,MAAM,kBAAkB;;kDAsC7B,CAAC"}
+{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAK7D,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,iBAAiB,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,4CAkChH,CAAA"}

package/Combobox/ComboboxOptionItem.js

@@ -1,23 +1,21 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { CommandItem as f } from "../Command/Command.js";
-import { Check as d } from "lucide-react";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { CommandItem as r } from "../Command/Command.js";
+import { Check as c } from "lucide-react";
 import { cn as t } from "@oneplatformdev/utils";
-const u = 8, C = c((i, n) => {
-  const { children: r, setOpen: m, option: e, onChangeOption: o, value: l = "", deep: p = 0 } = i;
-  return /* @__PURE__ */ s(
-    f,
+const d = 8, x = (n) => {
+  const { children: i, setOpen: p, option: e, onChangeOption: o, value: l = "", deep: s = 0 } = n;
+  return /* @__PURE__ */ m(
+    r,
     {
-      ref: n,
       value: e.value,
       onSelect: () => {
-        l === e.value ? o?.({ value: "", label: "" }) : o?.(e), m(!1);
+        l === e.value ? o?.({ value: "", label: "" }) : o?.(e), p(!1);
       },
       style: {
-        paddingLeft: (p + 1) * u
+        paddingLeft: (s + 1) * d
       },
       children: [
-        r,
+        i,
         /* @__PURE__ */ a(
           "span",
           {
@@ -28,7 +26,7 @@ const u = 8, C = c((i, n) => {
           }
         ),
         /* @__PURE__ */ a(
-          d,
+          c,
           {
             className: t(
               "ml-auto",
@@ -40,8 +38,8 @@ const u = 8, C = c((i, n) => {
     },
     e.value
   );
-});
+};
 export {
-  C as ComboboxOptionItem
+  x as ComboboxOptionItem
 };
 //# sourceMappingURL=ComboboxOptionItem.js.map

package/Combobox/ComboboxOptionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { forwardRef, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 8;\n\nexport const ComboboxOptionItem = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<IComboboxOptionsNodeProps>\n>((props, ref) => {\n  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;\n  return (\n    <CommandItem\n      ref={ref}\n      key={option.value}\n      value={option.value}\n      onSelect={() => {\n        if (value === option.value) {\n          onChangeOption?.({ value: '', label: '' });\n        } else {\n          onChangeOption?.(option);\n        }\n        setOpen(false);\n      }}\n      style={{\n        paddingLeft: (deep + 1) * DEEP_OFFSET,\n      }}\n    >\n      {children}\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'\n        )}\n      >\n        {option.label}\n      </span>\n      <Check\n        className={cn(\n          'ml-auto',\n          value === option.value ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n    </CommandItem>\n  );\n});\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","forwardRef","props","ref","children","setOpen","option","onChangeOption","value","deep","jsxs","CommandItem","jsx","cn","Check"],"mappings":";;;;;AAMA,MAAMA,IAAc,GAEPC,IAAqBC,EAGhC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,gBAAAC,GAAgB,OAAAC,IAAQ,IAAI,MAAAC,IAAO,EAAA,IAAMP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MAEA,OAAOG,EAAO;AAAA,MACd,UAAU,MAAM;AACd,QAAIE,MAAUF,EAAO,QACnBC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,IAEzCA,IAAiBD,CAAM,GAEzBD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAcI,IAAO,KAAKV;AAAA,MAAA;AAAA,MAG3B,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,YAAA;AAAA,YAGD,UAAAP,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAL,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IA3BKA,EAAO;AAAA,EAAA;AA8BlB,CAAC;"}
+{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 8;\nexport const ComboboxOptionItem = <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>>) => {\n  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;\n  return (\n    <CommandItem\n      key={option.value}\n      value={option.value}\n      onSelect={() => {\n        if (value === option.value) {\n          onChangeOption?.({ value: '', label: '' });\n        } else {\n          onChangeOption?.(option);\n        }\n        setOpen(false);\n      }}\n      style={{\n        paddingLeft: (deep + 1) * DEEP_OFFSET,\n      }}\n    >\n      {children}\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'\n        )}\n      >\n        {option.label}\n      </span>\n      <Check\n        className={cn(\n          'ml-auto',\n          value === option.value ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n    </CommandItem>\n  );\n}\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","jsxs","CommandItem","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,GACPC,IAAqB,CAAsBC,MAA8D;AACpH,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,gBAAAC,GAAgB,OAAAC,IAAQ,IAAI,MAAAC,IAAO,EAAA,IAAMN;AAC5E,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOL,EAAO;AAAA,MACd,UAAU,MAAM;AACd,QAAIE,MAAUF,EAAO,QACnBC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,IAEzCA,IAAiBD,CAAM,GAEzBD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAcI,IAAO,KAAKR;AAAA,MAAA;AAAA,MAG3B,UAAA;AAAA,QAAAG;AAAA,QACD,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,YAAA;AAAA,YAGD,UAAAP,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAL,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IA3BKA,EAAO;AAAA,EAAA;AA8BlB;"}

package/Combobox/ComboboxOptions.d.ts

@@ -1,4 +1,4 @@
 import { IComboboxOptionsNodeProps, IComboboxOptionsProps } from './Combobox.types';
-export declare const ComboboxOptionsNode: import('react').ForwardRefExoticComponent<IComboboxOptionsNodeProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const ComboboxOptions: import('react').ForwardRefExoticComponent<IComboboxOptionsProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ComboboxOptionsNode: <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxOptions: <Data extends object>(props: IComboboxOptionsProps<Data>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ComboboxOptions.d.ts.map

package/Combobox/ComboboxOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAY1B,eAAO,MAAM,mBAAmB,sHAiE9B,CAAC;AAEH,eAAO,MAAM,eAAe,kHAY1B,CAAC"}
+{"version":3,"file":"ComboboxOptions.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAY1B,eAAO,MAAM,mBAAmB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,yBAAyB,CAAC,IAAI,CAAC,4CA6D9F,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,qBAAqB,CAAC,IAAI,CAAC,4CAStF,CAAA"}

package/Combobox/ComboboxOptions.js

@@ -1,40 +1,39 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as m, useState as b } from "react";
-import { Collapsible as u, CollapsibleTrigger as g, CollapsibleContent as h } from "../Collapsible/Collapsible.js";
-import { ComboboxOptionItem as c } from "./ComboboxOptionItem.js";
-import { ChevronDownIcon as v } from "lucide-react";
-import { cn as i } from "@oneplatformdev/utils";
-import { ButtonIcon as C } from "../ButtonIcon/ButtonIcon.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Collapsible as b, CollapsibleTrigger as f, CollapsibleContent as u } from "../Collapsible/Collapsible.js";
+import { ComboboxOptionItem as l } from "./ComboboxOptionItem.js";
+import { ChevronDownIcon as g } from "lucide-react";
+import { cn as s } from "@oneplatformdev/utils";
+import { ButtonIcon as h } from "../ButtonIcon/ButtonIcon.js";
 import "../ButtonIcon/buttonIconVariants.js";
-const p = m((o, n) => {
-  const { option: a, deep: s = 0 } = o, [t, l] = b(!0);
-  return a?.items?.length ? /* @__PURE__ */ f(
-    u,
+const c = (o) => {
+  const { option: n, deep: a = 0 } = o, [t, i] = d(!0);
+  return n?.items?.length ? /* @__PURE__ */ p(
+    b,
     {
-      ref: n,
       open: t,
-      onOpenChange: l,
+      onOpenChange: i,
       "data-opened": t,
-      className: i("group/collapsible"),
+      className: s("group/collapsible"),
       children: [
-        /* @__PURE__ */ e(c, { ...o, children: /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "aspect-square size-6 relative", children: /* @__PURE__ */ e(
-          C,
+        /* @__PURE__ */ e(l, { ...o, children: /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "aspect-square size-6 relative", children: /* @__PURE__ */ e(
+          h,
           {
             onClick: (r) => {
-              r?.preventDefault(), r?.stopPropagation(), l((d) => !d);
+              r?.preventDefault(), r?.stopPropagation(), i((m) => !m);
             },
             type: "button",
             variant: "ghost",
             color: "secondary",
             size: "md",
-            className: i(
+            className: s(
               "absolute -top-1.5 -left-2 size-9",
               "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
             ),
             icon: /* @__PURE__ */ e(
-              v,
+              g,
               {
-                className: i(
+                className: s(
                   "transition-transform",
                   t && "rotate-180"
                 )
@@ -42,24 +41,24 @@ const p = m((o, n) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: a?.items.map((r) => /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((r) => /* @__PURE__ */ e(
+          c,
           {
             ...o,
-            deep: s + 1,
+            deep: a + 1,
             option: r
           },
           r.value
         )) }) })
       ]
     }
-  ) : /* @__PURE__ */ e(c, { ...o, ref: n });
-}), D = m((o, n) => {
-  const { options: a = [], ...s } = o;
-  return /* @__PURE__ */ e("div", { ref: n, className: "flex flex-col gap-0", children: a.map((t) => /* @__PURE__ */ e(p, { ...s, option: t }, t.value)) });
-});
+  ) : /* @__PURE__ */ e(l, { ...o });
+}, y = (o) => {
+  const { options: n = [], ...a } = o;
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n.map((t) => /* @__PURE__ */ e(c, { ...a, option: t }, t.value)) });
+};
 export {
-  D as ComboboxOptions,
-  p as ComboboxOptionsNode
+  y as ComboboxOptions,
+  c as ComboboxOptionsNode
 };
 //# sourceMappingURL=ComboboxOptions.js.map

package/Combobox/ComboboxOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { forwardRef, useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = forwardRef<\n  HTMLDivElement,\n  IComboboxOptionsNodeProps\n>((props, ref) => {\n  const { option, deep = 0 } = props;\n\n  const [open, onOpenChange] = useState(true);\n\n  if (!option?.items?.length) {\n    return <ComboboxOptionItem {...props} ref={ref} />;\n  }\n  return (\n    <Collapsible\n      ref={ref}\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n    >\n      <ComboboxOptionItem {...props}>\n        <CollapsibleTrigger asChild>\n          <div className='aspect-square size-6 relative'>\n            <ButtonIcon\n              onClick={(e) => {\n                e?.preventDefault();\n                e?.stopPropagation();\n                onOpenChange((prev) => !prev);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n              color='secondary'\n              size=\"md\"\n              className={cn(\n                'absolute -top-1.5 -left-2 size-9',\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronDownIcon\n                  className={cn(\n                    'transition-transform',\n                    open && 'rotate-180'\n                  )}\n                />\n              )}\n            />\n          </div>\n        </CollapsibleTrigger>\n      </ComboboxOptionItem>\n\n      <CollapsibleContent>\n        <div className=\"flex flex-col gap-0\">\n          {option?.items.map((opt) => {\n            return (\n              <ComboboxOptionsNode\n                key={opt.value}\n                {...props}\n                deep={deep + 1}\n                option={opt}\n              />\n            );\n          })}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n});\n\nexport const ComboboxOptions = forwardRef<\n  HTMLDivElement,\n  IComboboxOptionsProps\n>((props, ref) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div ref={ref} className=\"flex flex-col gap-0\">\n      {options.map((option) => (\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\n      ))}\n    </div>\n  );\n});\n"],"names":["ComboboxOptionsNode","forwardRef","props","ref","option","deep","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","CollapsibleTrigger","ButtonIcon","e","prev","ChevronDownIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsBC,EAGjC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,EAAA,IAAMH,GAEvB,CAACI,GAAMC,CAAY,IAAIC,EAAS,EAAI;AAE1C,SAAKJ,GAAQ,OAAO,SAIlB,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,MAAAG;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAoB,GAAGX,GACtB,UAAA,gBAAAU,EAACE,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHT,EAAa,CAACU,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,WAAWN;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAWP;AAAA,kBACT;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAR,GAAQ,MAAM,IAAI,CAACgB,MAEhB,gBAAAR;AAAA,UAACZ;AAAA,UAAA;AAAA,YAEE,GAAGE;AAAA,YACJ,MAAMG,IAAO;AAAA,YACb,QAAQe;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IArDK,gBAAAR,EAACC,GAAA,EAAoB,GAAGX,GAAO,KAAAC,EAAA,CAAU;AAwDpD,CAAC,GAEYkB,IAAkBpB,EAG7B,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,SAAAmB,IAAU,CAAA,GAAI,GAAGC,MAASrB;AAClC,2BACG,OAAA,EAAI,KAAAC,GAAU,WAAU,uBACtB,YAAQ,IAAI,CAACC,MACZ,gBAAAQ,EAACZ,KAAwC,GAAGuB,GAAM,QAAAnB,KAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n  const { option, deep = 0 } = props;\n\n  const [open, onOpenChange] = useState(true);\n\n  if (!option?.items?.length) {\n    return <ComboboxOptionItem {...props} />;\n  }\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n    >\n      <ComboboxOptionItem {...props}>\n        <CollapsibleTrigger asChild>\n          <div className='aspect-square size-6 relative'>\n            <ButtonIcon\n              onClick={(e) => {\n                e?.preventDefault();\n                e?.stopPropagation();\n                onOpenChange((prev) => !prev);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n              color='secondary'\n              size=\"md\"\n              className={cn(\n                'absolute -top-1.5 -left-2 size-9',\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronDownIcon\n                  className={cn(\n                    'transition-transform',\n                    open && 'rotate-180'\n                  )}\n                />\n              )}\n            />\n          </div>\n        </CollapsibleTrigger>\n      </ComboboxOptionItem>\n\n      <CollapsibleContent>\n        <div className=\"flex flex-col gap-0\">\n          {option?.items.map((opt) => {\n            return (\n              <ComboboxOptionsNode\n                key={opt.value}\n                {...props}\n                deep={deep + 1}\n                option={opt}\n              />\n            );\n          })}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport const ComboboxOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div className=\"flex flex-col gap-0\">\n      {options.map((option) => (\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\n      ))}\n    </div>\n  );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","CollapsibleTrigger","ButtonIcon","e","prev","ChevronDownIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,EAAA,IAAMF,GAEvB,CAACG,GAAMC,CAAY,IAAIC,EAAS,EAAI;AAE1C,SAAKJ,GAAQ,OAAO,SAIlB,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAoB,GAAGV,GACtB,UAAA,gBAAAS,EAACE,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHT,EAAa,CAACU,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,WAAWN;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAWP;AAAA,kBACT;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAR,GAAQ,MAAM,IAAI,CAACgB,MAEhB,gBAAAR;AAAA,UAACV;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQe;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IApDK,gBAAAR,EAACC,GAAA,EAAoB,GAAGV,EAAA,CAAO;AAuD1C,GAEakB,IAAkB,CAAsBlB,MAAuC;AAC1F,QAAM,EAAE,SAAAmB,IAAU,CAAA,GAAI,GAAGC,MAASpB;AAClC,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAmB,EAAQ,IAAI,CAAClB,MACZ,gBAAAQ,EAACV,GAAA,EAAwC,GAAGqB,GAAM,QAAAnB,EAAA,GAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.63",
+  "version": "0.1.99-beta.65",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -105,9 +105,9 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/tokens": "^0.1.99-beta.63",
-    "@oneplatformdev/hooks": "^0.1.99-beta.63",
-    "@oneplatformdev/utils": "^0.1.99-beta.63"
+    "@oneplatformdev/utils": "^0.1.99-beta.65",
+    "@oneplatformdev/tokens": "^0.1.99-beta.65",
+    "@oneplatformdev/hooks": "^0.1.99-beta.65"
   },
   "scripts": {
     "chromatic": "chromatic"