@sis-cc/dotstatsuite-visions 7.22.7 → 8.0.0

package/es/DataHeader/DataHeader.js

@@ -113,7 +113,7 @@ var DataHeader = function DataHeader(_ref5) {
       title = _ref5.title,
       _ref5$subtitle = _ref5.subtitle,
       subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      uprs = _ref5.uprs,
+      combinations = _ref5.combinations,
       disclaimer = _ref5.disclaimer,
       sideProps = _ref5.sideProps,
       SideIcon = _ref5.SideIcon,
@@ -129,12 +129,19 @@ var DataHeader = function DataHeader(_ref5) {
   var isWidthLess = R.lt(width);
   var classes = useStyles({ isWidthLess: isWidthLess });
 
-  var reducedContent = getReducedContent({ isWidthLess: isWidthLess, title: title, subtitle: subtitle, uprs: uprs, disclaimer: disclaimer });
+  var reducedContent = getReducedContent({
+    isWidthLess: isWidthLess,
+    title: title,
+    subtitle: subtitle,
+    combinations: combinations,
+    disclaimer: disclaimer
+  });
 
   var theme = useTheme();
   var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
 
   var subtitleLength = R.length(subtitle);
+  var combinationsLength = R.length(combinations);
 
   return React.createElement(
     'div',
@@ -185,11 +192,32 @@ var DataHeader = function DataHeader(_ref5) {
           );
         }))(subtitle)
       ),
-      isWidthUp(T4_BREAKPOINTS.xs3) && uprs && React.createElement(
-        Typography,
-        { className: classes.subtitle, 'data-testid': 'data-header-units' },
-        React.createElement(Title, { header: uprs.header }),
-        uprs.label
+      isWidthUp(T4_BREAKPOINTS.xs3) && combinations && R.not(R.isEmpty(combinations)) && React.createElement(
+        'div',
+        { className: classes.wrapperSubtitle },
+        R.pipe(R.addIndex(R.map)(function (comb, index) {
+          return React.createElement(
+            'div',
+            {
+              key: 'combination-' + index,
+              className: classes.subtitle,
+              'data-testid': 'data-header-combination',
+              'aria-label': comb.header
+            },
+            React.createElement(Title, { header: comb.header }),
+            React.createElement(
+              Typography,
+              { variant: 'inherit' },
+              comb.label
+            ),
+            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && React.createElement(Flags, { classes: classes, content: R.prop('flags', comb) }),
+            R.lt(index + 1, combinationsLength) && React.createElement(
+              'svg',
+              { width: '24', height: '8' },
+              React.createElement('circle', { cx: '12', cy: '4', r: '3', stroke: iconColor, fill: iconColor })
+            )
+          );
+        }))(combinations)
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && disclaimer && React.createElement(
         Typography,
@@ -232,10 +260,10 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
       }))
     }))
   })),
-  uprs: PropTypes.shape({
+  combinations: PropTypes.arrayOf(PropTypes.shape({
     header: PropTypes.string,
     label: PropTypes.string
-  }),
+  })),
   sideProps: PropTypes.object,
   SideIcon: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

package/es/Mode/Mode.js

