@oneplatformdev/ui 0.1.99-beta.201 → 0.1.99-beta.203

package/Combobox/Combobox.js

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