@oneplatformdev/ui 0.0.1-beta.58 → 0.0.1-beta.59

package/Combobox/Combobox.mjs

@@ -1,94 +1,105 @@
-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 { jsx as a, jsxs as o, Fragment as I } from "react/jsx-runtime";
+import s, { useRef as R, useEffect as U, useCallback as c, useLayoutEffect as q } from "react";
+import { LoadingMask as z } from "../LoadingMask/LoadingMask.mjs";
+import { Popover as A, PopoverTrigger as V, PopoverContent as X } 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 y } from "@oneplatformdev/utils";
+import { cn as h } 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 ue = (O) => {
+  var j;
   const {
     value: n,
     onChange: P,
-    placeholder: j,
-    disabled: D,
-    searchLabel: T = "Type to search...",
-    fetchOptions: B,
+    placeholder: D,
+    disabled: T,
+    searchLabel: B = "Type to search...",
+    fetchOptions: E,
     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);
-  _(() => {
-    r != null && r.length && u(r);
+  } = O, f = R(!1), [t, d] = s.useState(!1), [m, w] = s.useState(""), [u, p] = s.useState([]), [b, N] = s.useState(), [g, l] = s.useState(!1);
+  U(() => {
+    r != null && r.length && p(r);
   }, [r]);
-  const E = async () => {
+  const M = async () => {
     t || (S(), w(""));
   }, S = c(async (e) => {
     l(!0);
     try {
-      const v = await B(e);
-      u(v);
-    } catch (v) {
-      console.error("Unexpected error while get option:", v);
+      const y = await E(e);
+      p(y);
+    } catch (y) {
+      console.error("Unexpected error while get option:", y);
     } finally {
       l(!1);
     }
-  }, []), M = Z(S, 1e3, { leading: !1, trailing: !0 }), F = c((e) => {
-    l(!0), w(e), M(e);
-  }, []), g = c((e) => {
+  }, []), _ = Z(S, 1e3, {
+    leading: !1,
+    trailing: !0
+  }), F = c((e) => {
+    l(!0), w(e), _(e);
+  }, []), v = c((e) => {
     P(e.value), N(e), l(!1);
+  }, []), L = c(() => {
+    console.log("handleClearSelection", L), v({ value: "", label: "" }), N(void 0), l(!1);
   }, []), G = c(() => {
-    g({ value: "", label: "" }), N(void 0), l(!1);
-  }, []), I = c(() => {
     if (!x) {
-      h.current = !0;
+      f.current = !0;
       return;
     }
-    x({ setOptions: u, search: m || "", open: t, setOpen: d }).finally(() => {
-      h.current = !0;
-    });
+    x({ setOptions: p, search: m || "", open: t, setOpen: d }).finally(
+      () => {
+        f.current = !0;
+      }
+    );
   }, []);
-  return A(() => (I(), () => {
-    h.current = !1;
+  return q(() => (G(), () => {
+    f.current = !1;
   }), []), /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ o(
-    X,
+    A,
     {
       open: t,
       onOpenChange: (e) => {
-        d(e), e && E();
+        d(e), e && M();
       },
       children: [
-        /* @__PURE__ */ a(q, { asChild: !0, className: "border-input", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ a(V, { asChild: !0, className: "border-input", children: /* @__PURE__ */ o(
           H,
           {
             variant: "outline",
             role: "combobox",
             "aria-expanded": t,
-            className: y(
-              "w-full justify-between font-normal text-sm border bg-transparent",
+            className: h(
+              "w-full justify-between font-normal text-sm border bg-transparent relative",
               t ? "border-2 border-sidebar-accent" : "border-border"
             ),
-            disabled: D,
+            disabled: T,
             children: [
-              /* @__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 }) }),
+              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ? ((j = u.find((e) => e.value === n)) == null ? void 0 : j.label) || (b == null ? void 0 : b.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: D }) }),
               n ? /* @__PURE__ */ a(
-                $,
+                "div",
                 {
-                  className: "opacity-50 w-4 h-4 cursor-pointer hover:opacity-100",
+                  className: h(
+                    "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(), G();
-                  }
+                    e.stopPropagation(), L();
+                  },
+                  children: /* @__PURE__ */ a($, {})
                 }
               ) : /* @__PURE__ */ a(ee, { className: "opacity-50 w-4 h-4" })
             ]
           }
         ) }),
         /* @__PURE__ */ a(
-          z,
+          X,
           {
             className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
             align: "start",
@@ -96,7 +107,7 @@ const pe = (O) => {
               /* @__PURE__ */ a(
                 K,
                 {
-                  placeholder: T,
+                  placeholder: B,
                   value: m,
                   onValueChange: F
                 }
@@ -104,33 +115,31 @@ const pe = (O) => {
               /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ o(
                 W,
                 {
-                  className: y(
-                    !p.length && "p-0 shadow-none"
-                  ),
+                  className: h(!u.length && "p-0 shadow-none"),
                   children: [
-                    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: [
+                    g && /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(z, {}) }),
+                    !g && !!m && /* @__PURE__ */ a(I, { 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,
+                        setOptions: p,
                         search: m || "",
                         open: t,
                         setOpen: d
                       }) : i
                     ] }) : /* @__PURE__ */ a(k, { children: C }) }),
-                    !b && !!p.length && p.map((e) => /* @__PURE__ */ o(
+                    !g && !!u.length && u.map((e) => /* @__PURE__ */ o(
                       Y,
                       {
                         value: e.value,
                         onSelect: () => {
-                          n === e.value ? g({ value: "", label: "" }) : g(e), d(!1);
+                          n === e.value ? v({ value: "", label: "" }) : v(e), d(!1);
                         },
                         children: [
                           e.label,
                           /* @__PURE__ */ a(
                             ae,
                             {
-                              className: y(
+                              className: h(
                                 "ml-auto",
                                 n === e.value ? "opacity-100" : "opacity-0"
                               )
@@ -151,5 +160,5 @@ const pe = (O) => {
   ) });
 };
 export {
-  pe as Combobox
+  ue as Combobox
 };

package/package.json

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