@sis-cc/dotstatsuite-visions 7.22.7 → 8.0.0

package/es/TableHtml5/utils.js

@@ -0,0 +1,22 @@
+import * as R from 'ramda';
+
+var getLabel = function getLabel(labelAccessor) {
+  return function (value) {
+    return R.pipe(R.propOr([], 'missingParents'), R.map(labelAccessor), R.append(labelAccessor(value)), R.join(' > '))(value);
+  };
+};
+
+export var getValue = function getValue(labelAccessor) {
+  return function (item) {
+    return R.has('values', item) ? R.reduce(function (acc, val) {
+      return {
+        id: R.isEmpty(acc.id) ? val.id : acc.id + ', ' + val.id,
+        label: R.isEmpty(acc.label) ? getLabel(labelAccessor)(val) : acc.label + ', ' + getLabel(labelAccessor)(val),
+        flags: R.concat(acc.flags, val.flags || []),
+        parents: R.concat(acc.parents, val.parents || [])
+      };
+    }, { id: '', label: '', flags: [], parents: [] }, R.prop('values', item)) : R.pipe(R.prop('value'), function (val) {
+      return R.assoc('label', getLabel(labelAccessor)(val), val);
+    })(item);
+  };
+};

package/es/index.js

@@ -24,6 +24,7 @@ export { default as LabelDivider } from './LabelDivider';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
 export { default as NoData } from './NoData';
+export { default as Mode } from './Mode';
 export { default as Pagination } from './Pagination';
 export { default as PeriodPicker } from './PeriodPicker';
 export { spotlightScopeListEngine, reduceChildren } from './utils';

package/lib/DataHeader/DataHeader.js

@@ -152,7 +152,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,
@@ -168,12 +168,19 @@ var DataHeader = function DataHeader(_ref5) {
   var isWidthLess = R.lt(width);
   var classes = useStyles({ isWidthLess: isWidthLess });
 
-  var reducedContent = (0, _utils.getReducedContent)({ isWidthLess: isWidthLess, title: title, subtitle: subtitle, uprs: uprs, disclaimer: disclaimer });
+  var reducedContent = (0, _utils.getReducedContent)({
+    isWidthLess: isWidthLess,
+    title: title,
+    subtitle: subtitle,
+    combinations: combinations,
+    disclaimer: disclaimer
+  });
 
   var theme = (0, _styles.useTheme)();
   var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
 
   var subtitleLength = R.length(subtitle);
+  var combinationsLength = R.length(combinations);
 
   return _react2.default.createElement(
     'div',
@@ -224,11 +231,32 @@ var DataHeader = function DataHeader(_ref5) {
           );
         }))(subtitle)
       ),
-      isWidthUp(_theme.T4_BREAKPOINTS.xs3) && uprs && _react2.default.createElement(
-        _Typography2.default,
-        { className: classes.subtitle, 'data-testid': 'data-header-units' },
-        _react2.default.createElement(_Title2.default, { header: uprs.header }),
-        uprs.label
+      isWidthUp(_theme.T4_BREAKPOINTS.xs3) && combinations && R.not(R.isEmpty(combinations)) && _react2.default.createElement(
+        'div',
+        { className: classes.wrapperSubtitle },
+        R.pipe(R.addIndex(R.map)(function (comb, index) {
+          return _react2.default.createElement(
+            'div',
+            {
+              key: 'combination-' + index,
+              className: classes.subtitle,
+              'data-testid': 'data-header-combination',
+              'aria-label': comb.header
+            },
+            _react2.default.createElement(_Title2.default, { header: comb.header }),
+            _react2.default.createElement(
+              _Typography2.default,
+              { variant: 'inherit' },
+              comb.label
+            ),
+            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && _react2.default.createElement(_Flags2.default, { classes: classes, content: R.prop('flags', comb) }),
+            R.lt(index + 1, combinationsLength) && _react2.default.createElement(
+              'svg',
+              { width: '24', height: '8' },
+              _react2.default.createElement('circle', { cx: '12', cy: '4', r: '3', stroke: iconColor, fill: iconColor })
+            )
+          );
+        }))(combinations)
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && disclaimer && _react2.default.createElement(
         _Typography2.default,
@@ -271,10 +299,10 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
       }))
     }))
   })),
-  uprs: _propTypes2.default.shape({
+  combinations: _propTypes2.default.arrayOf(_propTypes2.default.shape({
     header: _propTypes2.default.string,
     label: _propTypes2.default.string
-  }),
+  })),
   sideProps: _propTypes2.default.object,
   SideIcon: _propTypes2.default.func,
   disclaimer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),

package/lib/Mode/Mode.js

