@sis-cc/dotstatsuite-visions 7.23.0 → 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/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;

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/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/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;

package/lib/TableHtml5/subHeader.js

@@ -85,7 +85,8 @@ var SubHeader = _react2.default.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 = (0, _styles.useTheme)();
@@ -116,8 +117,9 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
           _react2.default.createElement(
             _Typography2.default,
             { variant: 'body1', tabIndex: 0, className: classes.label },
-            R.path(['dimension', 'label'], rowItem),
+            R.pipe(R.prop('dimension'), labelAccessor)(rowItem),
             _react2.default.createElement(_flags2.default, {
+              labelAccessor: labelAccessor,
               HTMLRenderer: HTMLRenderer,
               flags: R.path(['dimension', 'flags'], rowItem)
             })
@@ -139,7 +141,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
           className: (0, _classnames2.default)(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
         !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', item) }),
-        _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item) })
+        _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item), labelAccessor: labelAccessor, HTMLRenderer: HTMLRenderer })
       );
     }, headerData)
   );
@@ -151,7 +153,8 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   xLayoutData: _propTypes2.default.array,
   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 = SubHeader;

package/lib/TableHtml5/utils.js

@@ -0,0 +1,31 @@
+'use strict';
+
+exports.__esModule = true;
+exports.getValue = undefined;
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+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; } }
+
+var getLabel = function getLabel(labelAccessor) {
+  return function (value) {
+    return R.pipe(R.propOr([], 'missingParents'), R.map(labelAccessor), R.append(labelAccessor(value)), R.join(' > '))(value);
+  };
+};
+
+var getValue = exports.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.23.0",
+  "version": "8.0.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",