@memobit/libs 3.8.2 → 3.9.0

package/dist/components/DataView/DataView2.js

@@ -1,19 +1,19 @@
 import './DataView.css';
 import { Icon as X } from "../Icon/Icon2.js";
 import { Button as ft } from "../Button/Button2.js";
-import { Tooltip as Te } from "../Tooltip/Tooltip2.js";
+import { Tooltip as Ae } from "../Tooltip/Tooltip2.js";
 import { Checkbox as re } from "../Checkbox/Checkbox2.js";
 import { useBreakpoint as pt } from "../../hooks/useBreakpoint.js";
 import { Dropdown as vt } from "../Dropdown/Dropdown2.js";
 import { getResultsCount as _t } from "../../helpers/Pagination.js";
 import { EmptyState as oe } from "../EmptyState/EmptyState2.js";
-import { Pagination as Ae } from "../Pagination/Pagination2.js";
+import { Pagination as Ee } from "../Pagination/Pagination2.js";
 import { TimelineMarkerDot as wt, calculateTimelineMarkers as gt } from "../TimelineMarkers/TimelineMarkers2.js";
-import { CardView as bt, DEFAULT_PAGE_SIZES as Ee, getColumnLabel as yt, renderCellContent as kt, renderColumnLabel as Ct } from "./DataView.CardView.js";
+import { CardView as bt, DEFAULT_PAGE_SIZES as Ge, getColumnLabel as yt, renderCellContent as kt, renderColumnLabel as Ct } from "./DataView.CardView.js";
 import { DataViewColumnSelector as Nt } from "./DataView.ColumnSelector.js";
 import { DataViewMiniSort as St } from "./DataView.MiniSort.js";
 /* empty css         */
