@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/dist/TableHtml5/TableHtml5.js

@@ -0,0 +1,1045 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { Fragment, memo, createElement, useState, useRef, useEffect, useMemo } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import * as R from 'ramda';
+import Table from '@mui/material/Table';
+import cx from 'classnames';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import { g as getIsRtl, a as getLight, b as getDark } from '../chunks/utils-kslX1mzh.js';
+import { visuallyHidden } from '@mui/utils';
+import MuiTooltip from '@mui/material/Tooltip';
+import { Asterisk } from '../Icons/Asterisk.js';
+import { u as useKeyboardEscapeHandler } from '../chunks/useKeybordEscapeHandler-DRsOrnwc.js';
+import Link from '@mui/material/Link';
+import TableBody from '@mui/material/TableBody';
+import Grid from '@mui/material/Grid';
+
+const getValue = labelAccessor => item =>
+  R.has('values', item)
+    ? R.reduce(
+        (acc, val) => ({
+          label: acc.label,
+          id: R.isEmpty(acc.id) ? val.id : `${acc.id}, ${val.id}`,
+          flags: R.concat(acc.flags, val.flags || []),
+          parents: R.concat(acc.parents, val.parents || []),
+        }),
+        { id: '', flags: [], parents: [], label: labelAccessor(item.values) },
+        item.values,
+      )
+    : R.pipe(R.prop('value'), val => R.assoc('label', labelAccessor(val), val))(item);
+
+const defaultLabelAccessor = item => {
+  if (R.is(Object, item)) {
+    return R.prop('name', item);
+  }
+  return R.pipe(R.pluck('name'), R.join(', '))(item);
+};
+
+const flagStylePath = (theme) => R.pathOr({}, ["mixins", "table", "flag"], theme);
+const useStyles$6 = makeStyles((theme) => ({
+  content: {
+    borderRadius: 3,
+    boxSizing: "border-box",
+    listStyleType: "none",
+    maxWidth: 270,
+    padding: 0,
+    margin: 0,
+    ...theme.typography.body1
+  },
+  flags: {
+    borderBottom: "1px dotted",
+    borderColor: "inherit",
+    margin: theme.spacing(0, 0.5),
+    whiteSpace: "nowrap",
+    display: "inline",
+    fontWeight: "bold",
+    fontStyle: "normal",
+    position: "relative",
+    verticalAlign: R.propOr("middle", "verticalAlign", flagStylePath(theme)),
+    ...R.propOr({}, "root", flagStylePath(theme))
+  },
+  svg: {
+    verticalAlign: R.propOr("middle", "verticalAlign", flagStylePath(theme))
+  },
+  header: {
+    color: theme.palette.getContrastText(theme.palette.primary.main)
+  }
+}));
+const Flags = ({ flags = [], isHeader, HTMLRenderer, labelAccessor }) => {
+  const classes = useStyles$6();
+  const theme = useTheme();
+  const noFlags = R.isNil(flags) || R.isEmpty(flags);
+  const { open, setOpen } = useKeyboardEscapeHandler();
+  if (noFlags) return null;
+  const hasUncoded = R.any(R.complement(R.has("code")), flags);
+  const codedIcons = R.pipe(
+    R.reduce((acc, flag) => R.when(R.always(R.has("code", flag)), R.append(flag.code))(acc), []),
+    R.join(R.propOr(",", "delimiters", flagStylePath(theme)))
+  )(flags);
+  const labels = R.map((flag) => {
+    const value = getValue(labelAccessor)(flag);
+    return R.isEmpty(labelAccessor(flag)) ? value.label : `${labelAccessor(flag)}: ${value.label}`;
+  }, flags);
+  const content = /* @__PURE__ */ jsx("ul", { "data-testid": "cell-flags-footnotes-content", className: classes.content, children: R.addIndex(R.map)(
+    (label, index) => /* @__PURE__ */ jsx("li", { children: R.is(Function, HTMLRenderer) ? /* @__PURE__ */ jsx(HTMLRenderer, { html: label }) : label }, index),
+    labels
+  ) });
+  return /* @__PURE__ */ jsx(
+    MuiTooltip,
+    {
+      tabIndex: 0,
+      "aria-label": R.join(", ", labels),
+      "aria-hidden": false,
+      title: content,
+      placement: "top",
+      open,
+      onOpen: () => setOpen(true),
+      onClose: () => setOpen(false),
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-testid": "cell-flags-footnotes-icon",
+          className: cx(classes.flags, { [classes.header]: isHeader }),
+          children: [
+            R.not(R.isEmpty(codedIcons)) && codedIcons,
+            R.and(R.not(R.isEmpty(codedIcons)), hasUncoded) && /* @__PURE__ */ jsx(React.Fragment, { children: R.propOr(",", "delimiters", flagStylePath(theme)) }),
+            hasUncoded && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx(Asterisk, { className: classes.svg, style: { fontSize: 11 } }),
+              /* @__PURE__ */ jsx(Typography, { style: visuallyHidden, children: `* ${labels}` })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+
+const useStyles$5 = makeStyles((theme) => ({
+  columnsTitle: {
+    position: "sticky",
+    zIndex: 1,
+    boxSizing: "border-box",
+    backgroundColor: getLight(theme) || theme.palette.secondary.light,
+    border: "none",
+    borderBottom: `1px solid ${theme.palette.grey[500]}`,
+    color: theme.palette.grey["A700"],
+    verticalAlign: "middle",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: "1px",
+      height: "100%",
+      backgroundColor: theme.palette.grey[500]
+    }
+    // backgroundColor: getLight(theme) || theme.palette.secondary.light,
+    // border: 'inherit',
+    // borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+    // borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+    // padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    // color: theme.palette.grey['A700'],
+    // verticalAlign: 'middle',
+    // position: 'sticky',
+    // zIndex: 1,
+    // outline: `1px solid ${theme.palette.grey[500]}`,
+    // borderCollapse: 'collapse',
+    // borderSpacing: 0
+  },
+  fillerCell: {
+    backgroundColor: theme.palette.grey[200],
+    border: "inherit",
+    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: "middle",
+    textAlign: "center",
+    color: theme.palette.grey["A700"],
+    zIndex: 1
+  },
+  cellContent: {
+    justifyContent: "flex-start",
+    display: "flex"
+  },
+  label: {
+    fontStyle: "italic",
+    fontWeight: "bold"
+  },
+  highlight: theme.mixins.table.cellHighlight
+}));
+const mapIndexed$4 = R.addIndex(R.map);
+const SubHeader = React.forwardRef(
+  ({
+    headerData,
+    xLayoutData,
+    activeCellIds,
+    subHeadCellsWidth,
+    SideIcon,
+    HTMLRenderer,
+    labelAccessor
+  }, refs) => {
+    const classes = useStyles$5();
+    const theme = useTheme();
+    const isRtl = getIsRtl(theme);
+    return /* @__PURE__ */ jsxs(TableRow, { children: [
+      mapIndexed$4(
+        (rowItem, index) => /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            component: "th",
+            className: classes.columnsTitle,
+            id: `subHeader_${index}`,
+            style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] },
+            ref: (element) => refs.current[index] = element,
+            scope: "col",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.cellContent,
+                "aria-label": R.path(["dimension", "id"], rowItem),
+                "data-testid": `row-dim`,
+                children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", tabIndex: 0, className: classes.label, children: [
+                  R.pipe(R.prop("dimension"), labelAccessor)(rowItem),
+                  /* @__PURE__ */ jsx(
+                    Flags,
+                    {
+                      labelAccessor,
+                      HTMLRenderer,
+                      flags: R.path(["dimension", "flags"], rowItem)
+                    }
+                  )
+                ] })
+              }
+            )
+          },
+          index
+        ),
+        xLayoutData
+      ),
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          className: classes.fillerCell,
+          style: isRtl ? { position: "sticky", right: R.last(subHeadCellsWidth) } : { position: "sticky", left: R.last(subHeadCellsWidth) }
+        }
+      ),
+      mapIndexed$4(
+        (item, index) => /* @__PURE__ */ jsxs(
+          TableCell,
+          {
+            className: cx(classes.fillerCell, {
+              [classes.highlight]: R.prop(index)(activeCellIds)
+            }),
+            children: [
+              !R.isNil(SideIcon) && /* @__PURE__ */ jsx(SideIcon, { sideProps: R.prop("sideProps", item) }),
+              /* @__PURE__ */ jsx(
+                Flags,
+                {
+                  flags: R.prop("flags", item),
+                  labelAccessor,
+                  HTMLRenderer
+                }
+              )
+            ]
+          },
+          index
+        ),
+        headerData
+      )
+    ] });
+  }
+);
+
+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"
+  },
+  rightAlign: {
+    // only for rtl layout !
+    // changed by right in rtl mode
+    textAlign: "right"
+  }
+}));
+const isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
+const Cell = ({
+  flags,
+  value,
+  intValue,
+  headers,
+  isOne,
+  indexedDimValIds = {},
+  cellHandler,
+  activeCellHandler,
+  isActive,
+  isHighlight,
+  sideProps,
+  SideIcon,
+  HTMLRenderer,
+  labelAccessor,
+  textAlign
+}) => {
+  const classes = useStyles$4();
+  const isRtl = getIsRtl(useTheme());
+  const hasFlag = R.not(R.isEmpty(flags));
+  const uiValue = R.is(Function, cellHandler) && !R.isEmpty(indexedDimValIds) ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      component: "button",
+      variant: "body1",
+      underline: "always",
+      onClick: () => cellHandler({ indexedDimValIds }),
+      className: classes.link,
+      children: R.is(Function, HTMLRenderer) ? /* @__PURE__ */ jsx(
+        HTMLRenderer,
+        {
+          html: value,
+          style: { float: isRtl && R.isNil(textAlign) ? "left" : textAlign }
+        }
+      ) : value
+    }
+  ) : R.is(Function, HTMLRenderer) ? /* @__PURE__ */ jsx(
+    HTMLRenderer,
+    {
+      html: value,
+      style: { float: isRtl && R.isNil(textAlign) ? "left" : textAlign }
+    }
+  ) : value;
+  return /* @__PURE__ */ jsxs(
+    TableCell,
+    {
+      align: isValidNumber(intValue) ? "right" : textAlign,
+      component: isOne ? "div" : "td",
+      className: cx(classes.cell, {
+        [classes.oneCell]: isOne,
+        [classes.active]: isActive,
+        [classes.highlight]: isHighlight,
+        [classes.rightAlign]: isRtl && R.isNil(textAlign)
+      }),
+      headers,
+      "aria-describedby": headers,
+      onClick: activeCellHandler,
+      tabIndex: 0,
+      style: { textAlign },
+      children: [
+        !R.isNil(SideIcon) && /* @__PURE__ */ jsx(SideIcon, { sideProps, className: classes.value }),
+        hasFlag && /* @__PURE__ */ jsx(Flags, { HTMLRenderer, flags, labelAccessor }),
+        uiValue
+      ]
+    }
+  );
+};
+
+const useStyles$3 = makeStyles((theme) => ({
+  section: {
+    borderCollapse: "collapse",
+    backgroundColor: getDark(theme) || theme.palette.secondary.dark,
+    border: "inherit",
+    borderBottom: `1px solid ${theme.palette.grey[500]}`,
+    borderRight: `1px solid ${theme.palette.grey[500]}`,
+    padding: theme.spacing(0, 1),
+    color: theme.palette.grey["A700"],
+    verticalAlign: "middle",
+    whiteSpace: "nowrap"
+  },
+  label: {
+    fontStyle: "italic",
+    fontWeight: "bold",
+    marginRight: theme.spacing(0.5)
+  },
+  containerSection: {
+    display: "flex",
+    alignItems: "center"
+  },
+  stickyHeaderSection: {
+    position: "sticky"
+  },
+  flag: {
+    height: "100%",
+    backgroundColor: getDark(theme) || theme.palette.secondary.dark,
+    paddingLeft: 12
+  },
+  leftLabelPosition: {
+    left: theme.spacing(1)
+  },
+  rightLabelPosition: {
+    right: theme.spacing(1)
+  },
+  sectionLabelsContainer: {
+    padding: theme.spacing(0.5, 0)
+  }
+}));
+const mapIndexed$3 = R.addIndex(R.map);
+const SectionHeader = ({
+  headerData,
+  section,
+  currentSection,
+  xLayoutDataLength,
+  headerHeight,
+  SideIcon,
+  HTMLRenderer,
+  labelAccessor
+}) => {
+  const classes = useStyles$3();
+  const theme = useTheme();
+  const isRtl = getIsRtl(theme);
+  if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, "data"]))(section)) return null;
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      className: classes.stickyHeaderSection,
+      style: { left: 0, top: headerHeight, zIndex: 2 },
+      children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          component: "th",
+          className: classes.section,
+          colSpan: R.pipe(R.length, R.inc, R.add(xLayoutDataLength))(headerData),
+          id: currentSection,
+          scope: "col",
+          children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              Grid,
+              {
+                item: true,
+                style: isRtl ? { position: "sticky", right: "8px" } : { position: "sticky", left: "8px" },
+                children: /* @__PURE__ */ jsx(Typography, { variant: "body1", component: "div", className: classes.containerSection, children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cx(
+                      classes.stickyHeaderSection,
+                      classes.leftLabelPosition,
+                      classes.sectionLabelsContainer
+                    ),
+                    children: [
+                      mapIndexed$3(
+                        (sectionHeader, index) => {
+                          const value = getValue(labelAccessor)(sectionHeader);
+                          return /* @__PURE__ */ jsxs(Fragment, { children: [
+                            index !== 0 && /* @__PURE__ */ jsx("br", {}),
+                            /* @__PURE__ */ jsxs(
+                              Typography,
+                              {
+                                noWrap: true,
+                                variant: "body1",
+                                component: "span",
+                                tabIndex: 0,
+                                className: classes.label,
+                                "data-testid": "section-dim",
+                                "aria-label": R.path(["dimension", "id"], sectionHeader),
+                                children: [
+                                  R.pipe(R.prop("dimension"), labelAccessor)(sectionHeader),
+                                  ":"
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Typography, { noWrap: true, variant: "body1", component: "span", tabIndex: 0, children: R.prop("label", value) }),
+                            /* @__PURE__ */ jsx(
+                              Flags,
+                              {
+                                HTMLRenderer,
+                                labelAccessor,
+                                flags: R.prop("flags", value)
+                              }
+                            )
+                          ] }, index);
+                        },
+                        R.path([0, "data"], section)
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+                        Flags,
+                        {
+                          HTMLRenderer,
+                          flags: R.path([0, "flags"], section),
+                          labelAccessor
+                        }
+                      ) })
+                    ]
+                  }
+                ) })
+              }
+            ),
+            !R.isNil(SideIcon) && /* @__PURE__ */ jsx(Grid, { item: true, style: { marginLeft: 40 }, children: /* @__PURE__ */ jsx(SideIcon, { sideProps: R.path([0, "sideProps"], section) }) })
+          ] })
+        }
+      )
+    },
+    section.key
+  );
+};
+
+const useStyles$2 = makeStyles((theme) => ({
+  rowTitle: {
+    backgroundColor: getLight(theme) || theme.palette.secondary.light,
+    border: "inherit",
+    borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+    borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    color: theme.palette.grey["A700"],
+    verticalAlign: "top",
+    align: "left",
+    borderCollapse: "collapse",
+    borderSpacing: 0
+  },
+  timePeriodCells: {
+    whiteSpace: "nowrap"
+  },
+  fillerCell: {
+    minWidth: "30px",
+    backgroundColor: theme.palette.grey[200],
+    verticalAlign: "top",
+    border: "inherit",
+    borderBottom: `1.5px solid ${theme.palette.grey[500]}`,
+    borderRight: `1.5px solid ${theme.palette.grey[500]}`,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    position: "sticky",
+    zIndex: 1
+  },
+  cellContent: {
+    display: "flex",
+    alignItems: "center"
+  },
+  flagContainer: {
+    display: "flex",
+    justifyContent: "center",
+    fontWeight: "bold"
+  },
+  topCell: {
+    paddingTop: 0
+  },
+  hierarchySpace: {
+    marginBottom: "auto"
+  },
+  highlight: theme.mixins.table.cellHighlight,
+  stickyHeader: {
+    position: "sticky",
+    zIndex: 1
+  }
+}));
+const mapIndexed$2 = R.addIndex(R.map);
+const SectionComponent = ({
+  headerData,
+  cells,
+  section,
+  xLayoutDataLength,
+  cellHandler,
+  activeCellHandler,
+  activeCellIds,
+  headerHeight,
+  sectionIndex,
+  nbColumnsByRows,
+  SideIcon,
+  subHeadCellsWidth,
+  HTMLRenderer,
+  labelAccessor,
+  cellValueAccessor,
+  isNoWrap,
+  textAlign
+}) => {
+  const classes = useStyles$2();
+  const currentSection = R.path([0, "key"], section);
+  const headerNumberRows = R.length(nbColumnsByRows);
+  const maxColumns = R.last(nbColumnsByRows);
+  const theme = useTheme();
+  const isRtl = getIsRtl(theme);
+  return /* @__PURE__ */ jsxs(TableBody, { children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        headerData,
+        section,
+        currentSection,
+        xLayoutDataLength,
+        headerHeight,
+        SideIcon,
+        HTMLRenderer,
+        labelAccessor
+      }
+    ),
+    mapIndexed$2(
+      (sectionbody, rowIndex) => {
+        const rowId = `${sectionbody.key}_${sectionIndex}_${rowIndex}`;
+        const rowIds = R.pipe(
+          R.map((index) => `${sectionbody.key}_${sectionIndex}_${index}`),
+          R.join(" ")
+        )(R.times(R.identity, R.length(R.prop("data", sectionbody))));
+        return /* @__PURE__ */ jsxs(TableRow, { children: [
+          R.times(
+            (index) => {
+              const cell = R.path(["data", index], sectionbody);
+              const value = R.isNil(cell) ? { label: "" } : getValue(labelAccessor)(cell);
+              const flags = R.propOr([], "flags", value);
+              const id = `${rowIndex}_${rowId}_${index}`;
+              const hierarchySpace = R.pipe(
+                R.propOr([], "parents"),
+                R.when(R.isNil, R.always([])),
+                R.length,
+                // eslint-disable-next-line no-irregular-whitespace
+                R.times(() => "·  ")
+              )(value);
+              return /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cx(classes.rowTitle, classes.stickyHeader, {
+                    [classes.highlight]: R.prop(rowId)(activeCellIds),
+                    [classes.timePeriodCells]: R.is(Function, isNoWrap) && isNoWrap(R.propOr({}, "dimension", cell))
+                  }),
+                  id,
+                  headers: `subHeader_${index} ${currentSection}`,
+                  component: "th",
+                  style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] },
+                  children: /* @__PURE__ */ jsxs("div", { className: classes.cellContent, children: [
+                    !R.isEmpty(hierarchySpace) && /* @__PURE__ */ jsx("div", { className: classes.hierarchySpace, children: hierarchySpace }),
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "body1",
+                        tabIndex: 0,
+                        "aria-describedby": `subHeader_${index} ${currentSection}`,
+                        children: [
+                          R.prop("label", value),
+                          /* @__PURE__ */ jsx(
+                            Flags,
+                            {
+                              HTMLRenderer,
+                              labelAccessor,
+                              flags
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                },
+                id
+              );
+            },
+            xLayoutDataLength
+            /*R.prop('data', sectionbody)*/
+          ),
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cx(classes.fillerCell, {
+                [classes.highlight]: R.prop(rowId)(activeCellIds)
+              }),
+              style: isRtl ? { right: R.last(subHeadCellsWidth) } : { left: R.last(subHeadCellsWidth) },
+              children: /* @__PURE__ */ jsxs("div", { className: classes.flagContainer, children: [
+                !R.isNil(SideIcon) && /* @__PURE__ */ jsx(SideIcon, { sideProps: R.prop("sideProps", sectionbody) }),
+                /* @__PURE__ */ jsx(
+                  Flags,
+                  {
+                    HTMLRenderer,
+                    labelAccessor,
+                    flags: R.prop("flags", sectionbody)
+                  }
+                )
+              ] })
+            }
+          ),
+          mapIndexed$2((item, columnIndex) => {
+            const columnIds = R.pipe(
+              R.times(R.identity),
+              R.map((rowIndex2) => {
+                const columnId = R.divide(
+                  columnIndex,
+                  R.divide(maxColumns, R.nth(rowIndex2, nbColumnsByRows))
+                );
+                return `${Math.floor(columnId || 0)}_${rowIndex2}`;
+              }),
+              R.join(" ")
+            )(headerNumberRows);
+            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({
+                  [rowId]: R.not(isActive),
+                  [columnIndex]: R.not(isActive),
+                  intersectionCellId: isActive ? null : intersectionCellId
+                }) : null
+              }
+            );
+          }, headerData)
+        ] }, rowId);
+      },
+      R.nth(1, section)
+    )
+  ] });
+};
+const Section = memo(SectionComponent);
+
+const useStyles$1 = makeStyles((theme) => ({
+  tableHeadCell: {
+    color: theme.palette.getContrastText(theme.palette.primary.main),
+    backgroundColor: theme.palette.primary.main,
+    border: "inherit",
+    borderBottom: `thin solid ${theme.palette.grey[500]}`,
+    borderRight: `thin solid ${theme.palette.grey[500]}`,
+    padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    verticalAlign: "top",
+    "&:focus ": {
+      opacity: ".85"
+    },
+    textAlign: "center"
+  },
+  cellContentCenter: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "sticky"
+  },
+  cellContentRight: {
+    display: "flex",
+    justifyContent: "flex-end",
+    fontStyle: "italic"
+  },
+  cellLabelHeader: {
+    fontStyle: "inherit",
+    fontWeight: "bold"
+  },
+  stickyLabel: {
+    position: "sticky"
+  }
+}));
+const timesIndexed = R.addIndex(R.times);
+const mapIndexed$1 = R.addIndex(R.map);
+const Header = ({
+  headerData,
+  valuesHeaderData,
+  xLayoutDataLength,
+  subHeadCellsWidth,
+  HTMLRenderer,
+  labelAccessor
+}) => {
+  const classes = useStyles$1();
+  const theme = useTheme();
+  const isRtl = getIsRtl(theme);
+  const stickyLabelPosition = `${R.last(subHeadCellsWidth)}px + 30px + ${theme.spacing(1)}`;
+  if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, "data"]))(headerData)) return null;
+  return timesIndexed(
+    (index) => {
+      const flags = R.path([0, "data", index, "dimension", "flags"], headerData);
+      const id = `header_${index}`;
+      return /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            component: "th",
+            padding: "none",
+            align: "center",
+            className: classes.tableHeadCell,
+            colSpan: R.inc(xLayoutDataLength),
+            id,
+            tabIndex: 0,
+            scope: "row",
+            title: R.pipe(R.path([-1, "data", index, "dimension"]), labelAccessor)(headerData),
+            style: isRtl ? { position: "sticky", zIndex: 1, right: 0 } : { position: "sticky", zIndex: 1, left: 0 },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classes.cellContentRight,
+                "aria-label": R.path([0, "data", index, "dimension", "id"], headerData),
+                "data-testid": `header-dim`,
+                role: "row",
+                children: /* @__PURE__ */ jsxs(Typography, { variant: "body1", className: classes.cellLabelHeader, children: [
+                  R.pipe(R.path([-1, "data", index, "dimension"]), labelAccessor)(headerData),
+                  /* @__PURE__ */ jsx(
+                    Flags,
+                    {
+                      HTMLRenderer,
+                      flags,
+                      isHeader: true,
+                      labelAccessor
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        mapIndexed$1(
+          (headerItem, idx) => {
+            const value = headerItem.isEmpty ? { label: "" } : getValue(labelAccessor)(headerItem);
+            const flags2 = R.propOr([], "flags", value);
+            const hierarchySpace = R.pipe(
+              R.propOr([], "parents"),
+              R.length,
+              R.times(() => "·")
+            )(value);
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                component: "th",
+                className: cx(classes.tableHeadCell, {
+                  [classes.topCell]: R.not(R.isEmpty(flags2))
+                }),
+                id: `${idx}_${index}`,
+                headers: `header_${index}`,
+                colSpan: R.prop("spanCount", headerItem),
+                tabIndex: 0,
+                title: R.prop("label", value),
+                "aria-label": R.prop("label", value),
+                "aria-describedby": id,
+                scope: "col",
+                children: /* @__PURE__ */ jsxs("div", { className: classes.cellContentCenter, children: [
+                  !R.isEmpty(hierarchySpace) && mapIndexed$1((space, idx2) => /* @__PURE__ */ jsx("div", { children: space }, idx2))(hierarchySpace),
+                  /* @__PURE__ */ jsxs(
+                    Typography,
+                    {
+                      className: classes.stickyLabel,
+                      style: {
+                        left: isRtl ? theme.spacing(1) : stickyLabelPosition,
+                        right: isRtl ? stickyLabelPosition : theme.spacing(1)
+                      },
+                      variant: "body1",
+                      children: [
+                        R.prop("label", value),
+                        /* @__PURE__ */ jsx(
+                          Flags,
+                          {
+                            HTMLRenderer,
+                            flags: flags2,
+                            isHeader: true,
+                            labelAccessor
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] })
+              },
+              `${R.prop("id", value)}-${idx}`
+            );
+          },
+          R.nth(index, valuesHeaderData)
+        )
+      ] }, id);
+    },
+    R.compose(R.length, R.pathOr([], [-1, "data"]))(headerData)
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  table: {
+    outline: "1px solid transparent",
+    transform: "translateZ(0)",
+    borderCollapse: "separate",
+    borderLeft: `1px solid ${theme.palette.grey[500]}`,
+    borderTop: `1px solid ${theme.palette.grey[500]}`,
+    padding: "0px 0px"
+  },
+  stickyHeader: {
+    position: "sticky",
+    top: 0,
+    zIndex: 2
+  }
+}));
+const mapIndexed = R.addIndex(R.map);
+const getEnhancedValuesHeaderData = (data) => {
+  const colLength = R.pipe(R.last, R.propOr([], "data"), R.length)(data);
+  return R.pipe(
+    R.pluck("data"),
+    // mix merge and transpose for performance
+    R.reduce(
+      (acc, cells) => {
+        R.addIndex(R.forEach)((_, rowIndex) => {
+          const cell = R.nth(rowIndex, cells) || {};
+          const cellId = R.has("values", cell) ? R.pipe(R.prop("values"), R.pluck("id"), R.join(","))(cell) : R.pathOr(`missing${rowIndex}`, ["value", "id"], cell);
+          const topCell = rowIndex > 0 ? R.pipe(R.nth(rowIndex - 1), R.last)(acc) : null;
+          const cellKey = R.isNil(topCell) ? cellId : `${topCell.key}-${cellId}`;
+          const leftCell = R.pipe(R.nth(rowIndex), R.last)(acc);
+          if (R.prop("key", leftCell) === cellKey && rowIndex !== colLength - 1) {
+            acc = R.over(
+              R.lensIndex(rowIndex),
+              R.over(R.lensIndex(-1), R.evolve({ spanCount: R.add(1) }))
+            )(acc);
+          } else {
+            acc = R.over(
+              R.lensIndex(rowIndex),
+              R.append({
+                ...R.pick(["value", "values"], cell),
+                key: cellKey,
+                spanCount: 1,
+                isEmpty: R.isEmpty(cell)
+              })
+            )(acc);
+          }
+        })(acc);
+        return acc;
+      },
+      R.times(R.always([]), colLength)
+    )
+  )(data);
+};
+const getCellsWidth = R.addIndex(R.reduce)(
+  (acc, element, index) => R.append(R.add(acc[index], R.propOr(0, "offsetWidth", element)), acc),
+  [0]
+);
+const TableHtml5 = ({
+  cells,
+  headerData = [],
+  sectionsData = [],
+  cellHandler,
+  activeCellIds,
+  activeCellHandler,
+  SideIcon,
+  testId = "vis-table",
+  HTMLRenderer,
+  cellValueAccessor = R.identity,
+  labelAccessor = defaultLabelAccessor,
+  textAlign,
+  isNoWrap = R.always(false)
+}) => {
+  const classes = useStyles();
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const [subHeadCellsWidth, setSubHeadCellsWidth] = useState([0]);
+  const headerRef = useRef(null);
+  const subHeadCellsRef = useRef([]);
+  useEffect(() => {
+    setHeaderHeight(R.pathOr(0, ["current", "clientHeight"], headerRef));
+    setSubHeadCellsWidth(getCellsWidth(R.prop("current", subHeadCellsRef)));
+  }, [cells, headerData, sectionsData]);
+  useEffect(() => {
+    let timeoutId = null;
+    const resizeListener = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setHeaderHeight(R.pathOr(0, ["current", "clientHeight"], headerRef));
+        setSubHeadCellsWidth(getCellsWidth(R.prop("current", subHeadCellsRef)));
+      }, 150);
+    };
+    window.addEventListener("resize", resizeListener);
+    return () => window.removeEventListener("resize", resizeListener);
+  }, []);
+  const xLayoutData = R.pathOr([], [0, 1, -1, "data"], sectionsData);
+  const xLayoutDataLength = R.length(xLayoutData);
+  const { valuesHeaderData, nbColumnsByRows } = useMemo(() => {
+    const valuesHeaderData2 = getEnhancedValuesHeaderData(headerData);
+    const nbColumnsByRows2 = R.map(R.length)(valuesHeaderData2);
+    return { valuesHeaderData: valuesHeaderData2, nbColumnsByRows: nbColumnsByRows2 };
+  }, [headerData]);
+  const isSingleObs = R.hasPath(["", "", "", 0], cells);
+  if (isSingleObs)
+    return /* @__PURE__ */ jsx(
+      Cell,
+      {
+        HTMLRenderer,
+        labelAccessor,
+        ...R.pathOr({}, ["", "", "", 0], cells),
+        cellHandler,
+        isOne: true,
+        textAlign
+      }
+    );
+  return /* @__PURE__ */ jsxs(Table, { className: classes.table, "aria-label": "table", size: "small", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("thead", { ref: headerRef, className: classes.stickyHeader, children: [
+      /* @__PURE__ */ jsx(
+        Header,
+        {
+          headerData,
+          valuesHeaderData,
+          xLayoutDataLength,
+          subHeadCellsWidth,
+          HTMLRenderer,
+          labelAccessor
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SubHeader,
+        {
+          headerData,
+          xLayoutData,
+          activeCellIds,
+          SideIcon,
+          ref: subHeadCellsRef,
+          subHeadCellsWidth,
+          HTMLRenderer,
+          labelAccessor
+        }
+      )
+    ] }),
+    mapIndexed(
+      (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}`
+      ),
+      sectionsData
+    )
+  ] });
+};
+
+export { TableHtml5, getEnhancedValuesHeaderData };
+//# sourceMappingURL=TableHtml5.js.map