@@ -0,0 +1,89 @@
+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 from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import { makeStyles } from '@material-ui/core/styles';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import { Tooltip } from '../';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'share', 'title'], theme)),
+    label: theme.typography.body2,
+    icon: {
+      marginLeft: theme.spacing(0.5)
+    }
+  };
+});
+
+var Warning = function Warning(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+
+  var classes = useStyles();
+  return React.createElement(
+    Tooltip,
+    { className: classes.icon, title: title, variant: 'light' },
+    children
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  children: PropTypes.node
+} : {};
+
+var Mode = function Mode(_ref2) {
+  var changeMode = _ref2.changeMode,
+      mode = _ref2.mode,
+      _ref2$modes = _ref2.modes,
+      modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      children = _ref2.children;
+
+  var classes = useStyles();
+  return React.createElement(
+    RadioGroup,
+    { onChange: function onChange(e) {
+        return changeMode(e.target.value);
+      }, value: mode },
+    R.map(function (_ref3) {
+      var label = _ref3.label,
+          value = _ref3.value,
+          popperLabel = _ref3.popperLabel;
+      return React.createElement(FormControlLabel, {
+        classes: { label: classes.label },
+        key: value,
+        control: React.createElement(Radio, { variant: 'outlined', color: 'primary' }),
+        label: React.createElement(
+          'span',
+          null,
+          label,
+          popperLabel && React.createElement(
+            Warning,
+            { title: popperLabel },
+            children
+          )
+        ),
+        value: value
+      });
+    })(modes)
+  );
+};
+
+Mode.propTypes = process.env.NODE_ENV !== "production" ? {
+  changeMode: PropTypes.func,
+  children: PropTypes.node,
+  mode: PropTypes.string,
+  modes: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    value: PropTypes.string,
+    popperLabel: PropTypes.string
+  }))
+} : {};
+
+export default Mode;

package/es/Mode/index.js

@@ -0,0 +1,24 @@
+/**
+ * NoData component is a basic placeholder to use when there is nothing to display.
+ *
+ * @memberOf VISIONS
+ * @name Mode
+ * @tag component
+ * @api public
+ * @props
+ * Mode.propTypes = {
+ * changeMode: PropTypes.func,
+ * mode: PropTypes.string,
+ * modes: PropTypes.arrayOf(
+ *  PropTypes.shape({
+ *    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *    value: PropTypes.string,
+ *    popperLabel: PropTypes.string,
+ *  }),
+ * ,
+ * }
+ * @theme
+ * // no custom theme there
+ */
+
+export { default } from './Mode';

package/es/TableHtml5/TableHtml5.js

@@ -10,13 +10,13 @@ import SubHeader from './subHeader';
 import Section from './section';
 import Cell from './cell';
 
-/* 
-*  Accessibility.
-*  Do not use "TableHead" from Material-ui.
-*  Material-ui, add "scope" attribute for accessibility, "scope" attribute can break screen reader if use with headers.
-*  Child from TableHead will inherit a "scope" that we don't want. (not possible to turn off)
-*  We are using "headers" attribute because the table is too complexe to use "scope".
-*/
+/*
+ *  Accessibility.
+ *  Do not use "TableHead" from Material-ui.
+ *  Material-ui, add "scope" attribute for accessibility, "scope" attribute can break screen reader if use with headers.
+ *  Child from TableHead will inherit a "scope" that we don't want. (not possible to turn off)
+ *  We are using "headers" attribute because the table is too complexe to use "scope".
+ */
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -41,7 +41,7 @@ export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(da
   // 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 cellId = R.has('values', cell) ? R.pipe(R.prop('values'), R.pluck('id'), R.join(','))(cell) : 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;
 
@@ -49,7 +49,7 @@ export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(da
       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(_extends({}, R.propOr({}, 'value', cell), { key: cellKey, spanCount: 1 })))(acc);
+        acc = R.over(R.lensIndex(rowIndex), R.append(_extends({}, R.pick(['value', 'values'], cell), { key: cellKey, spanCount: 1 })))(acc);
       }
     })(cells);
     return acc;
