unifyedx-storybook-new 0.2.13 → 0.2.14

package/dist/unifyedx-storybook-new.es.js

@@ -828,11 +828,11 @@ const _r = {
     // Deep copy
     onSubmit: (C) => {
       const T = {};
-      Object.keys(C).forEach((I) => {
-        T[I] = {
-          operator: C[I].operator || "in",
-          values: Array.isArray(C[I].values) ? C[I].values : [],
-          range: C[I].range || null
+      Object.keys(C).forEach((E) => {
+        T[E] = {
+          operator: C[E].operator || "in",
+          values: Array.isArray(C[E].values) ? C[E].values : [],
+          range: C[E].range || null
         };
       }), console.log("[storybook filter] Applied Filters:", T), typeof s == "function" && s({
         filters: T,
@@ -841,38 +841,38 @@ const _r = {
     },
     enableReinitialize: !0
   }), k = ce(() => n.reduce((C, T) => {
-    const I = T.key, E = a.values[I];
+    const E = T.key, R = a.values[E];
     let V = !1;
-    if (E)
+    if (R)
       switch (T.type) {
         case "multiselect":
         case "multiselect-users":
-          V = Array.isArray(E.values) && E.values.length > 0;
+          V = Array.isArray(R.values) && R.values.length > 0;
           break;
         case "date":
-          (E.range && E.range !== "" || Array.isArray(E.values) && E.values.length > 0) && (V = !0);
+          (R.range && R.range !== "" || Array.isArray(R.values) && R.values.length > 0) && (V = !0);
           break;
       }
-    return C[I] = V, C;
+    return C[E] = V, C;
   }, {}), [n, a.values]), m = Object.values(k).filter(Boolean).length, g = async (C, T) => {
     try {
-      N((E) => ({ ...E, [C]: !0 }));
-      const I = await i(C, T);
-      y((E) => ({ ...E, [C]: I }));
-    } catch (I) {
-      console.error(`Error fetching ${C} users:`, I);
+      N((R) => ({ ...R, [C]: !0 }));
+      const E = await i(C, T);
+      y((R) => ({ ...R, [C]: E }));
+    } catch (E) {
+      console.error(`Error fetching ${C} users:`, E);
     } finally {
-      N((I) => ({ ...I, [C]: !1 }));
+      N((E) => ({ ...E, [C]: !1 }));
     }
   }, $ = (C) => {
-    const T = n[C].key, I = n[C].url;
-    n[C].type === "multiselect-users" && d[T].length === 0 && !b[T] && g(T, I);
+    const T = n[C].key, E = n[C].url;
+    n[C].type === "multiselect-users" && d[T].length === 0 && !b[T] && g(T, E);
   }, L = () => {
     a.resetForm(), y({ createdBy: [], updatedBy: [] }), o();
   }, O = (C) => {
     const T = n.find((V) => V.key === C);
     if (!T) return null;
-    const I = a.values[C] || u[C], E = Array.isArray(I.values) ? I.values : [];
+    const E = a.values[C] || u[C], R = Array.isArray(E.values) ? E.values : [];
     switch (T.type) {
       case "multiselect":
         return /* @__PURE__ */ l("div", { className: "filter-panel-content", children: [
@@ -881,7 +881,7 @@ const _r = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: I.operator || "in",
+                value: E.operator || "in",
                 onChange: (c) => a.setFieldValue(`${C}.operator`, c.target.value),
                 className: "filter-select",
                 children: T.operators.map((c) => /* @__PURE__ */ e("option", { value: c, children: c === "in" ? "Includes" : "Excludes" }, c))
@@ -896,7 +896,7 @@ const _r = {
                   type: "checkbox",
                   id: `select-all-${C}`,
                   className: "filter-checkbox-input",
-                  checked: T.options.length > 0 && E.length === T.options.length,
+                  checked: T.options.length > 0 && R.length === T.options.length,
                   onChange: (c) => {
                     const h = c.target.checked ? T.options.map((x) => x.value) : [];
                     a.setFieldValue(`${C}.values`, h);
@@ -919,9 +919,9 @@ const _r = {
                   type: "checkbox",
                   id: `${C}-${c.value}`,
                   className: "filter-checkbox-input",
-                  checked: E.includes(c.value),
+                  checked: R.includes(c.value),
                   onChange: (h) => {
-                    const x = h.target.checked ? [...E, c.value] : E.filter((F) => F !== c.value);
+                    const x = h.target.checked ? [...R, c.value] : R.filter((F) => F !== c.value);
                     a.setFieldValue(`${C}.values`, x);
                   }
                 }
@@ -945,7 +945,7 @@ const _r = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: I.operator || "in",
+                value: E.operator || "in",
                 onChange: (c) => a.setFieldValue(`${C}.operator`, c.target.value),
                 className: "filter-select",
                 children: T.operators.map((c) => /* @__PURE__ */ e("option", { value: c, children: c === "in" ? "Includes" : "Excludes" }, c))
@@ -960,7 +960,7 @@ const _r = {
                   type: "checkbox",
                   id: `select-all-users-${C}`,
                   className: "filter-checkbox-input",
-                  checked: V.length > 0 && E.length === V.length,
+                  checked: V.length > 0 && R.length === V.length,
                   onChange: (c) => {
                     const h = c.target.checked ? V.map((x) => x.email) : [];
                     a.setFieldValue(
@@ -986,9 +986,9 @@ const _r = {
                   type: "checkbox",
                   id: `${C}-${c.email}`,
                   className: "filter-checkbox-input",
-                  checked: E.includes(c.email),
+                  checked: R.includes(c.email),
                   onChange: (h) => {
-                    const x = h.target.checked ? [...E, c.email] : E.filter((F) => F !== c.email);
+                    const x = h.target.checked ? [...R, c.email] : R.filter((F) => F !== c.email);
                     a.setFieldValue(
                       `${C}.values`,
                       x
@@ -1011,7 +1011,7 @@ const _r = {
           ] }) : /* @__PURE__ */ e("div", { className: "text-center py-4 text-gray-500 text-sm", children: "No users loaded." }) })
         ] });
       case "date":
-        const G = I.values || [], [v, p] = G, f = v && p, w = {
+        const G = E.values || [], [v, p] = G, f = v && p, w = {
           startDate: v instanceof Date ? v : /* @__PURE__ */ new Date(),
           // Fallback to today
           endDate: p instanceof Date ? p : /* @__PURE__ */ new Date(),
@@ -1024,7 +1024,7 @@ const _r = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: I.operator,
+                value: E.operator,
                 onChange: (c) => a.setFieldValue(`${C}.operator`, c.target.value),
                 className: "filter-select",
                 children: T.operators.map((c) => /* @__PURE__ */ e("option", { value: c, children: c === "in" ? "Is" : "Is not" }, c))
@@ -2497,8 +2497,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   },
   isChanged: d = !1
 }) => {
-  const [y, b] = B(ga[0]), [N, a] = B(""), k = oa(N, 400), [m, g] = B([]), [$, L] = B(/* @__PURE__ */ new Set()), [O, C] = B(!1), [T, I] = B(ya[0]), {
-    control: E,
+  const [y, b] = B(ga[0]), [N, a] = B(""), k = oa(N, 400), [m, g] = B([]), [$, L] = B(/* @__PURE__ */ new Set()), [O, C] = B(!1), [T, E] = B(ya[0]), {
+    control: R,
     handleSubmit: V,
     watch: q,
     formState: { errors: G, isSubmitting: v }
@@ -2506,7 +2506,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     defaultValues: { pendingInvites: [] },
     resolver: Lt(yn)
   }), { fields: p, append: f, remove: w, update: c } = Pt({
-    control: E,
+    control: R,
     name: "pendingInvites"
   }), h = q("pendingInvites");
   X(() => {
@@ -2523,8 +2523,8 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     m.filter((D) => $.has(D.id)).forEach((D) => {
       p.find((z) => z.id === D.id) || f({ ...D, permission: T.name });
     }), L(/* @__PURE__ */ new Set()), a("");
-  }, R = (D) => {
-    I(D), p.forEach(
+  }, I = (D) => {
+    E(D), p.forEach(
       (z, U) => c(U, { ...p[U], permission: D.name })
     );
   }, j = async (D) => {
@@ -2749,7 +2749,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 Z,
                 {
                   value: T,
-                  onChange: R,
+                  onChange: I,
                   children: /* @__PURE__ */ l("div", { className: "relative", children: [
                     /* @__PURE__ */ l(Z.Button, { className: "relative w-full border border-gray-300 bg-white rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
                       /* @__PURE__ */ l("span", { className: "flex items-center", children: [
@@ -2980,20 +2980,23 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     roles: i.roles.filter(
       (C) => C.name.toLowerCase().includes(k.toLowerCase())
     )
-  }, g = async (C, T, I, E) => {
+  }, g = async (C, T, E, R) => {
     const V = T.value;
     d((q) => ({
       ...q,
-      [I]: q[I].map(
+      [E]: q[E].map(
         (G) => G.id === C.id ? { ...G, permission: V } : G
       )
     }));
   }, $ = () => {
-    d((C) => ({
-      users: C.users.filter((T) => T.permission !== "remove"),
-      groups: C.groups.filter((T) => T.permission !== "remove"),
-      roles: C.roles.filter((T) => T.permission !== "remove")
-    }));
+    d((C) => {
+      const T = {
+        users: C.users.filter((E) => E.permission !== "remove"),
+        groups: C.groups.filter((E) => E.permission !== "remove"),
+        roles: C.roles.filter((E) => E.permission !== "remove")
+      };
+      return r(T), T;
+    });
   }, L = ["users", "groups", "roles"], O = ["Users", "Groups", "Roles"];
   return (
     // The main structure remains the same...
@@ -3098,9 +3101,9 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                           {
                             item: T,
                             allowedPermissions: u,
-                            onPermissionChange: (I) => g(
+                            onPermissionChange: (E) => g(
                               T,
-                              I,
+                              E,
                               C
                             )
                           }
@@ -3280,7 +3283,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
   allowedPermissions: d = [],
   ...y
 }) => {
-  const [b, N] = B(de.INVITE), [a, k] = B(t), [m, g] = B(null), [$, L] = B(!1), [O, C] = B([]), [T, I] = B(de.MANAGE), E = () => {
+  const [b, N] = B(de.INVITE), [a, k] = B(t), [m, g] = B(null), [$, L] = B(!1), [O, C] = B([]), [T, E] = B(de.MANAGE), R = () => {
     N(de.INVITE), g(null), u();
   }, V = () => {
     N(de.MANAGE);
@@ -3293,7 +3296,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
       }
       C(resp);
     }
-    g({ id: p, type: w, name: f }), I(b), N(de.MEMBERS);
+    g({ id: p, type: w, name: f }), E(b), N(de.MEMBERS);
   }, G = (p) => {
     k(p);
     const f = !He.isEqual(
@@ -3302,7 +3305,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
     );
     L(f), N(b === de.MEMBERS ? T : de.INVITE);
   };
-  return /* @__PURE__ */ e(oe, { appear: !0, show: r, as: Q, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: E, children: [
+  return /* @__PURE__ */ e(oe, { appear: !0, show: r, as: Q, children: /* @__PURE__ */ l(me, { as: "div", className: "relative z-50", onClose: R, children: [
     /* @__PURE__ */ e("div", { className: "filter-modal-overlay", "aria-hidden": "true" }),
     /* @__PURE__ */ e("div", { className: "filter-modal-container", children: /* @__PURE__ */ e("div", { className: "filter-modal-positioner", children: /* @__PURE__ */ e(Se, { className: "filter-modal-panel", style: { background: "white" }, children: (() => {
       switch (b) {
@@ -3320,7 +3323,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 {
                   entity: o,
                   onBack: G,
-                  onClose: E,
+                  onClose: R,
                   onOpenMembers: q,
                   existingShares: a,
                   calledBy: n,
@@ -3344,7 +3347,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 {
                   entity: m,
                   onBack: G,
-                  onClose: E,
+                  onClose: R,
                   calledBy: n,
                   existingShares: a,
                   members: O
@@ -3367,7 +3370,7 @@ const De = dn(), Ee = De.axiosGet, un = De.axiosDelete, Re = De.axiosPost, mn =
                 {
                   entity: o,
                   onManage: V,
-                  onClose: E,
+                  onClose: R,
                   existingShares: a,
                   calledBy: n,
                   showExistingShares: i,
@@ -3410,11 +3413,11 @@ function Ye({
   getOptionId: m = ($) => String($.id),
   getOptionLabel: g = ($) => $.name
 }) {
-  const $ = ea(), L = ea(), [O, C] = B(""), T = ue(""), I = ce(() => {
+  const $ = ea(), L = ea(), [O, C] = B(""), T = ue(""), E = ce(() => {
     const p = /* @__PURE__ */ new Map();
     for (const f of r) p.set(m(f), f);
     return p;
-  }, [r, m]), E = ce(() => Array.isArray(s) ? s.map((p) => p && typeof p == "object" ? I.get(m(p)) || null : I.get(String(p))).filter(Boolean) : [], [s, I, m]), V = ce(() => {
+  }, [r, m]), R = ce(() => Array.isArray(s) ? s.map((p) => p && typeof p == "object" ? E.get(m(p)) || null : E.get(String(p))).filter(Boolean) : [], [s, E, m]), V = ce(() => {
     if (!O) return r;
     const p = O.toLowerCase();
     return r.filter((f) => g(f).toLowerCase().includes(p));
@@ -3423,9 +3426,9 @@ function Ye({
     b === "server" && O.length >= k && O !== T.current && (T.current = O, N && N(O));
   }, [O, b, k, N]);
   const q = b === "client" ? V : r, G = () => {
-    if (!E.length)
+    if (!R.length)
       return /* @__PURE__ */ e("span", { className: "text-gray-500", children: u });
-    const p = E.slice(0, d), f = E.length - d;
+    const p = R.slice(0, d), f = R.length - d;
     return /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-2", children: [
       p.map((w) => /* @__PURE__ */ e(
         "span",
@@ -3442,7 +3445,7 @@ function Ye({
       ] })
     ] });
   };
-  return /* @__PURE__ */ e(Z, { value: E, onChange: (p) => {
+  return /* @__PURE__ */ e(Z, { value: R, onChange: (p) => {
     const f = Array.from(new Set(p.map((w) => m(w))));
     y !== -1 && f.length > y || o(f);
   }, multiple: !0, by: "id", children: ({ open: p }) => /* @__PURE__ */ l("div", { children: [
@@ -3491,7 +3494,7 @@ function Ye({
             ) }),
             b === "server" && a && /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
             q.length === 0 && !a ? /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: b === "server" ? O.length < k ? `Type at least ${k} characters to search.` : "No results." : "No options found." }) : q.map((f) => {
-              const w = m(f), c = g(f), h = E.some((F) => m(F) === w), x = y !== -1 && E.length >= y && !h;
+              const w = m(f), c = g(f), h = R.some((F) => m(F) === w), x = y !== -1 && R.length >= y && !h;
               return /* @__PURE__ */ e(
                 Z.Option,
                 {
@@ -3501,7 +3504,7 @@ function Ye({
                     x ? " text-gray-400  bg-white  cursor-not-allowed" : F ? " bg-gray-200  text-gray-900" : " text-gray-900",
                     " relative  cursor-default  select-none  py-2  pl-3  pr-9"
                   ),
-                  children: ({ selected: F, active: R }) => /* @__PURE__ */ l(ee, { children: [
+                  children: ({ selected: F, active: I }) => /* @__PURE__ */ l(ee, { children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
@@ -3516,7 +3519,7 @@ function Ye({
                       "span",
                       {
                         className: Pe(
-                          R ? " text-gray-900" : " text-gray-600",
+                          I ? " text-gray-900" : " text-gray-600",
                           " absolute  inset-y-0  right-0  flex  items-center  pr-4"
                         ),
                         children: /* @__PURE__ */ e(Ge, { className: "w-5 h-5", "aria-hidden": "true" })
@@ -3688,9 +3691,9 @@ function Cn({
   dropId: N,
   indent: a = 24
 }) {
-  const { setNodeRef: k, isOver: m } = Ut({ id: N }), { attributes: g, listeners: $, setNodeRef: L, transform: O, isDragging: C } = Vt({ id: b }), T = O ? { transform: `translate3d(${Math.round(O.x)}px, ${Math.round(O.y)}px, 0)` } : void 0, [I, E] = B(!1), [V, q] = B(t.name), G = () => {
+  const { setNodeRef: k, isOver: m } = Ut({ id: N }), { attributes: g, listeners: $, setNodeRef: L, transform: O, isDragging: C } = Vt({ id: b }), T = O ? { transform: `translate3d(${Math.round(O.x)}px, ${Math.round(O.y)}px, 0)` } : void 0, [E, R] = B(!1), [V, q] = B(t.name), G = () => {
     const p = V.trim();
-    E(!1), p && p !== t.name ? i?.(t, p) : q(t.name);
+    R(!1), p && p !== t.name ? i?.(t, p) : q(t.name);
   }, v = ce(() => /* @__PURE__ */ e(
     an,
     {
@@ -3700,7 +3703,7 @@ function Cn({
         { action: "delete", label: "Delete" }
       ],
       onSelect: (f) => {
-        f.action === "create" ? u?.(t) : f.action === "rename" ? E(!0) : f.action === "delete" && d?.(t);
+        f.action === "create" ? u?.(t) : f.action === "rename" ? R(!0) : f.action === "delete" && d?.(t);
       }
     }
   ), [t, u, d]);
@@ -3716,7 +3719,7 @@ function Cn({
       children: [
         /* @__PURE__ */ e("button", { className: "tv-toggle", onClick: o, "aria-label": "toggle", children: t.children?.length ? s ? /* @__PURE__ */ e(wa, { size: 16 }) : /* @__PURE__ */ e(je, { size: 16 }) : /* @__PURE__ */ e("span", { className: "tv-spacer" }) }),
         /* @__PURE__ */ e(Fa, { size: 16, className: "tv-folder-ic" }),
-        /* @__PURE__ */ e("div", { className: "tv-name", ref: L, children: I ? /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "tv-name", ref: L, children: E ? /* @__PURE__ */ e(
           "input",
           {
             className: "tv-input",
@@ -3724,15 +3727,15 @@ function Cn({
             onChange: (p) => q(p.target.value),
             onBlur: G,
             onKeyDown: (p) => {
-              p.key === "Enter" && G(), p.key === "Escape" && (E(!1), q(t.name));
+              p.key === "Enter" && G(), p.key === "Escape" && (R(!1), q(t.name));
             },
             autoFocus: !0
           }
-        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => E(!0), children: t.name }) }),
+        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => R(!0), children: t.name }) }),
         /* @__PURE__ */ e(wn, { listeners: $, attributes: g }),
         /* @__PURE__ */ e("div", { className: "tv-actions", children: y ? y(t, {
           onCreateChild: () => u?.(t),
-          onRename: () => E(!0),
+          onRename: () => R(!0),
           onDelete: () => d?.(t)
         }) : v })
       ]
@@ -3835,9 +3838,9 @@ function ps({
     { rootId: r, getId: o, getParent: n, getName: u }
   ), [t, r, o, n, u]), [L, O] = B({}), C = K((x) => {
     const F = {};
-    return (function R(j) {
+    return (function I(j) {
       j.forEach((S) => {
-        F[S.id] = !0, S.children?.length && R(S.children);
+        F[S.id] = !0, S.children?.length && I(S.children);
       });
     })(x), F;
   }, []);
@@ -3847,8 +3850,8 @@ function ps({
   const T = K(
     (x) => O((F) => ({ ...F, [x]: !F[x] })),
     []
-  ), [I, E] = B(() => Ae($));
-  ae.useEffect(() => E(Ae($)), [$]);
+  ), [E, R] = B(() => Ae($));
+  ae.useEffect(() => R(Ae($)), [$]);
   const V = qt(
     jt(Yt, { activationConstraint: { delay: 250, tolerance: 5 } })
   ), q = ue(null), [G, v] = B(null), p = ue(0), f = () => {
@@ -3856,16 +3859,16 @@ function ps({
     p.current = x?.x ?? 0;
   }, c = K(
     ({ active: x, over: F }) => {
-      const R = p.current;
+      const I = p.current;
       if (p.current = 0, v(null), !x || !F) return;
       const j = String(x.id).replace(/^drag-/, ""), S = String(F.id).replace(/^drop-/, "");
       if (!j || !S || j === S) return;
       let A = S;
-      const M = Math.max(0, Math.floor(-R / g));
+      const M = Math.max(0, Math.floor(-I / g));
       if (M > 0) {
         let ie = S;
         for (let xe = 0; xe < M; xe++) {
-          const P = Ka(I, ie, null);
+          const P = Ka(E, ie, null);
           if (!P) break;
           if (!P.parentId) {
             A = r;
@@ -3875,51 +3878,51 @@ function ps({
         }
       }
       if (m && A === r) {
-        E(Ae($));
+        R(Ae($));
         return;
       }
-      const D = Ae(I), { newRoots: z, removed: U } = En(D, j);
+      const D = Ae(E), { newRoots: z, removed: U } = En(D, j);
       if (!U) return;
       const Ne = Rn(z, A, U);
-      E(Ne), a?.({ sourceId: j, destParentId: A, newTree: Ne });
+      R(Ne), a?.({ sourceId: j, destParentId: A, newTree: Ne });
     },
-    [I, $, r, m, g, a]
+    [E, $, r, m, g, a]
   ), h = K(
-    (x, F = 0) => x.map((R) => /* @__PURE__ */ l(ae.Fragment, { children: [
+    (x, F = 0) => x.map((I) => /* @__PURE__ */ l(ae.Fragment, { children: [
       /* @__PURE__ */ e(
         Cn,
         {
-          node: R,
+          node: I,
           depth: F,
-          expanded: !!L[R.id],
-          onToggle: () => T(R.id),
+          expanded: !!L[I.id],
+          onToggle: () => T(I.id),
           onSelect: i,
           onCreateChild: y,
           onRename: b,
           onDelete: N,
           renderActions: k,
-          dragId: `drag-${R.id}`,
-          dropId: `drop-${R.id}`,
+          dragId: `drag-${I.id}`,
+          dropId: `drop-${I.id}`,
           indent: g
         }
       ),
-      L[R.id] && R.children?.length > 0 ? h(R.children, F + 1) : null
-    ] }, R.id)),
+      L[I.id] && I.children?.length > 0 ? h(I.children, F + 1) : null
+    ] }, I.id)),
     [L, g, y, N, b, i, k, T]
   );
   return ae.useMemo(() => {
     if (!G) return null;
     const x = String(G).replace(/^drag-/, "");
-    function F(R) {
-      for (const j of R) {
+    function F(I) {
+      for (const j of I) {
         if (j.id === x) return j;
         const S = j.children?.length ? F(j.children) : null;
         if (S) return S;
       }
       return null;
     }
-    return F(I);
-  }, [G, I]), /* @__PURE__ */ l("div", { className: "tv", children: [
+    return F(E);
+  }, [G, E]), /* @__PURE__ */ l("div", { className: "tv", children: [
     s !== !1 && /* @__PURE__ */ l("div", { className: "tv-header", children: [
       /* @__PURE__ */ e("div", { className: "tv-title", children: s }),
       /* @__PURE__ */ e("button", { className: "tv-btn", onClick: d, children: "+ New folder" })
@@ -3938,7 +3941,7 @@ function ps({
         onDragMove: w,
         onDragEnd: c,
         modifiers: [_t],
-        children: /* @__PURE__ */ e("div", { ref: q, className: "tv-list", children: h(I, 0) })
+        children: /* @__PURE__ */ e("div", { ref: q, className: "tv-list", children: h(E, 0) })
       }
     )
   ] });
@@ -4594,11 +4597,11 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
         return (c, h) => {
           const x = () => {
             if (v.optionsFrom && r) {
-              const { config: F, valueField: R, labelField: j } = v.optionsFrom, S = r[F] || [];
+              const { config: F, valueField: I, labelField: j } = v.optionsFrom, S = r[F] || [];
               if (Array.isArray(S))
                 return S.map((A) => ({
-                  id: A[R] || "",
-                  value: A[R] || "",
+                  id: A[I] || "",
+                  value: A[I] || "",
                   label: A[j] || ""
                 }));
             }
@@ -4719,12 +4722,12 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
             ...x.roles || []
           ];
           return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(zn, { children: F.length > 0 ? F.slice(0, 3).map((R, j) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(zn, { children: F.length > 0 ? F.slice(0, 3).map((I, j) => /* @__PURE__ */ e(
               za,
               {
                 size: "small",
-                name: R.name || R.displayName || R.id,
-                src: R.avatarUrl
+                name: I.name || I.displayName || I.id,
+                src: I.avatarUrl
               },
               j
             )) : null }),
@@ -4824,9 +4827,9 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
       const f = [...p];
       return f.splice(v, 1), f;
     });
-  }, []), [C, T] = B(null), I = K((v, p) => {
+  }, []), [C, T] = B(null), E = K((v, p) => {
     T(p), v.dataTransfer.effectAllowed = "move", v.dataTransfer.setData("text/html", "");
-  }, []), E = K((v) => {
+  }, []), R = K((v) => {
     v.preventDefault(), v.dataTransfer.dropEffect = "move";
   }, []), V = K((v, p) => {
     v.preventDefault(), !(C === null || C === p) && (a((f) => {
@@ -4882,8 +4885,8 @@ function Pn({ item: t, data: r, updateHandler: s, validationErrors: o = {} }) {
         {
           className: `hover:bg-gray-50 ${C === p ? "opacity-50" : ""}`,
           draggable: !0,
-          onDragStart: (f) => I(f, p),
-          onDragOver: E,
+          onDragStart: (f) => E(f, p),
+          onDragOver: R,
           onDrop: (f) => V(f, p),
           onDragEnd: q,
           children: [
@@ -4991,7 +4994,7 @@ const fa = () => {
   initialData: y = null
   // Add prop for initial demo data
 }) => {
-  const [b, N] = B(null), [a, k] = B(""), [m, g] = B(() => Array.isArray(y) ? y : []), [$, L] = B(null), [O, C] = B(null), [T, I] = B(""), E = async () => {
+  const [b, N] = B(null), [a, k] = B(""), [m, g] = B(() => Array.isArray(y) ? y : []), [$, L] = B(null), [O, C] = B(null), [T, E] = B(""), R = async () => {
     try {
       const S = await Ee(t.collectionList);
       if (S) {
@@ -5006,7 +5009,7 @@ const fa = () => {
     }
   };
   X(() => {
-    (!y || y.length === 0) && E();
+    (!y || y.length === 0) && R();
   }, [y]), X(() => {
     Array.isArray(y) && g(y);
   }, [y]);
@@ -5061,7 +5064,7 @@ const fa = () => {
   }, p = async (S) => {
     if (i)
       try {
-        await un(`${t.collectionUpdate}/${S.id}`) && (le.success("Deleted successfully", { autoClose: 3e3 }), E());
+        await un(`${t.collectionUpdate}/${S.id}`) && (le.success("Deleted successfully", { autoClose: 3e3 }), R());
       } catch (A) {
         console.log(A), le.error("Failed to delete collection");
       }
@@ -5095,7 +5098,7 @@ const fa = () => {
       const z = f(D, M, A);
       return console.log("Reordered", z), w(z), s?.(z), z;
     }), L(null), C(null));
-  }, R = () => {
+  }, I = () => {
     L(null), C(null);
   }, j = Array.isArray(m) ? m.filter(
     (S) => S.categoryName?.toLowerCase().includes(T.toLowerCase())
@@ -5106,7 +5109,7 @@ const fa = () => {
         he,
         {
           value: T,
-          onDebouncedChange: I,
+          onDebouncedChange: E,
           placeholder: "Search Collection",
           customClass: "mr-4 searchmanagecollection"
         }
@@ -5132,7 +5135,7 @@ const fa = () => {
           onDragEnter: () => h(S.id),
           onDragOver: x,
           onDrop: (U) => F(U, S.id),
-          onDragEnd: R,
+          onDragEnd: I,
           className: [
             "flex items-center justify-between p-3 border rounded-2xl mb-3",
             "border-gray-300",
@@ -5285,30 +5288,30 @@ function Un({
     const w = {}, c = f?.configuration || {};
     return r.configuration.forEach((h) => {
       if (h.key && h.type === "datatable") {
-        const F = (c[h.key] || []).map((R, j) => {
-          const S = { id: R.id || 0 };
+        const F = (c[h.key] || []).map((I, j) => {
+          const S = { id: I.id || 0 };
           return h.fields && h.fields.forEach((A) => {
             if (A.fieldtype === "audience") {
               let M = { users: [], groups: [], roles: [] };
-              R[A.key] && (Array.isArray(R[A.key]) ? M = { users: [], groups: [], roles: [] } : typeof R[A.key] == "object" && (M = {
-                users: R[A.key].users || [],
-                groups: R[A.key].groups || [],
-                roles: R[A.key].roles || []
+              I[A.key] && (Array.isArray(I[A.key]) ? M = { users: [], groups: [], roles: [] } : typeof I[A.key] == "object" && (M = {
+                users: I[A.key].users || [],
+                groups: I[A.key].groups || [],
+                roles: I[A.key].roles || []
               })), S[A.key] = M;
             } else
-              S[A.key] = R[A.key] || A.default || "";
+              S[A.key] = I[A.key] || A.default || "";
           }), S;
         });
         if (F.length === 0) {
-          const R = { id: 0 };
+          const I = { id: 0 };
           h.fields && h.fields.forEach((j) => {
-            j.fieldtype === "audience" ? R[j.key] = { users: [], groups: [], roles: [] } : R[j.key] = j.default || "";
-          }), F.push(R);
+            j.fieldtype === "audience" ? I[j.key] = { users: [], groups: [], roles: [] } : I[j.key] = j.default || "";
+          }), F.push(I);
         }
         w[h.key] = F;
       } else h.key && (w[h.key] = c[h.key] || {});
     }), w;
-  }, I = () => {
+  }, E = () => {
     if (r && r.configuration) {
       const f = {};
       r.configuration.forEach((w) => {
@@ -5341,7 +5344,7 @@ function Un({
           const c = T(w);
           y(c);
         } else
-          I();
+          E();
       } catch (w) {
         console.error("Error fetching configuration:", w);
         let c = "Failed to load configuration";
@@ -5349,14 +5352,14 @@ function Un({
           const h = w.response.status, x = w.response.data?.message || w.response.data?.error;
           h === 400 ? c = x || "Invalid request. Please check the application ID." : h === 401 ? c = "You are not authorized to access this configuration." : h === 403 ? c = "Access denied. You don't have permission to view this configuration." : h === 404 ? c = "Configuration not found. It may not exist yet or the application ID is incorrect." : h >= 500 ? c = x || "Server error. Please try again later." : c = x || `Failed to load configuration (Error ${h})`;
         } else w.request ? c = "Network error. Please check your connection and try again." : c = w.message || "An unexpected error occurred while loading configuration.";
-        ke.error(c), I();
+        ke.error(c), E();
       } finally {
         N(!1);
       }
     };
-    r && (i(r), t ? f() : I());
+    r && (i(r), t ? f() : E());
   }, [r, O, t, s]);
-  const E = (f, w) => {
+  const R = (f, w) => {
     y((c) => ({
       ...c,
       [f]: w
@@ -5379,8 +5382,8 @@ function Un({
         Array.isArray(c) && c.forEach((h, x) => {
           w.fields.forEach((F) => {
             if (F.required) {
-              const R = h[F.key];
-              (!R || typeof R == "string" && R.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][x] || (f[w.key][x] = {}), f[w.key][x][F.key] = `${F.label} is required`);
+              const I = h[F.key];
+              (!I || typeof I == "string" && I.trim() === "") && (f[w.key] || (f[w.key] = {}), f[w.key][x] || (f[w.key][x] = {}), f[w.key][x][F.key] = `${F.label} is required`);
             }
           });
         });
@@ -5405,20 +5408,20 @@ function Un({
         const c = {};
         d && Object.keys(d).forEach((x) => {
           const F = r?.configuration?.find(
-            (R) => R.key === x && R.type === "datatable"
+            (I) => I.key === x && I.type === "datatable"
           );
-          F && Array.isArray(d[x]) ? c[x] = d[x].map((R) => {
-            const j = { id: R.id || 0 };
+          F && Array.isArray(d[x]) ? c[x] = d[x].map((I) => {
+            const j = { id: I.id || 0 };
             return F.fields && F.fields.forEach((S) => {
               if (S.fieldtype === "audience") {
                 let A = { users: [], groups: [], roles: [] };
-                R[S.key] && typeof R[S.key] == "object" && !Array.isArray(R[S.key]) && (A = {
-                  users: R[S.key].users || [],
-                  groups: R[S.key].groups || [],
-                  roles: R[S.key].roles || []
+                I[S.key] && typeof I[S.key] == "object" && !Array.isArray(I[S.key]) && (A = {
+                  users: I[S.key].users || [],
+                  groups: I[S.key].groups || [],
+                  roles: I[S.key].roles || []
                 }), j[S.key] = A;
               } else
-                j[S.key] = R[S.key] || "";
+                j[S.key] = I[S.key] || "";
             }), j;
           }) : c[x] = d[x];
         });
@@ -5448,7 +5451,7 @@ function Un({
     return /* @__PURE__ */ e("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "text-gray-500", children: "No configuration available" }) });
   const p = r?.configuration || u?.configuration;
   return X(() => {
-    s && r ? (!d || Object.keys(d).length === 0) && I() : s && !r && I();
+    s && r ? (!d || Object.keys(d).length === 0) && E() : s && !r && E();
   }, [s, r]), /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ l(
       "div",
@@ -5465,7 +5468,7 @@ function Un({
                 {
                   item: f,
                   data: d,
-                  updateHandler: E,
+                  updateHandler: R,
                   validationErrors: m
                 },
                 w
@@ -5570,12 +5573,12 @@ const ys = ({
   ae.useEffect(() => {
     y(T());
   }, [g]);
-  const I = K((p) => {
+  const E = K((p) => {
     console.log("Config saved with data:", p), Object.keys(p).forEach((f) => {
       const w = p[f];
       console.log(`Checking section ${f}:`, w), w && w.displayname && (console.log("Found displayname:", w.displayname), y(w.displayname));
     });
-  }, []), E = {
+  }, []), R = {
     subHeading: "Application configuration and details",
     tags: [],
     ...N,
@@ -5601,7 +5604,7 @@ const ys = ({
     ...k
   }, q = [
     { label: "Overview", content: v(V) },
-    { label: "Configuration", content: /* @__PURE__ */ e(Un, { appid: r, configdata: { configuration: g }, disableApi: s, onCancel: O, onSave: I }) }
+    { label: "Configuration", content: /* @__PURE__ */ e(Un, { appid: r, configdata: { configuration: g }, disableApi: s, onCancel: O, onSave: E }) }
   ];
   function G(p) {
     return p ? p.includes("<svg") ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: p } }) : p : "📱";
@@ -5660,11 +5663,11 @@ const ys = ({
       }
     ),
     /* @__PURE__ */ l("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
-      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: G(E.icon) }),
+      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: G(R.icon) }),
       /* @__PURE__ */ l("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: E.heading }),
-        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: E.subHeading }),
-        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: E.tags && E.tags.map((p, f) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: R.heading }),
+        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: R.subHeading }),
+        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: R.tags && R.tags.map((p, f) => /* @__PURE__ */ e(
           "span",
           {
             className: "pill inline-block px-[10px] py-[6px] rounded-[14px] text-[11px] border border-[#e6e9ee] text-[#767676] font-semibold mt-1",
@@ -5754,19 +5757,19 @@ const bs = ({
   },
   // Optional: override export file names
   excelFileName: T,
-  pdfFileName: I
+  pdfFileName: E
 }) => {
-  const E = () => n?.current || o?.current, [V, q] = ae.useState(""), G = (t || "export").toString().trim() || "export", v = `${T || G}.xlsx`, p = `${I || G}.pdf`, f = (h, x, F) => Math.max(x, Math.min(h, F)), w = K(
+  const R = () => n?.current || o?.current, [V, q] = ae.useState(""), G = (t || "export").toString().trim() || "export", v = `${T || G}.xlsx`, p = `${E || G}.pdf`, f = (h, x, F) => Math.max(x, Math.min(h, F)), w = K(
     (h) => {
-      const x = E();
+      const x = R();
       if (console.log("openColumnChooserNear", x), !!x?.openColumnChooser) {
         if (typeof window > "u" || !h?.currentTarget) {
           x.openColumnChooser();
           return;
         }
         try {
-          const F = h.currentTarget.getBoundingClientRect(), R = F.left + window.scrollX, j = F.bottom + window.scrollY;
-          let S = R - 120, A = j - 120;
+          const F = h.currentTarget.getBoundingClientRect(), I = F.left + window.scrollX, j = F.bottom + window.scrollY;
+          let S = I - 120, A = j - 120;
           const M = window.innerWidth, D = window.innerHeight;
           S = f(S, window.scrollX + 8, window.scrollX + M - 340), A = f(A, window.scrollY, window.scrollY + D - 120), console.log("openColumnChooserNear", S, A), x.openColumnChooser(S, A);
         } catch (F) {
@@ -5778,7 +5781,7 @@ const bs = ({
     // no external deps; reads ref at call time
   ), c = K(
     (h, x) => {
-      const F = E();
+      const F = R();
       if (F)
         switch (h) {
           case "ColumnChooser":
@@ -5927,8 +5930,8 @@ function vs(t) {
     enableCheckbox: O = !1,
     columns: C = [],
     onGridStateChange: T,
-    onRowSelected: I,
-    onRowDeselected: E,
+    onRowSelected: E,
+    onRowDeselected: R,
     onRowDoubleClick: V,
     apiRef: q,
     gridProps: G = {}
@@ -5936,7 +5939,7 @@ function vs(t) {
     pageSettings: p,
     sortSettings: f,
     ...w
-  } = G || {}, [c, h] = ae.useState(p?.page || 1), [x, F] = ae.useState(f?.pageSize || 20), [R, j] = ae.useState(f?.sortKey || "updatedDate"), [S, A] = ae.useState(f?.direction || "Descending"), M = ce(() => {
+  } = G || {}, [c, h] = ae.useState(p?.page || 1), [x, F] = ae.useState(f?.pageSize || 20), [I, j] = ae.useState(f?.sortKey || "updatedDate"), [S, A] = ae.useState(f?.direction || "Descending"), M = ce(() => {
     const P = [$r];
     return i && P.push(Fr), d && P.push(Tr), y && P.push(Ar), g && P.push(Er), a && P.push(Rr), k && P.push(Ir), m && P.push(zr), N && P.push(Pr), b && P.push(Br), P.push(Lr), P;
   }, [i, d, y, g, a, k, m, N, b]), D = ce(() => {
@@ -6060,12 +6063,12 @@ function vs(t) {
       selectionSettings: L,
       pageSettings: { pageSize: 10, pageSizes: p?.pageSizes ?? [20, 40, 60, 80, 100] },
       sortSettings: f ?? {
-        columns: [{ field: R, direction: z(S) }],
+        columns: [{ field: I, direction: z(S) }],
         allowUnsort: !1
       },
       actionBegin: Ne,
-      rowSelected: I,
-      rowDeselected: E,
+      rowSelected: E,
+      rowDeselected: R,
       recordDoubleClick: ie,
       ...w,
       children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unifyedx-storybook-new",
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.14",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",