@oneplatformdev/ui 0.0.1-beta.17 → 0.0.1-beta.19

package/Combobox/Combobox.mjs

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

package/Combobox/Combobox.types.d.ts

@@ -1,7 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+
 export interface ComboboxOption {
     value: string;
     label: string;
 }
+export interface ComboboxPropsOnMountParams {
+    setOptions: Dispatch<SetStateAction<ComboboxOption[]>>;
+}
 export interface ComboboxProps {
     value: string;
     onChange: (value: string) => void;
@@ -12,4 +17,6 @@ export interface ComboboxProps {
     options?: ComboboxOption[];
     /** CommandEmpty label*/
     emptyLabel?: string;
+    /** Callback for load data on start component */
+    onMount?: (params: ComboboxPropsOnMountParams) => Promise<ComboboxOption[]>;
 }

package/package.json

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