@@ -72,7 +72,9 @@ var TableHtml5 = function TableHtml5(_ref) {
       SideIcon = _ref.SideIcon,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      _ref$labelAccessor = _ref.labelAccessor,
+      labelAccessor = _ref$labelAccessor === undefined ? R.prop('name') : _ref$labelAccessor;
 
   var classes = useStyles();
 
@@ -109,7 +111,8 @@ var TableHtml5 = function TableHtml5(_ref) {
 
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
   if (isSingleObs) return React.createElement(Cell, _extends({
-    HTMLRenderer: HTMLRenderer
+    HTMLRenderer: HTMLRenderer,
+    labelAccessor: labelAccessor
   }, R.pathOr({}, ['', '', '', 0], cells), {
     cellHandler: cellHandler,
     isOne: true
@@ -136,7 +139,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         valuesHeaderData: valuesHeaderData,
         xLayoutDataLength: xLayoutDataLength,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       }),
       React.createElement(SubHeader, {
         headerData: headerData,
@@ -145,7 +149,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       })
     ),
     mapIndexed(function (section, index) {
@@ -163,7 +168,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellHandler: activeCellHandler,
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       });
     }, sectionsData)
   );
@@ -178,7 +184,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: PropTypes.object,
   SideIcon: PropTypes.func,
   testId: PropTypes.string,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default TableHtml5;

package/es/TableHtml5/cell.js

@@ -62,7 +62,8 @@ var Cell = function Cell(_ref) {
       isHighlight = _ref.isHighlight,
       sideProps = _ref.sideProps,
       SideIcon = _ref.SideIcon,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var isRtl = getIsRtl(useTheme());
@@ -93,7 +94,7 @@ var Cell = function Cell(_ref) {
       tabIndex: 0
     },
     !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-    hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags }),
+    hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, labelAccessor: labelAccessor }),
     uiValue
   );
 };
@@ -111,7 +112,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: PropTypes.func,
   sideProps: PropTypes.object,
   SideIcon: PropTypes.func,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default Cell;

package/es/TableHtml5/flags.js

@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 import { Asterisk } from '../';
+import { getValue } from './utils';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -45,7 +46,8 @@ var Flags = function Flags(_ref) {
   var _ref$flags = _ref.flags,
       flags = _ref$flags === undefined ? [] : _ref$flags,
       isHeader = _ref.isHeader,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
@@ -55,23 +57,27 @@ var Flags = function Flags(_ref) {
   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 labels = R.map(function (flag) {
+    var value = getValue(labelAccessor)(flag);
+    return labelAccessor(flag) + ': ' + value.label;
+  }, flags);
   var content = React.createElement(
     'ul',
     { 'data-testid': 'cell-flags-footnotes-content', className: classes.content },
-    R.addIndex(R.map)(function (_ref2, index) {
-      var label = _ref2.label;
+    R.addIndex(R.map)(function (label, index) {
       return React.createElement(
         'li',
         { key: index },
         R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label
       );
-    }, flags)
+    }, labels)
   );
   return React.createElement(
     Tooltip,
     {
       tabIndex: 0,
-      'aria-label': R.pipe(R.pluck('label'), R.join(', '))(flags),
+      'aria-label': R.join(', ', labels),
       'aria-hidden': false,
       title: content,
       placement: 'top'
@@ -96,10 +102,7 @@ var Flags = function Flags(_ref) {
         React.createElement(
           Typography,
           { variant: 'srOnly' },
-          '* ' + R.addIndex(R.map)(function (_ref3) {
-            var label = _ref3.label;
-            return label;
-          }, flags)
+          '* ' + labels
         )
       )
     )
@@ -109,7 +112,8 @@ var Flags = function Flags(_ref) {
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   flags: PropTypes.array,
   isHeader: PropTypes.bool,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default Flags;

package/es/TableHtml5/header.js

@@ -8,6 +8,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import Flags from './flags';
 import { getIsRtl } from '../utils';
+import { getValue } from './utils';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -54,7 +55,8 @@ var Header = function Header(_ref) {
       valuesHeaderData = _ref.valuesHeaderData,
       xLayoutDataLength = _ref.xLayoutDataLength,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -91,22 +93,23 @@ var Header = function Header(_ref) {
           React.createElement(
             Typography,
             { variant: 'body1', className: classes.cellLabelHeader },
-            R.path([0, 'data', index, 'dimension', 'label'], headerData),
-            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
+            R.pipe(R.path([0, 'data', index, 'dimension']), labelAccessor)(headerData),
+            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true, labelAccessor: labelAccessor })
           )
         )
       ),
       mapIndexed(function (headerItem, idx) {
         var _cx;
 
-        var flags = R.prop('flags', headerItem);
-        var hierarchySpace = R.pipe(R.pathOr([], ['parents']), R.when(R.isNil, R.always([])), R.length, R.times(function () {
+        var value = getValue(labelAccessor)(headerItem);
+        var flags = R.propOr([], 'flags', value);
+        var hierarchySpace = R.pipe(R.propOr([], 'parents'), R.length, R.times(function () {
           return '·';
-        }))(headerItem);
+        }))(value);
         return React.createElement(
           TableCell,
           {
-            key: R.prop('id', headerItem) + '-' + idx,
+            key: R.prop('id', value) + '-' + idx,
             component: 'th',
             className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
             id: idx + '_' + index,
@@ -134,8 +137,8 @@ var Header = function Header(_ref) {
                 },
                 variant: 'body1'
               },
-              R.prop('label', headerItem),
-              React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
+              R.prop('label', value),
+              React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true, labelAccessor: labelAccessor })
             )
           )
         );
