it-data-nexus-ui-library 2.9.1 → 2.9.3

package/dist/components/Charts/NexusHeatmap.mjs

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Caption as i,Body2 as l}from"../Typography.mjs";import{Stack as o}from"../_Primitives/Stack.mjs";import{ChartFrame as t}from"./chartFrame.mjs";function a({rows:a,columns:n,cells:s,statusMap:d,sx:c,title:m,titleComponent:p,titleSx:x,titleHidden:b,description:h,actions:g,isLoading:u,isError:f,errorMessage:$,paperSx:w}){const y=new Map(s.map(e=>[`${e.rowId}:${e.columnId}`,e]));return e(t,{title:m,titleComponent:p,titleSx:x,titleHidden:b,description:h,actions:g,isLoading:u,isError:f,errorMessage:$,paperSx:w,children:r(o,{sx:[{gap:.5},...Array.isArray(c)?c:c?[c]:[]],role:"table","aria-label":m??"Heatmap",children:[r(o,{direction:"row",role:"row",sx:{gap:.5},children:[e(o,{sx:{flex:"0 0 120px"}}),n.map(r=>e(o,{role:"columnheader",sx:{flex:1,alignItems:"center",minWidth:0},children:e(i,{sx:{textAlign:"center"},children:r.label})},r.id))]}),a.map(i=>r(o,{direction:"row",role:"row",sx:{gap:.5},children:[e(o,{role:"rowheader",sx:{flex:"0 0 120px",justifyContent:"center",minWidth:0},children:e(l,{children:i.label})}),n.map(r=>{const l=y.get(`${i.id}:${r.id}`),t=l?d[l.status]:void 0,a=l?.label??t?.label??"No data";if(!t)return e(o,{role:"cell","aria-label":`${a}: ${i.label}, ${r.label}`,sx:{flex:1,minHeight:40,border:1,borderColor:"divider",borderRadius:.5,bgcolor:"action.hover"}},r.id);const{Icon:n,color:s}=t;return e(o,{role:"cell",sx:{flex:1,minHeight:40,alignItems:"center",justifyContent:"center",border:1,borderColor:"divider",borderRadius:.5,bgcolor:"action.hover"},children:e(n,{"aria-label":`${a}: ${i.label}, ${r.label}`,titleAccess:`${a}: ${i.label}, ${r.label}`,sx:{color:s,fontSize:22}})},r.id)})]},i.id))]})})}a.displayName="NexusHeatmap";export{a as NexusHeatmap};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Caption as i,Body2 as l}from"../Typography.mjs";import{Stack as o}from"../_Primitives/Stack.mjs";import{ChartFrame as t}from"./chartFrame.mjs";function a({rows:a,columns:n,cells:s,statusMap:d,cellMinHeight:c=40,cellIconSize:m=22,sx:p,title:x,titleComponent:b,titleSx:h,titleHidden:g,description:u,actions:f,isLoading:$,isError:w,errorMessage:y,paperSx:H}){const S=new Map(s.map(e=>[`${e.rowId}:${e.columnId}`,e]));return e(t,{title:x,titleComponent:b,titleSx:h,titleHidden:g,description:u,actions:f,isLoading:$,isError:w,errorMessage:y,paperSx:H,children:r(o,{sx:[{gap:.5},...Array.isArray(p)?p:p?[p]:[]],role:"table","aria-label":x??"Heatmap",children:[r(o,{direction:"row",role:"row",sx:{gap:.5},children:[e(o,{sx:{flex:"0 0 120px"}}),n.map(r=>e(o,{role:"columnheader",sx:{flex:1,alignItems:"center",minWidth:0},children:e(i,{sx:{textAlign:"center"},children:r.label})},r.id))]}),a.map(i=>r(o,{direction:"row",role:"row",sx:{gap:.5},children:[e(o,{role:"rowheader",sx:{flex:"0 0 120px",justifyContent:"center",minWidth:0},children:e(l,{children:i.label})}),n.map(r=>{const l=S.get(`${i.id}:${r.id}`),t=l?d[l.status]:void 0,a=l?.label??t?.label??"No data";if(!t)return e(o,{role:"cell","aria-label":`${a}: ${i.label}, ${r.label}`,sx:{flex:1,minHeight:c,border:1,borderColor:"divider",borderRadius:.5,bgcolor:"action.hover"}},r.id);const{Icon:n,color:s}=t;return e(o,{role:"cell",sx:{flex:1,minHeight:c,alignItems:"center",justifyContent:"center",border:1,borderColor:"divider",borderRadius:.5,bgcolor:"action.hover"},children:e(n,{"aria-label":`${a}: ${i.label}, ${r.label}`,titleAccess:`${a}: ${i.label}, ${r.label}`,sx:{color:s,fontSize:m}})},r.id)})]},i.id))]})})}a.displayName="NexusHeatmap";export{a as NexusHeatmap};

