@hybridcore/ui 1.6.24 → 1.6.25

package/dist/components/simple-pivot-table/index.js

@@ -1,19 +1,19 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Typography as a, Divider as f, TableContainer as I, Table as R, TableHead as j, TableRow as g, TableCell as r, TableBody as w, Box as D, IconButton as G } from "@mui/material";
-import { useSimplePivotTableLogic as J } from "./logic.js";
-import { SimplePivotTableRoot as M, SimplePivotTableHeader as O, SimplePivotTableContent as V, SimplePivotTableFooter as X, SimplePivotTableScrollHint as q } from "./styled.js";
-import { I as A } from "../../IconX-C2wmVYSK.js";
-const Z = (s) => {
+import { Typography as i, Divider as f, TableContainer as I, Table as R, TableHead as j, TableRow as v, TableCell as d, TableBody as w, Box as D, IconButton as G } from "@mui/material";
+import { useSimplePivotTableLogic as V } from "./logic.js";
+import { SimplePivotTableRoot as J, SimplePivotTableHeader as M, SimplePivotTableContent as O, SimplePivotTableValueHeadCell as X, SimplePivotTableFooter as q, SimplePivotTableScrollHint as A } from "./styled.js";
+import { I as E } from "../../IconX-C2wmVYSK.js";
+const _ = (s) => {
   const {
     title: m,
-    dimensions: n,
-    values: c,
+    dimensions: r,
+    values: n,
     data: h,
-    summaries: v,
+    summaries: S,
     selectedField: p,
-    selectedSummary: d,
+    selectedSummary: c,
     selectColumn: b,
-    clearSelection: S,
+    clearSelection: g,
     dimensionLabel: x,
     valueLabel: T,
     formatDimensionValue: y,
@@ -21,64 +21,60 @@ const Z = (s) => {
     getCellStyle: F,
     ownerState: o,
     scrollRef: N,
-    canScroll: k,
-    scrollModifierLabel: P,
+    canScroll: P,
+    scrollModifierLabel: k,
     sx: H,
     other: L
-  } = J(s), W = {
+  } = V(s), W = {
     title: m,
     description: s.description,
-    dimensions: n,
-    values: c,
+    dimensions: r,
+    values: n,
     data: h,
-    summaries: v
+    summaries: S
   };
   return /* @__PURE__ */ t(
-    M,
+    J,
     {
       ownerState: o,
       sx: H,
       "data-snapshot": JSON.stringify(W),
       ...L,
       children: [
-        /* @__PURE__ */ e(O, { ownerState: o, children: /* @__PURE__ */ e(a, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
+        /* @__PURE__ */ e(M, { ownerState: o, children: /* @__PURE__ */ e(i, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
         /* @__PURE__ */ e(f, {}),
-        /* @__PURE__ */ e(V, { ownerState: o, children: /* @__PURE__ */ e(I, { ref: N, children: /* @__PURE__ */ t(R, { size: "small", stickyHeader: !0, children: [
-          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ t(g, { children: [
-            n.map((l) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(a, { variant: "caption", fontWeight: 600, children: x(l) }) }, l.value)),
-            c.map((l) => /* @__PURE__ */ e(
-              r,
+        /* @__PURE__ */ e(O, { ownerState: o, children: /* @__PURE__ */ e(I, { ref: N, children: /* @__PURE__ */ t(R, { size: "small", stickyHeader: !0, children: [
+          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ t(v, { children: [
+            r.map((l) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: x(l) }) }, l.value)),
+            n.map((l) => /* @__PURE__ */ e(
+              X,
               {
+                ownerState: o,
+                selected: p === l.dataFieldName,
                 align: "right",
                 onClick: () => b(l.dataFieldName),
-                sx: {
-                  cursor: "pointer",
-                  ...p === l.dataFieldName && {
-                    backgroundColor: "action.selected"
-                  }
-                },
-                children: /* @__PURE__ */ e(a, { variant: "caption", fontWeight: 600, children: T(l) })
+                children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: T(l) })
               },
               l.dataFieldName
             ))
           ] }) }),
           /* @__PURE__ */ e(w, { children: h.map((l, z) => /* @__PURE__ */ t(
-            g,
+            v,
             {
               hover: !0,
               sx: { "&:last-child td": { borderBottom: 0 } },
               children: [
-                n.map((i) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(a, { variant: "body2", children: y(l[i.value], i) }) }, i.value)),
-                c.map((i) => {
+                r.map((a) => /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(i, { variant: "body2", children: y(l[a.value], a) }) }, a.value)),
+                n.map((a) => {
                   const u = F(
-                    l[i.dataFieldName],
-                    i.format
-                  ), B = p === i.dataFieldName;
+                    l[a.dataFieldName],
+                    a.format
+                  ), B = p === a.dataFieldName;
                   return /* @__PURE__ */ e(
-                    r,
+                    d,
                     {
                       align: "right",
-                      onClick: () => b(i.dataFieldName),
+                      onClick: () => b(a.dataFieldName),
                       sx: {
                         cursor: "pointer",
                         // Conditional background wins; otherwise tint the
@@ -86,16 +82,16 @@ const Z = (s) => {
                         backgroundColor: u.backgroundColor ?? (B ? "action.hover" : void 0)
                       },
                       children: /* @__PURE__ */ e(
-                        a,
+                        i,
                         {
                           variant: "body2",
                           fontWeight: 500,
                           color: u.color ?? "text.primary",
-                          children: C(l[i.dataFieldName], i)
+                          children: C(l[a.dataFieldName], a)
                         }
                       )
                     },
-                    i.dataFieldName
+                    a.dataFieldName
                   );
                 })
               ]
@@ -104,13 +100,13 @@ const Z = (s) => {
           )) })
         ] }) }) }),
         /* @__PURE__ */ e(f, {}),
-        /* @__PURE__ */ t(X, { ownerState: o, children: [
-          k && /* @__PURE__ */ e(q, { ownerState: o, children: /* @__PURE__ */ t(a, { variant: "caption", children: [
+        /* @__PURE__ */ t(q, { ownerState: o, children: [
+          P && /* @__PURE__ */ e(A, { ownerState: o, children: /* @__PURE__ */ t(i, { variant: "caption", children: [
             "Hold ",
-            P,
+            k,
             " to scroll"
           ] }) }),
-          d ? /* @__PURE__ */ t(
+          c ? /* @__PURE__ */ t(
             D,
             {
               sx: {
@@ -121,21 +117,21 @@ const Z = (s) => {
                 rowGap: 0.5
               },
               children: [
-                /* @__PURE__ */ e(a, { variant: "caption", fontWeight: 600, children: d.name }),
-                d.items.map((l) => /* @__PURE__ */ t(a, { variant: "caption", color: "text.secondary", children: [
+                /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: c.name }),
+                c.items.map((l) => /* @__PURE__ */ t(i, { variant: "caption", color: "text.secondary", children: [
                   l.label,
                   ": ",
                   l.value
                 ] }, l.label)),
-                /* @__PURE__ */ e(G, { size: "small", onClick: S, sx: { p: 0.25 }, children: /* @__PURE__ */ e(A, { size: 14 }) })
+                /* @__PURE__ */ e(G, { size: "small", onClick: g, sx: { p: 0.25 }, children: /* @__PURE__ */ e(E, { size: 14 }) })
               ]
             }
-          ) : /* @__PURE__ */ e(a, { variant: "caption", color: "text.disabled", children: "Select a column to summarize" })
+          ) : /* @__PURE__ */ e(i, { variant: "caption", color: "text.disabled", children: "Select a column to summarize" })
         ] })
       ]
     }
   );
 };
 export {
-  Z as SimplePivotTable
+  _ as SimplePivotTable
 };

package/dist/components/simple-pivot-table/styled.js

@@ -1,8 +1,8 @@
-import { styled as e, Paper as a, Box as t, alpha as l } from "@mui/material";
-const n = e(a, {
+import { styled as o, Paper as a, Box as t, TableCell as i, alpha as n } from "@mui/material";
+const p = o(a, {
   name: "HCSimplePivotTable",
   slot: "Root",
-  shouldForwardProp: (o) => o !== "ownerState"
+  shouldForwardProp: (e) => e !== "ownerState"
 })(() => ({
   height: "100%",
   display: "flex",
@@ -10,17 +10,17 @@ const n = e(a, {
   "&:hover .HCSimplePivotTable-scrollHint": {
     opacity: 1
   }
-})), r = e(t, {
+})), d = o(t, {
   name: "HCSimplePivotTable",
   slot: "Header",
-  shouldForwardProp: (o) => o !== "ownerState"
-})(({ theme: o }) => ({
+  shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
   flex: "0 0 auto",
-  padding: o.spacing(1.25, 2)
-})), p = e(t, {
+  padding: e.spacing(1.25, 2)
+})), s = o(t, {
   name: "HCSimplePivotTable",
   slot: "Content",
-  shouldForwardProp: (o) => o !== "ownerState"
+  shouldForwardProp: (e) => e !== "ownerState"
 })(() => ({
   position: "relative",
   display: "flex",
@@ -28,38 +28,53 @@ const n = e(a, {
   flex: "1 1 auto",
   minHeight: 0,
   overflow: "hidden"
-})), d = e(t, {
+})), c = o(i, {
+  name: "HCSimplePivotTable",
+  slot: "ValueHeadCell",
+  shouldForwardProp: (e) => e !== "ownerState" && e !== "selected"
+})(
+  ({ theme: e, selected: l }) => ({
+    cursor: "pointer",
+    // The sticky header must stay opaque or scrolled rows show through it, so
+    // the selection tint is layered *over* MUI's `background.default` instead
+    // of replacing it with the translucent `action.selected`.
+    ...l && {
+      backgroundImage: `linear-gradient(${e.palette.action.selected}, ${e.palette.action.selected})`
+    }
+  })
+), u = o(t, {
   name: "HCSimplePivotTable",
   slot: "ScrollHint",
-  shouldForwardProp: (o) => o !== "ownerState"
-})(({ theme: o }) => ({
+  shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
   // Pinned to the left of the footer; aggregations stay grouped on the right.
   marginRight: "auto",
-  padding: o.spacing(0.25, 1),
-  borderRadius: o.shape.borderRadius,
-  border: `1px solid ${o.palette.divider}`,
-  backgroundColor: l(o.palette.background.paper, 0.85),
-  color: o.palette.text.secondary,
+  padding: e.spacing(0.25, 1),
+  borderRadius: e.shape.borderRadius,
+  border: `1px solid ${e.palette.divider}`,
+  backgroundColor: n(e.palette.background.paper, 0.85),
+  color: e.palette.text.secondary,
   pointerEvents: "none",
   userSelect: "none",
   opacity: 0.5,
-  transition: o.transitions.create("opacity")
-})), s = e(t, {
+  transition: e.transitions.create("opacity")
+})), S = o(t, {
   name: "HCSimplePivotTable",
   slot: "Footer",
-  shouldForwardProp: (o) => o !== "ownerState"
-})(({ theme: o }) => ({
+  shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
   flex: "0 0 auto",
-  padding: o.spacing(1.25, 2),
+  padding: e.spacing(1.25, 2),
   display: "flex",
   justifyContent: "flex-end",
   alignItems: "flex-end",
-  gap: o.spacing(1)
+  gap: e.spacing(1)
 }));
 export {
-  p as SimplePivotTableContent,
-  s as SimplePivotTableFooter,
-  r as SimplePivotTableHeader,
-  n as SimplePivotTableRoot,
-  d as SimplePivotTableScrollHint
+  s as SimplePivotTableContent,
+  S as SimplePivotTableFooter,
+  d as SimplePivotTableHeader,
+  p as SimplePivotTableRoot,
+  u as SimplePivotTableScrollHint,
+  c as SimplePivotTableValueHeadCell
 };

package/dist/main.d.ts

@@ -3848,7 +3848,8 @@ declare module "@mui/material/styles" {
       | "header"
       | "content"
       | "footer"
-      | "scrollHint";
+      | "scrollHint"
+      | "valueHeadCell";
   }
 
   interface ComponentsPropsList {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.6.24",
+  "version": "1.6.25",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",