@@ -149,7 +152,8 @@ Header.propTypes = process.env.NODE_ENV !== "production" ? {
   valuesHeaderData: PropTypes.array,
   xLayoutDataLength: PropTypes.number,
   subHeadCellsWidth: PropTypes.array,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default Header;

package/es/TableHtml5/section.js

@@ -13,6 +13,7 @@ import { isTimePeriodDimension } from '@sis-cc/dotstatsuite-sdmxjs';
 import SectionHeader from './sectionHeader';
 import Cell from './cell';
 import { getLight, getIsRtl } from '../utils';
+import { getValue } from './utils';
 import Flags from './flags';
 
 var useStyles = makeStyles(function (theme) {
@@ -77,7 +78,8 @@ var Section = function Section(_ref) {
       nbColumnsByRows = _ref.nbColumnsByRows,
       SideIcon = _ref.SideIcon,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var currentSection = R.path([0, 'key'], section);
@@ -96,7 +98,8 @@ var Section = function Section(_ref) {
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
       SideIcon: SideIcon,
-      HTMLRenderer: HTMLRenderer
+      HTMLRenderer: HTMLRenderer,
+      labelAccessor: labelAccessor
     }),
     R.addIndex(R.map)(function (sectionbody, rowIndex) {
       var _cx2;
@@ -111,15 +114,16 @@ var Section = function Section(_ref) {
         mapIndexed(function (cell, index) {
           var _cx;
 
-          var flags = R.path(['value', 'flags'], cell);
+          var value = getValue(labelAccessor)(cell);
+          var flags = R.prop('flags', value);
           var id = rowIndex + '_' + rowId + '_' + index;
 
           // special space is used for hierarchy U+2007    
-          var hierarchySpace = R.pipe(R.pathOr([], ['value', 'parents']), R.when(R.isNil, R.always([])), R.length,
+          var hierarchySpace = R.pipe(R.propOr([], 'parents'), R.when(R.isNil, R.always([])), R.length,
           // eslint-disable-next-line no-irregular-whitespace
           R.times(function () {
             return '·  ';
-          }))(cell);
+          }))(value);
 
           return React.createElement(
             TableCell,
@@ -142,8 +146,8 @@ var Section = function Section(_ref) {
               React.createElement(
                 Typography,
                 { variant: 'body1', tabIndex: 0 },
-                R.path(['value', 'label'], cell),
-                React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags })
+                R.prop('label', value),
+                React.createElement(Flags, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: flags })
               )
             )
           );
@@ -158,7 +162,7 @@ var Section = function Section(_ref) {
             'div',
             { className: classes.flagContainer },
             !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
-            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: R.prop('flags', sectionbody) })
+            React.createElement(Flags, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: R.prop('flags', sectionbody) })
           )
         ),
         mapIndexed(function (item, columnIndex) {
@@ -174,6 +178,7 @@ var Section = function Section(_ref) {
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
             HTMLRenderer: HTMLRenderer,
+            labelAccessor: labelAccessor,
             SideIcon: SideIcon,
             isActive: isActive,
             isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
@@ -204,7 +209,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   maxColumns: PropTypes.number,
   SideIcon: PropTypes.func,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default Section;

package/es/TableHtml5/sectionHeader.js

@@ -9,6 +9,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import Flags from './flags';
 import { getDark, getIsRtl } from '../utils';
+import { getValue } from './utils';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -59,7 +60,8 @@ var SectionHeader = function SectionHeader(_ref) {
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
       SideIcon = _ref.SideIcon,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -99,6 +101,7 @@ var SectionHeader = function SectionHeader(_ref) {
                 className: cx(classes.stickyHeaderSection, classes.leftLabelPosition, classes.sectionLabelsContainer)
               },
               mapIndexed(function (sectionHeader, index) {
+                var value = getValue(labelAccessor)(sectionHeader);
                 return React.createElement(
                   Fragment,
                   { key: index },
@@ -114,24 +117,29 @@ var SectionHeader = function SectionHeader(_ref) {
                       'data-testid': 'section-dim',
                       'aria-label': R.path(['dimension', 'id'], sectionHeader)
                     },
-                    R.path(['dimension', 'label'], sectionHeader),
+                    R.pipe(R.prop('dimension'), labelAccessor)(sectionHeader),
                     ':'
                   ),
                   React.createElement(
                     Typography,
                     { noWrap: true, variant: 'body1', component: 'span', tabIndex: 0 },
-                    R.path(['value', 'label'], sectionHeader)
+                    R.prop('label', value)
                   ),
                   React.createElement(Flags, {
                     HTMLRenderer: HTMLRenderer,
-                    flags: R.path(['value', 'flags'], sectionHeader)
+                    labelAccessor: labelAccessor,
+                    flags: R.prop('flags', value)
                   })
                 );
               }, R.path([0, 'data'], section)),
               React.createElement(
                 'span',
                 null,
-                React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: R.path([0, 'flags'], section) })
+                React.createElement(Flags, {
+                  HTMLRenderer: HTMLRenderer,
+                  flags: R.path([0, 'flags'], section),
+                  labelAccessor: labelAccessor
+                })
               )
             )
           )