package/dist/components/MetricCard.mjs

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{Card as l,CardContent as a}from"@mui/material";import{MetricStat as r}from"./MetricStat.mjs";const e={xs:0,sm:.3,md:.5,lg:1},i=({label:i,value:t,delta:m,deltaColor:n,valueColor:s,size:d,icon:c,iconColor:x,labelGap:b,alignValueToBottom:p,cardSx:u,sx:C})=>{const h=e[d??"md"];return o(l,{sx:[{boxShadow:"none"},...Array.isArray(u)?u:u?[u]:[]],children:o(a,{sx:{p:h,...p?{height:"100%",boxSizing:"border-box"}:{},"&:last-child":{pb:h}},children:o(r,{label:i,value:t,delta:m,deltaColor:n,valueColor:s,size:d,icon:c,iconColor:x,labelGap:b,alignValueToBottom:p,sx:C})})})};i.displayName="MetricCard";export{i as MetricCard};
+import{jsx as o}from"react/jsx-runtime";import{Card as l,CardContent as a}from"@mui/material";import{MetricStat as e}from"./MetricStat.mjs";const r={xs:0,sm:.3,md:.5,lg:1},i=({label:i,value:t,delta:n,deltaColor:m,valueColor:c,size:s,icon:d,iconColor:p,iconSize:u,valueRowGap:x,labelGap:b,alignValueToBottom:C,cardSx:h,sx:v})=>{const S=r[s??"md"];return o(l,{sx:[{boxShadow:"none"},...Array.isArray(h)?h:h?[h]:[]],children:o(a,{sx:{p:S,...C?{height:"100%",boxSizing:"border-box"}:{},"&:last-child":{pb:S}},children:o(e,{label:i,value:t,delta:n,deltaColor:m,valueColor:c,size:s,icon:d,iconColor:p,iconSize:u,valueRowGap:x,labelGap:b,alignValueToBottom:C,sx:v})})})};i.displayName="MetricCard";export{i as MetricCard};

package/dist/components/MetricStat.mjs

