@sis-cc/dotstatsuite-visions 6.6.0 → 6.6.4

package/es/TableHtml5/TableHtml5.js

@@ -1,12 +1,15 @@
-import _extends from "/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends";
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 import React, { useRef, useState, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Table from '@material-ui/core/Table';
 import Header from './header';
 import SubHeader from './subHeader';
 import Section from './section';
 import Cell from './cell';
+
 /* 
 *  Accessibility.
 *  Do not use "TableHead" from Material-ui.
@@ -19,8 +22,8 @@ var useStyles = makeStyles(function (theme) {
   return {
     table: {
       borderCollapse: 'separate',
-      borderLeft: "1px solid " + theme.palette.grey[500],
-      borderTop: "1px solid " + theme.palette.grey[500]
+      borderLeft: '1px solid ' + theme.palette.grey[500],
+      borderTop: '1px solid ' + theme.palette.grey[500]
     },
     stickyHeader: {
       position: 'sticky',
@@ -29,44 +32,44 @@ var useStyles = makeStyles(function (theme) {
     }
   };
 });
+
 var mapIndexed = R.addIndex(R.map);
+
 export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(data) {
   var colLength = R.pipe(R.pathOr([], [0, 'data']), R.length)(data);
-  return R.pipe(R.pluck('data'), // mix merge and transpose for performance
+  return R.pipe(R.pluck('data'),
+  // mix merge and transpose for performance
   R.reduce(function (acc, cells) {
     R.addIndex(R.forEach)(function (cell, rowIndex) {
       var cellId = R.path(['value', 'id'], cell);
       var topCell = rowIndex > 0 ? R.pipe(R.nth(rowIndex - 1), R.last)(acc) : null;
-      var cellKey = R.isNil(topCell) ? cellId : topCell.key + "-" + cellId;
-      var leftCell = R.pipe(R.nth(rowIndex), R.last)(acc);
+      var cellKey = R.isNil(topCell) ? cellId : topCell.key + '-' + cellId;
 
+      var 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);
+        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(_extends({}, R.propOr({}, 'value', cell), {
-          key: cellKey,
-          spanCount: 1
-        })))(acc);
+        acc = R.over(R.lensIndex(rowIndex), R.append(_extends({}, R.propOr({}, 'value', cell), { key: cellKey, spanCount: 1 })))(acc);
       }
     })(cells);
     return acc;
   }, R.times(R.always([]), colLength)))(data);
 };
+
 var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
-  return R.append(R.add(acc[index], (element === null || element === void 0 ? void 0 : element.offsetWidth) || 0), acc);
+  return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
 }, [0]);
 
 var TableHtml5 = function TableHtml5(_ref) {
   var cells = _ref.cells,
       _ref$headerData = _ref.headerData,
-      headerData = _ref$headerData === void 0 ? [] : _ref$headerData,
+      headerData = _ref$headerData === undefined ? [] : _ref$headerData,
       _ref$sectionsData = _ref.sectionsData,
-      sectionsData = _ref$sectionsData === void 0 ? [] : _ref$sectionsData,
+      sectionsData = _ref$sectionsData === undefined ? [] : _ref$sectionsData,
       cellHandler = _ref.cellHandler,
       activeCellIds = _ref.activeCellIds,
       activeCellHandler = _ref.activeCellHandler;
+
   var classes = useStyles();
 
   var _useState = useState(0),
@@ -79,71 +82,80 @@ var TableHtml5 = function TableHtml5(_ref) {
 
   var headerRef = useRef(null);
   var subHeadCellsRef = useRef([]);
+
   useEffect(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
-    setSubHeadCellsWidth(getCellsWidth(subHeadCellsRef === null || subHeadCellsRef === void 0 ? void 0 : subHeadCellsRef.current));
+    setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
   }, [cells, headerData, sectionsData]);
+
   useEffect(function () {
     var timeoutId = null;
-
     var resizeListener = function resizeListener() {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(function () {
         setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
-        setSubHeadCellsWidth(getCellsWidth(subHeadCellsRef === null || subHeadCellsRef === void 0 ? void 0 : subHeadCellsRef.current));
+        setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
       }, 150);
     };
-
     window.addEventListener('resize', resizeListener);
     return function () {
       return window.removeEventListener('resize', resizeListener);
     };
   }, []);
+
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
-  if (isSingleObs) return /*#__PURE__*/React.createElement(Cell, _extends({}, R.pathOr({}, ['', '', '', 0], cells), {
-    cellHandler: cellHandler,
-    isOne: true
-  }));
+  if (isSingleObs) return React.createElement(Cell, _extends({}, R.pathOr({}, ['', '', '', 0], cells), { cellHandler: cellHandler, isOne: true }));
+
   var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
   var xLayoutDataLength = R.length(xLayoutData);
   var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
   var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
-  return /*#__PURE__*/React.createElement(Table, {
-    className: classes.table,
-    "aria-label": "table",
-    size: "small",
-    style: {
-      padding: '0px 0px'
-    }
-  }, /*#__PURE__*/React.createElement("thead", {
-    ref: headerRef,
-    className: classes.stickyHeader
-  }, /*#__PURE__*/React.createElement(Header, {
-    headerData: headerData,
-    valuesHeaderData: valuesHeaderData,
-    xLayoutDataLength: xLayoutDataLength
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    headerData: headerData,
-    xLayoutData: xLayoutData,
-    activeCellIds: activeCellIds,
-    ref: subHeadCellsRef,
-    subHeadCellsWidth: subHeadCellsWidth
-  })), mapIndexed(function (section, index) {
-    return /*#__PURE__*/React.createElement(Section, {
-      key: index,
-      sectionIndex: index,
-      headerHeight: headerHeight,
-      nbColumnsByRows: nbColumnsByRows,
-      headerData: headerData,
-      cells: cells,
-      section: section,
-      xLayoutDataLength: xLayoutDataLength,
-      cellHandler: cellHandler,
-      activeCellIds: activeCellIds,
-      activeCellHandler: activeCellHandler,
-      subHeadCellsWidth: subHeadCellsWidth
-    });
-  }, sectionsData));
+  return React.createElement(
+    Table,
+    { className: classes.table, 'aria-label': 'table', size: 'small', style: { padding: '0px 0px' } },
+    React.createElement(
+      'thead',
+      { ref: headerRef, className: classes.stickyHeader },
+      React.createElement(Header, {
+        headerData: headerData,
+        valuesHeaderData: valuesHeaderData,
+        xLayoutDataLength: xLayoutDataLength,
+        subHeadCellsWidth: subHeadCellsWidth
+      }),
+      React.createElement(SubHeader, {
+        headerData: headerData,
+        xLayoutData: xLayoutData,
+        activeCellIds: activeCellIds,
+        ref: subHeadCellsRef,
+        subHeadCellsWidth: subHeadCellsWidth
+      })
+    ),
+    mapIndexed(function (section, index) {
+      return React.createElement(Section, {
+        key: index,
+        sectionIndex: index,
+        headerHeight: headerHeight,
+        nbColumnsByRows: nbColumnsByRows,
+        headerData: headerData,
+        cells: cells,
+        section: section,
+        xLayoutDataLength: xLayoutDataLength,
+        cellHandler: cellHandler,
+        activeCellIds: activeCellIds,
+        activeCellHandler: activeCellHandler,
+        subHeadCellsWidth: subHeadCellsWidth
+      });
+    }, sectionsData)
+  );
 };
 
+TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
+  cells: PropTypes.object,
+  headerData: PropTypes.array,
+  sectionsData: PropTypes.array,
+  cellHandler: PropTypes.func,
+  activeCellHandler: PropTypes.func,
+  activeCellIds: PropTypes.object
+} : {};
+
 export default TableHtml5;

package/es/TableHtml5/cell.js

@@ -1,31 +1,32 @@
 import React from 'react';
 import * as R from 'ramda';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import Flags from './flags';
+
 var useStyles = makeStyles(function (theme) {
   return {
     cell: {
-      borderBottom: "1px solid " + theme.palette.grey[500],
-      borderRight: "1px solid " + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
+      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
       verticalAlign: 'baseline',
       color: theme.palette.grey['A700'],
       '&:hover': {
-        boxShadow: "inset 0 0 0 2px " + theme.palette.primary.main
+        boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
       }
     },
     active: {
-      boxShadow: "inset 0 0 0 2px " + theme.palette.primary.main
+      boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
     },
     highlight: theme.mixins.table.cellHighlight,
     oneCell: {
-      border: "1px solid " + theme.palette.grey[500],
+      border: '1px solid ' + theme.palette.grey[500],
       display: 'block' // MUI TableCell is inline-block
-
     },
     link: {
       position: 'inherit',
@@ -42,41 +43,60 @@ var Cell = function Cell(_ref) {
       headers = _ref.headers,
       isOne = _ref.isOne,
       _ref$indexedDimValIds = _ref.indexedDimValIds,
-      indexedDimValIds = _ref$indexedDimValIds === void 0 ? {} : _ref$indexedDimValIds,
+      indexedDimValIds = _ref$indexedDimValIds === undefined ? {} : _ref$indexedDimValIds,
       cellHandler = _ref.cellHandler,
       activeCellHandler = _ref.activeCellHandler,
       isActive = _ref.isActive,
       isHighlight = _ref.isHighlight;
+
   var classes = useStyles();
   var hasFlag = R.not(R.isEmpty(flags));
-  var uiValue = R.is(Function, cellHandler) && !R.isEmpty(indexedDimValIds) ? /*#__PURE__*/React.createElement(Link, {
-    component: "button",
-    variant: "body1",
-    color: "inherit",
-    underline: "always",
-    onClick: function onClick() {
-      return cellHandler({
-        indexedDimValIds: indexedDimValIds
-      });
+  var uiValue = R.is(Function, cellHandler) && !R.isEmpty(indexedDimValIds) ? React.createElement(
+    Link,
+    {
+      component: 'button',
+      variant: 'body1',
+      color: 'inherit',
+      underline: 'always',
+      onClick: function onClick() {
+        return cellHandler({ indexedDimValIds: indexedDimValIds });
+      },
+      className: classes.link
     },
-    className: classes.link
-  }, value) : value;
-  return /*#__PURE__*/React.createElement(TableCell, {
-    component: isOne ? 'div' : undefined,
-    className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx)),
-    headers: headers,
-    onClick: activeCellHandler
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'right'
-    }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1",
-    tabIndex: 0,
-    noWrap: hasFlag
-  }, hasFlag && /*#__PURE__*/React.createElement(Flags, {
-    flags: flags
-  }), uiValue)));
+    value
+  ) : value;
+
+  return React.createElement(
+    TableCell,
+    {
+      component: isOne ? 'div' : undefined,
+      className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx)),
+      headers: headers,
+      onClick: activeCellHandler
+    },
+    React.createElement(
+      'div',
+      { style: { textAlign: 'right' } },
+      React.createElement(
+        Typography,
+        { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
+        hasFlag && React.createElement(Flags, { flags: flags }),
+        uiValue
+      )
+    )
+  );
 };
 