@@ -153,7 +161,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   xLayoutDataLength: PropTypes.number,
   headerHeight: PropTypes.number,
   SideIcon: PropTypes.func,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default SectionHeader;

package/es/TableHtml5/subHeader.js

@@ -52,7 +52,8 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
       SideIcon = _ref.SideIcon,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      labelAccessor = _ref.labelAccessor;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -83,8 +84,9 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
           React.createElement(
             Typography,
             { variant: 'body1', tabIndex: 0, className: classes.label },
-            R.path(['dimension', 'label'], rowItem),
+            R.pipe(R.prop('dimension'), labelAccessor)(rowItem),
             React.createElement(Flags, {
+              labelAccessor: labelAccessor,
               HTMLRenderer: HTMLRenderer,
               flags: R.path(['dimension', 'flags'], rowItem)
             })
@@ -106,7 +108,7 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
           className: cx(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
         !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', item) }),
-        React.createElement(Flags, { flags: R.prop('flags', item) })
+        React.createElement(Flags, { flags: R.prop('flags', item), labelAccessor: labelAccessor, HTMLRenderer: HTMLRenderer })
       );
     }, headerData)
   );
@@ -118,7 +120,8 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   xLayoutData: PropTypes.array,
   SideIcon: PropTypes.func,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  labelAccessor: PropTypes.func
 } : {};
 
 export default SubHeader;