@@ -1 +1 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Stack as r}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as t,Caption as l}from"./Typography.mjs";const a=({label:a,value:n,delta:s,deltaColor:c,valueColor:m,size:d,icon:p,iconColor:x,labelGap:h=.25,alignValueToBottom:g=!1,sx:f})=>e(r,{sx:[{gap:h,...g?{height:"100%",justifyContent:"space-between"}:{}},...Array.isArray(f)?f:f?[f]:[]],children:[o(i,{sx:{color:"text.secondary"},children:a}),e(r,{direction:"row",sx:{alignItems:"center",gap:1},children:[p&&o(p,{"aria-hidden":"true",sx:{color:x,fontSize:"lg"===d?40:"sm"===d?28:"xs"===d?22:34}}),o(t,{size:d,sx:m?{color:m}:void 0,children:n}),s&&o(l,{component:"span",sx:[{alignSelf:"flex-end",pb:.25},...c?[{color:c}]:[]],children:s})]})]});a.displayName="MetricStat";export{a as MetricStat};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Stack as r}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as l,Caption as t}from"./Typography.mjs";const a=({label:a,value:n,delta:s,deltaColor:c,valueColor:m,size:p,icon:d,iconColor:x,iconSize:h,valueRowGap:g=1,labelGap:f=.25,alignValueToBottom:u=!1,sx:y})=>e(r,{sx:[{gap:f,...u?{height:"100%",justifyContent:"space-between"}:{}},...Array.isArray(y)?y:y?[y]:[]],children:[o(i,{sx:{color:"text.secondary"},children:a}),e(r,{direction:"row",sx:{alignItems:"center",gap:g},children:[d&&o(d,{"aria-hidden":"true",sx:{color:x,fontSize:h??("lg"===p?40:"sm"===p?28:"xs"===p?22:34)}}),o(l,{size:p,sx:m?{color:m}:void 0,children:n}),s&&o(t,{component:"span",sx:[{alignSelf:"flex-end",pb:.25},...c?[{color:c}]:[]],children:s})]})]});a.displayName="MetricStat";export{a as MetricStat};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.9.1";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.9.3";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -635,6 +635,10 @@ interface MetricStatProps {
     icon?: typeof SvgIcon;
     /** MUI theme colour token for the icon. Omit for default text colour. */
     iconColor?: string;
+    /** Optional icon size in pixels. Defaults to the size associated with the metric value. */
+    iconSize?: number;
+    /** Gap between the icon, value, and delta row items. Defaults to 1. */
+    valueRowGap?: number | string;
     /** Gap between the metric label and the value row. Defaults to 0.25. */
     labelGap?: number | string;
     /** Align the value row to the bottom when the metric has a constrained height. */
@@ -653,7 +657,7 @@ interface MetricStatProps {
  * large p — not a heading), and the delta is a Caption.
  */
 declare const MetricStat: {
-    ({ label, value, delta, deltaColor, valueColor, size, icon: Icon, iconColor, labelGap, alignValueToBottom, sx, }: MetricStatProps): react.JSX.Element;
+    ({ label, value, delta, deltaColor, valueColor, size, icon: Icon, iconColor, iconSize, valueRowGap, labelGap, alignValueToBottom, sx, }: MetricStatProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -672,7 +676,7 @@ interface MetricCardProps extends MetricStatProps {
  * ```
  */
 declare const MetricCard: {
-    ({ label, value, delta, deltaColor, valueColor, size, icon, iconColor, labelGap, alignValueToBottom, cardSx, sx, }: MetricCardProps): react.JSX.Element;
+    ({ label, value, delta, deltaColor, valueColor, size, icon, iconColor, iconSize, valueRowGap, labelGap, alignValueToBottom, cardSx, sx, }: MetricCardProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -1377,9 +1381,13 @@ interface NexusHeatmapProps extends ChartAsyncProps {
     columns: NexusHeatmapAxisItem[];
     cells: NexusHeatmapCell[];
     statusMap: Record<string, NexusHeatmapStatus>;
+    /** Minimum height of each heatmap cell. Defaults to 40. */
+    cellMinHeight?: number;
+    /** Icon size in px for populated heatmap cells. Defaults to 22. */
+    cellIconSize?: number;
     sx?: SxProps<Theme>;
 }
-declare function NexusHeatmap({ rows, columns, cells, statusMap, sx, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, }: NexusHeatmapProps): react.JSX.Element;
+declare function NexusHeatmap({ rows, columns, cells, statusMap, cellMinHeight, cellIconSize, sx, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, }: NexusHeatmapProps): react.JSX.Element;
 declare namespace NexusHeatmap {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-data-nexus-ui-library",
-  "version": "2.9.1",
+  "version": "2.9.3",
   "description": "Nexus core components",
   "license": "ISC",
   "author": "emsmart-sage",