@oneplatformdev/ui 0.0.1-beta.55 → 0.0.1-beta.56

package/Combobox/Combobox.mjs

@@ -1,81 +1,81 @@
-import { jsx as a, jsxs as t, Fragment as R } from "react/jsx-runtime";
-import l, { useRef as U, useEffect as _, useCallback as s, useLayoutEffect as A } from "react";
+import { jsx as a, jsxs as o, Fragment as R } from "react/jsx-runtime";
+import s, { useRef as U, useEffect as _, useCallback as c, useLayoutEffect as A } from "react";
 import { LoadingMask as V } from "../LoadingMask/LoadingMask.mjs";
 import { Popover as X, PopoverTrigger as q, PopoverContent as z } from "../Popover/Popover.mjs";
 import { Button as H } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
 import { Command as J, CommandInput as K, CommandList as Q, CommandGroup as W, CommandEmpty as k, CommandItem as Y } from "../Command/Command.mjs";
-import { cn as v } from "@oneplatformdev/utils";
+import { cn as y } from "@oneplatformdev/utils";
 import { useDebounceCallback as Z } from "@oneplatformdev/hooks";
 import { X as $, ChevronsUpDown as ee, Check as ae } from "lucide-react";
 const pe = (O) => {
   var L;
   const {
-    value: o,
+    value: n,
     onChange: P,
     placeholder: j,
     disabled: D,
     searchLabel: T = "Type to search...",
     fetchOptions: B,
-    options: n,
-    emptyLabel: y = "No options",
-    emptyAction: c,
-    onMount: C
-  } = O, u = U(!1), [i, x] = l.useState(!1), [d, w] = l.useState(""), [m, p] = l.useState([]), [h, N] = l.useState(), [f, r] = l.useState(!1);
+    options: r,
+    emptyLabel: C = "No options",
+    emptyAction: i,
+    onMount: x
+  } = O, h = U(!1), [t, d] = s.useState(!1), [m, w] = s.useState(""), [p, u] = s.useState([]), [f, N] = s.useState(), [b, l] = s.useState(!1);
   _(() => {
-    n != null && n.length && p(n);
-  }, [n]);
+    r != null && r.length && u(r);
+  }, [r]);
   const E = async () => {
-    i || (S(), w(""));
-  }, S = s(async (e) => {
-    r(!0);
+    t || (S(), w(""));
+  }, S = c(async (e) => {
+    l(!0);
     try {
-      const g = await B(e);
-      p(g);
-    } catch (g) {
-      console.error("Unexpected error while get option:", g);
+      const v = await B(e);
+      u(v);
+    } catch (v) {
+      console.error("Unexpected error while get option:", v);
     } finally {
-      r(!1);
+      l(!1);
     }
-  }, []), M = Z(S, 1e3, { leading: !1, trailing: !0 }), F = s((e) => {
-    r(!0), w(e), M(e);
-  }, []), b = s((e) => {
-    P(e.value), N(e), r(!1);
-  }, []), G = s(() => {
-    b({ value: "", label: "" }), N(void 0), r(!1);
-  }, []), I = s(() => {
-    if (!C) {
-      u.current = !0;
+  }, []), M = Z(S, 1e3, { leading: !1, trailing: !0 }), F = c((e) => {
+    l(!0), w(e), M(e);
+  }, []), g = c((e) => {
+    P(e.value), N(e), l(!1);
+  }, []), G = c(() => {
+    g({ value: "", label: "" }), N(void 0), l(!1);
+  }, []), I = c(() => {
+    if (!x) {
+      h.current = !0;
       return;
     }
-    C({ setOptions: p, search: d || "" }).finally(() => {
-      u.current = !0;
+    x({ setOptions: u, search: m || "", open: t, setOpen: d }).finally(() => {
+      h.current = !0;
     });
   }, []);
   return A(() => (I(), () => {
-    u.current = !1;
-  }), []), /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ t(
+    h.current = !1;
+  }), []), /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ o(
     X,
     {
-      open: i,
+      open: t,
       onOpenChange: (e) => {
-        x(e), e && E();
+        d(e), e && E();
       },
       children: [
-        /* @__PURE__ */ a(q, { asChild: !0, className: "border-input", children: /* @__PURE__ */ t(
+        /* @__PURE__ */ a(q, { asChild: !0, className: "border-input", children: /* @__PURE__ */ o(
           H,
           {
             variant: "outline",
             role: "combobox",
-            "aria-expanded": i,
-            className: v(
+            "aria-expanded": t,
+            className: y(
               "w-full justify-between font-normal text-sm border bg-transparent",
-              i ? "border-2 border-sidebar-accent" : "border-border"
+              t ? "border-2 border-sidebar-accent" : "border-border"
             ),
             disabled: D,
             children: [
-              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: o ? ((L = m.find((e) => e.value === o)) == null ? void 0 : L.label) || (h == null ? void 0 : h.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: j }) }),
-              o ? /* @__PURE__ */ a(
+              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ? ((L = p.find((e) => e.value === n)) == null ? void 0 : L.label) || (f == null ? void 0 : f.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: j }) }),
+              n ? /* @__PURE__ */ a(
                 $,
                 {
                   className: "opacity-50 w-4 h-4 cursor-pointer hover:opacity-100",
@@ -92,42 +92,47 @@ const pe = (O) => {
           {
             className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
             align: "start",
-            children: /* @__PURE__ */ t(J, { shouldFilter: !1, children: [
+            children: /* @__PURE__ */ o(J, { shouldFilter: !1, children: [
               /* @__PURE__ */ a(
                 K,
                 {
                   placeholder: T,
-                  value: d,
+                  value: m,
                   onValueChange: F
                 }
               ),
-              /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ t(
+              /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ o(
                 W,
                 {
-                  className: v(
-                    !m.length && "p-0 shadow-none"
+                  className: y(
+                    !p.length && "p-0 shadow-none"
                   ),
                   children: [
-                    f && /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(V, {}) }),
-                    !f && !!d && /* @__PURE__ */ a(R, { children: c ? /* @__PURE__ */ t(k, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
-                      /* @__PURE__ */ a("span", { children: y }),
-                      typeof c == "function" ? c({ setOptions: p, search: d || "" }) : c
-                    ] }) : /* @__PURE__ */ a(k, { children: y }) }),
-                    !f && !!m.length && m.map((e) => /* @__PURE__ */ t(
+                    b && /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(V, {}) }),
+                    !b && !!m && /* @__PURE__ */ a(R, { children: i ? /* @__PURE__ */ o(k, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+                      /* @__PURE__ */ a("span", { children: C }),
+                      typeof i == "function" ? i({
+                        setOptions: u,
+                        search: m || "",
+                        open: t,
+                        setOpen: d
+                      }) : i
+                    ] }) : /* @__PURE__ */ a(k, { children: C }) }),
+                    !b && !!p.length && p.map((e) => /* @__PURE__ */ o(
                       Y,
                       {
                         value: e.value,
                         onSelect: () => {
-                          o === e.value ? b({ value: "", label: "" }) : b(e), x(!1);
+                          n === e.value ? g({ value: "", label: "" }) : g(e), d(!1);
                         },
                         children: [
                           e.label,
                           /* @__PURE__ */ a(
                             ae,
                             {
-                              className: v(
+                              className: y(
                                 "ml-auto",
-                                o === e.value ? "opacity-100" : "opacity-0"
+                                n === e.value ? "opacity-100" : "opacity-0"
                               )
                             }
                           )

package/Combobox/Combobox.types.d.ts

@@ -7,6 +7,8 @@ export interface ComboboxOption {
 export interface ComboboxPropsOnMountParams {
     setOptions: Dispatch<SetStateAction<ComboboxOption[]>>;
     search: string;
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
 }
 export interface ComboboxProps {
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.0.1-beta.55",
+  "version": "0.0.1-beta.56",
   "description": "UI React Components.",
   "author": "One Platform Development Team",
   "keywords": [