-import Ge, { useMemo as L, useState as P } from "react";
+import Le, { useMemo as L, useState as P } from "react";
 import { Fragment as Mt, jsx as t, jsxs as c } from "react/jsx-runtime";
 function Pt({ state: h }) {
   return /* @__PURE__ */ t("span", {
@@ -21,43 +21,43 @@ function Pt({ state: h }) {
     children: /* @__PURE__ */ t(X, { name: h === "asc" ? "arrow-up" : h === "desc" ? "arrow-down" : "arrow-bidirectional-vertical" })
   });
 }
-function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1, onSelectionChange: Ve, selectedIds: le, pageSizeOptions: ce = Ee, initialPageSize: xe = Ee[1], showPageSize: $ = !0, card: Be, actions: k, actionsWidth: K, timeline: C, onRowClick: R, rowHref: de, rowClassName: he, rowDetail: Fe, empty: N, initialSortKey: Ie = null, initialSortDirection: Ke = "asc", sortKey: Z, sortDirection: ue, onSortChange: Re, miniSort: z, showCardSortControls: ze = !0, desktopView: me = "table", cardMaxWidth: Ue, className: D, onPageChange: We, onPageSizeChange: fe, currentPage: pe, totalItems: ve, group: o, showResultsCount: je = !0, totalCount: Oe, itemNoun: Xe, columnSelector: q }) {
-  const { isMobile: Ze } = pt(), [qe, Je] = P(Ie), [Qe, Ye] = P(Ke), [He, et] = P([]), f = le ?? He, [tt, at] = P(1), nt = pe ?? tt, [T, _e] = P(xe), [S, st] = P(() => h.reduce((e, a) => (a.width && (e[a.key] = a.width), e), {})), [we, it] = P(/* @__PURE__ */ new Set()), ge = (e) => {
-    it((a) => {
-      const i = new Set(a);
-      return i.has(e) ? i.delete(e) : i.add(e), i;
+function Wt({ columns: h, data: I, rowKey: Ve, pinnedIds: y, selectable: w = !1, onSelectionChange: xe, selectedIds: le, pageSizeOptions: ce = Ge, initialPageSize: Be = Ge[1], showPageSize: $ = !0, card: Fe, actions: k, actionsWidth: K, timeline: C, onRowClick: R, rowHref: de, rowClassName: he, rowDetail: Ie, empty: N, initialSortKey: Ke = null, initialSortDirection: Re = "asc", sortKey: Z, sortDirection: ue, onSortChange: ze, miniSort: z, showCardSortControls: Ue = !0, desktopView: me = "table", cardMaxWidth: We, className: D, onPageChange: je, onPageSizeChange: fe, currentPage: pe, totalItems: ve, group: o, showResultsCount: Oe = !0, totalCount: Xe, itemNoun: Ze, columnSelector: q }) {
+  const { isMobile: _e } = pt(), [qe, Je] = P(Ke), [Qe, Ye] = P(Re), [He, et] = P([]), f = le ?? He, [tt, at] = P(1), nt = pe ?? tt, [T, we] = P(Be), [S, it] = P(() => h.reduce((e, a) => (a.width && (e[a.key] = a.width), e), {})), [ge, st] = P(/* @__PURE__ */ new Set()), be = (e) => {
+    st((a) => {
+      const s = new Set(a);
+      return s.has(e) ? s.delete(e) : s.add(e), s;
     });
-  }, M = (e, a) => Le?.(e, a) ?? a, V = (e) => {
-    pe === void 0 && at(e), We?.(e);
+  }, M = (e, a) => Ve?.(e, a) ?? a, V = (e) => {
+    pe === void 0 && at(e), je?.(e);
   }, p = Z !== void 0 ? Z : qe, v = ue ?? Qe, A = (e, a) => {
-    Z === void 0 && Je(e), ue === void 0 && Ye(a), Re?.({
+    Z === void 0 && Je(e), ue === void 0 && Ye(a), ze?.({
       key: e,
       direction: a
     }), V(1);
   }, U = L(() => new Set(y ?? []), [y]), W = L(() => {
     let e = I;
     if (p) {
-      const n = h.find((s) => s.key === p);
+      const n = h.find((i) => i.key === p);
       if (n) {
-        const s = n.sortAccessor || n.accessor || ((m) => {
+        const i = n.sortAccessor || n.accessor || ((m) => {
           const u = m[n.key];
           return typeof u == "string" || typeof u == "number" ? u : "";
         }), r = [...I].sort((m, u) => {
-          const _ = s(m), d = s(u);
+          const _ = i(m), d = i(u);
           return typeof _ == "number" && typeof d == "number" ? _ - d : String(_).localeCompare(String(d));
         });
         e = v === "asc" ? r : r.reverse();
       }
     }
     if (U.size === 0) return e;
-    const a = [], i = [];
-    if (e.forEach((n, s) => {
-      U.has(M(n, s)) ? a.push(n) : i.push(n);
+    const a = [], s = [];
+    if (e.forEach((n, i) => {
+      U.has(M(n, i)) ? a.push(n) : s.push(n);
     }), y && y.length > 1 && a.length > 1) {
-      const n = new Map(y.map((s, r) => [s, r]));
-      a.sort((s, r) => (n.get(M(s, 0)) ?? 0) - (n.get(M(r, 0)) ?? 0));
+      const n = new Map(y.map((i, r) => [i, r]));
+      a.sort((i, r) => (n.get(M(i, 0)) ?? 0) - (n.get(M(r, 0)) ?? 0));
     }
-    return [...a, ...i];
+    return [...a, ...s];
   }, [
     h,
     I,
@@ -69,49 +69,49 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
     if (!o || j) return W;
     const e = /* @__PURE__ */ new Map(), a = [];
     W.forEach((n) => {
-      const s = o.groupBy(n), r = e.get(s);
-      r ? r.push(n) : (e.set(s, [n]), a.push(s));
+      const i = o.groupBy(n), r = e.get(i);
+      r ? r.push(n) : (e.set(i, [n]), a.push(i));
     });
-    const i = a.map((n) => {
-      const s = e.get(n);
+    const s = a.map((n) => {
+      const i = e.get(n);
       return {
         key: n,
         label: o.groupLabel(n),
-        items: s,
-        totalCount: s.length
+        items: i,
+        totalCount: i.length
       };
     });
-    return o.sortGroups ? i.sort(o.sortGroups) : i.sort((n, s) => n.key === null ? 1 : s.key === null ? -1 : 0), i.flatMap((n) => n.items);
+    return o.sortGroups ? s.sort(o.sortGroups) : s.sort((n, i) => n.key === null ? 1 : i.key === null ? -1 : 0), s.flatMap((n) => n.items);
   }, [
     o,
     j,
     W
-  ]), O = j ? ve : x.length, J = Math.max(1, Math.ceil(O / T)), B = Math.min(nt, J), g = j ? x : x.slice((B - 1) * T, B * T), Q = je ? _t(T, O, Oe ?? O, B, Xe) : null, Y = L(() => {
+  ]), O = j ? ve : x.length, J = Math.max(1, Math.ceil(O / T)), B = Math.min(nt, J), g = j ? x : x.slice((B - 1) * T, B * T), Q = Oe ? _t(T, O, Xe ?? O, B, Ze) : null, Y = L(() => {
     if (!o) return null;
     const e = /* @__PURE__ */ new Map();
     return x.forEach((a) => {
-      const i = o.groupBy(a);
-      e.set(i, (e.get(i) ?? 0) + 1);
+      const s = o.groupBy(a);
+      e.set(s, (e.get(s) ?? 0) + 1);
     }), e;
   }, [o, x]), H = L(() => {
     if (!o || !Y) return null;
     const e = /* @__PURE__ */ new Map(), a = [];
     g.forEach((n) => {
-      const s = o.groupBy(n), r = e.get(s);
-      r ? r.push(n) : (e.set(s, [n]), a.push(s));
+      const i = o.groupBy(n), r = e.get(i);
+      r ? r.push(n) : (e.set(i, [n]), a.push(i));
     });
-    const i = a.map((n) => ({
+    const s = a.map((n) => ({
       key: n,
       label: o.groupLabel(n),
       items: e.get(n),
       totalCount: Y.get(n) ?? 0
     }));
-    return o.sortGroups ? i.sort(o.sortGroups) : i.sort((n, s) => n.key === null ? 1 : s.key === null ? -1 : 0), i;
+    return o.sortGroups ? s.sort(o.sortGroups) : s.sort((n, i) => n.key === null ? 1 : i.key === null ? -1 : 0), s;
   }, [
     o,
     Y,
     g
-  ]), be = L(() => {
+  ]), ye = L(() => {
     if (!C) return /* @__PURE__ */ new Map();
     const e = g.map((a) => ({
       id: C.idAccessor(a),
@@ -119,40 +119,40 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
     }));
     return gt(e, C.granularity);
   }, [g, C]), E = (e) => {
-    le === void 0 && et(e), Ve?.(I.filter((a, i) => e.includes(M(a, i))));
+    le === void 0 && et(e), xe?.(I.filter((a, s) => e.includes(M(a, s))));
   }, rt = (e) => {
     e.sortable && (p === e.key ? A(e.key, v === "asc" ? "desc" : "asc") : A(e.key, "asc"));
   }, ot = (e, a) => {
     e.preventDefault();
-    const i = e.clientX, n = S[a] ?? 150, s = (m) => {
-      const u = m.clientX - i, _ = h.find((d) => d.key === a)?.minWidth ?? 120;
-      st((d) => ({
+    const s = e.clientX, n = S[a] ?? 150, i = (m) => {
+      const u = m.clientX - s, _ = h.find((d) => d.key === a)?.minWidth ?? 120;
+      it((d) => ({
         ...d,
         [a]: Math.max(_, n + u)
       }));
     }, r = () => {
-      window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", r);
+      window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", r);
     };
-    window.addEventListener("mousemove", s), window.addEventListener("mouseup", r);
-  }, ye = h.some((e) => e.filter), ee = h.filter((e) => e.sortable), lt = ee.map((e) => ({
+    window.addEventListener("mousemove", i), window.addEventListener("mouseup", r);
+  }, ke = h.some((e) => e.filter), ee = h.filter((e) => e.sortable), lt = ee.map((e) => ({
     label: yt(e),
     value: e.key
-  })), ct = ee.length > 0, te = p ? ee.find((e) => e.key === p) : void 0, dt = z?.align ?? "left", ke = (z?.columns ?? z?.column ?? []).length > 0 ? /* @__PURE__ */ t(St, {
+  })), ct = ee.length > 0, te = p ? ee.find((e) => e.key === p) : void 0, dt = z?.align ?? "left", Ce = (z?.columns ?? z?.column ?? []).length > 0 ? /* @__PURE__ */ t(St, {
     columns: h,
     config: z,
     sortKey: p,
     sortDirection: v,
     onSort: A
-  }) : null, Ce = q && q.options.length > 0 ? /* @__PURE__ */ t(Nt, { config: q }) : null, b = g.map(M), ae = b.filter((e) => f.includes(e)).length, ne = !!w && b.length > 0 && ae === b.length, Ne = !!w && ae > 0 && ae < b.length, Se = (e) => {
+  }) : null, Ne = q && q.options.length > 0 ? /* @__PURE__ */ t(Nt, { config: q }) : null, b = g.map(M), ae = b.filter((e) => f.includes(e)).length, ne = !!w && b.length > 0 && ae === b.length, Se = !!w && ae > 0 && ae < b.length, Me = (e) => {
     E(e ? [...f, ...b.filter((a) => !f.includes(a))] : f.filter((a) => !b.includes(a)));
   }, ht = w && b.length > 0 ? /* @__PURE__ */ c("label", {
     className: "data-view__select-all",
     children: [/* @__PURE__ */ t(re, {
       checked: ne,
-      indeterminate: Ne,
-      onChange: Se
+      indeterminate: Se,
+      onChange: Me
     }), /* @__PURE__ */ t("span", { children: ne ? "Clear selection" : `Select these ${b.length}` })]
-  }) : null, Me = (e) => Q || ke || Ce || e ? /* @__PURE__ */ c("div", {
+  }) : null, Pe = (e) => Q || Ce || Ne || e ? /* @__PURE__ */ c("div", {
     className: `data-view__top-row data-view__top-row--mini-${dt}`,
     children: [
       Q && /* @__PURE__ */ t("div", {
@@ -160,13 +160,13 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
         children: Q
       }),
       e,
-      ke,
-      Ce
+      Ce,
+      Ne
     ]
-  }) : null, Pe = Me();
+  }) : null, $e = Pe();
   if (me !== "cards" && h.length === 0) return /* @__PURE__ */ c("div", {
     className: `data-view${D ? ` ${D}` : ""}`,
-    children: [Pe, /* @__PURE__ */ t("div", {
+    children: [$e, /* @__PURE__ */ t("div", {
       className: "data-view__wrapper data-view__wrapper--empty",
       children: /* @__PURE__ */ t(oe, {
         title: "No columns selected",
@@ -177,8 +177,8 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
   if (me === "cards") return /* @__PURE__ */ c("div", {
     className: `data-view data-view--cards${D ? ` ${D}` : ""}`,
     children: [
-      Me(ht),
-      ze && ct && /* @__PURE__ */ c("div", {
+      Pe(ht),
+      Ue && ct && /* @__PURE__ */ c("div", {
         className: "data-view__card-sort-bar",
         children: [/* @__PURE__ */ t("div", {
           className: "data-view__card-sort-field",
@@ -199,7 +199,7 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
               A(a, p === a ? v : "asc");
             }
           })
-        }), /* @__PURE__ */ t(Te, {
+        }), /* @__PURE__ */ t(Ae, {
           title: v === "asc" ? "Sort descending" : "Sort ascending",
           children: /* @__PURE__ */ t(ft, {
             className: "data-view__card-sort-direction",
@@ -212,7 +212,7 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
           })
         })]
       }),
-      ye && /* @__PURE__ */ t("div", {
+      ke && /* @__PURE__ */ t("div", {
         className: "data-view__filter-bar",
         children: h.filter((e) => e.filter).map((e) => /* @__PURE__ */ t("div", {
           className: "data-view__filter-bar-item",
@@ -223,7 +223,7 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
         data: g,
         columns: h,
         rowKey: M,
-        card: Be,
+        card: Fe,
         actions: k,
         timeline: C,
         onRowClick: R,
@@ -233,18 +233,18 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
         selectable: w,
         selectedIds: f,
         pinnedIds: y,
-        cardMaxWidth: Ue,
-        isMobile: Ze,
+        cardMaxWidth: We,
+        isMobile: _e,
         groups: H ?? void 0,
         showGroupCount: o?.showCount !== !1,
         collapsible: o?.collapsible,
-        collapsedGroups: we,
-        onToggleGroup: ge,
+        collapsedGroups: ge,
+        onToggleGroup: be,
         onToggleSelect: (e, a) => {
-          E(a ? [...f, e] : f.filter((i) => i !== e));
+          E(a ? [...f, e] : f.filter((s) => s !== e));
         }
       }),
-      /* @__PURE__ */ t(Ae, {
+      /* @__PURE__ */ t(Ee, {
         currentPage: B,
         totalPages: J,
         totalItems: O,
@@ -252,13 +252,13 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
         pageSizeOptions: $ ? ce : void 0,
         pageSize: $ ? T : void 0,
         onPageSizeChange: $ ? (e) => {
-          _e(e), V(1), fe?.(e);
+          we(e), V(1), fe?.(e);
         } : void 0
       })
     ]
   });
-  const F = h.filter((e) => !e.hideInTable), G = C && be.size > 0, $e = /* @__PURE__ */ c(Mt, { children: [
-    Pe,
+  const F = h.filter((e) => !e.hideInTable && !(_e && e.hideInMobile)), G = C && ye.size > 0, De = /* @__PURE__ */ c(Mt, { children: [
+    $e,
     /* @__PURE__ */ t("div", {
       className: "data-view__wrapper",
       children: /* @__PURE__ */ c("table", { children: [/* @__PURE__ */ c("thead", { children: [/* @__PURE__ */ c("tr", { children: [
@@ -267,8 +267,8 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
           className: "data-view__checkbox",
           children: /* @__PURE__ */ t(re, {
             checked: ne,
-            indeterminate: Ne,
-            onChange: Se
+            indeterminate: Se,
+            onChange: Me
           })
         }),
         F.map((e) => {
@@ -282,8 +282,8 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
               children: [Ct(e), e.sortable && /* @__PURE__ */ t(Pt, { state: p === e.key ? v : "unsorted" })]
             }), /* @__PURE__ */ t("span", {
               className: "data-view__resizer",
-              onMouseDown: (i) => ot(i, e.key),
-              onClick: (i) => i.stopPropagation()
+              onMouseDown: (s) => ot(s, e.key),
+              onClick: (s) => s.stopPropagation()
             })]
           }, e.key);
         }),
@@ -292,7 +292,7 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
           style: K ? { width: K } : void 0,
           children: "Actions"
         })
-      ] }), ye && /* @__PURE__ */ c("tr", {
+      ] }), ke && /* @__PURE__ */ c("tr", {
         className: "data-view__filter-row",
         children: [
           G && /* @__PURE__ */ t("td", { className: "data-view__filter-cell data-view__filter-cell--spacer" }),
@@ -316,8 +316,8 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
             secondary: N.secondary
           }) : /* @__PURE__ */ t(oe, { title: "No data available" })
         }) });
-        const e = F.length + (G ? 1 : 0) + (w ? 1 : 0) + (k ? 1 : 0), a = o?.showCount !== !1, i = (n, s) => {
-          const r = M(n, s), m = f.includes(r), u = U.has(r), _ = be.get(s), d = de?.(n), De = !!R || !!d, ut = (l) => {
+        const e = F.length + (G ? 1 : 0) + (w ? 1 : 0) + (k ? 1 : 0), a = o?.showCount !== !1, s = (n, i) => {
+          const r = M(n, i), m = f.includes(r), u = U.has(r), _ = ye.get(i), d = de?.(n), Te = !!R || !!d, ut = (l) => {
             if (d && (l.metaKey || l.ctrlKey || l.shiftKey)) {
               window.open(d, "_blank", "noopener,noreferrer");
               return;
@@ -329,10 +329,10 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
             d && window.location.assign(d);
           }, mt = (l) => {
             l.button !== 1 || !d || (l.preventDefault(), window.open(d, "_blank", "noopener,noreferrer"));
-          }, se = Fe?.(n);
-          return /* @__PURE__ */ c(Ge.Fragment, { children: [/* @__PURE__ */ c("tr", {
-            className: `${m ? "is-selected" : ""} ${De ? "data-view__row--clickable" : ""} ${u ? "data-view__row--pinned" : ""} ${he?.(n) || ""}`,
-            onClick: De ? ut : void 0,
+          }, ie = Ie?.(n);
+          return /* @__PURE__ */ c(Le.Fragment, { children: [/* @__PURE__ */ c("tr", {
+            className: `${m ? "is-selected" : ""} ${Te ? "data-view__row--clickable" : ""} ${u ? "data-view__row--pinned" : ""} ${he?.(n) || ""}`,
+            onClick: Te ? ut : void 0,
             onAuxClick: d ? mt : void 0,
             children: [
               G && /* @__PURE__ */ t("td", {
@@ -344,13 +344,13 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
                 children: /* @__PURE__ */ t(re, {
                   checked: m,
                   onChange: (l) => {
-                    E(l ? [...f, r] : f.filter((ie) => ie !== r));
+                    E(l ? [...f, r] : f.filter((se) => se !== r));
                   }
                 })
               }),
-              F.map((l, ie) => /* @__PURE__ */ c("td", {
+              F.map((l, se) => /* @__PURE__ */ c("td", {
                 style: S[l.key] ? { width: S[l.key] } : void 0,
-                children: [ie === 0 && u && /* @__PURE__ */ t(Te, {
+                children: [se === 0 && u && /* @__PURE__ */ t(Ae, {
                   title: "Pinned",
                   children: /* @__PURE__ */ t(X, {
                     className: "data-view__pin-indicator",
@@ -369,35 +369,35 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
                 })
               })
             ]
-          }), se != null && se !== !1 && /* @__PURE__ */ t("tr", {
+          }), ie != null && ie !== !1 && /* @__PURE__ */ t("tr", {
             className: "data-view__row-detail",
             children: /* @__PURE__ */ t("td", {
               colSpan: e,
               onClick: (l) => l.stopPropagation(),
-              children: se
+              children: ie
             })
           })] }, r);
         };
         if (H) {
           let n = 0;
-          return H.map((s) => {
+          return H.map((i) => {
             const r = n;
-            n += s.items.length;
-            const m = o?.collapsible && we.has(s.key);
-            return /* @__PURE__ */ c(Ge.Fragment, { children: [/* @__PURE__ */ t("tr", {
+            n += i.items.length;
+            const m = o?.collapsible && ge.has(i.key);
+            return /* @__PURE__ */ c(Le.Fragment, { children: [/* @__PURE__ */ t("tr", {
               className: `data-view__group-row${o?.collapsible ? " data-view__group-row--collapsible" : ""}`,
-              onClick: o?.collapsible ? () => ge(s.key) : void 0,
+              onClick: o?.collapsible ? () => be(i.key) : void 0,
               children: /* @__PURE__ */ c("td", {
                 colSpan: e,
                 className: "data-view__group-cell",
                 children: [
                   /* @__PURE__ */ t("span", {
                     className: "data-view__group-label",
-                    children: s.label
+                    children: i.label
                   }),
                   a && /* @__PURE__ */ t("span", {
                     className: "data-view__group-count",
-                    children: s.items.length === s.totalCount ? s.totalCount : `${s.items.length} of ${s.totalCount}`
+                    children: i.items.length === i.totalCount ? i.totalCount : `${i.items.length} of ${i.totalCount}`
                   }),
                   o?.collapsible && /* @__PURE__ */ t(X, {
                     className: "data-view__group-chevron",
@@ -406,13 +406,13 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
                   })
                 ]
               })
-            }), !m && s.items.map((u, _) => i(u, r + _))] }, s.key ?? "__null__");
+            }), !m && i.items.map((u, _) => s(u, r + _))] }, i.key ?? "__null__");
           });
         }
-        return g.map((n, s) => i(n, s));
+        return g.map((n, i) => s(n, i));
       })() })] })
     }),
-    /* @__PURE__ */ t(Ae, {
+    /* @__PURE__ */ t(Ee, {
       currentPage: B,
       totalPages: J,
       totalItems: W.length,
@@ -420,7 +420,7 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
       pageSizeOptions: $ ? ce : void 0,
       pageSize: $ ? T : void 0,
       onPageSizeChange: $ ? (e) => {
-        _e(e), V(1), fe?.(e);
+        we(e), V(1), fe?.(e);
       } : void 0
     })
   ] });
@@ -428,8 +428,8 @@ function Wt({ columns: h, data: I, rowKey: Le, pinnedIds: y, selectable: w = !1,
     className: `data-view${D ? ` ${D}` : ""}`,
     children: G ? /* @__PURE__ */ c("div", {
       className: "timeline-markers",
-      children: [/* @__PURE__ */ t("div", { className: "timeline-markers__track" }), $e]
-    }) : $e
+      children: [/* @__PURE__ */ t("div", { className: "timeline-markers__track" }), De]
+    }) : De
   });
 }
 export {

package/dist/components/Icon/Icon2.js

@@ -1,26 +1,43 @@
 import './Icon.css';
 /* empty css     */
-import "react";
-import { iconMap as h } from "@memobit/icons/map";
-import { jsx as f } from "react/jsx-runtime";
-var t = /* @__PURE__ */ new Set(), x = ({ className: s = "", fade: c, fadeOnHover: r, name: o, pulse: a, pulseOnHover: p, size: n, spin: l, spinOnHover: d, variant: i }) => {
+import { useEffect as g, useState as I } from "react";
+import { canLoadMoreIcons as n, getIcon as y, loadIcon as N } from "@memobit/icons/map";
+import { jsx as $ } from "react/jsx-runtime";
+var c = /* @__PURE__ */ new Set(), a = (o) => {
+  c.has(o) || (c.add(o), console.warn(n ? `[@memobit/libs] No icon named "${o}".` : `[@memobit/libs] No icon named "${o}". If this app trims icons with @memobit/icons/vite, add it to the plugin's \`include\` option or use \`lazy\` — a name that only exists at runtime cannot be found by the source scan.`));
+}, S = ({ className: o = "", fade: l, fadeOnHover: d, name: e, pulse: u, pulseOnHover: f, size: r, spin: p, spinOnHover: h, variant: t }) => {
   const m = [
     "icon",
-    n ? `icon--${n}` : "",
-    i && i !== "default" ? `icon--${i}` : "",
-    l ? "icon--spin" : "",
-    c ? "icon--fade" : "",
-    a ? "icon--pulse" : "",
-    d ? "icon--spin-hover" : "",
-    r ? "icon--fade-hover" : "",
-    p ? "icon--pulse-hover" : "",
-    s
-  ].filter(Boolean).join(" "), e = h[o];
-  return e === void 0 && !t.has(o) && (t.add(o), console.warn(`[@memobit/libs] No icon named "${o}". If this app trims icons with @memobit/icons/vite, add it to the plugin's \`include\` option — a name that only exists at runtime cannot be found by the source scan.`)), /* @__PURE__ */ f("span", {
+    r ? `icon--${r}` : "",
+    t && t !== "default" ? `icon--${t}` : "",
+    p ? "icon--spin" : "",
+    l ? "icon--fade" : "",
+    u ? "icon--pulse" : "",
+    h ? "icon--spin-hover" : "",
+    d ? "icon--fade-hover" : "",
+    f ? "icon--pulse-hover" : "",
+    o
+  ].filter(Boolean).join(" "), [, v] = I(null), i = y(e);
+  return g(() => {
+    if (i !== void 0 || !n) return;
+    let s = !0;
+    return N(e).then((b) => {
+      if (s) {
+        if (b === void 0) {
+          a(e);
+          return;
+        }
+        v(e);
+      }
+    }, () => {
+    }), () => {
+      s = !1;
+    };
+  }, [i, e]), i === void 0 && !n && a(e), /* @__PURE__ */ $("span", {
     className: m,
-    children: e
+    children: i
   });
 };
 export {
-  x as Icon
+  S as Icon
 };

package/dist/components/IconPicker/IconPicker2.js

@@ -1,54 +1,68 @@
 import './IconPicker.css';
-import { Icon as _ } from "../Icon/Icon2.js";
-import { Tooltip as g } from "../Tooltip/Tooltip2.js";
-import { InputSearch as k } from "../InputSearch/InputSearch2.js";
+import { Icon as N } from "../Icon/Icon2.js";
+import { Tooltip as v } from "../Tooltip/Tooltip2.js";
+import { InputSearch as y } from "../InputSearch/InputSearch2.js";
 /* empty css           */
-import { useMemo as a, useState as v } from "react";
-import { iconMap as N } from "@memobit/icons/map";
-import { jsx as c, jsxs as S } from "react/jsx-runtime";
-import { iconAliases as b } from "@memobit/icons";
-var y = Object.keys(N), M = ({ color: s, emptyLabel: p = "No icons match", icons: n, onChange: m, placeholder: h = "Search icons...", value: d }) => {
-  const [i, u] = v(""), o = a(() => n ?? y, [n]), t = a(() => {
-    const e = i.trim().toLowerCase();
-    if (!e) return o;
-    const f = e.replace(/[\s-]+/g, ""), l = (r) => r.includes(e) || r.replace(/-/g, "").includes(f);
-    return o.filter((r) => l(r) || (b[r] ?? []).some(l));
-  }, [o, i]);
-  return /* @__PURE__ */ S("div", {
+import { useEffect as C, useMemo as h, useState as d } from "react";
+import { canLoadMoreIcons as S, iconMap as b, loadAllIcons as j } from "@memobit/icons/map";
+import { jsx as c, jsxs as A } from "react/jsx-runtime";
+import { iconAliases as L } from "@memobit/icons";
+var T = S ? null : Object.keys(b), q = ({ color: a, emptyLabel: u = "No icons match", icons: o, onChange: f, placeholder: _ = "Search icons...", value: g }) => {
+  const [s, k] = d(""), [r, I] = d(T);
+  C(() => {
+    if (r || o) return;
+    let e = !0;
+    return j().then((l) => {
+      e && I(Object.keys(l));
+    }, () => {
+    }), () => {
+      e = !1;
+    };
+  }, [r, o]);
+  const t = h(() => o ?? r ?? [], [r, o]), p = !o && !r, n = h(() => {
+    const e = s.trim().toLowerCase();
+    if (!e) return t;
+    const l = e.replace(/[\s-]+/g, ""), m = (i) => i.includes(e) || i.replace(/-/g, "").includes(l);
+    return t.filter((i) => m(i) || (L[i] ?? []).some(m));
+  }, [t, s]);
+  return /* @__PURE__ */ A("div", {
     className: "icon-picker",
     children: [
       /* @__PURE__ */ c("div", {
         className: "icon-picker__search",
-        children: /* @__PURE__ */ c(k, {
+        children: /* @__PURE__ */ c(y, {
           autoFocus: !0,
-          onChange: u,
-          placeholder: h,
-          value: i
+          onChange: k,
+          placeholder: _,
+          value: s
         })
       }),
       /* @__PURE__ */ c("div", {
         className: "icon-picker__grid",
-        children: t.length === 0 ? /* @__PURE__ */ c("p", {
+        children: p ? /* @__PURE__ */ c("p", {
           className: "icon-picker__empty",
-          children: p
-        }) : t.map((e) => /* @__PURE__ */ c(g, {
+          children: "Loading icons..."
+        }) : n.length === 0 ? /* @__PURE__ */ c("p", {
+          className: "icon-picker__empty",
+          children: u
+        }) : n.map((e) => /* @__PURE__ */ c(v, {
           title: e,
           children: /* @__PURE__ */ c("button", {
-            className: `icon-picker__icon${d === e ? " is-selected" : ""}`,
-            onClick: () => m?.(e),
-            style: s ? { color: s } : void 0,
+            className: `icon-picker__icon${g === e ? " is-selected" : ""}`,
+            onClick: () => f?.(e),
+            style: a ? { color: a } : void 0,
             type: "button",
-            children: /* @__PURE__ */ c(_, { name: e })
+            children: /* @__PURE__ */ c(N, { name: e })
           })
         }, e))
       }),
-      /* @__PURE__ */ c("p", {
+      !p && /* @__PURE__ */ c("p", {
         className: "icon-picker__count",
-        children: t.length === o.length ? `${o.length} icons` : `${t.length} of ${o.length}`
+        children: n.length === t.length ? `${t.length} icons` : `${n.length} of ${t.length}`
       })
     ]
   });
 };
 export {
-  M as IconPicker
+  q as IconPicker
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 493,
+    libBuildNumber: 496,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -1072,7 +1072,7 @@ export declare interface DataViewColumn<T> {
     minWidth?: number;
     hideInCard?: boolean;
     hideInTable?: boolean;
-    /** Hide this column only on mobile breakpoint (not when cards are used on desktop). */
+    /** Hide this column only on mobile breakpoint, in both table and card views (not when cards are used on desktop). */
     hideInMobile?: boolean;
 }
 

package/dist/version.js

@@ -1,4 +1,4 @@
-var I = "3.8.2", B = 493, L = "26077c7", _ = "2026-10-13T14:15:24.319Z", r = "493";
+var I = "3.9.0", B = 496, L = "4045b83", _ = "2026-10-14T11:27:44.843Z", r = "496";
 export {
   _ as LIB_BUILD_DATE,
   r as LIB_BUILD_ID,

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.8.2",
-  "buildNumber": 493,
-  "commit": "26077c7",
-  "buildDate": "2026-10-13T14:15:24.319Z"
+  "version": "3.9.0",
+  "buildNumber": 496,
+  "commit": "4045b83",
+  "buildDate": "2026-10-14T11:27:44.843Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",
@@ -80,7 +80,7 @@
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\""
   },
   "peerDependencies": {
-    "@memobit/icons": "^1.0.0",
+    "@memobit/icons": "^1.5.0",
     "@memobit/themes": "^1.0.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
@@ -121,6 +121,9 @@
     "vite-plugin-static-copy": "4.1.1"
   },
   "overrides": {
+    "@rushstack/ts-command-line": {
+      "argparse": "2.0.1"
+    },
     "brace-expansion@1": "1.1.21",
     "brace-expansion@5": "5.0.12",
     "esbuild": "0.28.2",
@@ -131,6 +134,9 @@
     "nanoid@3": "3.3.18",
     "picomatch@2": "2.3.2",
     "postcss": "8.5.28",
-    "source-map-js": "1.2.2"
+    "source-map-js": "1.2.2",
+    "vite-plugin-static-copy": {
+      "chokidar": "5.0.0"
+    }
   }
 }