+Cell.propTypes = process.env.NODE_ENV !== "production" ? {
+  flags: PropTypes.array,
+  isOne: PropTypes.bool,
+  value: PropTypes.string,
+  headers: PropTypes.string,
+  indexedDimValIds: PropTypes.object,
+  cellHandler: PropTypes.func,
+  isActive: PropTypes.bool,
+  isHighlight: PropTypes.bool,
+  activeCellHandler: PropTypes.func
+} : {};
+
 export default Cell;

package/es/TableHtml5/flags.js

@@ -1,11 +1,14 @@
-import _extends from "/builds/sis-cc/.stat-suite/dotstatsuite-visions/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends";
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 import { Asterisk } from '../';
+
 var useStyles = makeStyles(function (theme) {
   return {
     content: _extends({
@@ -39,42 +42,68 @@ var Flags = function Flags(_ref) {
   var _cx;
 
   var _ref$flags = _ref.flags,
-      flags = _ref$flags === void 0 ? [] : _ref$flags,
+      flags = _ref$flags === undefined ? [] : _ref$flags,
       isHeader = _ref.isHeader;
+
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
   if (noFlags) return null;
+
   var hasUncoded = R.any(R.complement(R.has('code')), flags);
   var codedIcons = R.pipe(R.reduce(function (acc, flag) {
     return R.when(R.always(R.has('code', flag)), R.append(flag.code))(acc);
   }, []), R.join(','))(flags);
-  var content = /*#__PURE__*/React.createElement("ul", {
-    className: classes.content
-  }, R.addIndex(R.map)(function (_ref2, index) {
-    var label = _ref2.label;
-    return /*#__PURE__*/React.createElement("li", {
-      key: index
-    }, label);
-  }, flags));
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    tabIndex: 0,
-    "aria-label": R.pipe(R.pluck('label'), R.join(', '))(flags),
-    "aria-hidden": false,
-    title: content,
-    placement: "top"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cx(classes.flags, (_cx = {}, _cx[classes.header] = isHeader, _cx))
-  }, R.not(R.isEmpty(codedIcons)) && codedIcons, R.and(R.not(R.isEmpty(codedIcons)), hasUncoded) && /*#__PURE__*/React.createElement(React.Fragment, null, ","), hasUncoded && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Asterisk, {
-    className: classes.svg,
-    style: {
-      fontSize: 11
-    }
-  }), /*#__PURE__*/React.createElement(Typography, {
-    variant: "srOnly"
-  }, "* " + R.addIndex(R.map)(function (_ref3) {
-    var label = _ref3.label;
-    return label;
-  }, flags)))));
+
+  var content = React.createElement(
+    'ul',
+    { className: classes.content },
+    R.addIndex(R.map)(function (_ref2, index) {
+      var label = _ref2.label;
+      return React.createElement(
+        'li',
+        { key: index },
+        label
+      );
+    }, flags)
+  );
+  return React.createElement(
+    Tooltip,
+    {
+      tabIndex: 0,
+      'aria-label': R.pipe(R.pluck('label'), R.join(', '))(flags),
+      'aria-hidden': false,
+      title: content,
+      placement: 'top'
+    },
+    React.createElement(
+      'span',
+      { className: cx(classes.flags, (_cx = {}, _cx[classes.header] = isHeader, _cx)) },
+      R.not(R.isEmpty(codedIcons)) && codedIcons,
+      R.and(R.not(R.isEmpty(codedIcons)), hasUncoded) && React.createElement(
+        React.Fragment,
+        null,
+        ','
+      ),
+      hasUncoded && React.createElement(
+        Fragment,
+        null,
+        React.createElement(Asterisk, { className: classes.svg, style: { fontSize: 11 } }),
+        React.createElement(
+          Typography,
+          { variant: 'srOnly' },
+          '* ' + R.addIndex(R.map)(function (_ref3) {
+            var label = _ref3.label;
+            return label;
+          }, flags)
+        )
+      )
+    )
+  );
 };
 
