@sis-cc/dotstatsuite-visions 10.8.0 → 10.10.0

package/es/Chips/CustomChip.js

@@ -31,14 +31,15 @@ var CustomChip = function CustomChip(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId,
       _ref$labelRenderer = _ref.labelRenderer,
-      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer;
+      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      deprecated = _ref.deprecated;
 
   var theme = useTheme();
   var isRtl = getIsRtl(theme);
   var classes = useStyles();
   var mapIndexed = R.addIndex(R.map);
   var onChange = R.is(Function)(onDelete) ? function () {
-    return onDelete(parentId, R.isNil(id) ? [] : [id]);
+    return onDelete(parentId, R.isNil(id) ? [] : R.append(id, deprecated || []));
   } : null;
   var hasTooltip = shownTooltip(items);
   var hasMultiLinedTooltip = showMultiLinedTooltip(items);
@@ -105,7 +106,8 @@ CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
   labelClasses: PropTypes.string,
   ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   items: PropTypes.array,
-  labelRenderer: PropTypes.func
+  labelRenderer: PropTypes.func,
+  deprecated: PropTypes.array
 } : {};
 
 export default CustomChip;

package/es/Chips/GroupedChips.js

@@ -55,10 +55,12 @@ var GroupedChips = function GroupedChips(_ref) {
     }) : R.map(function (items) {
       var lastItem = R.last(items);
       var id = lastItem.id,
-          isNotRemovable = lastItem.isNotRemovable;
+          isNotRemovable = lastItem.isNotRemovable,
+          deprecated = lastItem.deprecated;
 
 
       return React.createElement(CustomChip, {
+        deprecated: deprecated,
         key: id,
         id: id,
         items: R.pipe(R.length, R.gte(2)) ? items : null,

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -47,14 +47,17 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       hasSpotlight = props.hasSpotlight,
       _props$disableAccesso = props.disableAccessor,
       disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
-      allItems = props.allItems;
+      allItems = props.allItems,
+      _props$simpleSelectio = props.simpleSelectionMode,
+      simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
   var classes = useStyles({ accessibility: accessibility });
   var theme = useTheme();
   var isRtl = getIsRtl(theme);
   var Chip = R.isNil(Tag) ? InternalTag : Tag;
   var _allGroupedItems = R.groupBy(R.propOr('#ROOT', 'parentId'), allItems);
-  var _disableAccessor = getEvolvedDisableAccessor(_allGroupedItems, disableAccessor, R.always(false));
+  var _disableAccessor = simpleSelectionMode ? disableAccessor : getEvolvedDisableAccessor(_allGroupedItems, disableAccessor, R.always(false));
+
   var tagValue = getCounter(items, _disableAccessor, tagAccessor);
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
@@ -153,7 +156,8 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   spotlight: PropTypes.object,
   setSpotlight: PropTypes.func,
   hasSpotlight: PropTypes.bool,
-  allItems: PropTypes.array
+  allItems: PropTypes.array,
+  simpleSelectionMode: PropTypes.bool
 } : {};
 
 export default withSpotlight(withExpansionTree(HierarchicalFilter));

package/es/TableHtml5/TableHtml5.js

@@ -38,12 +38,13 @@ var useStyles = makeStyles(function (theme) {
 var mapIndexed = R.addIndex(R.map);
 
 export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(data) {
-  var colLength = R.pipe(R.pathOr([], [0, 'data']), R.length)(data);
+  var colLength = R.pipe(R.last, R.propOr([], 'data'), R.length)(data);
   return R.pipe(R.pluck('data'),
   // mix merge and transpose for performance
   R.reduce(function (acc, cells) {
-    R.addIndex(R.forEach)(function (cell, rowIndex) {
-      var cellId = R.has('values', cell) ? R.pipe(R.prop('values'), R.pluck('id'), R.join(','))(cell) : R.path(['value', 'id'], cell);
+    R.addIndex(R.forEach)(function (_, rowIndex) {
+      var cell = R.nth(rowIndex, cells) || {};
+      var cellId = R.has('values', cell) ? R.pipe(R.prop('values'), R.pluck('id'), R.join(','))(cell) : R.pathOr('missing' + rowIndex, ['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;
 
@@ -51,9 +52,13 @@ 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.pick(['value', 'values'], cell), { key: cellKey, spanCount: 1 })))(acc);
+        acc = R.over(R.lensIndex(rowIndex), R.append(_extends({}, R.pick(['value', 'values'], cell), {
+          key: cellKey,
+          spanCount: 1,
+          isEmpty: R.isEmpty(cell)
+        })))(acc);
       }
-    })(cells);
+    })(acc);
     return acc;
   }, R.times(R.always([]), colLength)))(data);
 };
@@ -118,7 +123,7 @@ var TableHtml5 = function TableHtml5(_ref) {
     };
   }, []);
 
-  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
+  var xLayoutData = R.pathOr([], [0, 1, -1, 'data'], sectionsData);
   var xLayoutDataLength = R.length(xLayoutData);
 
   var _useMemo = useMemo(function () {

package/es/TableHtml5/header.js

@@ -93,7 +93,7 @@ var Header = function Header(_ref) {
           React.createElement(
             Typography,
             { variant: 'body1', className: classes.cellLabelHeader },
-            R.pipe(R.path([0, 'data', index, 'dimension']), labelAccessor)(headerData),
+            R.pipe(R.path([-1, 'data', index, 'dimension']), labelAccessor)(headerData),
             React.createElement(Flags, {
               HTMLRenderer: HTMLRenderer,
               flags: flags,
@@ -106,7 +106,7 @@ var Header = function Header(_ref) {
       mapIndexed(function (headerItem, idx) {
         var _cx;
 
-        var value = getValue(labelAccessor)(headerItem);
+        var value = headerItem.isEmpty ? { label: '' } : getValue(labelAccessor)(headerItem);
         var flags = R.propOr([], 'flags', value);
         var hierarchySpace = R.pipe(R.propOr([], 'parents'), R.length, R.times(function () {
           return '·';
@@ -154,7 +154,7 @@ var Header = function Header(_ref) {
         );
       }, R.nth(index, valuesHeaderData))
     );
-  }, R.compose(R.length, R.pathOr([], [0, 'data']))(headerData));
+  }, R.compose(R.length, R.pathOr([], [-1, 'data']))(headerData));
 };
 
 Header.propTypes = process.env.NODE_ENV !== "production" ? {

package/es/TableHtml5/section.js

@@ -105,7 +105,7 @@ var Section = function Section(_ref) {
       HTMLRenderer: HTMLRenderer,
       labelAccessor: labelAccessor
     }),
-    R.addIndex(R.map)(function (sectionbody, rowIndex) {
+    mapIndexed(function (sectionbody, rowIndex) {
       var _cx2;
 
       var rowId = sectionbody.key + '_' + sectionIndex + '_' + rowIndex;
@@ -115,11 +115,12 @@ var Section = function Section(_ref) {
       return React.createElement(
         TableRow,
         { key: rowId },
-        mapIndexed(function (cell, index) {
+        R.times(function (index) {
           var _cx;
 
-          var value = getValue(labelAccessor)(cell);
-          var flags = R.prop('flags', value);
+          var cell = R.path(['data', index], sectionbody);
+          var value = R.isNil(cell) ? { label: '' } : getValue(labelAccessor)(cell);
+          var flags = R.propOr([], 'flags', value);
           var id = rowIndex + '_' + rowId + '_' + index;
 
           // special space is used for hierarchy U+2007    
@@ -133,7 +134,7 @@ var Section = function Section(_ref) {
             TableCell,
             {
               key: id,
-              className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = R.is(Function, isNoWrap) && isNoWrap(R.prop('dimension', cell)), _cx)),
+              className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = R.is(Function, isNoWrap) && isNoWrap(R.propOr({}, 'dimension', cell)), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
               component: 'th',
@@ -159,7 +160,7 @@ var Section = function Section(_ref) {
               )
             )
           );
-        }, R.prop('data', sectionbody)),
+        }, xLayoutDataLength /*R.prop('data', sectionbody)*/),
         React.createElement(
           TableCell,
           {
@@ -185,8 +186,9 @@ var Section = function Section(_ref) {
 
           var intersectionCellId = rowId + '/' + columnIndex;
           var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
+          var missingValLabel = item.isEmpty || sectionbody.isEmpty ? '' : '..';
           return React.createElement(Cell, _extends({}, R.pipe(R.pathOr({ value: null }, [item.key, currentSection, sectionbody.key, 0]), R.over(R.lensProp('value'), function (val) {
-            return R.isNil(val) ? '..' : cellValueAccessor(val);
+            return R.isNil(val) ? missingValLabel : cellValueAccessor(val);
           }))(cells), {
             key: intersectionCellId,
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,

package/es/VirtualizedTree/Item.js

@@ -35,19 +35,17 @@ var Item = function Item(_ref) {
       style = _ref.style,
       isRtl = _ref.isRtl,
       accessibility = _ref.accessibility,
-      index = _ref.index,
       HTMLRenderer = _ref.HTMLRenderer,
       hierarchicalId = _ref.hierarchicalId,
       labels = _ref.labels,
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
-      eventsCallbacks = _ref.eventsCallbacks;
+      eventsListeners = _ref.eventsListeners;
 
   var _React$useState = React.useState(false),
       isTooltipShown = _React$useState[0],
       setIsTooltipShown = _React$useState[1];
 
-  var callbacks = eventsCallbacks(hierarchicalId || id, index);
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
   return React.createElement(
     ListItem,
@@ -77,23 +75,21 @@ var Item = function Item(_ref) {
       },
       React.createElement(NavigateIcon, null)
     ),
-    React.createElement(ListItemText, _extends({
+    React.createElement(ListItemText, {
       'data-testid': 'value_' + id,
       tabIndex: 0,
-      'aria-label': isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      'aria-label': isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled,
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
-      className: cx((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected && (!isDisabled || !isGreyed), _cx[classes.listItemHover] = !isDisabled || !isGreyed, _cx)),
-      onClick: isDisabled ? null : callbacks.onClick,
-      onMouseDown: isDisabled || isTooltipShown ? null : callbacks.onMouseDown,
-      onMouseUp: isDisabled || isTooltipShown ? null : callbacks.onMouseUp,
-      onMouseEnter: isDisabled || isTooltipShown ? null : callbacks.onMouseEnter
-    }, R.pick(['onKeyPress'], callbacks), {
-      title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      style: { opacity: isDisabled ? '0.5' : '1' },
+      className: cx((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
+      onClick: isDisabled ? null : eventsListeners.onClick,
+      onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
+      onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
+      title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
       primary: React.createElement(
         'div',
         {
@@ -104,7 +100,8 @@ var Item = function Item(_ref) {
           Icon,
           {
             color: 'primary',
-            className: cx(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
+            className: cx(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3)),
+            style: { opacity: isDisabled ? '0.5' : '1' }
           },
           isSelected ? React.createElement(CheckedBoxIcon, null) : React.createElement(CheckBoxIcon, null)
         ),
@@ -154,7 +151,7 @@ var Item = function Item(_ref) {
           ')'
         )
       )
-    }))
+    })
   );
 };
 
@@ -178,13 +175,12 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   style: PropTypes.object,
   isRtl: PropTypes.bool,
   accessibility: PropTypes.bool,
-  index: PropTypes.number,
   labelRenderer: PropTypes.func,
   HTMLRenderer: PropTypes.func,
   hierarchicalId: PropTypes.string,
   labels: PropTypes.object,
   depth: PropTypes.number,
-  eventsCallbacks: PropTypes.func,
+  eventsListeners: PropTypes.object,
   isGreyed: PropTypes.bool
 } : {};
 

package/es/VirtualizedTree/VirtualizedTree.js

@@ -61,7 +61,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
       _props$scopeGetter = props.scopeGetter,
       scopeGetter = _props$scopeGetter === undefined ? singleScopeGetter : _props$scopeGetter,
       _props$treeHeight = props.treeHeight,
-      treeHeight = _props$treeHeight === undefined ? 0 : _props$treeHeight;
+      treeHeight = _props$treeHeight === undefined ? 0 : _props$treeHeight,
+      _props$simpleSelectio = props.simpleSelectionMode,
+      simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
   var theme = useTheme();
 
@@ -177,56 +179,63 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setIsMouseDown(false);
     }
   };
-  var eventsCallbacks = function eventsCallbacks(id, index) {
+
+  var onMouseUp = function onMouseUp(e) {
+    if (!isMouseDown) {
+      return;
+    }
+    e.preventDefault();
+    apply();
+    setIsMouseDown(false);
+  };
+
+  var onMouseLeave = function onMouseLeave() {
+    if (isMouseDown) {
+      apply();
+    }
+  };
+
+  var onKeyUp = function onKeyUp(e) {
+    e.preventDefault();
+    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
+      apply();
+    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
+      apply();
+    }
+  };
+
+  var itemEventsListeners = function itemEventsListeners(id, index) {
     return {
-      onMouseUp: isMouseDown ? function (e) {
-        e.preventDefault();
-        apply();
-        if (!R.isEmpty(selectIds)) {
-          setLastItemId(id);
-        }
-        setIsMouseDown(false);
-      } : null,
       onMouseDown: function onMouseDown(e) {
-        e.preventDefault();
-        if (e.ctrlKey || e.shiftKey) {
+        if (!simpleSelectionMode && (e.ctrlKey || e.shiftKey)) {
           return;
         }
         setIsMouseDown(true);
         multiSelect(id);
       },
-      onMouseEnter: isMouseDown ? function (e) {
+      onMouseEnter: function onMouseEnter(e) {
         e.preventDefault();
-        if (e.ctrlKey || e.shiftKey) {
+        if (!isMouseDown || simpleSelectionMode || e.ctrlKey || e.shiftKey) {
           return;
         }
         multiSelect(id);
-      } : null,
+        setLastItemId(id);
+      },
       onClick: function onClick(e) {
         e.preventDefault();
-
-        if (e.ctrlKey) {
+        if (e.ctrlKey && !simpleSelectionMode) {
           multiSelect(id);
-        } else if (e.shiftKey) {
+        } else if (e.shiftKey && !simpleSelectionMode) {
           shiftSelect(index);
         } else {
           setIsMouseDown(false);
           setLastItemId(id);
         }
       }
-      // ondblclick: () => null
     };
   };
-  var onKeyUp = function onKeyUp(e) {
-    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
-      apply();
-    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
-      apply();
-    }
-  };
   var ref = useRef();
   var classes = useStyles();
-
   useEffect(function () {
     var current = ref.current;
     var handler = function handler(event) {
@@ -249,7 +258,6 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setScrollTop(undefined);
     }
     if (R.isNil(current)) return;
-
     current.addEventListener('wheel', handler, { passive: false });
     return function () {
       current.removeEventListener('wheel', handler, { passive: false });
@@ -267,7 +275,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
       disablePadding: true,
       style: { height: maxHeight + 2 },
       onKeyUp: onKeyUp,
-      onMouseLeave: isMouseDown ? apply : null,
+      onMouseUp: onMouseUp,
+      onMouseLeave: onMouseLeave,
       ref: ref
     },
     React.createElement(
@@ -304,11 +313,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
               },
               NavigateIcon: R.has(itemId, expandedIds) ? ExpandLessIcon : ExpandMoreIcon,
               isRtl: isRtl,
-              eventsCallbacks: eventsCallbacks,
+              eventsListeners: itemEventsListeners(getHierarchicalId(item), index),
               HTMLRenderer: HTMLRenderer,
               classes: classes,
               labels: labels,
-              index: index,
               style: style,
               accessibility: accessibility,
               ariaLabel: R.prop('navigateNext')(labels),
@@ -340,7 +348,8 @@ VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
   collapse: PropTypes.func,
   treeHeight: PropTypes.number,
   isGreyed: PropTypes.func,
-  scopeGetter: PropTypes.func
+  scopeGetter: PropTypes.func,
+  simpleSelectionMode: PropTypes.bool
 } : {};
 
 export default VirtualizedTree;

package/lib/Chips/CustomChip.js

@@ -68,14 +68,15 @@ var CustomChip = function CustomChip(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId,
       _ref$labelRenderer = _ref.labelRenderer,
-      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer;
+      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      deprecated = _ref.deprecated;
 
   var theme = (0, _styles.useTheme)();
   var isRtl = (0, _utils.getIsRtl)(theme);
   var classes = useStyles();
   var mapIndexed = R.addIndex(R.map);
   var onChange = R.is(Function)(onDelete) ? function () {
-    return onDelete(parentId, R.isNil(id) ? [] : [id]);
+    return onDelete(parentId, R.isNil(id) ? [] : R.append(id, deprecated || []));
   } : null;
   var hasTooltip = (0, _utils2.shownTooltip)(items);
   var hasMultiLinedTooltip = (0, _utils2.showMultiLinedTooltip)(items);
@@ -142,7 +143,8 @@ CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
   labelClasses: _propTypes2.default.string,
   ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
   items: _propTypes2.default.array,
-  labelRenderer: _propTypes2.default.func
+  labelRenderer: _propTypes2.default.func,
+  deprecated: _propTypes2.default.array
 } : {};
 
 exports.default = CustomChip;

package/lib/Chips/GroupedChips.js

@@ -83,10 +83,12 @@ var GroupedChips = function GroupedChips(_ref) {
     }) : R.map(function (items) {
       var lastItem = R.last(items);
       var id = lastItem.id,
-          isNotRemovable = lastItem.isNotRemovable;
+          isNotRemovable = lastItem.isNotRemovable,
+          deprecated = lastItem.deprecated;
 
 
       return _react2.default.createElement(_CustomChip2.default, {
+        deprecated: deprecated,
         key: id,
         id: id,
         items: R.pipe(R.length, R.gte(2)) ? items : null,

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -76,14 +76,17 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       hasSpotlight = props.hasSpotlight,
       _props$disableAccesso = props.disableAccessor,
       disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
-      allItems = props.allItems;
+      allItems = props.allItems,
+      _props$simpleSelectio = props.simpleSelectionMode,
+      simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
   var classes = (0, _styles.useStyles)({ accessibility: accessibility });
   var theme = (0, _core.useTheme)();
   var isRtl = (0, _utils2.getIsRtl)(theme);
   var Chip = R.isNil(Tag) ? _.Tag : Tag;
   var _allGroupedItems = R.groupBy(R.propOr('#ROOT', 'parentId'), allItems);
-  var _disableAccessor = (0, _utils.getEvolvedDisableAccessor)(_allGroupedItems, disableAccessor, R.always(false));
+  var _disableAccessor = simpleSelectionMode ? disableAccessor : (0, _utils.getEvolvedDisableAccessor)(_allGroupedItems, disableAccessor, R.always(false));
+
   var tagValue = getCounter(items, _disableAccessor, tagAccessor);
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
@@ -182,7 +185,8 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   spotlight: _propTypes2.default.object,
   setSpotlight: _propTypes2.default.func,
   hasSpotlight: _propTypes2.default.bool,
-  allItems: _propTypes2.default.array
+  allItems: _propTypes2.default.array,
+  simpleSelectionMode: _propTypes2.default.bool
 } : {};
 
 exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(HierarchicalFilter));

package/lib/TableHtml5/TableHtml5.js

@@ -72,12 +72,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 var mapIndexed = R.addIndex(R.map);
 
 var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(data) {
-  var colLength = R.pipe(R.pathOr([], [0, 'data']), R.length)(data);
+  var colLength = R.pipe(R.last, R.propOr([], 'data'), R.length)(data);
   return R.pipe(R.pluck('data'),
   // mix merge and transpose for performance
   R.reduce(function (acc, cells) {
-    R.addIndex(R.forEach)(function (cell, rowIndex) {
-      var cellId = R.has('values', cell) ? R.pipe(R.prop('values'), R.pluck('id'), R.join(','))(cell) : R.path(['value', 'id'], cell);
+    R.addIndex(R.forEach)(function (_, rowIndex) {
+      var cell = R.nth(rowIndex, cells) || {};
+      var cellId = R.has('values', cell) ? R.pipe(R.prop('values'), R.pluck('id'), R.join(','))(cell) : R.pathOr('missing' + rowIndex, ['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;
 
@@ -85,9 +86,13 @@ 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.pick(['value', 'values'], cell), { key: cellKey, spanCount: 1 })))(acc);
+        acc = R.over(R.lensIndex(rowIndex), R.append(_extends({}, R.pick(['value', 'values'], cell), {
+          key: cellKey,
+          spanCount: 1,
+          isEmpty: R.isEmpty(cell)
+        })))(acc);
       }
-    })(cells);
+    })(acc);
     return acc;
   }, R.times(R.always([]), colLength)))(data);
 };
@@ -152,7 +157,7 @@ var TableHtml5 = function TableHtml5(_ref) {
     };
   }, []);
 
-  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
+  var xLayoutData = R.pathOr([], [0, 1, -1, 'data'], sectionsData);
   var xLayoutDataLength = R.length(xLayoutData);
 
   var _useMemo = (0, _react.useMemo)(function () {

package/lib/TableHtml5/header.js

@@ -127,7 +127,7 @@ var Header = function Header(_ref) {
           _react2.default.createElement(
             _Typography2.default,
             { variant: 'body1', className: classes.cellLabelHeader },
-            R.pipe(R.path([0, 'data', index, 'dimension']), labelAccessor)(headerData),
+            R.pipe(R.path([-1, 'data', index, 'dimension']), labelAccessor)(headerData),
             _react2.default.createElement(_flags2.default, {
               HTMLRenderer: HTMLRenderer,
               flags: flags,
@@ -140,7 +140,7 @@ var Header = function Header(_ref) {
       mapIndexed(function (headerItem, idx) {
         var _cx;
 
-        var value = (0, _utils2.getValue)(labelAccessor)(headerItem);
+        var value = headerItem.isEmpty ? { label: '' } : (0, _utils2.getValue)(labelAccessor)(headerItem);
         var flags = R.propOr([], 'flags', value);
         var hierarchySpace = R.pipe(R.propOr([], 'parents'), R.length, R.times(function () {
           return '·';
@@ -188,7 +188,7 @@ var Header = function Header(_ref) {
         );
       }, R.nth(index, valuesHeaderData))
     );
-  }, R.compose(R.length, R.pathOr([], [0, 'data']))(headerData));
+  }, R.compose(R.length, R.pathOr([], [-1, 'data']))(headerData));
 };
 
 Header.propTypes = process.env.NODE_ENV !== "production" ? {

package/lib/TableHtml5/section.js

@@ -147,7 +147,7 @@ var Section = function Section(_ref) {
       HTMLRenderer: HTMLRenderer,
       labelAccessor: labelAccessor
     }),
-    R.addIndex(R.map)(function (sectionbody, rowIndex) {
+    mapIndexed(function (sectionbody, rowIndex) {
       var _cx2;
 
       var rowId = sectionbody.key + '_' + sectionIndex + '_' + rowIndex;
@@ -157,11 +157,12 @@ var Section = function Section(_ref) {
       return _react2.default.createElement(
         _TableRow2.default,
         { key: rowId },
-        mapIndexed(function (cell, index) {
+        R.times(function (index) {
           var _cx;
 
-          var value = (0, _utils2.getValue)(labelAccessor)(cell);
-          var flags = R.prop('flags', value);
+          var cell = R.path(['data', index], sectionbody);
+          var value = R.isNil(cell) ? { label: '' } : (0, _utils2.getValue)(labelAccessor)(cell);
+          var flags = R.propOr([], 'flags', value);
           var id = rowIndex + '_' + rowId + '_' + index;
 
           // special space is used for hierarchy U+2007    
@@ -175,7 +176,7 @@ var Section = function Section(_ref) {
             _TableCell2.default,
             {
               key: id,
-              className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = R.is(Function, isNoWrap) && isNoWrap(R.prop('dimension', cell)), _cx)),
+              className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = R.is(Function, isNoWrap) && isNoWrap(R.propOr({}, 'dimension', cell)), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
               component: 'th',
@@ -201,7 +202,7 @@ var Section = function Section(_ref) {
               )
             )
           );
-        }, R.prop('data', sectionbody)),
+        }, xLayoutDataLength /*R.prop('data', sectionbody)*/),
         _react2.default.createElement(
           _TableCell2.default,
           {
@@ -227,8 +228,9 @@ var Section = function Section(_ref) {
 
           var intersectionCellId = rowId + '/' + columnIndex;
           var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
+          var missingValLabel = item.isEmpty || sectionbody.isEmpty ? '' : '..';
           return _react2.default.createElement(_cell2.default, _extends({}, R.pipe(R.pathOr({ value: null }, [item.key, currentSection, sectionbody.key, 0]), R.over(R.lensProp('value'), function (val) {
-            return R.isNil(val) ? '..' : cellValueAccessor(val);
+            return R.isNil(val) ? missingValLabel : cellValueAccessor(val);
           }))(cells), {
             key: intersectionCellId,
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,