@memobit/libs 3.11.2 → 3.11.3

package/dist/components/DataView/DataView.CardView.js

@@ -1,80 +1,58 @@
-import { Icon as v } from "../Icon/Icon2.js";
-import { Tooltip as O } from "../Tooltip/Tooltip2.js";
-import { Checkbox as z } from "../Checkbox/Checkbox2.js";
-import { EmptyState as L } from "../EmptyState/EmptyState2.js";
-import { TimelineMobileSeparator as Q, calculateTimelineMarkers as X } from "../TimelineMarkers/TimelineMarkers2.js";
-import Y, { useMemo as M } from "react";
-import { Fragment as R, jsx as a, jsxs as c } from "react/jsx-runtime";
-var la = [
-  15,
-  30,
-  50,
-  100,
-  250,
-  500
-], oa = (t) => typeof t.header == "string" ? t.header : t.key, W = (t) => typeof t == "number" ? `${t}px` : t, aa = (t) => /* @__PURE__ */ c("span", {
-  className: "data-view__column-label",
-  children: [t.icon && /* @__PURE__ */ a(v, {
-    className: "data-view__column-icon",
-    name: t.icon,
-    size: "sm",
-    variant: "muted"
-  }), /* @__PURE__ */ a("span", { children: t.header })]
-}), ea = (t, l) => {
-  const h = t.cellIcon?.(l), n = t.accessor ? t.accessor(l) : l[t.key];
-  return h ? /* @__PURE__ */ c("span", {
-    className: "data-view__cell-with-icon",
-    children: [/* @__PURE__ */ a(v, {
-      className: "data-view__cell-icon",
-      name: h
-    }), /* @__PURE__ */ a("span", { children: n })]
-  }) : n;
-};
-function _a({ data: t, columns: l, rowKey: h, card: n, actions: g, timeline: o, onRowClick: _, rowHref: j, rowClassName: D, empty: r, selectable: w, selectedIds: V = [], pinnedIds: $, onToggleSelect: p, cardMaxWidth: C, isMobile: G = !1, groups: I, showGroupCount: T = !0, collapsible: N = !1, collapsedGroups: U, onToggleGroup: Z }) {
-  const P = l.filter((e) => !e.hideInCard && !(G && e.hideInMobile)), q = M(() => new Set($ ?? []), [$]), S = `data-view__cards${C !== void 0 ? " data-view__cards--grid" : ""}`, A = C !== void 0 ? { "--data-view-card-max-width": W(C) } : void 0, B = M(() => {
-    if (!o) return /* @__PURE__ */ new Map();
-    const e = t.map((s) => ({
-      id: o.idAccessor(s),
-      date: o.dateAccessor(s)
+import { Icon as y } from "../Icon/Icon2.js";
+import { Tooltip as U } from "../Tooltip/Tooltip2.js";
+import { Checkbox as F } from "../Checkbox/Checkbox2.js";
+import { EmptyState as M } from "../EmptyState/EmptyState2.js";
+import { calculateTimelineMarkers as X } from "../TimelineMarkers/calculateTimelineMarkers.js";
+import { TimelineMobileSeparator as Y } from "../TimelineMarkers/TimelineMarkers2.js";
+import { renderCellContent as Z, renderColumnLabel as R } from "./DataView.helpers.js";
+import W, { useMemo as j } from "react";
+import { Fragment as aa, jsx as a, jsxs as c } from "react/jsx-runtime";
+var ea = (n) => typeof n == "number" ? `${n}px` : n;
+function ma({ data: n, columns: z, rowKey: V, card: s, actions: b, timeline: l, onRowClick: o, rowHref: D, rowClassName: E, empty: r, selectable: u, selectedIds: L = [], pinnedIds: k, onToggleSelect: _, cardMaxWidth: N, isMobile: q = !1, groups: g, showGroupCount: B = !0, collapsible: v = !1, collapsedGroups: G, onToggleGroup: H }) {
+  const $ = z.filter((e) => !e.hideInCard && !(q && e.hideInMobile)), J = j(() => new Set(k ?? []), [k]), I = `data-view__cards${N !== void 0 ? " data-view__cards--grid" : ""}`, P = N !== void 0 ? { "--data-view-card-max-width": ea(N) } : void 0, O = j(() => {
+    if (!l) return /* @__PURE__ */ new Map();
+    const e = n.map((i) => ({
+      id: l.idAccessor(i),
+      date: l.dateAccessor(i)
     }));
-    return X(e, o.granularity);
-  }, [t, o]);
-  if (t.length === 0)
-    return r ? /* @__PURE__ */ a(L, {
+    return X(e, l.granularity);
+  }, [n, l]);
+  if (n.length === 0)
+    return r ? /* @__PURE__ */ a(M, {
       title: r.title,
       description: r.description,
       icon: r.icon,
       primary: r.primary,
       secondary: r.secondary
-    }) : /* @__PURE__ */ a(L, { title: "No data available" });
-  const x = (e, s) => {
-    const u = B.get(s), d = h(e, s), m = w && V.includes(d), f = q.has(d), y = j?.(e), H = !!_ || !!y, b = n?.accentColor?.(e), E = `data-view__card ${H ? "data-view__card--clickable" : ""} ${m ? "data-view__card--selected" : ""} ${f ? "data-view__card--pinned" : ""} ${b ? "data-view__card--accent" : ""} ${D?.(e) || ""}`, F = b ? { "--data-view-card-accent-color": b } : void 0, J = (i) => {
-      i.metaKey || i.ctrlKey || i.shiftKey || i.altKey || i.button !== 0 || _ && (i.preventDefault(), _(e, i));
-    }, K = /* @__PURE__ */ c(R, { children: [
-      f && /* @__PURE__ */ a(O, {
+    }) : /* @__PURE__ */ a(M, { title: "No data available" });
+  const x = (e, i) => {
+    const h = O.get(i), d = V(e, i), m = u && L.includes(d), p = J.has(d), f = D?.(e), Q = !!o || !!f, w = s?.accentColor?.(e), K = `data-view__card ${Q ? "data-view__card--clickable" : ""} ${m ? "data-view__card--selected" : ""} ${p ? "data-view__card--pinned" : ""} ${w ? "data-view__card--accent" : ""} ${E?.(e) || ""}`, S = w ? { "--data-view-card-accent-color": w } : void 0, T = (t) => {
+      t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || t.button !== 0 || o && (t.preventDefault(), o(e, t));
+    }, A = /* @__PURE__ */ c(aa, { children: [
+      p && /* @__PURE__ */ a(U, {
         title: "Pinned",
         children: /* @__PURE__ */ a("span", {
           className: "data-view__card-pin",
-          children: /* @__PURE__ */ a(v, {
+          children: /* @__PURE__ */ a(y, {
             name: "pin",
             size: "sm"
           })
         })
       }),
-      w && p && !n && /* @__PURE__ */ a("div", {
+      u && _ && !s && /* @__PURE__ */ a("div", {
         className: "data-view__card-select",
-        onClick: (i) => i.stopPropagation(),
-        children: /* @__PURE__ */ a(z, {
+        onClick: (t) => t.stopPropagation(),
+        children: /* @__PURE__ */ a(F, {
           checked: m || !1,
-          onChange: (i) => p(d, i)
+          onChange: (t) => _(d, t)
         })
       }),
-      n?.media && /* @__PURE__ */ a("div", {
+      s?.media && /* @__PURE__ */ a("div", {
         className: "data-view__card-media",
-        children: n.media(e)
+        children: s.media(e)
       }),
-      n && (() => {
-        const i = n.icon?.(e);
+      s && (() => {
+        const t = s.icon?.(e);
         return /* @__PURE__ */ c("div", {
           className: "data-view__card-header",
           children: [/* @__PURE__ */ c("div", {
@@ -82,112 +60,108 @@ function _a({ data: t, columns: l, rowKey: h, card: n, actions: g, timeline: o,
             children: [/* @__PURE__ */ c("div", {
               className: "data-view__card-title-line",
               children: [
-                w && p && /* @__PURE__ */ a("div", {
+                u && _ && /* @__PURE__ */ a("div", {
                   className: "data-view__card-select",
-                  onClick: (k) => k.stopPropagation(),
-                  children: /* @__PURE__ */ a(z, {
+                  onClick: (C) => C.stopPropagation(),
+                  children: /* @__PURE__ */ a(F, {
                     checked: m || !1,
-                    onChange: (k) => p(d, k)
+                    onChange: (C) => _(d, C)
                   })
                 }),
-                i && /* @__PURE__ */ a(v, {
+                t && /* @__PURE__ */ a(y, {
                   className: "data-view__card-icon",
-                  name: i
+                  name: t
                 }),
                 /* @__PURE__ */ a("span", {
                   className: "data-view__card-title",
-                  children: n.title(e)
+                  children: s.title(e)
                 })
               ]
-            }), n.subtitle && /* @__PURE__ */ a("span", {
+            }), s.subtitle && /* @__PURE__ */ a("span", {
               className: "data-view__card-subtitle",
-              children: n.subtitle(e)
+              children: s.subtitle(e)
             })]
-          }), n.badges && /* @__PURE__ */ a("div", {
+          }), s.badges && /* @__PURE__ */ a("div", {
             className: "data-view__card-badges",
-            children: n.badges(e)
+            children: s.badges(e)
           })]
         });
       })(),
-      P.length > 0 && /* @__PURE__ */ a("div", {
+      $.length > 0 && /* @__PURE__ */ a("div", {
         className: "data-view__card-body",
-        children: P.map((i) => /* @__PURE__ */ c("div", {
+        children: $.map((t) => /* @__PURE__ */ c("div", {
           className: "data-view__card-field",
           children: [/* @__PURE__ */ a("span", {
             className: "data-view__card-label",
-            children: aa(i)
+            children: R(t)
           }), /* @__PURE__ */ a("span", {
             className: "data-view__card-value",
-            children: ea(i, e)
+            children: Z(t, e)
           })]
-        }, i.key))
+        }, t.key))
       }),
-      g && /* @__PURE__ */ a("div", {
+      b && /* @__PURE__ */ a("div", {
         className: "data-view__card-actions",
-        onClick: (i) => i.stopPropagation(),
-        children: g(e)
+        onClick: (t) => t.stopPropagation(),
+        children: b(e)
       })
     ] });
-    return /* @__PURE__ */ c(Y.Fragment, { children: [u && /* @__PURE__ */ a(Q, { marker: u }), y ? /* @__PURE__ */ a("a", {
-      className: E,
-      href: y,
-      style: F,
-      onClick: J,
-      children: K
+    return /* @__PURE__ */ c(W.Fragment, { children: [h && /* @__PURE__ */ a(Y, { marker: h }), f ? /* @__PURE__ */ a("a", {
+      className: K,
+      href: f,
+      style: S,
+      onClick: T,
+      children: A
     }) : /* @__PURE__ */ a("div", {
-      className: E,
-      style: F,
-      onClick: _ ? (i) => _(e, i) : void 0,
-      children: K
+      className: K,
+      style: S,
+      onClick: o ? (t) => o(e, t) : void 0,
+      children: A
     })] }, d);
   };
-  if (I) {
+  if (g) {
     let e = 0;
     return /* @__PURE__ */ a("div", {
       className: "data-view__groups",
-      children: I.map((s) => {
-        const u = e;
-        e += s.items.length;
-        const d = N && U?.has(s.key);
+      children: g.map((i) => {
+        const h = e;
+        e += i.items.length;
+        const d = v && G?.has(i.key);
         return /* @__PURE__ */ c("section", {
           className: "data-view__group",
           children: [/* @__PURE__ */ c("header", {
-            className: `data-view__group-header${N ? " data-view__group-header--collapsible" : ""}`,
-            onClick: N ? () => Z?.(s.key) : void 0,
+            className: `data-view__group-header${v ? " data-view__group-header--collapsible" : ""}`,
+            onClick: v ? () => H?.(i.key) : void 0,
             children: [
               /* @__PURE__ */ a("span", {
                 className: "data-view__group-label",
-                children: s.label
+                children: i.label
               }),
-              T && /* @__PURE__ */ a("span", {
+              B && /* @__PURE__ */ a("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}`
               }),
-              N && /* @__PURE__ */ a(v, {
+              v && /* @__PURE__ */ a(y, {
                 className: "data-view__group-chevron",
                 name: d ? "caret-down" : "caret-up",
                 size: "sm"
               })
             ]
           }), !d && /* @__PURE__ */ a("div", {
-            className: S,
-            style: A,
-            children: s.items.map((m, f) => x(m, u + f))
+            className: I,
+            style: P,
+            children: i.items.map((m, p) => x(m, h + p))
           })]
-        }, s.key ?? "__null__");
+        }, i.key ?? "__null__");
       })
     });
   }
   return /* @__PURE__ */ a("div", {
-    className: S,
-    style: A,
-    children: t.map((e, s) => x(e, s))
+    className: I,
+    style: P,
+    children: n.map((e, i) => x(e, i))
   });
 }
 export {
-  _a as CardView,
-  la as DEFAULT_PAGE_SIZES,
-  oa as getColumnLabel,
-  ea as renderCellContent,
-  aa as renderColumnLabel
+  ma as CardView
 };

package/dist/components/DataView/DataView.MiniSort.js

@@ -1,4 +1,4 @@
-import { getColumnLabel as a } from "./DataView.CardView.js";
+import { getColumnLabel as a } from "./DataView.helpers.js";
 import { MiniSort as s } from "../MiniSort/MiniSort2.js";
 import { jsx as d } from "react/jsx-runtime";
 function g({ columns: t, config: l, sortDirection: i, sortKey: c, onSort: e }) {

package/dist/components/DataView/DataView.helpers.js

@@ -0,0 +1,34 @@
+import { Icon as c } from "../Icon/Icon2.js";
+import "react";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+var m = [
+  15,
+  30,
+  50,
+  100,
+  250,
+  500
+], v = (e) => typeof e.header == "string" ? e.header : e.key, _ = (e) => /* @__PURE__ */ i("span", {
+  className: "data-view__column-label",
+  children: [e.icon && /* @__PURE__ */ a(c, {
+    className: "data-view__column-icon",
+    name: e.icon,
+    size: "sm",
+    variant: "muted"
+  }), /* @__PURE__ */ a("span", { children: e.header })]
+}), p = (e, r) => {
+  const n = e.cellIcon?.(r), s = e.accessor ? e.accessor(r) : r[e.key];
+  return n ? /* @__PURE__ */ i("span", {
+    className: "data-view__cell-with-icon",
+    children: [/* @__PURE__ */ a(c, {
+      className: "data-view__cell-icon",
+      name: n
+    }), /* @__PURE__ */ a("span", { children: s })]
+  }) : s;
+};
+export {
+  m as DEFAULT_PAGE_SIZES,
+  v as getColumnLabel,
+  p as renderCellContent,
+  _ as renderColumnLabel
+};