@oneplatformdev/ui 0.0.1-beta.52 → 0.0.1-beta.54

package/Combobox/Combobox.mjs

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

package/Combobox/Combobox.types.d.ts

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

package/Select/Select.mjs

@@ -1,67 +1,55 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import { createElement as f } from "react";
-import { Button as g } from "../Button/Button.mjs";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { createElement as d, isValidElement as s } from "react";
+import { Button as f } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { SelectRoot as p, SelectContent as h, SelectTrigger as v, SelectValue as S, SelectItem as u } from "./SelectRoot.mjs";
-import { isValidReactElement as i } from "@oneplatformdev/utils";
-const C = (r) => {
-  const { placeholder: l, renderTrigger: e, slotProps: n } = r, t = /* @__PURE__ */ c(v, { ...(n == null ? void 0 : n.triggerProps) || {}, children: /* @__PURE__ */ c(S, { placeholder: l }) });
-  return e && typeof e == "function" && i(e(r, t)) ? e(r, t) : t;
-}, x = (r) => {
-  const { renderOption: l, option: e, index: n, options: t, ...a } = r, o = /* @__PURE__ */ c(u, { value: e.value, children: e.label }, e.value);
-  return l && typeof l == "function" && i(l(
+import { SelectRoot as g, SelectContent as p, SelectTrigger as h, SelectValue as S, SelectItem as C } from "./SelectRoot.mjs";
+import { isValidReactElement as v } from "@oneplatformdev/utils";
+const x = (n) => {
+  const { placeholder: r, renderTrigger: e, slotProps: l } = n, t = /* @__PURE__ */ i(h, { ...(l == null ? void 0 : l.triggerProps) || {}, children: /* @__PURE__ */ i(S, { placeholder: r }) });
+  return e && typeof e == "function" && v(e(n, t)) ? e(n, t) : t;
+}, b = (n) => {
+  const { renderOption: r, option: e, index: l, options: t, ...a } = n, o = /* @__PURE__ */ i(C, { value: e.value, children: e.label }, e.value);
+  return r && typeof r == "function" && s(r(
     e,
-    n,
+    l,
     t,
     { ...a, options: t },
     o
-  )) ? i(l(
+  )) ? r(
     e,
-    n,
+    l,
     t,
     { ...a, options: t },
     o
-  ), u) ? i(l(
-    e,
-    n,
-    t,
-    { ...a, options: t },
-    o
-  )) : /* @__PURE__ */ c(u, { value: e.value, children: l(
-    e,
-    n,
-    t,
-    { ...a, options: t },
-    o
-  ) }, e.value) : o;
-}, j = (r) => {
+  ) : o;
+}, j = (n) => {
   const {
-    value: l,
+    value: r,
     options: e,
-    onChange: n,
+    onChange: l,
     nullable: t = !1,
     clearLabel: a = "Clear",
     disabled: o
-  } = r;
-  return /* @__PURE__ */ d(
-    p,
+  } = n;
+  return /* @__PURE__ */ m(
+    g,
     {
-      value: l,
-      onValueChange: n,
+      value: r,
+      onValueChange: l,
       disabled: o,
       children: [
-        /* @__PURE__ */ c(C, { ...r }),
-        /* @__PURE__ */ d(h, { children: [
-          t && /* @__PURE__ */ c(g, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
-            n("");
+        /* @__PURE__ */ i(x, { ...n }),
+        /* @__PURE__ */ m(p, { children: [
+          t && /* @__PURE__ */ i(f, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
+            l("");
           }, children: a }),
-          e.map((m, s) => /* @__PURE__ */ f(
-            x,
+          e.map((c, u) => /* @__PURE__ */ d(
+            b,
             {
-              ...r,
-              key: m.value,
-              option: m,
-              index: s
+              ...n,
+              key: c.value,
+              option: c,
+              index: u
             }
           ))
         ] })

package/package.json

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