@@ -0,0 +1,117 @@
+'use strict';
+
+exports.__esModule = true;
+
+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; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _styles = require('@material-ui/core/styles');
+
+var _RadioGroup = require('@material-ui/core/RadioGroup');
+
+var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
+
+var _FormControlLabel = require('@material-ui/core/FormControlLabel');
+
+var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
+
+var _Radio = require('@material-ui/core/Radio');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+var _ = require('../');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.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 _react2.default.createElement(
+    _.Tooltip,
+    { className: classes.icon, title: title, variant: 'light' },
+    children
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes2.default.string,
+  children: _propTypes2.default.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 _react2.default.createElement(
+    _RadioGroup2.default,
+    { 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 _react2.default.createElement(_FormControlLabel2.default, {
+        classes: { label: classes.label },
+        key: value,
+        control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
+        label: _react2.default.createElement(
+          'span',
+          null,
+          label,
+          popperLabel && _react2.default.createElement(
+            Warning,
+            { title: popperLabel },
+            children
+          )
+        ),
+        value: value
+      });
+    })(modes)
+  );
+};
+
+Mode.propTypes = process.env.NODE_ENV !== "production" ? {
+  changeMode: _propTypes2.default.func,
+  children: _propTypes2.default.node,
+  mode: _propTypes2.default.string,
+  modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    value: _propTypes2.default.string,
+    popperLabel: _propTypes2.default.string
+  }))
+} : {};
+
+exports.default = Mode;
+module.exports = exports['default'];

package/lib/Mode/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _Mode = require('./Mode');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Mode).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];

package/lib/TableHtml5/TableHtml5.js

@@ -43,13 +43,13 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* 
-*  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 = (0, _styles.makeStyles)(function (theme) {
   return {
@@ -74,7 +74,7 @@ var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function
   // 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;
 
@@ -82,7 +82,7 @@ var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function
       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;
@@ -105,7 +105,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();
 
@@ -142,7 +144,8 @@ var TableHtml5 = function TableHtml5(_ref) {
 
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
   if (isSingleObs) return _react2.default.createElement(_cell2.default, _extends({
-    HTMLRenderer: HTMLRenderer
+    HTMLRenderer: HTMLRenderer,
+    labelAccessor: labelAccessor
   }, R.pathOr({}, ['', '', '', 0], cells), {
     cellHandler: cellHandler,
     isOne: true
@@ -169,7 +172,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         valuesHeaderData: valuesHeaderData,
         xLayoutDataLength: xLayoutDataLength,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       }),
       _react2.default.createElement(_subHeader2.default, {
         headerData: headerData,
@@ -178,7 +182,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       })
     ),
     mapIndexed(function (section, index) {
@@ -196,7 +201,8 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellHandler: activeCellHandler,
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
-        HTMLRenderer: HTMLRenderer
+        HTMLRenderer: HTMLRenderer,
+        labelAccessor: labelAccessor
       });
     }, sectionsData)
   );
@@ -211,7 +217,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellIds: _propTypes2.default.object,
   SideIcon: _propTypes2.default.func,
   testId: _propTypes2.default.string,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = TableHtml5;

package/lib/TableHtml5/cell.js

@@ -92,7 +92,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 = (0, _utils.getIsRtl)((0, _styles.useTheme)());
@@ -123,7 +124,7 @@ var Cell = function Cell(_ref) {
       tabIndex: 0
     },
     !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-    hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags }),
+    hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, labelAccessor: labelAccessor }),
     uiValue
   );
 };
@@ -141,7 +142,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: _propTypes2.default.func,
   sideProps: _propTypes2.default.object,
   SideIcon: _propTypes2.default.func,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = Cell;

package/lib/TableHtml5/flags.js

@@ -32,6 +32,8 @@ var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _ = require('../');
 
+var _utils = require('./utils');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,7 +74,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);
@@ -82,23 +85,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 = (0, _utils.getValue)(labelAccessor)(flag);
+    return labelAccessor(flag) + ': ' + value.label;
+  }, flags);
   var content = _react2.default.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 _react2.default.createElement(
         'li',
         { key: index },
         R.is(Function, HTMLRenderer) ? _react2.default.createElement(HTMLRenderer, { html: label }) : label
       );
