@envisiongroup/porygon 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/react-components/tables/EFWTable/EFWTable.js

@@ -1,19 +1,19 @@
-import { jsx as v, jsxs as Ye } from "react/jsx-runtime";
-import * as xt from "react";
-import { useRef as B, useState as q, useCallback as R, useEffect as T, useMemo as F } from "react";
-import { useReactTable as wt, getSortedRowModel as yt, getFilteredRowModel as It, getCoreRowModel as zt } from "@tanstack/react-table";
-import { makeStyles as bt, tokens as K, mergeClasses as Et, Checkbox as $e, Card as Ct } from "@fluentui/react-components";
-import { useTableSelection as vt } from "./hooks/useTableSelection/useTableSelection.js";
-import { renderCellContent as Rt } from "./utils/index.js";
-import { useDefaultAddButton as Mt } from "./hooks/useDefaultAddButton/useDefaultAddButton.js";
-import { useDefaultUpdateButton as Nt } from "./hooks/useDefaultUpdateButton/useDefaultUpdateButton.js";
-import { useDefaultDeleteButton as Wt } from "./hooks/useDefaultDeleteButton/useDefaultDeleteButton.js";
-import { generateId as E } from "./utils/general.js";
-import { EFWTableCommandBar as kt } from "./components/EFWTableCommandBar/EFWTableCommandBar.js";
-import { EFWTableHeader as Tt } from "./components/EFWTableHeader/EFWTableHeader.js";
-import { EFWTableBody as _t } from "./components/EFWTableBody/EFWTableBody.js";
-import { EFWTableEmpty as At } from "./components/EFWTableEmpty/EFWTableEmpty.js";
-const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80, J = 2500, O = 48, Qt = 48, Ft = bt({
+import { jsx as v, jsxs as et } from "react/jsx-runtime";
+import * as kt from "react";
+import { useRef as L, useState as D, useCallback as w, useEffect as A, useMemo as H } from "react";
+import { useReactTable as Tt, getSortedRowModel as At, getFilteredRowModel as Bt, getCoreRowModel as Ft } from "@tanstack/react-table";
+import { makeStyles as Ot, tokens as ee, mergeClasses as Lt, Checkbox as tt, Card as Dt } from "@fluentui/react-components";
+import { useTableSelection as Ht } from "./hooks/useTableSelection/useTableSelection.js";
+import { renderCellContent as jt } from "./utils/index.js";
+import { useDefaultAddButton as Pt } from "./hooks/useDefaultAddButton/useDefaultAddButton.js";
+import { useDefaultUpdateButton as Yt } from "./hooks/useDefaultUpdateButton/useDefaultUpdateButton.js";
+import { useDefaultDeleteButton as $t } from "./hooks/useDefaultDeleteButton/useDefaultDeleteButton.js";
+import { generateId as M } from "./utils/general.js";
+import { EFWTableCommandBar as qt } from "./components/EFWTableCommandBar/EFWTableCommandBar.js";
+import { EFWTableOverlay as nt } from "./components/EFWTableOverlay/EFWTableOverlay.js";
+import { EFWTableHeader as Gt } from "./components/EFWTableHeader/EFWTableHeader.js";
+import { EFWTableBody as Xt } from "./components/EFWTableBody/EFWTableBody.js";
+const Z = {}, Jt = /* @__PURE__ */ new Set(), st = [], Q = [], I = 120, B = 80, U = 2500, j = 48, fn = 48, Kt = Ot({
   "efw-table": {},
   /* Transición suave para el box-shadow en las celdas y cabeceras fijas */
   "efw-table-scroll-container": {
@@ -23,7 +23,7 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
       transform: "translateZ(0)"
     },
     "& .table-header": {
-      boxShadow: `0px 1px 0 0px ${K.colorNeutralStroke2}`
+      boxShadow: `0px 1px 0 0px ${ee.colorNeutralStroke2}`
     },
     "& .header-cell": {
       "&.sticky-column": {
@@ -57,90 +57,97 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
       }
     }
   }
-}), Ut = ({
-  appearance: Ge = "outline",
-  style: Xe = {},
-  className: Je = "",
+}), hn = ({
+  appearance: rt = "outline",
+  style: ct = {},
+  className: it = "",
   fields: f,
-  items: te,
-  defaultItems: Ke,
-  height: ne = 700,
-  itemSize: Ve = 32,
+  items: oe,
+  defaultItems: ot,
+  height: te = 700,
+  itemSize: at = 32,
   // tableStyle = 'row',
-  enableSelection: I = !0,
-  enableCommandBar: V = !0,
-  defaultSelectedItems: Ze = Bt,
-  onSelectionChange: Qe,
-  onRowClick: Z,
-  resizableColumns: Q = !1,
-  columnSizing: z = G,
-  useVirtualization: Ue = !1,
-  autoSizeColumns: M = !1,
-  tableRef: et,
-  onItemsChange: se,
-  onScroll: re,
-  addButtonConfig: tt = G,
-  updateButtonConfig: nt = G,
-  deleteButtonConfig: st = G,
-  alwaysButtons: ie = X,
-  noSelectionButtons: rt = X,
-  singleSelectionButtons: it = X,
-  multiSelectionButtons: ce = X,
-  beforeAddItems: L,
-  beforeUpdateItems: D,
-  beforeDeleteItems: H,
-  columnRenderers: oe,
-  useDefaultRendererAsFallback: ae = !0
+  enableSelection: b = !0,
+  enableCommandBar: ne = !0,
+  defaultSelectedItems: lt = Jt,
+  onSelectionChange: ut,
+  onRowClick: se,
+  resizableColumns: re = !1,
+  columnSizing: z = Z,
+  useVirtualization: dt = !1,
+  autoSizeColumns: W = !1,
+  tableRef: ft,
+  onItemsChange: ae,
+  onScroll: le,
+  addButtonConfig: ht = Z,
+  updateButtonConfig: mt = Z,
+  deleteButtonConfig: pt = Z,
+  alwaysButtons: ue = Q,
+  noSelectionButtons: gt = Q,
+  singleSelectionButtons: St = Q,
+  multiSelectionButtons: de = Q,
+  beforeAddItems: P,
+  beforeUpdateItems: Y,
+  beforeDeleteItems: $,
+  columnRenderers: fe,
+  useDefaultRendererAsFallback: he = !0,
+  // Overlay state props
+  overlayState: me,
+  defaultOverlayState: wt,
+  onOverlayStateChange: _,
+  overlayCustomization: F
 }) => {
-  const le = Ft(), ct = Et(Je, le["efw-table"]), N = B(!1), ue = te !== void 0, [ot, at] = q(() => (Ke || qe).map((t) => ({
+  const pe = Kt(), It = Lt(it, pe["efw-table"]), C = L(!1), ge = oe !== void 0, E = me !== void 0, [xt, q] = D(
+    () => wt || { state: "none" }
+  ), G = E ? me : xt, [yt, bt] = D(() => (ot || st).map((t) => ({
     ...t,
-    id: t.id || E()
-  }))), b = ue ? te || qe : ot, [S, j] = q(() => {
+    _rowId: t._rowId || M()
+  }))), R = ge ? oe || st : yt, [S, X] = D(() => {
     const e = {};
     return f.forEach((t) => {
       const n = z[t.internalName];
       if (n?.width) {
-        const s = n.minWidth ?? _, r = n.maxWidth ?? J;
+        const s = n.minWidth ?? B, r = n.maxWidth ?? U;
         e[t.internalName] = Math.min(Math.max(n.width ?? 0, s), r);
       }
     }), e;
-  }), de = B(z), [C, fe] = q(0), {
-    rowSelection: W,
-    setRowSelection: he,
+  }), Se = L(z), [N, we] = D(0), {
+    rowSelection: k,
+    setRowSelection: Ie,
     // selectedIndexes,
-    deselectAll: me,
-    selectSingle: pe,
-    toggleMultiple: lt,
+    deselectAll: xe,
+    selectSingle: ye,
+    toggleMultiple: zt,
     // selectMultiple,
-    getSelectedItems: ge,
-    getSelectedRows: Se
-  } = vt({
-    initialSelection: Ze,
-    onSelectionChange: Qe,
-    enableSelection: I
-  }), xe = B(null), [P, ut] = q(null), dt = R((e) => {
-    xe.current = e, ut(e);
-  }, []), p = B(b);
-  T(() => {
-    p.current = b;
-  }, [b]);
-  const U = B(/* @__PURE__ */ new Set()), we = F(() => {
+    getSelectedItems: be,
+    getSelectedRows: ze
+  } = Ht({
+    initialSelection: lt,
+    onSelectionChange: ut,
+    enableSelection: b
+  }), Ee = L(null), [J, Et] = D(null), _t = w((e) => {
+    Ee.current = e, Et(e);
+  }, []), p = L(R);
+  A(() => {
+    p.current = R;
+  }, [R]);
+  const ce = L(/* @__PURE__ */ new Set()), _e = H(() => {
     const e = [], t = {};
     let n = 0;
-    return I && (e.push("select"), t.select = n, n += O), f.forEach((s) => {
+    return b && (e.push("select"), t.select = n, n += j), f.forEach((s) => {
       const r = z[s.internalName] || {};
       if (!r.hidden && r.sticky) {
         e.push(s.internalName), t[s.internalName] = n;
-        const i = S[s.internalName] || r.width || x;
-        n += i;
+        const c = S[s.internalName] || r.width || I;
+        n += c;
       }
     }), { stickyColumns: e, stickyPositions: t };
-  }, [f, I, z, S]), w = F(() => {
+  }, [f, b, z, S]), x = H(() => {
     const e = [];
-    return I && e.push({
+    return b && e.push({
       id: "select",
       header: ({ table: t }) => /* @__PURE__ */ v(
-        $e,
+        tt,
         {
           shape: "circular",
           checked: t.getIsAllRowsSelected(),
@@ -149,117 +156,117 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         }
       ),
       cell: ({ row: t }) => /* @__PURE__ */ v(
-        $e,
+        tt,
         {
           shape: "circular",
           checked: t.getIsSelected(),
           onChange: (n) => {
-            n.stopPropagation(), lt(t.index);
+            n.stopPropagation(), zt(t.index);
           },
           onClick: (n) => n.stopPropagation(),
           "data-checkbox": "true"
         }
       ),
-      size: O,
-      minSize: O,
-      maxSize: O,
+      size: j,
+      minSize: j,
+      maxSize: j,
       enableResizing: !1
     }), f.forEach((t) => {
       const n = z[t.internalName] || {};
       if (n.hidden)
         return;
-      const s = t.typeAsString === "Note" ? x * 2 : x, r = n.width || s, i = n.minWidth || _, a = n.maxWidth || J;
+      const s = t.typeAsString === "Note" ? I * 2 : I, r = n.width || s, c = n.minWidth || B, a = n.maxWidth || U;
       e.push({
         id: t.internalName,
         accessorKey: t.internalName,
         header: t.title || t.internalName,
-        cell: ({ row: c }) => Rt(
+        cell: ({ row: i }) => jt(
           t,
-          c.original[t.internalName],
-          c.original,
-          c.index,
-          oe,
-          ae
+          i.original[t.internalName],
+          i.original,
+          i.index,
+          fe,
+          he
         ),
-        size: Math.min(Math.max(r, i), a),
-        minSize: i,
+        size: Math.min(Math.max(r, c), a),
+        minSize: c,
         maxSize: a,
-        enableResizing: Q
+        enableResizing: re
       });
     }), e;
   }, [
     f,
-    I,
-    Q,
+    b,
+    re,
     z,
-    oe,
-    ae
+    fe,
+    he
   ]);
-  T(() => {
-    const e = de.current;
-    j((t) => {
+  A(() => {
+    const e = Se.current;
+    X((t) => {
       let n = !1;
-      const s = { ...t }, r = new Set(f.map((i) => i.internalName));
-      return Object.keys(s).forEach((i) => {
-        r.has(i) || (delete s[i], n = !0);
-      }), f.forEach((i) => {
-        const a = i.internalName, c = z[a], o = e[a];
-        if (c?.width !== void 0) {
-          const u = c.minWidth ?? _, h = c.maxWidth ?? J, d = Math.min(Math.max(c.width, u), h);
+      const s = { ...t }, r = new Set(f.map((c) => c.internalName));
+      return Object.keys(s).forEach((c) => {
+        r.has(c) || (delete s[c], n = !0);
+      }), f.forEach((c) => {
+        const a = c.internalName, i = z[a], o = e[a];
+        if (i?.width !== void 0) {
+          const u = i.minWidth ?? B, h = i.maxWidth ?? U, d = Math.min(Math.max(i.width, u), h);
           s[a] !== d && (s[a] = d, n = !0);
         } else o?.width !== void 0 && s[a] !== void 0 && (delete s[a], n = !0);
       }), n ? s : t;
-    }), de.current = z;
+    }), Se.current = z;
   }, [z, f]);
-  const Y = F(() => w.reduce((e, t) => {
-    const s = f.find((i) => i.internalName === t.id)?.typeAsString === "Note" ? x * 2 : x, r = S[t.id] || (typeof t.size == "number" ? t.size : s);
+  const K = H(() => x.reduce((e, t) => {
+    const s = f.find((c) => c.internalName === t.id)?.typeAsString === "Note" ? I * 2 : I, r = S[t.id] || (typeof t.size == "number" ? t.size : s);
     return e + r;
-  }, 0), [w, S, f]), ye = wt({
-    data: b,
-    columns: w,
+  }, 0), [x, S, f]), Re = Tt({
+    data: R,
+    columns: x,
     state: {
-      rowSelection: W,
+      rowSelection: k,
       columnSizing: S
     },
-    onRowSelectionChange: he,
+    onRowSelectionChange: Ie,
     onColumnSizingChange: (e) => {
-      j((t) => {
+      X((t) => {
         const n = typeof e == "function" ? e(t) : e, s = {};
         return Object.keys(n).forEach((r) => {
-          const i = w.find((a) => a.id === r);
-          if (i) {
-            const a = i.minSize || _, c = i.maxSize || J;
-            N.current ? s[r] = Math.max(n[r], a) : s[r] = Math.min(Math.max(n[r], a), c);
+          const c = x.find((a) => a.id === r);
+          if (c) {
+            const a = c.minSize || B, i = c.maxSize || U;
+            C.current ? s[r] = Math.max(n[r], a) : s[r] = Math.min(Math.max(n[r], a), i);
           }
         }), { ...t, ...s };
       });
     },
     //getRowId: row => row.id as string,
-    getCoreRowModel: zt(),
-    getFilteredRowModel: It(),
-    getSortedRowModel: yt(),
+    getCoreRowModel: Ft(),
+    getFilteredRowModel: Bt(),
+    getSortedRowModel: At(),
     columnResizeMode: "onChange",
     enableRowSelection: !0,
-    enableMultiRowSelection: I
+    enableMultiRowSelection: b
   });
-  T(() => {
+  A(() => {
     const e = /* @__PURE__ */ new Set();
-    Object.keys(W).forEach((t) => {
-      if (W[t]) {
+    Object.keys(k).forEach((t) => {
+      if (k[t]) {
         const n = parseInt(t), s = p.current[n];
-        s?.id && e.add(s.id);
+        s?._rowId && e.add(s._rowId);
       }
-    }), U.current = e;
-  }, [W]);
-  const ft = R((e) => {
-    re?.(e);
-  }, [re]), Ie = (e) => {
+    }), ce.current = e;
+  }, [k]);
+  const Rt = w((e) => {
+    le?.(e);
+  }, [le]), ve = (e) => {
     const t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
-    return Object.keys(W).forEach((r) => {
-      if (!W[r])
+    return Object.keys(k).forEach((r) => {
+      if (!k[r])
         return;
-      const i = Number(r), a = e[i];
-      a && (s.add(i), a.id && t.add(a.id), n.add(a));
+      const c = Number(r), a = e[c];
+      a && (s.add(c), a._rowId && t.add(a._rowId), n.add(a));
     }), {
       hasSelection: t.size > 0 || n.size > 0 || s.size > 0,
       selectedIds: t,
@@ -267,39 +274,39 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
       selectedIndexes: s,
       sourceLength: e.length
     };
-  }, ze = (e, t) => {
+  }, Me = (e, t) => {
     if (!t.hasSelection)
       return;
     const n = t.sourceLength !== e.length, s = {};
-    e.forEach((r, i) => {
+    e.forEach((r, c) => {
       if (!r)
         return;
-      const a = r.id ? t.selectedIds.has(r.id) : !1, c = t.selectedRefs.has(r), o = !r.id && !n && t.selectedIndexes.has(i);
-      (a || c || o) && (s[i.toString()] = !0);
-    }), he(s);
+      const a = r._rowId ? t.selectedIds.has(r._rowId) : !1, i = t.selectedRefs.has(r), o = !r._rowId && !n && t.selectedIndexes.has(c);
+      (a || i || o) && (s[c.toString()] = !0);
+    }), Ie(s);
   }, g = (e) => {
-    if (ue) {
-      const t = b, n = typeof e == "function" ? e(t) : e;
+    if (ge) {
+      const t = R, n = typeof e == "function" ? e(t) : e;
       p.current = n;
-      const s = Ie(t);
-      U.current = s.selectedIds, ze(n, s), se?.(n);
+      const s = ve(t);
+      ce.current = s.selectedIds, Me(n, s), ae?.(n);
       return;
     }
-    at((t) => {
+    bt((t) => {
       const n = typeof e == "function" ? e(t) : e;
       p.current = n;
-      const s = Ie(t);
-      return U.current = s.selectedIds, ze(n, s), se?.(n), n;
+      const s = ve(t);
+      return ce.current = s.selectedIds, Me(n, s), ae?.(n), n;
     });
-  }, be = R(() => f, [f]), Ee = async (e) => {
+  }, Ne = w(() => f, [f]), We = async (e) => {
     try {
-      if (L) {
-        const t = { id: E(), ...e }, n = await L([t], y);
+      if (P) {
+        const t = { _rowId: M(), ...e }, n = await P([t], y);
         if (n) {
           if (n.successful.length > 0) {
             const s = n.successful.map((r) => {
-              const i = r.item;
-              return i.id ? i : { ...i, id: E() };
+              const c = r.item;
+              return c._rowId ? c : { ...c, _rowId: M() };
             });
             g((r) => [...s, ...r]);
           }
@@ -310,7 +317,7 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
           failed: []
         };
       } else {
-        const t = { id: E(), ...e };
+        const t = { _rowId: M(), ...e };
         return g((n) => [t, ...n]), {
           successful: [{ index: 0, item: t }],
           failed: []
@@ -329,16 +336,16 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         failed: []
       };
     try {
-      if (L) {
+      if (P) {
         const t = e.map((s) => ({
-          id: E(),
+          _rowId: M(),
           ...s
-        })), n = await L(t, y);
+        })), n = await P(t, y);
         if (n) {
           if (n.successful.length > 0) {
             const s = n.successful.map((r) => {
-              const i = r.item;
-              return i.id ? i : { ...i, id: E() };
+              const c = r.item;
+              return c._rowId ? c : { ...c, _rowId: M() };
             });
             g((r) => [...s, ...r]);
           }
@@ -350,7 +357,7 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         };
       } else {
         const t = e.map((n) => ({
-          id: E(),
+          _rowId: M(),
           ...n
         }));
         return g((n) => [...t, ...n]), {
@@ -368,7 +375,7 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         }))
       };
     }
-  }, ve = async (e, t) => {
+  }, ke = async (e, t) => {
     const n = p.current;
     if (e < 0 || e >= n.length)
       return {
@@ -376,19 +383,19 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         failed: [{ index: e, item: t, error: "Invalid index" }]
       };
     try {
-      if (D) {
-        const r = await D([{ index: e, item: t }], y);
+      if (Y) {
+        const r = await Y([{ index: e, item: t }], y);
         if (r)
-          return r.successful.length && g((i) => {
-            const a = [...i];
-            return r.successful.forEach(({ index: c, item: o }) => a[c] = o), a;
+          return r.successful.length && g((c) => {
+            const a = [...c];
+            return r.successful.forEach(({ index: i, item: o }) => a[i] = o), a;
           }), r;
       }
       let s;
       return g((r) => {
         s = { ...r[e], ...t };
-        const i = [...r];
-        return i[e] = s, i;
+        const c = [...r];
+        return c[e] = s, c;
       }), { successful: [{ index: e, item: s }], failed: [] };
     } catch (s) {
       return {
@@ -396,44 +403,44 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         failed: [{ index: e, item: t, error: String(s) }]
       };
     }
-  }, Re = async (e) => {
+  }, Te = async (e) => {
     if (!e.length) return { successful: [], failed: [] };
-    const t = p.current, n = (i) => i >= 0 && i < t.length, s = e.filter(({ index: i }) => !n(i)).map(({ index: i, item: a }) => ({ index: i, item: a, error: "Invalid index" })), r = e.filter(({ index: i }) => n(i));
+    const t = p.current, n = (c) => c >= 0 && c < t.length, s = e.filter(({ index: c }) => !n(c)).map(({ index: c, item: a }) => ({ index: c, item: a, error: "Invalid index" })), r = e.filter(({ index: c }) => n(c));
     try {
-      if (D) {
-        const c = await D(e, y);
-        if (c) {
-          const o = c.successful.filter(({ index: l }) => n(l));
+      if (Y) {
+        const i = await Y(e, y);
+        if (i) {
+          const o = i.successful.filter(({ index: l }) => n(l));
           o.length && g((l) => {
-            const k = [...l];
-            return o.forEach(({ index: m, item: A }) => k[m] = A), k;
+            const T = [...l];
+            return o.forEach(({ index: m, item: O }) => T[m] = O), T;
           });
-          const u = new Set(c.failed.map((l) => l.index)), h = [...c.failed];
+          const u = new Set(i.failed.map((l) => l.index)), h = [...i.failed];
           return s.forEach((l) => {
             u.has(l.index) || h.push(l);
-          }), c.successful.filter(({ index: l }) => !n(l)).map(({ index: l, item: k }) => ({ index: l, item: k, error: "Invalid index" })).forEach((l) => {
+          }), i.successful.filter(({ index: l }) => !n(l)).map(({ index: l, item: T }) => ({ index: l, item: T, error: "Invalid index" })).forEach((l) => {
             u.has(l.index) || h.push(l);
           }), { successful: o, failed: h };
         }
       }
-      const i = [], a = [...s];
-      return g((c) => {
-        const o = [...c];
+      const c = [], a = [...s];
+      return g((i) => {
+        const o = [...i];
         return r.forEach(({ index: u, item: h }) => {
-          o[u] = { ...o[u], ...h }, i.push({ index: u, item: o[u] });
+          o[u] = { ...o[u], ...h }, c.push({ index: u, item: o[u] });
         }), o;
-      }), { successful: i, failed: a };
-    } catch (i) {
+      }), { successful: c, failed: a };
+    } catch (c) {
       return {
         successful: [],
-        failed: e.map(({ index: a, item: c }) => ({
+        failed: e.map(({ index: a, item: i }) => ({
           index: a,
-          item: c,
-          error: String(i)
+          item: i,
+          error: String(c)
         }))
       };
     }
-  }, Me = async (e) => {
+  }, Ae = async (e) => {
     const t = p.current;
     if (e < 0 || e >= t.length)
       return {
@@ -441,33 +448,33 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
         failed: [{ index: e, error: "Invalid index" }]
       };
     try {
-      if (H) {
-        const s = b[e], r = await H([{ index: e, item: s }], y);
+      if ($) {
+        const s = R[e], r = await $([{ index: e, item: s }], y);
         if (r)
-          return r.successful.length && g((i) => i.filter((a, c) => c !== e)), r;
+          return r.successful.length && g((c) => c.filter((a, i) => i !== e)), r;
       }
       let n;
-      return g((s) => (n = s[e], s.filter((r, i) => i !== e))), { successful: [{ index: e, item: n }], failed: [] };
+      return g((s) => (n = s[e], s.filter((r, c) => c !== e))), { successful: [{ index: e, item: n }], failed: [] };
     } catch (n) {
       return {
         successful: [],
         failed: [{ index: e, error: String(n) }]
       };
     }
-  }, Ne = async (e) => {
+  }, Be = async (e) => {
     if (!e.length) return { successful: [], failed: [] };
     const t = p.current, n = Array.from(new Set(e)), { validIndexes: s, invalidFailures: r } = n.reduce(
-      (c, o) => (o >= 0 && o < t.length ? c.validIndexes.push(o) : c.invalidFailures.push({ index: o, error: "Invalid index" }), c),
+      (i, o) => (o >= 0 && o < t.length ? i.validIndexes.push(o) : i.invalidFailures.push({ index: o, error: "Invalid index" }), i),
       { validIndexes: [], invalidFailures: [] }
-    ), i = n.map((c) => ({ index: c, item: b[c] })), a = new Set(s);
+    ), c = n.map((i) => ({ index: i, item: R[i] })), a = new Set(s);
     try {
-      if (H) {
-        const u = await H(i, y);
+      if ($) {
+        const u = await $(c, y);
         if (u) {
           const h = u.successful.filter(({ index: m }) => a.has(m));
           if (h.length) {
-            const m = new Set(h.map((A) => A.index));
-            g((A) => A.filter((Ot, St) => !m.has(St)));
+            const m = new Set(h.map((O) => O.index));
+            g((O) => O.filter((Vt, Ct) => !m.has(Ct)));
           }
           const d = new Set(u.failed.map((m) => m.index)), l = [...u.failed];
           return r.forEach((m) => {
@@ -477,204 +484,258 @@ const G = {}, Bt = /* @__PURE__ */ new Set(), qe = [], X = [], x = 120, _ = 80,
           }), { successful: h, failed: l };
         }
       }
-      const c = new Set(s), o = [];
+      const i = new Set(s), o = [];
       return g((u) => {
         const h = [];
         return u.forEach((d, l) => {
-          c.has(l) ? o.push({ index: l, item: d }) : h.push(d);
+          i.has(l) ? o.push({ index: l, item: d }) : h.push(d);
         }), h;
       }), { successful: o, failed: r };
-    } catch (c) {
+    } catch (i) {
       return {
         successful: [],
-        failed: n.map((o) => ({ index: o, error: String(c) }))
+        failed: n.map((o) => ({ index: o, error: String(i) }))
       };
     }
-  }, We = R((e) => p.current.find((t) => t.id === e), []), ke = (e) => p.current[e], Te = (e) => {
+  }, Fe = w((e) => p.current.find((t) => t._rowId === e), []), Oe = (e) => p.current[e], Le = (e) => {
     g(
-      e.map((t) => ({ ...t, id: t.id ?? E() }))
+      e.map((t) => ({ ...t, _rowId: t._rowId ?? M() }))
     );
-  }, _e = () => {
+  }, De = () => {
     g([]);
-  }, Ae = (e) => p.current.findIndex((t) => t.id === e), Be = (e) => p.current.some((t) => t.id === e), Fe = () => p.current.length, Oe = () => [...p.current], Le = R(() => ge(p.current), [ge]), De = R(() => Se(p.current), [Se]), y = F(() => ({
-    getFields: be,
-    addItem: Ee,
+  }, He = (e) => p.current.findIndex((t) => t._rowId === e), je = (e) => p.current.some((t) => t._rowId === e), Pe = () => p.current.length, Ye = () => [...p.current], $e = w(() => be(p.current), [be]), qe = w(() => ze(p.current), [ze]), Ge = w((e) => {
+    const t = {
+      state: "loading",
+      message: e
+    };
+    E || q(t), _?.(t);
+  }, [E, _]), Xe = w((e, t) => {
+    const n = {
+      state: "error",
+      message: e,
+      onRetry: t
+    };
+    E || q(n), _?.(n);
+  }, [E, _]), Je = w((e) => {
+    const t = {
+      state: e ? "partial-loading" : "none"
+    };
+    E || q(t), _?.(t);
+  }, [E, _]), Ke = w(() => {
+    const e = { state: "none" };
+    E || q(e), _?.(e);
+  }, [E, _]), Ve = w(() => G.state, [G.state]), y = H(() => ({
+    getFields: Ne,
+    addItem: We,
     addItems: Ce,
-    updateItem: ve,
-    updateItems: Re,
-    deleteItem: Me,
-    deleteItems: Ne,
-    getItem: We,
-    getItemByIndex: ke,
-    getItems: Oe,
-    getItemsCount: Fe,
-    itemExists: Be,
-    getItemIndex: Ae,
-    replaceAllItems: Te,
-    clearItems: _e,
-    deselectAllRows: me,
-    getSelectedItems: Le,
-    getSelectedRows: De
+    updateItem: ke,
+    updateItems: Te,
+    deleteItem: Ae,
+    deleteItems: Be,
+    getItem: Fe,
+    getItemByIndex: Oe,
+    getItems: Ye,
+    getItemsCount: Pe,
+    itemExists: je,
+    getItemIndex: He,
+    replaceAllItems: Le,
+    clearItems: De,
+    deselectAllRows: xe,
+    getSelectedItems: $e,
+    getSelectedRows: qe,
+    // Overlay methods
+    setLoading: Ge,
+    setError: Xe,
+    setPartialLoading: Je,
+    clearOverlay: Ke,
+    getOverlayState: Ve
   }), [
-    Ee,
-    Ce,
-    _e,
-    Me,
-    Ne,
-    me,
-    f,
-    be,
     We,
-    ke,
+    Ce,
+    De,
+    Ke,
     Ae,
-    Oe,
+    Be,
+    xe,
+    f,
+    Ne,
     Fe,
+    Oe,
+    He,
+    Ye,
+    Pe,
+    Ve,
+    $e,
+    qe,
+    je,
     Le,
-    De,
-    Be,
-    Te,
-    ve,
-    Re
+    Xe,
+    Ge,
+    Je,
+    ke,
+    Te
   ]);
-  xt.useImperativeHandle(et, () => y, [y]);
-  const ht = R((e, t) => {
-    t?.target && t.target.closest('[data-checkbox="true"]') || (I && pe(e.index), Z && Z(e.original, e.index));
-  }, [I, Z, pe]), He = F(() => w.map((e) => {
-    const n = f.find((r) => r.internalName === e.id)?.typeAsString === "Note" ? x * 2 : x, s = S[e.id] || (typeof e.size == "number" ? e.size : n);
-    return e.id === "select" ? `${O}px` : `${s}px`;
-  }).join(" "), [w, S, f]);
-  T(() => {
-    if (!P) return;
+  kt.useImperativeHandle(ft, () => y, [y]);
+  const vt = w((e, t) => {
+    t?.target && t.target.closest('[data-checkbox="true"]') || (b && ye(e.index), se && se(e.original, e.index));
+  }, [b, se, ye]), Ze = H(() => x.map((e) => {
+    const n = f.find((r) => r.internalName === e.id)?.typeAsString === "Note" ? I * 2 : I, s = S[e.id] || (typeof e.size == "number" ? e.size : n);
+    return e.id === "select" ? `${j}px` : `${s}px`;
+  }).join(" "), [x, S, f]);
+  A(() => {
+    if (!J) return;
     const e = new ResizeObserver((t) => {
       for (const n of t)
-        fe(n.contentRect.width);
+        we(n.contentRect.width);
     });
-    return e.observe(P), fe(P.clientWidth), () => e.disconnect();
-  }, [P]), T(() => {
-    if (!M || C <= 0 || N.current) return;
+    return e.observe(J), we(J.clientWidth), () => e.disconnect();
+  }, [J]), A(() => {
+    if (!W || N <= 0 || C.current) return;
     let e = 0, t = 0;
     const n = [];
-    if (w.forEach((o) => {
-      const h = f.find((m) => m.internalName === o.id)?.typeAsString === "Note" ? x * 2 : x, d = S[o.id] || (typeof o.size == "number" ? o.size : h);
+    if (x.forEach((o) => {
+      const h = f.find((m) => m.internalName === o.id)?.typeAsString === "Note" ? I * 2 : I, d = S[o.id] || (typeof o.size == "number" ? o.size : h);
       !(o.id === "select") ? (t += d, n.push(o)) : e += d;
     }), n.length === 0)
       return;
     const s = e + t;
-    if (Math.abs(s - C) < 1) return;
-    const r = C - e, i = r / t, a = { ...S };
-    let c = 0;
+    if (Math.abs(s - N) < 1) return;
+    const r = N - e, c = r / t, a = { ...S };
+    let i = 0;
     n.forEach((o, u) => {
-      const h = S[o.id] || (typeof o.size == "number" ? o.size : x), d = o.minSize || _;
+      const h = S[o.id] || (typeof o.size == "number" ? o.size : I), d = o.minSize || B;
       let l;
-      u === n.length - 1 ? l = r - c : l = Math.round(h * i), l = Math.max(d, l), a[o.id] = l, c += l;
-    }), N.current = !0, j(a), requestAnimationFrame(() => {
-      N.current = !1;
+      u === n.length - 1 ? l = r - i : l = Math.round(h * c), l = Math.max(d, l), a[o.id] = l, i += l;
+    }), C.current = !0, X(a), requestAnimationFrame(() => {
+      C.current = !1;
     });
-  }, [M, C, w, f]), T(() => {
-    if (M || C <= 0)
+  }, [W, N, x, f]), A(() => {
+    if (W || N <= 0)
       return;
-    const e = C - Y;
+    const e = N - K;
     if (Math.abs(e) < 1)
       return;
-    const t = w.filter((d) => d.id && d.id !== "select");
+    const t = x.filter((d) => d.id && d.id !== "select");
     if (t.length === 0) return;
-    const n = t[t.length - 1], s = n.id, i = f.find((d) => d.internalName === s)?.typeAsString === "Note" ? x * 2 : x, c = (S[s] || (typeof n.size == "number" ? n.size : i)) + e, o = n.minSize || _, u = Math.max(o, c), h = S[s];
-    Math.abs(h - u) < 1 || (N.current = !0, j((d) => ({
+    const n = t[t.length - 1], s = n.id, c = f.find((d) => d.internalName === s)?.typeAsString === "Note" ? I * 2 : I, i = (S[s] || (typeof n.size == "number" ? n.size : c)) + e, o = n.minSize || B, u = Math.max(o, i), h = S[s];
+    Math.abs(h - u) < 1 || (C.current = !0, X((d) => ({
       ...d,
       [s]: u
-    })), N.current = !1);
-  }, [M, C, Y, w, f]);
-  const je = Mt(tt), Pe = Nt(nt), $ = Wt(st), mt = je ? [je, ...ie] : ie, ee = [];
-  Pe && ee.push(Pe), $ && ee.push($);
-  const pt = [...ee, ...it], gt = $ ? [$, ...ce] : ce;
-  return /* @__PURE__ */ Ye(
-    Ct,
+    })), C.current = !1);
+  }, [W, N, K, x, f]);
+  const Qe = Pt(ht), Ue = Yt(mt), V = $t(pt), Mt = Qe ? [Qe, ...ue] : ue, ie = [];
+  Ue && ie.push(Ue), V && ie.push(V);
+  const Nt = [...ie, ...St], Wt = V ? [V, ...de] : de;
+  return /* @__PURE__ */ et(
+    Dt,
     {
       size: "small",
-      appearance: Ge,
-      className: ct,
+      appearance: rt,
+      className: It,
       style: {
-        backgroundColor: K.colorNeutralBackground1,
+        backgroundColor: ee.colorNeutralBackground1,
         maxWidth: "100%",
         // margin: "20px 20px",
         padding: "0px",
         gap: "0px",
-        ...Xe
+        ...ct
       },
       children: [
-        V && /* @__PURE__ */ v(
-          kt,
+        ne && /* @__PURE__ */ v(
+          qt,
           {
             tableMethods: y,
-            alwaysButtons: mt,
-            noSelectionButtons: rt,
-            singleSelectionButtons: pt,
-            multiSelectionButtons: gt,
+            alwaysButtons: Mt,
+            noSelectionButtons: gt,
+            singleSelectionButtons: Nt,
+            multiSelectionButtons: Wt,
             selectedRows: y.getSelectedRows()
           }
         ),
-        b.length > 0 ? /* @__PURE__ */ v(
-          "div",
-          {
-            ref: dt,
-            onScroll: ft,
-            className: le["efw-table-scroll-container"],
-            style: {
-              maxHeight: V ? ne - 40 : ne,
-              overflowY: "auto",
-              overflowX: "auto",
-              border: `1px solid ${K.colorNeutralStroke2}`,
-              borderTop: V ? "none" : `1px solid ${K.colorNeutralStroke2}`,
-              position: "relative"
-            },
-            children: /* @__PURE__ */ Ye(
-              "div",
-              {
-                className: "table-container",
-                style: {
-                  minWidth: M ? "100%" : Y,
-                  width: M ? "100%" : Math.max(Y, 300)
-                },
-                children: [
-                  /* @__PURE__ */ v(
-                    Tt,
-                    {
-                      table: ye,
-                      gridTemplateColumns: He,
-                      columnSizing: S,
-                      stickyColumnsInfo: we,
-                      resizableColumns: Q
-                    }
-                  ),
-                  /* @__PURE__ */ v(
-                    _t,
-                    {
-                      table: ye,
-                      fields: f,
-                      tableContainerRef: xe,
-                      useVirtualization: Ue,
-                      enableSelection: I,
-                      itemSize: Ve,
-                      gridTemplateColumns: He,
-                      columnSizing: S,
-                      stickyColumnsInfo: we,
-                      onRowClick: ht
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ) : /* @__PURE__ */ v(At, { height: 250 })
+        (() => {
+          const e = G.state !== "none" ? G : R.length === 0 ? {
+            state: "empty",
+            message: F?.empty?.title,
+            description: F?.empty?.description,
+            imageUrl: F?.empty?.imageUrl
+          } : { state: "none" }, t = /* @__PURE__ */ v(
+            "div",
+            {
+              ref: _t,
+              onScroll: Rt,
+              className: pe["efw-table-scroll-container"],
+              style: {
+                maxHeight: ne ? te - 40 : te,
+                overflowY: "auto",
+                overflowX: "auto",
+                border: `1px solid ${ee.colorNeutralStroke2}`,
+                borderTop: ne ? "none" : `1px solid ${ee.colorNeutralStroke2}`,
+                position: "relative"
+              },
+              children: /* @__PURE__ */ et(
+                "div",
+                {
+                  className: "table-container",
+                  style: {
+                    minWidth: W ? "100%" : K,
+                    width: W ? "100%" : Math.max(K, 300)
+                  },
+                  children: [
+                    /* @__PURE__ */ v(
+                      Gt,
+                      {
+                        table: Re,
+                        gridTemplateColumns: Ze,
+                        columnSizing: S,
+                        stickyColumnsInfo: _e,
+                        resizableColumns: re
+                      }
+                    ),
+                    /* @__PURE__ */ v(
+                      Xt,
+                      {
+                        table: Re,
+                        fields: f,
+                        tableContainerRef: Ee,
+                        useVirtualization: dt,
+                        enableSelection: b,
+                        itemSize: at,
+                        gridTemplateColumns: Ze,
+                        columnSizing: S,
+                        stickyColumnsInfo: _e,
+                        onRowClick: vt
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          );
+          return e.state === "partial-loading" ? /* @__PURE__ */ v(
+            nt,
+            {
+              config: e,
+              customization: F,
+              children: t
+            }
+          ) : e.state !== "none" ? /* @__PURE__ */ v(
+            nt,
+            {
+              config: e,
+              height: te,
+              customization: F
+            }
+          ) : t;
+        })()
       ]
     }
   );
 };
 export {
-  x as COLS_DEF_WIDTH,
-  J as COLS_MAX_WIDTH,
-  _ as COLS_MIN_WIDTH,
-  Ut as EFWTable,
-  Qt as SELECTOR_CELL_HEIGHT,
-  O as SELECTOR_CELL_WIDTH
+  I as COLS_DEF_WIDTH,
+  U as COLS_MAX_WIDTH,
+  B as COLS_MIN_WIDTH,
+  hn as EFWTable,
+  fn as SELECTOR_CELL_HEIGHT,
+  j as SELECTOR_CELL_WIDTH
 };