@oneplatformdev/ui 0.0.1-beta.102 → 0.0.1-beta.104

package/Combobox/Combobox.mjs

@@ -9,7 +9,7 @@ import "../Command/Command.mjs";
 import "@oneplatformdev/utils";
 import "@oneplatformdev/hooks";
 import "lucide-react";
-import { C as c } from "../Combobox-Dfbnw0oF.js";
+import { C as c } from "../Combobox-B9bMpp7r.js";
 export {
   c as Combobox
 };

package/Combobox/Combobox.types.d.ts

@@ -33,6 +33,8 @@ export interface ComboboxProps {
     emptyLabel?: string;
     /** Command Empty list action */
     emptyAction?: ((params: ComboboxPropsOnMountParams) => ReactNode) | ReactNode;
+    /** Command Input footer action */
+    commandInputAction?: ((params: ComboboxPropsOnMountParams) => ReactNode) | ReactNode;
     /** Callback for load data on start component */
     onMount?: (params: ComboboxPropsOnMountParams) => Promise<void>;
 }

package/Combobox/ComboboxOptionItem.mjs

@@ -20,7 +20,7 @@ import "../Card/Card.mjs";
 import "../Carousel/Carousel.mjs";
 import "../Checkbox/Checkbox.mjs";
 import "@radix-ui/react-collapsible";
-import { a as no } from "../Combobox-Dfbnw0oF.js";
+import { a as no } from "../Combobox-B9bMpp7r.js";
 import "../Command/Command.mjs";
 import "../DropdownMenu/DropdownMenu.mjs";
 import "../Table/Table.mjs";

package/Combobox/ComboboxOptions.mjs

@@ -3,7 +3,7 @@ import "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
 import "react";
 import "../Collapsible/Collapsible.mjs";