-    }, flags)
+    }, labels)
   );
   return _react2.default.createElement(
     _Tooltip2.default,
     {
       tabIndex: 0,
-      'aria-label': R.pipe(R.pluck('label'), R.join(', '))(flags),
+      'aria-label': R.join(', ', labels),
       'aria-hidden': false,
       title: content,
       placement: 'top'
@@ -123,10 +130,7 @@ var Flags = function Flags(_ref) {
         _react2.default.createElement(
           _Typography2.default,
           { variant: 'srOnly' },
-          '* ' + R.addIndex(R.map)(function (_ref3) {
-            var label = _ref3.label;
-            return label;
-          }, flags)
+          '* ' + labels
         )
       )
     )
@@ -136,7 +140,8 @@ var Flags = function Flags(_ref) {
 Flags.propTypes = process.env.NODE_ENV !== "production" ? {
   flags: _propTypes2.default.array,
   isHeader: _propTypes2.default.bool,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = Flags;

package/lib/TableHtml5/header.js

@@ -38,6 +38,8 @@ var _flags2 = _interopRequireDefault(_flags);
 
 var _utils = require('../utils');
 
+var _utils2 = require('./utils');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -87,7 +89,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 = (0, _styles.useTheme)();
@@ -124,22 +127,23 @@ var Header = function Header(_ref) {
           _react2.default.createElement(
             _Typography2.default,
             { variant: 'body1', className: classes.cellLabelHeader },
-            R.path([0, 'data', index, 'dimension', 'label'], headerData),
-            _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
+            R.pipe(R.path([0, 'data', index, 'dimension']), labelAccessor)(headerData),
+            _react2.default.createElement(_flags2.default, { 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 = (0, _utils2.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 _react2.default.createElement(
           _TableCell2.default,
           {
-            key: R.prop('id', headerItem) + '-' + idx,
+            key: R.prop('id', value) + '-' + idx,
             component: 'th',
             className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
             id: idx + '_' + index,
@@ -167,8 +171,8 @@ var Header = function Header(_ref) {
                 },
                 variant: 'body1'
               },
-              R.prop('label', headerItem),
-              _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true })
+              R.prop('label', value),
+              _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, isHeader: true, labelAccessor: labelAccessor })
             )
           )
         );
@@ -182,7 +186,8 @@ Header.propTypes = process.env.NODE_ENV !== "production" ? {
   valuesHeaderData: _propTypes2.default.array,
   xLayoutDataLength: _propTypes2.default.number,
   subHeadCellsWidth: _propTypes2.default.array,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = Header;

package/lib/TableHtml5/section.js

@@ -50,6 +50,8 @@ var _cell2 = _interopRequireDefault(_cell);
 
 var _utils = require('../utils');
 
+var _utils2 = require('./utils');
+
 var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
@@ -120,7 +122,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);
@@ -139,7 +142,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;
@@ -154,15 +158,16 @@ var Section = function Section(_ref) {
         mapIndexed(function (cell, index) {
           var _cx;
 
-          var flags = R.path(['value', 'flags'], cell);
+          var value = (0, _utils2.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 _react2.default.createElement(
             _TableCell2.default,
@@ -185,8 +190,8 @@ var Section = function Section(_ref) {
               _react2.default.createElement(
                 _Typography2.default,
                 { variant: 'body1', tabIndex: 0 },
-                R.path(['value', 'label'], cell),
-                _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags })
+                R.prop('label', value),
+                _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: flags })
               )
             )
           );
@@ -201,7 +206,7 @@ var Section = function Section(_ref) {
             'div',
             { className: classes.flagContainer },
             !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
-            _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: R.prop('flags', sectionbody) })
+            _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: R.prop('flags', sectionbody) })
           )
         ),
         mapIndexed(function (item, columnIndex) {
@@ -217,6 +222,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)]),
@@ -247,7 +253,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   maxColumns: _propTypes2.default.number,
   SideIcon: _propTypes2.default.func,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number),
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = Section;

package/lib/TableHtml5/sectionHeader.js

@@ -42,6 +42,8 @@ var _flags2 = _interopRequireDefault(_flags);
 
 var _utils = require('../utils');
 
+var _utils2 = require('./utils');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,7 +97,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 = (0, _styles.useTheme)();
@@ -135,6 +138,7 @@ var SectionHeader = function SectionHeader(_ref) {
                 className: (0, _classnames2.default)(classes.stickyHeaderSection, classes.leftLabelPosition, classes.sectionLabelsContainer)
               },
               mapIndexed(function (sectionHeader, index) {
+                var value = (0, _utils2.getValue)(labelAccessor)(sectionHeader);
                 return _react2.default.createElement(
                   _react.Fragment,
                   { key: index },
@@ -150,24 +154,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),
                     ':'
                   ),
                   _react2.default.createElement(
                     _Typography2.default,
                     { noWrap: true, variant: 'body1', component: 'span', tabIndex: 0 },
-                    R.path(['value', 'label'], sectionHeader)
+                    R.prop('label', value)
                   ),
                   _react2.default.createElement(_flags2.default, {
                     HTMLRenderer: HTMLRenderer,
-                    flags: R.path(['value', 'flags'], sectionHeader)
+                    labelAccessor: labelAccessor,
+                    flags: R.prop('flags', value)
                   })
                 );
               }, R.path([0, 'data'], section)),
               _react2.default.createElement(
                 'span',
                 null,
-                _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: R.path([0, 'flags'], section) })
+                _react2.default.createElement(_flags2.default, {
+                  HTMLRenderer: HTMLRenderer,
+                  flags: R.path([0, 'flags'], section),
+                  labelAccessor: labelAccessor
+                })
               )
             )
           )
@@ -189,7 +198,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   xLayoutDataLength: _propTypes2.default.number,
   headerHeight: _propTypes2.default.number,
   SideIcon: _propTypes2.default.func,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  labelAccessor: _propTypes2.default.func
 } : {};
 
 exports.default = SectionHeader;