+Flags.propTypes = process.env.NODE_ENV !== "production" ? {
+  flags: PropTypes.array,
+  isHeader: PropTypes.bool
+} : {};
+
 export default Flags;

package/es/TableHtml5/header.js

@@ -1,20 +1,23 @@
 import React from 'react';
 import * as R from 'ramda';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import Flags from './flags';
+import { getIsRtl } from '../utils';
+
 var useStyles = makeStyles(function (theme) {
   return {
     tableHeadCell: {
       color: theme.palette.getContrastText(theme.palette.primary.main),
       backgroundColor: theme.palette.primary.main,
       border: 'inherit',
-      borderBottom: "1px solid " + theme.palette.grey[500],
-      borderRight: "1px solid " + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + "px " + theme.spacing(1) + "px",
+      borderBottom: '1px solid ' + theme.palette.grey[500],
+      borderRight: '1px solid ' + theme.palette.grey[500],
+      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
       verticalAlign: 'middle',
       '&:focus ': {
         opacity: '.85'
@@ -38,72 +41,101 @@ var useStyles = makeStyles(function (theme) {
       paddingTop: 0
     },
     stickyLabel: {
-      position: 'sticky',
-      left: theme.spacing(1),
-      right: theme.spacing(1)
+      position: 'sticky'
     }
   };
 });
+
 var timesIndexed = R.addIndex(R.times);
 var mapIndexed = R.addIndex(R.map);
 
 var Header = function Header(_ref) {
   var headerData = _ref.headerData,
       valuesHeaderData = _ref.valuesHeaderData,
-      xLayoutDataLength = _ref.xLayoutDataLength;
+      xLayoutDataLength = _ref.xLayoutDataLength,
+      subHeadCellsWidth = _ref.subHeadCellsWidth;
+
   var classes = useStyles();
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+
+  var stickyLabelPosition = R.last(subHeadCellsWidth) + 30 + theme.spacing(1);
+
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
   return timesIndexed(function (index) {
     var _cx;
 
     var flags = R.path([0, 'data', index, 'dimension', 'flags'], headerData);
-    var id = "header_" + index;
-    return /*#__PURE__*/React.createElement(TableRow, {
-      key: id
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      component: "th",
-      padding: "none",
-      align: "center",
-      className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
-      colSpan: R.inc(xLayoutDataLength),
-      id: id,
-      tabIndex: 0,
-      style: {
-        position: 'sticky',
-        left: 0,
-        zIndex: 1
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.cellContentRight
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "body1",
-      className: classes.cellLabelHeader
-    }, R.path([0, 'data', index, 'dimension', 'label'], headerData), /*#__PURE__*/React.createElement(Flags, {
-      flags: flags,
-      isHeader: true
-    })))), mapIndexed(function (headerItem, idx) {
-      var _cx2;
+    var id = 'header_' + index;
+    return React.createElement(
+      TableRow,
+      { key: id },
+      React.createElement(
+        TableCell,
+        {
+          component: 'th',
+          padding: 'none',
+          align: 'center',
+          className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
+          colSpan: R.inc(xLayoutDataLength),
+          id: id,
+          tabIndex: 0,
+          style: isRtl ? { position: 'sticky', zIndex: 1, right: 0 } : { position: 'sticky', zIndex: 1, left: 0 }
+        },
+        React.createElement(
+          'div',
+          { className: classes.cellContentRight },
+          React.createElement(
+            Typography,
+            { variant: 'body1', className: classes.cellLabelHeader },
+            R.path([0, 'data', index, 'dimension', 'label'], headerData),
+            React.createElement(Flags, { flags: flags, isHeader: true })
+          )
+        )
+      ),
+      mapIndexed(function (headerItem, idx) {
+        var _cx2;
 
-      var flags = R.prop('flags', headerItem);
-      return /*#__PURE__*/React.createElement(TableCell, {
-        key: R.prop('id', headerItem) + "-" + idx,
-        component: "th",
-        className: cx(classes.tableHeadCell, (_cx2 = {}, _cx2[classes.topCell] = R.not(R.isEmpty(flags)), _cx2)),
-        id: idx + "_" + index,
-        headers: "header_" + index,
-        colSpan: R.prop('spanCount', headerItem),
-        tabIndex: 0
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classes.cellContentCenter
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: classes.stickyLabel,
-        variant: "body1"
-      }, R.prop('label', headerItem), /*#__PURE__*/React.createElement(Flags, {
-        flags: flags,
-        isHeader: true
-      }))));
-    }, R.nth(index, valuesHeaderData)));
+        var flags = R.prop('flags', headerItem);
+        return React.createElement(
+          TableCell,
+          {
+            key: R.prop('id', headerItem) + '-' + idx,
+            component: 'th',
+            className: cx(classes.tableHeadCell, (_cx2 = {}, _cx2[classes.topCell] = R.not(R.isEmpty(flags)), _cx2)),
+            id: idx + '_' + index,
+            headers: 'header_' + index,
+            colSpan: R.prop('spanCount', headerItem),
+            tabIndex: 0
+          },
+          React.createElement(
+            'div',
+            { className: classes.cellContentCenter },
+            React.createElement(
+              Typography,
+              {
+                className: classes.stickyLabel,
+                style: {
+                  left: isRtl ? theme.spacing(1) : stickyLabelPosition,
+                  right: isRtl ? stickyLabelPosition : theme.spacing(1)
+                },
+                variant: 'body1'
+              },
+              R.prop('label', headerItem),
+              React.createElement(Flags, { flags: flags, isHeader: true })
+            )
+          )
+        );
+      }, R.nth(index, valuesHeaderData))
+    );
   }, R.compose(R.length, R.pathOr([], [0, 'data']))(headerData));
 };
 
+Header.propTypes = process.env.NODE_ENV !== "production" ? {
+  headerData: PropTypes.array,
+  valuesHeaderData: PropTypes.array,
+  xLayoutDataLength: PropTypes.number,
+  subHeadCellsWidth: PropTypes.array
+} : {};
+
 export default Header;

package/es/TableHtml5/index.js

@@ -56,5 +56,6 @@
  *   }
  * }
  */
+
 export { default } from './TableHtml5';
 export { default as Cell } from './cell';