-import { c as a, b as e } from "../Combobox-Dfbnw0oF.js";
+import { c as a, b as e } from "../Combobox-B9bMpp7r.js";
 import "lucide-react";
 import "@oneplatformdev/utils";
 export {

package/Combobox/index.mjs

@@ -1,4 +1,4 @@
-import { C as m } from "../Combobox-Dfbnw0oF.js";
+import { C as m } from "../Combobox-B9bMpp7r.js";
 export {
   m as Combobox
 };

package/{Combobox-Dfbnw0oF.js → Combobox-B9bMpp7r.js}

@@ -1,15 +1,15 @@
-import { jsxs as s, jsx as e, Fragment as A } from "react/jsx-runtime";
-import f, { forwardRef as y, useState as V, useRef as W, useEffect as X, useCallback as g, useLayoutEffect as H } from "react";
-import { LoadingMask as J } from "./LoadingMask/LoadingMask.mjs";
+import { jsxs as l, jsx as e, Fragment as W } from "react/jsx-runtime";
+import f, { forwardRef as y, useState as X, useRef as H, useEffect as J, useCallback as b, useMemo as K, useLayoutEffect as Q } from "react";
+import { LoadingMask as Y } from "./LoadingMask/LoadingMask.mjs";
 import "./LoadingMask/RenderLoadingMask.mjs";
-import { Popover as K, PopoverTrigger as Q, PopoverContent as Y } from "./Popover/Popover.mjs";
-import { Button as _ } from "./Button/Button.mjs";
+import { Popover as Z, PopoverTrigger as $, PopoverContent as ee } from "./Popover/Popover.mjs";
+import { Button as R } from "./Button/Button.mjs";
 import "./Button/buttonVariants.mjs";
-import { CommandItem as Z, Command as $, CommandInput as ee, CommandList as te, CommandGroup as oe, CommandEmpty as F } from "./Command/Command.mjs";
+import { CommandItem as te, Command as oe, CommandInput as re, CommandList as ae, CommandGroup as ne, CommandEmpty as F } from "./Command/Command.mjs";
 import { cn as p } from "@oneplatformdev/utils";
-import { useDebounceCallback as re } from "@oneplatformdev/hooks";
-import { Check as ae, ChevronDownIcon as ie, X as ne, ChevronsUpDown as le } from "lucide-react";
-import { Collapsible as se, CollapsibleTrigger as pe, CollapsibleContent as me } from "./Collapsible/Collapsible.mjs";
+import { useDebounceCallback as ie } from "@oneplatformdev/hooks";
+import { Check as se, ChevronDownIcon as le, X as pe, ChevronsUpDown as me } from "lucide-react";
+import { Collapsible as ce, CollapsibleTrigger as de, CollapsibleContent as ue } from "./Collapsible/Collapsible.mjs";
 import "./Accordion/Accordion.mjs";
 import "./Alert/Alert.mjs";
 import "./AlertDialog/AlertDialogRoot.mjs";
@@ -63,18 +63,18 @@ import "./Toggle/Toggle.mjs";
 import "./ToggleGroup/ToggleGroup.mjs";
 import "./Tooltip/TooltipRoot.mjs";
 import "./Dropzone/Dropzone.mjs";
-const ce = 8, I = y((n, l) => {
-  const { children: t, setOpen: m, option: o, onChangeOption: i, value: c = "", deep: a = 0 } = n;
-  return /* @__PURE__ */ s(
-    Z,
+const he = 8, _ = y((i, s) => {
+  const { children: t, setOpen: m, option: o, onChangeOption: n, value: c = "", deep: a = 0 } = i;
+  return /* @__PURE__ */ l(
+    te,
     {
-      ref: l,
+      ref: s,
       value: o.value,
       onSelect: () => {
-        c === o.value ? i == null || i({ value: "", label: "" }) : i == null || i(o), m(!1);
+        c === o.value ? n == null || n({ value: "", label: "" }) : n == null || n(o), m(!1);
       },
       style: {
-        paddingLeft: (a + 1) * ce
+        paddingLeft: (a + 1) * he
       },
       children: [
         t,
@@ -88,7 +88,7 @@ const ce = 8, I = y((n, l) => {
           }
         ),
         /* @__PURE__ */ e(
-          ae,
+          se,
           {
             className: p(
               "ml-auto",
@@ -100,23 +100,23 @@ const ce = 8, I = y((n, l) => {
     },
     o.value
   );
-}), M = y((n, l) => {
+}), q = y((i, s) => {
   var c;
-  const { option: t, deep: m = 0 } = n, [o, i] = V(!0);
-  return (c = t == null ? void 0 : t.items) != null && c.length ? /* @__PURE__ */ s(
-    se,
+  const { option: t, deep: m = 0 } = i, [o, n] = X(!0);
+  return (c = t == null ? void 0 : t.items) != null && c.length ? /* @__PURE__ */ l(
+    ce,
     {
-      ref: l,
+      ref: s,
       open: o,
-      onOpenChange: i,
+      onOpenChange: n,
       "data-opened": o,
       className: p("group/collapsible"),
       children: [
-        /* @__PURE__ */ e(I, { ...n, children: /* @__PURE__ */ e(pe, { asChild: !0, children: /* @__PURE__ */ s(
-          _,
+        /* @__PURE__ */ e(_, { ...i, children: /* @__PURE__ */ e(de, { asChild: !0, children: /* @__PURE__ */ l(
+          R,
           {
             onClick: (a) => {
-              a == null || a.preventDefault(), a == null || a.stopPropagation(), i((d) => !d);
+              a == null || a.preventDefault(), a == null || a.stopPropagation(), n((d) => !d);
             },
             type: "button",
             variant: "ghost",
@@ -124,7 +124,7 @@ const ce = 8, I = y((n, l) => {
             className: p("aspect-square size-6", "transition-transform"),
             children: [
               /* @__PURE__ */ e(
-                ie,
+                le,
                 {
                   className: p(
                     "!size-5",
@@ -137,10 +137,10 @@ const ce = 8, I = y((n, l) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: t == null ? void 0 : t.items.map((a) => /* @__PURE__ */ e(
-          M,
+        /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: t == null ? void 0 : t.items.map((a) => /* @__PURE__ */ e(
+          q,
           {
-            ...n,
+            ...i,
             deep: m + 1,
             option: a
           },
@@ -148,31 +148,32 @@ const ce = 8, I = y((n, l) => {
         )) }) })
       ]
     }
-  ) : /* @__PURE__ */ e(I, { ...n, ref: l });
-}), de = y((n, l) => {
-  const { options: t = [], ...m } = n;
-  return /* @__PURE__ */ e("div", { ref: l, className: "flex flex-col gap-0", children: t.map((o) => /* @__PURE__ */ e(M, { ...m, option: o }, o.value)) });
-}), St = y(
-  (n, l) => {
+  ) : /* @__PURE__ */ e(_, { ...i, ref: s });
+}), fe = y((i, s) => {
+  const { options: t = [], ...m } = i;
+  return /* @__PURE__ */ e("div", { ref: s, className: "flex flex-col gap-0", children: t.map((o) => /* @__PURE__ */ e(q, { ...m, option: o }, o.value)) });
+}), Dt = y(
+  (i, s) => {
     var j;
     const {
       value: t,
       onChange: m,
       placeholder: o,
-      disabled: i,
+      disabled: n,
       searchLabel: c = "Type to search...",
       fetchOptions: a,
       options: d,
       emptyLabel: L = "No options",
-      emptyAction: b,
-      onMount: P
-    } = n, w = W(!1), [u, v] = f.useState(!1), [C, T] = f.useState(""), [N, x] = f.useState([]), [S, k] = f.useState(), [O, h] = f.useState(!1);
-    X(() => {
+      emptyAction: g,
+      commandInputAction: w,
+      onMount: T
+    } = i, N = H(!1), [u, v] = f.useState(!1), [C, k] = f.useState(""), [S, x] = f.useState([]), [O, E] = f.useState(), [P, h] = f.useState(!1);
+    J(() => {
       d != null && d.length && x(d);
     }, [d]);
-    const R = async () => {
-      u || (E(), T(""));
-    }, E = g(async (r) => {
+    const A = async () => {
+      u || (z(), k(""));
+    }, z = b(async (r) => {
       h(!0);
       try {
         const D = await a(r);
@@ -182,38 +183,43 @@ const ce = 8, I = y((n, l) => {
       } finally {
         h(!1);
       }
-    }, []), q = re(E, 1e3, {
+    }, []), B = ie(z, 1e3, {
       leading: !1,
       trailing: !0
-    }), B = g((r) => {
-      h(!0), T(r), q(r);
-    }, []), z = g((r) => {
-      m(r.value), k(r), h(!1);
-    }, []), G = g(() => {
-      z({ value: "", label: "" }), k(void 0), h(!1);
-    }, []), U = g(() => {
-      if (!P) {
-        w.current = !0;
+    }), G = b((r) => {
+      h(!0), k(r), B(r);
+    }, []), I = b((r) => {
+      m(r.value), E(r), h(!1);
+    }, []), U = b(() => {
+      I({ value: "", label: "" }), E(void 0), h(!1);
+    }, []), M = K(() => ({
+      setOptions: x,
+      search: C || "",
+      open: u,
+      setOpen: v
+    }), []), V = b(() => {
+      if (!T) {
+        N.current = !0;
         return;
       }
-      P({ setOptions: x, search: C || "", open: u, setOpen: v }).finally(
+      T({ setOptions: x, search: C || "", open: u, setOpen: v }).finally(
         () => {
-          w.current = !0;
+          N.current = !0;
         }
       );
     }, []);
-    return H(() => (U(), () => {
-      w.current = !1;
-    }), []), /* @__PURE__ */ e("div", { className: "w-full", ref: l, children: /* @__PURE__ */ s(
-      K,
+    return Q(() => (V(), () => {
+      N.current = !1;
+    }), []), /* @__PURE__ */ e("div", { className: "w-full", ref: s, children: /* @__PURE__ */ l(
+      Z,
       {
         open: u,
         onOpenChange: (r) => {
-          v(r), r && R();
+          v(r), r && A();
         },
         children: [
-          /* @__PURE__ */ e(Q, { asChild: !0, className: "border-input", children: /* @__PURE__ */ s(
-            _,
+          /* @__PURE__ */ e($, { asChild: !0, className: "border-input", children: /* @__PURE__ */ l(
+            R,
             {
               variant: "outline",
               role: "combobox",
@@ -225,9 +231,9 @@ const ce = 8, I = y((n, l) => {
                 u && "border-2 outline-none ring-1 ring-ring",
                 "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               ),
-              disabled: i,
+              disabled: n,
               children: [
-                /* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: t ? ((j = N.find((r) => r.value === t)) == null ? void 0 : j.label) || (S == null ? void 0 : S.label) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: o }) }),
+                /* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: t ? ((j = S.find((r) => r.value === t)) == null ? void 0 : j.label) || (O == null ? void 0 : O.label) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: o }) }),
                 t ? /* @__PURE__ */ e(
                   "div",
                   {
@@ -238,49 +244,45 @@ const ce = 8, I = y((n, l) => {
                       "opacity-50 cursor-pointer hover:opacity-100"
                     ),
                     onClick: (r) => {
-                      r.stopPropagation(), G();
+                      r.stopPropagation(), U();
                     },
-                    children: /* @__PURE__ */ e(ne, {})
+                    children: /* @__PURE__ */ e(pe, {})
                   }
-                ) : /* @__PURE__ */ e(le, { className: "opacity-50 w-4 h-4" })
+                ) : /* @__PURE__ */ e(me, { className: "opacity-50 w-4 h-4" })
               ]
             }
           ) }),
           /* @__PURE__ */ e(
-            Y,
+            ee,
             {
               className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
               align: "start",
-              children: /* @__PURE__ */ s($, { shouldFilter: !1, children: [
+              children: /* @__PURE__ */ l(oe, { shouldFilter: !1, children: [
                 /* @__PURE__ */ e(
-                  ee,
+                  re,
                   {
                     placeholder: c,
                     value: C,
-                    onValueChange: B
+                    onValueChange: G
                   }
                 ),
-                /* @__PURE__ */ e(te, { children: /* @__PURE__ */ s(
-                  oe,
+                typeof w == "function" ? w(M) : w,
+                /* @__PURE__ */ e(ae, { children: /* @__PURE__ */ l(
+                  ne,
                   {
-                    className: p(!N.length && "p-0 shadow-none"),
+                    className: p(!S.length && "p-0 shadow-none"),
                     children: [
-                      O && /* @__PURE__ */ e(J, { fullWidth: !0 }),
-                      !O && !!C && /* @__PURE__ */ e(A, { children: b ? /* @__PURE__ */ s(F, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+                      P && /* @__PURE__ */ e(Y, { fullWidth: !0 }),
+                      !P && !!C && /* @__PURE__ */ e(W, { children: g ? /* @__PURE__ */ l(F, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
                         /* @__PURE__ */ e("span", { children: L }),
-                        typeof b == "function" ? b({
-                          setOptions: x,
-                          search: C || "",
-                          open: u,
-                          setOpen: v
-                        }) : b
+                        typeof g == "function" ? g(M) : g
                       ] }) : /* @__PURE__ */ e(F, { children: L }) }),
-                      !O && /* @__PURE__ */ e(
-                        de,
+                      !P && /* @__PURE__ */ e(
+                        fe,
                         {
                           value: t,
-                          options: N,
-                          onChangeOption: z,
+                          options: S,
+                          onChangeOption: I,
                           setOpen: v
                         }
                       )
@@ -296,8 +298,8 @@ const ce = 8, I = y((n, l) => {
   }
 );
 export {
-  St as C,
-  I as a,
-  M as b,
-  de as c
+  Dt as C,
+  _ as a,
+  q as b,
+  fe as c
 };

package/FormCombobox/FormCombobox.mjs

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { FormControl as a } from "../Form/Form.mjs";
 import { FormRenderControl as b } from "../Form/FormRenderControl.mjs";
-import { C as p } from "../Combobox-Dfbnw0oF.js";
+import { C as p } from "../Combobox-B9bMpp7r.js";
 const x = (m) => {
   const { form: n, label: e, name: t, ...C } = m;
   return /* @__PURE__ */ o(

package/FormInput/FormInput.mjs

@@ -4,13 +4,13 @@ import { FormRenderControl as I } from "../Form/FormRenderControl.mjs";
 import { Input as y } from "../Input/Input.mjs";
 import { forwardRef as C } from "react";
 function b(l, e) {
-  const { form: m, label: h, name: p, onChange: u, onBlur: a, onPaste: s, style: v, ...g } = l;
+  const { form: m, label: v, name: p, onChange: u, onBlur: a, onPaste: s, style: h, ...g } = l;
   return /* @__PURE__ */ c(
     I,
     {
       form: m,
       name: p,
-      label: h,
+      label: v,
       render: ({ field: o }) => /* @__PURE__ */ c(F, { children: /* @__PURE__ */ c(
         y,
         {
@@ -19,14 +19,14 @@ function b(l, e) {
           ref: (t) => {
             o.ref(t), typeof e == "function" ? e(t) : e && (e.current = t);
           },
-          style: v,
+          style: h,
           value: o.value || "",
           onChange: (...t) => {
             var r;
             (r = o.onChange) == null || r.call(o, ...t), u == null || u(...t);
           },
           onPaste: (t) => {
-            const r = t.clipboardData.getData("text"), n = t.currentTarget, i = n.selectionStart ?? n.value.length, x = n.selectionEnd ?? n.value.length, D = n.value.slice(0, i) + r + n.value.slice(x);
+            const r = t.clipboardData.getData("text"), n = t.currentTarget, x = n.selectionStart ?? n.value.length, i = n.selectionEnd ?? n.value.length, D = n.value.slice(0, x) + r + n.value.slice(i);
             t.preventDefault(), m.setValue(p, D, {
               shouldDirty: !0,
               shouldTouch: !0
@@ -41,7 +41,7 @@ function b(l, e) {
     }
   );
 }
-const B = C(b);
+const E = C(b);
 export {
-  B as FormInput
+  E as FormInput
 };

package/index.mjs

@@ -20,7 +20,7 @@ import { Carousel as go, CarouselContent as xo, CarouselItem as fo, CarouselNext
 import { ChartContainer as To, ChartLegend as Do, ChartLegendContent as co, ChartStyle as Mo, ChartTooltip as Po, ChartTooltipContent as Ao } from "./Chart/Chart.mjs";
 import { Checkbox as wo, CheckboxLabel as ho } from "./Checkbox/Checkbox.mjs";
 import { Collapsible as Fo, CollapsibleContent as Lo, CollapsibleTrigger as Ro } from "./Collapsible/Collapsible.mjs";
-import { C as Go } from "./Combobox-Dfbnw0oF.js";
+import { C as Go } from "./Combobox-B9bMpp7r.js";
 import { Command as Ho, CommandDialog as No, CommandEmpty as Vo, CommandGroup as yo, CommandInput as Eo, CommandItem as Oo, CommandList as zo, CommandSeparator as _o, CommandShortcut as Uo } from "./Command/Command.mjs";
 import { DataTable as jo } from "./DataTable/DataTable.mjs";
 import { DatePicker as Jo } from "./DatePicker/DatePicker.mjs";

package/package.json

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