@sis-cc/dotstatsuite-visions 15.12.0 → 15.13.0

package/dist/TableHtml5/TableHtml5.js

@@ -29,6 +29,22 @@ const getValue = labelAccessor => item => R.has('values', item) ? R.reduce((acc,
   parents: [],
   label: labelAccessor(item.values)
 }, item.values) : R.pipe(R.prop('value'), val => R.assoc('label', labelAccessor(val), val))(item);
+const getCellKey = (xKey, sectionKey, yKey) => `${xKey}|${sectionKey}|${yKey}`;
+
+// cells nests one cell per x, section and y key: { [x]: { [section]: { [y]: [cell] } } }.
+// Flattened once per table so rendering a cell is a Map lookup, not a four-level path walk.
+const indexCells = cells => {
+  const index = new Map();
+  for (const [xKey, sections] of Object.entries(cells ?? {})) {
+    for (const [sectionKey, rows] of Object.entries(sections ?? {})) {
+      for (const [yKey, row] of Object.entries(rows ?? {})) {
+        const cell = row?.[0];
+        if (!R.isNil(cell)) index.set(getCellKey(xKey, sectionKey, yKey), cell);
+      }
+    }
+  }
+  return index;
+};
 const defaultLabelAccessor = item => {
   if (R.is(Object, item)) {
     return R.prop('name', item);
@@ -37,7 +53,7 @@ const defaultLabelAccessor = item => {
 };
 
 const flagStylePath = (theme) => R.pathOr({}, ["mixins", "table", "flag"], theme);
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   content: {
     borderRadius: 3,
     boxSizing: "border-box",
@@ -76,7 +92,7 @@ const Flags = (t0) => {
     labelAccessor
   } = t0;
   const flags = t1 === void 0 ? EMPTY_FLAGS : t1;
-  const classes = useStyles$6();
+  const classes = useStyles$5();
   const theme = useTheme();
   const noFlags = R.isNil(flags) || R.isEmpty(flags);
   const {
@@ -271,7 +287,7 @@ function _temp$2(acc, flag) {
   return R.when(R.always(R.has("code", flag)), R.append(flag.code))(acc);
 }
 
-const useStyles$5 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   columnsTitle: {
     position: "sticky",
     zIndex: 1,
@@ -336,7 +352,7 @@ const SubHeader = React.forwardRef((t0, refs) => {
     HTMLRenderer,
     labelAccessor
   } = t0;
-  const classes = useStyles$5();
+  const classes = useStyles$4();
   const theme = useTheme();
   let t1;
   if ($[0] !== theme) {
@@ -438,44 +454,13 @@ const SubHeader = React.forwardRef((t0, refs) => {
   return t7;
 });
 
-const useStyles$4 = makeStyles((theme) => ({
-  cell: {
-    borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
-    borderRight: `1.5px solid ${theme.palette.grey[500]}`,
-    padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
-    verticalAlign: "baseline",
-    color: theme.palette.grey["A700"],
-    "&:hover": {
-      boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`
-    },
-    whiteSpace: "pre-wrap",
-    borderCollapse: "collapse"
-  },
-  active: {
-    boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`
-  },
-  highlight: theme.mixins.table.cellHighlight,
-  oneCell: {
-    border: `thin solid ${theme.palette.grey[500]}`,
-    display: "block"
-    // MUI TableCell is inline-block
-  },
-  link: {
-    position: "inherit",
-    userSelect: "inherit"
-  },
-  value: {
-    overflow: "inherit"
-  }
-}));
-const isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
 const EMPTY_INDEXED_DIM_VAL_IDS = {};
 const Cell = (t0) => {
-  const $ = c(37);
+  const $ = c(36);
   const {
+    classes,
     flags,
     value,
-    intValue,
     headers,
     isOne,
     indexedDimValIds: t1,
@@ -490,8 +475,8 @@ const Cell = (t0) => {
     textAlign
   } = t0;
   const indexedDimValIds = t1 === void 0 ? EMPTY_INDEXED_DIM_VAL_IDS : t1;
-  const classes = useStyles$4();
   const isRtl = getIsRtl(useTheme());
+  const Component = isOne ? "div" : "td";
   let t2;
   if ($[0] !== flags) {
     t2 = !R.isNil(flags) && !R.isEmpty(flags);
@@ -516,11 +501,9 @@ const Cell = (t0) => {
     t3 = $[7];
   }
   const uiValue = t3;
-  const t4 = isValidNumber(intValue) ? "right" : textAlign;
-  const t5 = isOne ? "div" : "td";
-  let t6;
+  let t4;
   if ($[8] !== classes.active || $[9] !== classes.cell || $[10] !== classes.highlight || $[11] !== classes.oneCell || $[12] !== isActive || $[13] !== isHighlight || $[14] !== isOne) {
-    t6 = cx(classes.cell, {
+    t4 = cx(classes.cell, {
       [classes.oneCell]: isOne,
       [classes.active]: isActive,
       [classes.highlight]: isHighlight
@@ -532,63 +515,62 @@ const Cell = (t0) => {
     $[12] = isActive;
     $[13] = isHighlight;
     $[14] = isOne;
-    $[15] = t6;
+    $[15] = t4;
   } else {
-    t6 = $[15];
+    t4 = $[15];
   }
-  const t7 = textAlign ? textAlign : isRtl ? "left" : "right";
-  let t8;
-  if ($[16] !== t7) {
-    t8 = {
-      textAlign: t7
+  const t5 = textAlign ? textAlign : isRtl ? "left" : "right";
+  let t6;
+  if ($[16] !== t5) {
+    t6 = {
+      textAlign: t5
     };
-    $[16] = t7;
-    $[17] = t8;
+    $[16] = t5;
+    $[17] = t6;
   } else {
-    t8 = $[17];
+    t6 = $[17];
   }
-  let t9;
+  let t7;
   if ($[18] !== SideIcon || $[19] !== classes.value || $[20] !== sideProps) {
-    t9 = !R.isNil(SideIcon) && /* @__PURE__ */ jsx(SideIcon, { sideProps, className: classes.value });
+    t7 = !R.isNil(SideIcon) && /* @__PURE__ */ jsx(SideIcon, { sideProps, className: classes.value });
     $[18] = SideIcon;
     $[19] = classes.value;
     $[20] = sideProps;
-    $[21] = t9;
+    $[21] = t7;
   } else {
-    t9 = $[21];
+    t7 = $[21];
   }
-  let t10;
+  let t8;
   if ($[22] !== HTMLRenderer || $[23] !== flags || $[24] !== hasFlag || $[25] !== labelAccessor) {
-    t10 = hasFlag && /* @__PURE__ */ jsx(Flags, { HTMLRenderer, flags, labelAccessor });
+    t8 = hasFlag && /* @__PURE__ */ jsx(Flags, { HTMLRenderer, flags, labelAccessor });
     $[22] = HTMLRenderer;
     $[23] = flags;
     $[24] = hasFlag;
     $[25] = labelAccessor;
-    $[26] = t10;
+    $[26] = t8;
   } else {
-    t10 = $[26];
+    t8 = $[26];
   }
-  let t11;
-  if ($[27] !== activeCellHandler || $[28] !== headers || $[29] !== t10 || $[30] !== t4 || $[31] !== t5 || $[32] !== t6 || $[33] !== t8 || $[34] !== t9 || $[35] !== uiValue) {
-    t11 = /* @__PURE__ */ jsxs(TableCell, { align: t4, component: t5, className: t6, headers, "aria-describedby": headers, onClick: activeCellHandler, tabIndex: 0, style: t8, children: [
-      t9,
-      t10,
+  let t9;
+  if ($[27] !== Component || $[28] !== activeCellHandler || $[29] !== headers || $[30] !== t4 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== uiValue) {
+    t9 = /* @__PURE__ */ jsxs(Component, { className: t4, headers, "aria-describedby": headers, onClick: activeCellHandler, tabIndex: 0, style: t6, children: [
+      t7,
+      t8,
       uiValue
     ] });
-    $[27] = activeCellHandler;
-    $[28] = headers;
-    $[29] = t10;
+    $[27] = Component;
+    $[28] = activeCellHandler;
+    $[29] = headers;
     $[30] = t4;
-    $[31] = t5;
-    $[32] = t6;
+    $[31] = t6;
+    $[32] = t7;
     $[33] = t8;
-    $[34] = t9;
-    $[35] = uiValue;
-    $[36] = t11;
+    $[34] = uiValue;
+    $[35] = t9;
   } else {
-    t11 = $[36];
+    t9 = $[35];
   }
-  return t11;
+  return t9;
 };
 
 const useStyles$3 = makeStyles((theme) => ({
@@ -886,7 +868,8 @@ const SectionComponent = (t0) => {
   const $ = c(17);
   const {
     headerData,
-    cells,
+    cellsIndex,
+    cellClasses,
     section,
     xLayoutDataLength,
     cellHandler,
@@ -986,9 +969,8 @@ const SectionComponent = (t0) => {
         const intersectionCellId = `${rowId}/${columnIndex}`;
         const isActive = R.pipe(R.propOr({}, "intersectionCellId"), R.equals(intersectionCellId))(activeCellIds);
         const missingValLabel = item.isEmpty || sectionbody.isEmpty ? "" : "..";
-        return /* @__PURE__ */ createElement(Cell, { ...R.pipe(R.pathOr({
-          value: null
-        }, [item.key, currentSection, sectionbody.key, 0]), R.over(R.lensProp("value"), (val) => R.isNil(val) ? missingValLabel : cellValueAccessor(val)))(cells), key: intersectionCellId, headers: `${rowIds} ${columnIds} ${currentSection}`, cellHandler, HTMLRenderer, labelAccessor, SideIcon, isActive, textAlign, isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]), activeCellHandler: R.is(Function)(activeCellHandler) ? () => activeCellHandler({
+        const cell_0 = cellsIndex.get(getCellKey(item.key, currentSection, sectionbody.key));
+        return /* @__PURE__ */ createElement(Cell, { ...cell_0, value: R.isNil(cell_0?.value) ? missingValLabel : cellValueAccessor(cell_0.value), key: intersectionCellId, classes: cellClasses, headers: `${rowIds} ${columnIds} ${currentSection}`, cellHandler, HTMLRenderer, labelAccessor, SideIcon, isActive, textAlign, isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]), activeCellHandler: R.is(Function)(activeCellHandler) ? () => activeCellHandler({
           [rowId]: R.not(isActive),
           [columnIndex]: R.not(isActive),
           intersectionCellId: isActive ? null : intersectionCellId
@@ -1178,6 +1160,37 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 2
   }
 }));
+const useCellStyles = makeStyles((theme) => ({
+  cell: {
+    ...theme.typography.body2,
+    ...R.pathOr({}, ["components", "MuiTableCell", "styleOverrides", "sizeSmall"], theme),
+    borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+    borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    verticalAlign: "baseline",
+    color: theme.palette.grey["A700"],
+    "&:hover": {
+      boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`
+    },
+    whiteSpace: "pre-wrap",
+    borderCollapse: "collapse"
+  },
+  active: {
+    boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`
+  },
+  highlight: theme.mixins.table.cellHighlight,
+  oneCell: {
+    border: `thin solid ${theme.palette.grey[500]}`,
+    display: "block"
+  },
+  link: {
+    position: "inherit",
+    userSelect: "inherit"
+  },
+  value: {
+    overflow: "inherit"
+  }
+}));
 const mapIndexed = R.addIndex(R.map);
 const getEnhancedValuesHeaderData = (data) => {
   const colLength = R.pipe(R.last, R.propOr([], "data"), R.length)(data);
@@ -1212,7 +1225,7 @@ const getCellsWidth = R.addIndex(R.reduce)((acc, element, index) => R.append(R.a
 const EMPTY_HEADER_DATA = [];
 const EMPTY_SECTIONS_DATA = [];
 const TableHtml5 = (t0) => {
-  const $ = c(71);
+  const $ = c(75);
   const {
     cells,
     headerData: t1,
@@ -1243,6 +1256,7 @@ const TableHtml5 = (t0) => {
   }
   const isNoWrap = t7;
   const classes = useStyles();
+  const cellClasses = useCellStyles();
   const [headerHeight, setHeaderHeight] = useState(0);
   let t8;
   if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
@@ -1347,117 +1361,128 @@ const TableHtml5 = (t0) => {
     valuesHeaderData,
     nbColumnsByRows
   } = t16;
+  let t17;
+  if ($[20] !== cells) {
+    t17 = indexCells(cells);
+    $[20] = cells;
+    $[21] = t17;
+  } else {
+    t17 = $[21];
+  }
+  const cellsIndex = t17;
   const isSingleObs = R.hasPath(["", "", "", 0], cells);
   if (isSingleObs) {
-    let t172;
-    if ($[20] !== cells) {
-      t172 = R.pathOr({}, ["", "", "", 0], cells);
-      $[20] = cells;
-      $[21] = t172;
+    let t182;
+    if ($[22] !== cells) {
+      t182 = R.pathOr({}, ["", "", "", 0], cells);
+      $[22] = cells;
+      $[23] = t182;
     } else {
-      t172 = $[21];
+      t182 = $[23];
     }
-    let t182;
-    if ($[22] !== HTMLRenderer || $[23] !== cellHandler || $[24] !== labelAccessor || $[25] !== t172 || $[26] !== textAlign) {
-      t182 = /* @__PURE__ */ jsx(Cell, { HTMLRenderer, labelAccessor, ...t172, cellHandler, isOne: true, textAlign });
-      $[22] = HTMLRenderer;
-      $[23] = cellHandler;
-      $[24] = labelAccessor;
-      $[25] = t172;
-      $[26] = textAlign;
-      $[27] = t182;
+    let t192;
+    if ($[24] !== HTMLRenderer || $[25] !== cellClasses || $[26] !== cellHandler || $[27] !== labelAccessor || $[28] !== t182 || $[29] !== textAlign) {
+      t192 = /* @__PURE__ */ jsx(Cell, { classes: cellClasses, HTMLRenderer, labelAccessor, ...t182, cellHandler, isOne: true, textAlign });
+      $[24] = HTMLRenderer;
+      $[25] = cellClasses;
+      $[26] = cellHandler;
+      $[27] = labelAccessor;
+      $[28] = t182;
+      $[29] = textAlign;
+      $[30] = t192;
     } else {
-      t182 = $[27];
+      t192 = $[30];
     }
-    return t182;
-  }
-  const t17 = classes.table;
-  let t18;
-  if ($[28] !== HTMLRenderer || $[29] !== headerData || $[30] !== labelAccessor || $[31] !== subHeadCellsWidth || $[32] !== valuesHeaderData || $[33] !== xLayoutDataLength) {
-    t18 = /* @__PURE__ */ jsx(Header, { headerData, valuesHeaderData, xLayoutDataLength, subHeadCellsWidth, HTMLRenderer, labelAccessor });
-    $[28] = HTMLRenderer;
-    $[29] = headerData;
-    $[30] = labelAccessor;
-    $[31] = subHeadCellsWidth;
-    $[32] = valuesHeaderData;
-    $[33] = xLayoutDataLength;
-    $[34] = t18;
-  } else {
-    t18 = $[34];
+    return t192;
   }
+  const t18 = classes.table;
   let t19;
-  if ($[35] !== HTMLRenderer || $[36] !== SideIcon || $[37] !== activeCellIds || $[38] !== headerData || $[39] !== labelAccessor || $[40] !== subHeadCellsWidth || $[41] !== xLayoutData) {
-    t19 = /* @__PURE__ */ jsx(SubHeader, { headerData, xLayoutData, activeCellIds, SideIcon, ref: subHeadCellsRef, subHeadCellsWidth, HTMLRenderer, labelAccessor });
-    $[35] = HTMLRenderer;
-    $[36] = SideIcon;
-    $[37] = activeCellIds;
-    $[38] = headerData;
-    $[39] = labelAccessor;
-    $[40] = subHeadCellsWidth;
-    $[41] = xLayoutData;
-    $[42] = t19;
+  if ($[31] !== HTMLRenderer || $[32] !== headerData || $[33] !== labelAccessor || $[34] !== subHeadCellsWidth || $[35] !== valuesHeaderData || $[36] !== xLayoutDataLength) {
+    t19 = /* @__PURE__ */ jsx(Header, { headerData, valuesHeaderData, xLayoutDataLength, subHeadCellsWidth, HTMLRenderer, labelAccessor });
+    $[31] = HTMLRenderer;
+    $[32] = headerData;
+    $[33] = labelAccessor;
+    $[34] = subHeadCellsWidth;
+    $[35] = valuesHeaderData;
+    $[36] = xLayoutDataLength;
+    $[37] = t19;
   } else {
-    t19 = $[42];
+    t19 = $[37];
   }
   let t20;
-  if ($[43] !== classes.stickyHeader || $[44] !== t18 || $[45] !== t19) {
-    t20 = /* @__PURE__ */ jsxs("thead", { ref: headerRef, className: classes.stickyHeader, children: [
-      t18,
-      t19
-    ] });
-    $[43] = classes.stickyHeader;
-    $[44] = t18;
-    $[45] = t19;
-    $[46] = t20;
+  if ($[38] !== HTMLRenderer || $[39] !== SideIcon || $[40] !== activeCellIds || $[41] !== headerData || $[42] !== labelAccessor || $[43] !== subHeadCellsWidth || $[44] !== xLayoutData) {
+    t20 = /* @__PURE__ */ jsx(SubHeader, { headerData, xLayoutData, activeCellIds, SideIcon, ref: subHeadCellsRef, subHeadCellsWidth, HTMLRenderer, labelAccessor });
+    $[38] = HTMLRenderer;
+    $[39] = SideIcon;
+    $[40] = activeCellIds;
+    $[41] = headerData;
+    $[42] = labelAccessor;
+    $[43] = subHeadCellsWidth;
+    $[44] = xLayoutData;
+    $[45] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[45];
   }
   let t21;
-  if ($[47] !== HTMLRenderer || $[48] !== SideIcon || $[49] !== activeCellHandler || $[50] !== activeCellIds || $[51] !== cellHandler || $[52] !== cellValueAccessor || $[53] !== cells || $[54] !== headerData || $[55] !== headerHeight || $[56] !== isNoWrap || $[57] !== labelAccessor || $[58] !== nbColumnsByRows || $[59] !== subHeadCellsWidth || $[60] !== textAlign || $[61] !== xLayoutDataLength) {
-    t21 = (section, index) => /* @__PURE__ */ jsx(Section, { sectionIndex: index, headerHeight, nbColumnsByRows, headerData, cells, section, xLayoutDataLength, cellHandler, activeCellIds, activeCellHandler, SideIcon, subHeadCellsWidth, HTMLRenderer, cellValueAccessor, labelAccessor, isNoWrap, textAlign }, `section-${index}`);
-    $[47] = HTMLRenderer;
-    $[48] = SideIcon;
-    $[49] = activeCellHandler;
-    $[50] = activeCellIds;
-    $[51] = cellHandler;
-    $[52] = cellValueAccessor;
-    $[53] = cells;
-    $[54] = headerData;
-    $[55] = headerHeight;
-    $[56] = isNoWrap;
-    $[57] = labelAccessor;
-    $[58] = nbColumnsByRows;
-    $[59] = subHeadCellsWidth;
-    $[60] = textAlign;
-    $[61] = xLayoutDataLength;
-    $[62] = t21;
+  if ($[46] !== classes.stickyHeader || $[47] !== t19 || $[48] !== t20) {
+    t21 = /* @__PURE__ */ jsxs("thead", { ref: headerRef, className: classes.stickyHeader, children: [
+      t19,
+      t20
+    ] });
+    $[46] = classes.stickyHeader;
+    $[47] = t19;
+    $[48] = t20;
+    $[49] = t21;
   } else {
-    t21 = $[62];
+    t21 = $[49];
   }
   let t22;
-  if ($[63] !== sectionsData || $[64] !== t21) {
-    t22 = mapIndexed(t21, sectionsData);
-    $[63] = sectionsData;
-    $[64] = t21;
-    $[65] = t22;
+  if ($[50] !== HTMLRenderer || $[51] !== SideIcon || $[52] !== activeCellHandler || $[53] !== activeCellIds || $[54] !== cellClasses || $[55] !== cellHandler || $[56] !== cellValueAccessor || $[57] !== cellsIndex || $[58] !== headerData || $[59] !== headerHeight || $[60] !== isNoWrap || $[61] !== labelAccessor || $[62] !== nbColumnsByRows || $[63] !== subHeadCellsWidth || $[64] !== textAlign || $[65] !== xLayoutDataLength) {
+    t22 = (section, index) => /* @__PURE__ */ jsx(Section, { sectionIndex: index, headerHeight, nbColumnsByRows, headerData, cellsIndex, cellClasses, section, xLayoutDataLength, cellHandler, activeCellIds, activeCellHandler, SideIcon, subHeadCellsWidth, HTMLRenderer, cellValueAccessor, labelAccessor, isNoWrap, textAlign }, `section-${index}`);
+    $[50] = HTMLRenderer;
+    $[51] = SideIcon;
+    $[52] = activeCellHandler;
+    $[53] = activeCellIds;
+    $[54] = cellClasses;
+    $[55] = cellHandler;
+    $[56] = cellValueAccessor;
+    $[57] = cellsIndex;
+    $[58] = headerData;
+    $[59] = headerHeight;
+    $[60] = isNoWrap;
+    $[61] = labelAccessor;
+    $[62] = nbColumnsByRows;
+    $[63] = subHeadCellsWidth;
+    $[64] = textAlign;
+    $[65] = xLayoutDataLength;
+    $[66] = t22;
   } else {
-    t22 = $[65];
+    t22 = $[66];
   }
   let t23;
-  if ($[66] !== classes.table || $[67] !== t20 || $[68] !== t22 || $[69] !== testId) {
-    t23 = /* @__PURE__ */ jsxs(Table, { className: t17, "aria-label": "table", size: "small", "data-testid": testId, children: [
-      t20,
-      t22
-    ] });
-    $[66] = classes.table;
-    $[67] = t20;
+  if ($[67] !== sectionsData || $[68] !== t22) {
+    t23 = mapIndexed(t22, sectionsData);
+    $[67] = sectionsData;
     $[68] = t22;
-    $[69] = testId;
-    $[70] = t23;
+    $[69] = t23;
+  } else {
+    t23 = $[69];
+  }
+  let t24;
+  if ($[70] !== classes.table || $[71] !== t21 || $[72] !== t23 || $[73] !== testId) {
+    t24 = /* @__PURE__ */ jsxs(Table, { className: t18, "aria-label": "table", size: "small", "data-testid": testId, children: [
+      t21,
+      t23
+    ] });
+    $[70] = classes.table;
+    $[71] = t21;
+    $[72] = t23;
+    $[73] = testId;
+    $[74] = t24;
   } else {
-    t23 = $[70];
+    t24 = $[74];
   }
-  return t23;
+  return t24;
 };
 
 export { TableHtml5, getEnhancedValuesHeaderData };