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

package/Combobox/Combobox.mjs

@@ -1,109 +1,120 @@
 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 n, { useRef as U, useEffect as w, useCallback as _ } from "react";
+import { LoadingMask as B } from "../LoadingMask/LoadingMask.mjs";
+import { Popover as F, PopoverTrigger as G, PopoverContent as V } from "../Popover/Popover.mjs";
+import { Button as W } 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 X, CommandInput as q, CommandList as z, CommandEmpty as A, CommandGroup as H, CommandItem as J } from "../Command/Command.mjs";
+import { cn as x } from "@oneplatformdev/utils";
+import { useDebounceCallback as K } from "@oneplatformdev/hooks";
+import { X as Q, ChevronsUpDown as Y, Check as Z } from "lucide-react";
+const ie = (N) => {
+  var y;
   const {
     value: o,
-    onChange: y,
-    placeholder: x,
-    disabled: N,
-    searchLabel: S,
-    fetchOptions: L,
+    onChange: S,
+    placeholder: k,
+    disabled: L,
+    searchLabel: O,
+    fetchOptions: P,
     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);
+    emptyLabel: j = "No options",
+    onMount: s
+  } = N, c = U(!1), [l, p] = n.useState(!1), [D, h] = n.useState(""), [f, i] = n.useState([]), [d, b] = n.useState(), [v, C] = n.useState(!1);
+  w(() => {
+    r != null && r.length && i(r);
   }, [r]);
-  const j = async () => {
-    l || (v(), m(""));
-  }, v = async (e) => {
-    b(!0);
+  const M = 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 u = await P(e);
+      i(u);
+    } catch (u) {
+      console.error("Unexpected error while get option:", u);
     } 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,
+  }, T = K(g, 1e3), E = (e) => {
+    h(e), T(e);
+  }, m = (e) => {
+    S(e.value), b(e);
+  }, I = () => {
+    m({ value: "", label: "" }), b(void 0);
+  }, R = _(() => {
+    if (!s) {
+      c.current = !0;
+      return;
+    }
+    s({ setOptions: i }).finally(() => {
+      c.current = !0;
+    });
+  }, [s]);
+  return w(() => (R(), () => {
+    c.current = !1;
+  }), []), /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ t(
+    F,
     {
       open: l,
       onOpenChange: (e) => {
-        d(e), e && j();
+        p(e), e && M();
       },
       children: [
-        /* @__PURE__ */ a(_, { asChild: !0, className: "border-border", children: /* @__PURE__ */ t(
-          F,
+        /* @__PURE__ */ a(G, { asChild: !0, className: "border-border", children: /* @__PURE__ */ t(
+          W,
           {
             variant: "outline",
             role: "combobox",
             "aria-expanded": l,
-            className: g(
+            className: x(
               "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) || (d == null ? void 0 : d.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: k }) }),
               o ? /* @__PURE__ */ a(
-                z,
+                Q,
                 {
                   className: "opacity-50 w-4 h-4 cursor-pointer hover:opacity-100",
                   onClick: (e) => {
-                    e.stopPropagation(), T();
+                    e.stopPropagation(), I();
                   }
                 }
-              ) : /* @__PURE__ */ a(A, { className: "opacity-50 w-4 h-4" })
+              ) : /* @__PURE__ */ a(Y, { className: "opacity-50 w-4 h-4" })
             ]
           }
         ) }),
         /* @__PURE__ */ a(
-          B,
+          V,
           {
             className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
             align: "start",
-            children: /* @__PURE__ */ t(G, { shouldFilter: !1, children: [
+            children: /* @__PURE__ */ t(X, { shouldFilter: !1, children: [
               /* @__PURE__ */ a(
-                M,
+                q,
                 {
-                  placeholder: S,
-                  value: P,
-                  onValueChange: D
+                  placeholder: O,
+                  value: D,
+                  onValueChange: E
                 }
               ),
-              /* @__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__ */ t(z, { children: [
+                !v && /* @__PURE__ */ a(A, { children: j }),
+                /* @__PURE__ */ a(H, { children: v ? /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(B, {}) }) : f.map((e) => /* @__PURE__ */ t(
+                  J,
                   {
                     value: e.value,
                     onSelect: () => {
-                      o === e.value ? c({ value: "", label: "" }) : c(e), d(!1);
+                      o === e.value ? m({ value: "", label: "" }) : m(e), p(!1);
                     },
                     children: [
                       e.label,
                       /* @__PURE__ */ a(
-                        H,
+                        Z,
                         {
-                          className: g(
+                          className: x(
                             "ml-auto",
                             o === e.value ? "opacity-100" : "opacity-0"
                           )
@@ -122,5 +133,5 @@ const te = (w) => {
   ) });
 };
 export {
-  te as Combobox
+  ie 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.18",
   "description": "UI React Components.",
   "author": "One Platform Development Team",
   "keywords": [