@oneplatformdev/ui 0.0.1-beta.14 → 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/Dropzone/Dropzone.mjs

@@ -1,106 +1,102 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { forwardRef as L, useState as y, useEffect as M } from "react";
-import { useDropzone as U } from "react-dropzone";
-import { Card as j } from "../Card/Card.mjs";
-import { File as O, X } from "lucide-react";
-import { cn as f } from "@oneplatformdev/utils";
-import { F as Y, D as q } from "../FilePreview-Dhtv8F4u.js";
-import { isFile as v, extractName as G } from "./DropzoneUtils.mjs";
-const H = L(
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { forwardRef as L, useState as g } from "react";
+import { useDropzone as M } from "react-dropzone";
+import { Card as U } from "../Card/Card.mjs";
+import { File as j, X as O } from "lucide-react";
+import { cn as m } from "@oneplatformdev/utils";
+import { F as X, D as Y } from "../DropzoneFilePreview-Dhtv8F4u.js";
+import { isFile as v, extractName as q } from "./DropzoneUtils.mjs";
+const G = L(
   ({
-    acceptTypes: w = q,
-    maxSizeMB: b,
-    maxFiles: h = 1,
-    onErrors: g,
-    hideErrors: F = !1,
+    acceptTypes: y = Y,
+    maxSizeMB: w,
+    maxFiles: a = 1,
+    onErrors: x,
+    hideErrors: b = !1,
     disabled: p = !1,
     classNames: l,
-    value: m = [],
+    value: u = [],
     onChangeValue: s,
-    className: u,
+    className: F,
     labelDropzonePrompt: z = "Drop files here or click to select",
-    labelOrClickToSelect: J = "Click to select files",
+    labelOrClickToSelect: H = "Click to select files",
     labelSelectedFiles: D = "Selected Files",
     labelUploadErrors: I = "Upload Errors",
     labelFileTooLarge: k = "File is too large",
-    labelInvalidFileType: E = "Invalid file type",
-    ...S
+    labelInvalidFileType: S = "Invalid file type",
+    ...E
   }, P) => {
-    const [c, a] = y(m), [d, N] = y([]);
-    M(() => {
-      a(m);
-    }, [m]);
-    const W = (e, i) => {
-      N(i), g && g(i);
-      const t = [...c, ...e].slice(0, h);
-      a(t), s == null || s(t);
+    const [c, h] = g(u), [d, N] = g([]), W = (e, i) => {
+      N(i), x && x(i);
+      const r = [...c, ...e].slice(0, a);
+      h(r), s == null || s(r);
     }, T = (e, i) => {
       if (p) return;
       e.stopPropagation();
-      const t = c.filter((n, x) => x !== i);
-      a(t), s == null || s(t);
-    }, { getRootProps: _, getInputProps: A, isDragActive: B } = U({
+      const r = c.filter((n, f) => f !== i);
+      h(r), s == null || s(r);
+    }, { getRootProps: _, getInputProps: A, isDragActive: B } = M({
       onDrop: W,
-      accept: w.reduce((e, i) => (e[i] = [], e), {}),
-      maxSize: b * 1024 * 1024,
-      maxFiles: h,
+      accept: y.reduce((e, i) => (e[i] = [], e), {}),
+      maxSize: w * 1024 * 1024,
+      maxFiles: a,
       disabled: p
     });
-    return /* @__PURE__ */ r(
-      j,
+    return /* @__PURE__ */ t(
+      U,
       {
         ..._(),
-        ...S,
-        className: f(
+        ...E,
+        className: m(
           "border-dashed border-2 p-6 text-center flex flex-col items-center justify-center",
           p && "bg-gray-300 pointer-events-none",
           d.length > 0 ? "border-red-500" : "border-gray-300",
           B && "bg-gray-100",
-          u
+          F
         ),
         ref: P,
         children: [
           /* @__PURE__ */ o("input", { ...A() }),
-          c.length === 0 && d.length === 0 && /* @__PURE__ */ r(
+          c.length === 0 && d.length === 0 && /* @__PURE__ */ t(
             "div",
             {
-              className: f(
+              className: m(
                 "flex flex-col items-center gap-1",
                 l == null ? void 0 : l.idleWrapper
               ),
               children: [
-                /* @__PURE__ */ o(O, { className: "w-8 h-8 text-gray-500" }),
-                !p && /* @__PURE__ */ o("span", { className: "font-semibold text-gray-600", children: z })
+                /* @__PURE__ */ o(j, { className: "w-8 h-8 text-gray-500" }),
+                !p && /* @__PURE__ */ o("pre", { className: "font-semibold text-gray-600", children: z })
               ]
             }
           ),
-          c.length > 0 && /* @__PURE__ */ r("div", { className: f("w-full mt-2", l == null ? void 0 : l.previewWrapper), children: [
-            /* @__PURE__ */ r("span", { className: "font-semibold text-gray-600", children: [
+          c.length > 0 && /* @__PURE__ */ t("div", { className: m("w-full mt-2", l == null ? void 0 : l.previewWrapper), children: [
+            /* @__PURE__ */ t("pre", { className: "font-semibold text-gray-600", children: [
               D,
               ":"
             ] }),
             /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: c.map((e, i) => {
-              const t = v(e) ? e.name : G(e), n = v(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
-              return /* @__PURE__ */ r(
+              const r = v(e) ? e.name : q(e), n = v(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
+              return /* @__PURE__ */ t(
                 "li",
                 {
                   className: "flex flex-col items-center gap-2 relative",
                   children: [
-                    /* @__PURE__ */ r("div", { className: "relative", children: [
-                      /* @__PURE__ */ o(Y, { item: e, styles: l }),
+                    /* @__PURE__ */ t("div", { className: "relative", children: [
+                      /* @__PURE__ */ o(X, { item: e, styles: l }),
                       /* @__PURE__ */ o("div", { className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm", children: /* @__PURE__ */ o(
-                        X,
+                        O,
                         {
                           size: 16,
                           strokeWidth: 1,
                           color: "black",
-                          onClick: (x) => T(x, i)
+                          onClick: (f) => T(f, i)
                         }
                       ) })
                     ] }),
-                    /* @__PURE__ */ r("span", { className: "inline-flex flex-col items-center", children: [
-                      /* @__PURE__ */ o("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: t }),
-                      n && /* @__PURE__ */ r("span", { children: [
+                    /* @__PURE__ */ t("span", { className: "inline-flex flex-col items-center", children: [
+                      /* @__PURE__ */ o("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: r }),
+                      n && /* @__PURE__ */ t("span", { children: [
                         "(",
                         n,
                         ")"
@@ -112,20 +108,20 @@ const H = L(
               );
             }) })
           ] }),
-          d.length > 0 && /* @__PURE__ */ r("div", { className: f("w-full mt-4", l == null ? void 0 : l.errorWrapper), children: [
-            /* @__PURE__ */ r("span", { className: "font-semibold text-red-500", children: [
+          d.length > 0 && /* @__PURE__ */ t("div", { className: m("w-full mt-4", l == null ? void 0 : l.errorWrapper), children: [
+            /* @__PURE__ */ t("span", { className: "font-semibold text-red-500", children: [
               I,
               ":"
             ] }),
-            /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: d.map((e, i) => /* @__PURE__ */ r("li", { children: [
+            /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: d.map((e, i) => /* @__PURE__ */ t("li", { children: [
               e.file.name,
               " (",
               (e.file.size / (1024 * 1024)).toFixed(2),
               " MB)",
-              !F && /* @__PURE__ */ o("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((t, n) => /* @__PURE__ */ r("li", { children: [
-                t.code === "file-too-large" && k,
-                t.code === "file-invalid-type" && E,
-                t.code !== "file-too-large" && t.code !== "file-invalid-type" && t.message
+              !b && /* @__PURE__ */ o("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((r, n) => /* @__PURE__ */ t("li", { children: [
+                r.code === "file-too-large" && k,
+                r.code === "file-invalid-type" && S,
+                r.code !== "file-too-large" && r.code !== "file-invalid-type" && r.message
               ] }, n)) })
             ] }, i)) })
           ] })
@@ -134,7 +130,7 @@ const H = L(
     );
   }
 );
-H.displayName = "Dropzone";
+G.displayName = "Dropzone";
 export {
-  H as Dropzone
+  G as Dropzone
 };

package/Dropzone/{FilePreview.mjs → DropzoneFilePreview.mjs}

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "lucide-react";
-import { F } from "../FilePreview-Dhtv8F4u.js";
+import { F } from "../DropzoneFilePreview-Dhtv8F4u.js";
 import "./DropzoneUtils.mjs";
 import "@oneplatformdev/utils";
 export {

package/Dropzone/index.mjs

@@ -1,5 +1,5 @@
 import { Dropzone as r } from "./Dropzone.mjs";
-import { D as T, a as _ } from "../FilePreview-Dhtv8F4u.js";
+import { D as T, a as _ } from "../DropzoneFilePreview-Dhtv8F4u.js";
 export {
   T as DEFAULT_FILE_TYPES,
   _ as DEFAULT_IMAGES_TYPES,

package/FormDropzone/FormDropzone.mjs

@@ -1,22 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import { FormControl as p } from "../Form/Form.mjs";
+import { jsx as o } from "react/jsx-runtime";
+import { FormControl as a } from "../Form/Form.mjs";
 import { FormRenderControl as l } from "../Form/FormRenderControl.mjs";
-import { Dropzone as s } from "../Dropzone/Dropzone.mjs";
-const h = (e) => {
-  const { form: n, label: m, name: t, ...a } = e;
-  return /* @__PURE__ */ r(
+import { Dropzone as f } from "../Dropzone/Dropzone.mjs";
+const h = (n) => {
+  const { form: e, label: m, name: t, ...p } = n;
+  return /* @__PURE__ */ o(
     l,
     {
-      form: n,
+      form: e,
       label: m,
       name: t,
-      render: ({ field: o }) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
-        s,
+      render: ({ field: r }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
+        f,
         {
-          ...a,
-          ...o,
-          value: o.value,
-          onChangeValue: o.onChange
+          ...p,
+          ...r,
+          onChangeValue: r.onChange
         }
       ) })
     }

package/FormSelect/FormSelect.types.d.ts

@@ -3,5 +3,5 @@ import { FormRenderControlExtendProps } from '../Form';
 import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, SelectProps<ExtendOptionData> {
+export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, Omit<SelectProps<ExtendOptionData>, 'onChange'> {
 }

package/index.mjs

@@ -78,7 +78,7 @@ import { ToggleGroup as cn, ToggleGroupItem as Mn } from "./ToggleGroup/ToggleGr
 import { TooltipContent as An, TooltipProvider as In, TooltipRoot as wn, TooltipTrigger as hn } from "./Tooltip/TooltipRoot.mjs";
 import { Tooltip as Fn } from "./Tooltip/Tooltip.mjs";
 import { Dropzone as Bn } from "./Dropzone/Dropzone.mjs";
-import { D as Rn, a as kn } from "./FilePreview-Dhtv8F4u.js";
+import { D as Rn, a as kn } from "./DropzoneFilePreview-Dhtv8F4u.js";
 import { FormDropzone as Nn } from "./FormDropzone/FormDropzone.mjs";
 export {
   e as Accordion,

package/package.json

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