@sis-cc/dotstatsuite-visions 10.29.0 → 11.0.0

package/lib/TableLayout/TableLayout.js

@@ -90,6 +90,12 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       flexDirection: 'row',
       alignItems: 'center',
       flexFlow: 'nowrap'
+    },
+    activationButton: {
+      backgroundColor: theme.palette.action.hover,
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected
+      }
     }
   };
 });
@@ -102,7 +108,11 @@ var TableLayout = function TableLayout(_ref) {
   var _boxLabel;
 
   var _ref$layout = _ref.layout,
-      layout = _ref$layout === undefined ? [] : _ref$layout,
+      layout = _ref$layout === undefined ? {} : _ref$layout,
+      _ref$items = _ref.items,
+      items = _ref$items === undefined ? [] : _ref$items,
+      _ref$optionalItem = _ref.optionalItem,
+      optionalItem = _ref$optionalItem === undefined ? {} : _ref$optionalItem,
       _ref$itemRenderer = _ref.itemRenderer,
       itemRenderer = _ref$itemRenderer === undefined ? R.prop('name') : _ref$itemRenderer,
       itemButtonProps = _ref.itemButtonProps,
@@ -112,40 +122,51 @@ var TableLayout = function TableLayout(_ref) {
       accessibility = _ref.accessibility;
 
   var classes = useStyles();
-  var hiddenElement = R.map(R.filter(function (_ref2) {
-    var isHidden = _ref2.isHidden;
-    return isHidden;
-  }))(layout);
 
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)(layout),
       currentLayout = _useState[0],
       setCurrentLayout = _useState[1];
 
   var boxLabel = (_boxLabel = {}, _boxLabel[_constants.BOX.header] = labels.column || _constants.BOX.header, _boxLabel[_constants.BOX.sections] = labels.section || _constants.BOX.sections, _boxLabel[_constants.BOX.rows] = labels.row || _constants.BOX.rows, _boxLabel);
-
   (0, _react.useEffect)(function () {
-    return setCurrentLayout((0, _lib.rejectHiddenElement)(layout));
+    setCurrentLayout(layout);
   }, [layout]);
+  var indexedItems = (0, _react.useMemo)(function () {
+    var indexed = R.indexBy(R.prop('id'), items);
+    if (!R.isEmpty(optionalItem) && !R.isNil(optionalItem)) {
+      return R.assoc(optionalItem.id, optionalItem, indexed);
+    }
+    return indexed;
+  }, [items, optionalItem]);
 
   var onChangeLayout = function onChangeLayout(props) {
     return setCurrentLayout((0, _lib.changeLayout)(_extends({}, props)));
   };
 
+  var activateOptionalItem = function activateOptionalItem() {
+    var nextLayout = R.over(R.lensProp('header'), R.append(optionalItem.id), currentLayout);
+    setCurrentLayout(nextLayout);
+  };
+
+  var deactivateOptionalItem = function deactivateOptionalItem() {
+    setCurrentLayout(R.map(R.reject(R.equals(optionalItem.id)), currentLayout));
+  };
+
   var onCommit = function onCommit() {
     if (R.is(Function)(commit)) {
-      commit((0, _lib.addHiddenElement)(currentLayout)(hiddenElement));
+      commit(currentLayout);
     }
   };
 
   var onCancel = function onCancel() {
     if (R.is(Function)(setCurrentLayout)) {
-      setCurrentLayout((0, _lib.rejectHiddenElement)(layout));
+      setCurrentLayout(layout);
     }
   };
 
-  var onDragStart = function onDragStart(_ref3, provided) {
-    var draggableId = _ref3.draggableId,
-        source = _ref3.source;
+  var onDragStart = function onDragStart(_ref2, provided) {
+    var draggableId = _ref2.draggableId,
+        source = _ref2.source;
 
     if (R.is(Function)(labels.wcagDragStart)) {
       // start.source = droppableId & index
@@ -159,9 +180,9 @@ var TableLayout = function TableLayout(_ref) {
     }
   };
 
-  var onDragUpdate = function onDragUpdate(_ref4, provided) {
-    var destination = _ref4.destination,
-        source = _ref4.source;
+  var onDragUpdate = function onDragUpdate(_ref3, provided) {
+    var destination = _ref3.destination,
+        source = _ref3.source;
 
     if (R.isNil(destination)) {
       return;
@@ -183,10 +204,10 @@ var TableLayout = function TableLayout(_ref) {
   };
 
   var onDragEnd = function onDragEnd(layout) {
-    return function (_ref5, provided) {
-      var reason = _ref5.reason,
-          destination = _ref5.destination,
-          source = _ref5.source;
+    return function (_ref4, provided) {
+      var reason = _ref4.reason,
+          destination = _ref4.destination,
+          source = _ref4.source;
 
       if (R.is(String)(labels.wcagDragCancel)) {
         if (R.equals(reason, 'CANCEL')) {
@@ -220,10 +241,16 @@ var TableLayout = function TableLayout(_ref) {
     };
   };
 
+  var getItems = function getItems(level) {
+    return R.pipe(R.prop(level), function (ids) {
+      return R.props(ids, indexedItems);
+    }, R.filter(R.identity))(currentLayout);
+  };
+
   var header = _react2.default.createElement(_Box2.default, {
     title: labels.column,
     Icon: _ViewColumnOutlined2.default,
-    items: R.prop(_constants.BOX.header)(currentLayout),
+    items: getItems('header'),
     labels: labels,
     dropZoneLabel: _constants.BOX.header,
     itemRenderer: itemRenderer,
@@ -238,7 +265,7 @@ var TableLayout = function TableLayout(_ref) {
     _react2.default.createElement(_Box2.default, {
       title: labels.section,
       Icon: _Reorder2.default,
-      items: R.prop(_constants.BOX.sections)(currentLayout),
+      items: getItems('sections'),
       labels: labels,
       dropZoneLabel: _constants.BOX.sections,
       itemRenderer: itemRenderer,
@@ -249,7 +276,7 @@ var TableLayout = function TableLayout(_ref) {
     _react2.default.createElement(_Box2.default, {
       title: labels.row,
       Icon: _ViewListOutlined2.default,
-      items: R.prop(_constants.BOX.rows)(currentLayout),
+      items: getItems('rows'),
       labels: labels,
       dropZoneLabel: _constants.BOX.rows,
       itemRenderer: itemRenderer,
@@ -259,6 +286,8 @@ var TableLayout = function TableLayout(_ref) {
     })
   );
 
+  var isOptionalActivated = (0, _lib.getIsOptionalActivated)(currentLayout, R.prop('id', optionalItem));
+
   return _react2.default.createElement(
     _Grid2.default,
     { 'data-testid': 'table-layout-test-id', container: true },
@@ -323,63 +352,101 @@ var TableLayout = function TableLayout(_ref) {
                 labels.table
               )
             ),
-            _react2.default.createElement(_TablePreview2.default, _extends({}, currentLayout, { itemRenderer: itemRenderer }))
+            _react2.default.createElement(_TablePreview2.default, {
+              header: R.props(R.prop('header', currentLayout), indexedItems),
+              sections: R.props(R.prop('sections', currentLayout), indexedItems),
+              rows: R.props(R.prop('rows', currentLayout), indexedItems),
+              itemRenderer: itemRenderer
+            })
           )
         )
       )
     ),
     _react2.default.createElement(
       _Grid2.default,
-      { container: true, justifyContent: 'flex-end', className: classes.buttonContainer, spacing: 1 },
-      R.map(function (button) {
-        return _react2.default.createElement(
-          _Grid2.default,
-          { item: true, key: button.id, 'data-testid': button['data-testid'] },
+      {
+        container: true,
+        justifyContent: 'space-between',
+        className: classes.buttonContainer,
+        spacing: 1
+      },
+      _react2.default.createElement(
+        _Grid2.default,
+        {
+          item: true,
+          'data-testid': isOptionalActivated ? 'table-layout-deactivate-optional' : 'table-layout-activate-optional'
+        },
+        !R.isNil(optionalItem) && !R.isEmpty(optionalItem) && _react2.default.createElement(
+          _.Button,
+          {
+            className: classes.activationButton,
+            'aria-label': R.prop('activationLabel', optionalItem),
+            color: 'primary',
+            onClick: isOptionalActivated ? deactivateOptionalItem : activateOptionalItem,
+            startIcon: _react2.default.createElement(_Done2.default, null)
+          },
           _react2.default.createElement(
-            _.Button,
-            _extends({ 'aria-label': button.label, color: 'primary' }, button),
-            _react2.default.createElement(
-              _Typography2.default,
-              { variant: 'body2' },
-              button.label
-            )
+            _Typography2.default,
+            { variant: 'body2' },
+            R.prop('activationLabel', optionalItem)
           )
-        );
-      })([{
-        id: 2,
-        label: labels.cancel,
-        onClick: onCancel,
-        startIcon: _react2.default.createElement(_Undo2.default, null),
-        'datatest-id': 'table-layout-cancel'
-      }, {
-        id: 1,
-        label: labels.commit,
-        onClick: onCommit,
-        startIcon: _react2.default.createElement(_Done2.default, null),
-        variant: 'contained',
-        alternative: 'siscc',
-        className: classes.applyButton,
-        'data-testid': 'table-layout-apply'
-      }])
+        )
+      ),
+      _react2.default.createElement(
+        _Grid2.default,
+        { item: true },
+        _react2.default.createElement(
+          _Grid2.default,
+          { container: true, justifyContent: 'flex-end', display: 'flex', spacing: 1 },
+          R.map(function (button) {
+            return _react2.default.createElement(
+              _Grid2.default,
+              { item: true, key: button.id, 'data-testid': button['data-testid'] },
+              _react2.default.createElement(
+                _.Button,
+                _extends({ 'aria-label': button.label, color: 'primary' }, button),
+                _react2.default.createElement(
+                  _Typography2.default,
+                  { variant: 'body2' },
+                  button.label
+                )
+              )
+            );
+          })([{
+            id: 2,
+            label: labels.cancel,
+            onClick: onCancel,
+            startIcon: _react2.default.createElement(_Undo2.default, null),
+            'datatest-id': 'table-layout-cancel'
+          }, {
+            id: 1,
+            label: labels.commit,
+            onClick: onCommit,
+            startIcon: _react2.default.createElement(_Done2.default, null),
+            variant: 'contained',
+            alternative: 'siscc',
+            className: classes.applyButton,
+            'data-testid': 'table-layout-apply'
+          }])
+        )
+      )
     )
   );
 };
 
-var patern = {
+var patern = _propTypes2.default.shape({
   id: _propTypes2.default.string,
-  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  values: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    id: _propTypes2.default.string,
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
-  }))
-};
+  count: _propTypes2.default.number
+});
 
 TableLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   layout: _propTypes2.default.shape({
-    header: _propTypes2.default.arrayOf(_propTypes2.default.shape(patern)),
-    sections: _propTypes2.default.arrayOf(_propTypes2.default.shape(patern)),
-    rows: _propTypes2.default.arrayOf(_propTypes2.default.shape(patern))
+    header: _propTypes2.default.arrayOf(_propTypes2.default.string),
+    sections: _propTypes2.default.arrayOf(_propTypes2.default.string),
+    rows: _propTypes2.default.arrayOf(_propTypes2.default.string)
   }),
+  items: _propTypes2.default.arrayOf(patern),
+  optionalItem: patern,
   itemRenderer: _propTypes2.default.func,
   commit: _propTypes2.default.func,
   noPreview: _propTypes2.default.bool,
@@ -404,10 +471,10 @@ TableLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   accessibility: _propTypes2.default.bool
 } : {};
 
-exports.default = (0, _utils.withBlank)(function (_ref6) {
-  var _ref6$layout = _ref6.layout,
-      layout = _ref6$layout === undefined ? [] : _ref6$layout,
-      isBlank = _ref6.isBlank;
+exports.default = (0, _utils.withBlank)(function (_ref5) {
+  var _ref5$layout = _ref5.layout,
+      layout = _ref5$layout === undefined ? [] : _ref5$layout,
+      isBlank = _ref5.isBlank;
   return {
     isBlank: R.or(isBlank, R.pipe(R.values, R.all(R.isEmpty))(layout))
   };

package/lib/TableLayout/lib.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.addHiddenElement = exports.rejectHiddenElement = exports.changeLayout = undefined;
+exports.getIsOptionalActivated = exports.addHiddenElement = exports.rejectHiddenElement = exports.changeLayout = undefined;
 
 var _ramda = require('ramda');
 
@@ -32,4 +32,9 @@ var addHiddenElement = exports.addHiddenElement = function addHiddenElement(layo
   return R.mapObjIndexed(function (values, key) {
     return R.pipe(R.prop(key), R.concat(values))(layout);
   });
+};
+
+var getIsOptionalActivated = exports.getIsOptionalActivated = function getIsOptionalActivated(layout, optionalId) {
+  var founded = R.pipe(R.values, R.unnest, R.find(R.equals(optionalId)))(layout);
+  return !R.isNil(founded);
 };

package/lib/TablePreview/TablePreview.js

@@ -30,6 +30,10 @@ var _TableCell = require('@material-ui/core/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
+var _Lens = require('@material-ui/icons/Lens');
+
+var _Lens2 = _interopRequireDefault(_Lens);
+
 var _utils = require('../utils');
 
 var _styles = require('./styles');
@@ -43,23 +47,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var patern = {
   id: _propTypes2.default.string,
   label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
-  values: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    id: _propTypes2.default.string,
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
-  }))
+  count: _propTypes2.default.number
 };
 
 var Header = function Header(_ref) {
   var header = _ref.header,
-      colSpan = _ref.colSpan;
+      colSpan = _ref.colSpan,
+      valuesSpan = _ref.valuesSpan;
 
   var classes = (0, _styles.useStyles)();
 
   return R.map(function (_ref2) {
     var id = _ref2.id,
         label = _ref2.label,
-        _ref2$values = _ref2.values,
-        values = _ref2$values === undefined ? [] : _ref2$values;
+        count = _ref2.count;
     return _react2.default.createElement(
       _TableRow2.default,
       { key: id, className: (0, _classnames2.default)(classes.header, classes.border) },
@@ -74,43 +75,41 @@ var Header = function Header(_ref) {
         },
         label
       ),
-      R.map(function (_ref3) {
-        var id = _ref3.id,
-            label = _ref3.label;
+      R.times(function (index) {
         return _react2.default.createElement(
           _TableCell2.default,
           {
-            key: id,
+            key: id + '-' + index,
             className: (0, _classnames2.default)(classes.border, classes.cell, classes.headerCell),
-            title: label,
             scope: 'col'
           },
-          label
+          index < count ? _lib.valueLabel : ''
         );
-      })(values)
+      }, valuesSpan)
     );
   })(header);
 };
 
 Header.propTypes = process.env.NODE_ENV !== "production" ? {
   header: _propTypes2.default.array,
-  colSpan: _propTypes2.default.number
+  colSpan: _propTypes2.default.number,
+  valuesSpan: _propTypes2.default.number
 } : {};
 
-var RowHeader = function RowHeader(_ref4) {
-  var _ref4$id = _ref4.id,
-      id = _ref4$id === undefined ? 'rowHeader' : _ref4$id,
-      rows = _ref4.rows,
-      emptyValues = _ref4.emptyValues;
+var RowHeader = function RowHeader(_ref3) {
+  var _ref3$id = _ref3.id,
+      id = _ref3$id === undefined ? 'rowHeader' : _ref3$id,
+      rows = _ref3.rows,
+      emptyValues = _ref3.emptyValues;
 
   var classes = (0, _styles.useStyles)();
 
   return _react2.default.createElement(
     _TableRow2.default,
     null,
-    R.map(function (_ref5) {
-      var id = _ref5.id,
-          label = _ref5.label;
+    R.map(function (_ref4) {
+      var id = _ref4.id,
+          label = _ref4.label;
       return _react2.default.createElement(
         _TableCell2.default,
         {
@@ -138,9 +137,9 @@ RowHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   emptyValues: _propTypes2.default.array
 } : {};
 
-var Sections = function Sections(_ref6) {
-  var sections = _ref6.sections,
-      colSpan = _ref6.colSpan;
+var Sections = function Sections(_ref5) {
+  var sections = _ref5.sections,
+      colSpan = _ref5.colSpan;
 
   var classes = (0, _styles.useStyles)();
 
@@ -150,11 +149,9 @@ var Sections = function Sections(_ref6) {
     _react2.default.createElement(
       _TableCell2.default,
       { tabIndex: 0, className: (0, _classnames2.default)(classes.border, classes.sections), colSpan: colSpan },
-      R.map(function (_ref7) {
-        var id = _ref7.id,
-            label = _ref7.label,
-            values = _ref7.values,
-            Icon = _ref7.Icon;
+      R.addIndex(R.map)(function (_ref6, index) {
+        var id = _ref6.id,
+            label = _ref6.label;
         return _react2.default.createElement(
           _react.Fragment,
           { key: id },
@@ -166,8 +163,8 @@ var Sections = function Sections(_ref6) {
           _react2.default.createElement(
             'span',
             { className: classes.sectionsCell },
-            values,
-            R.isNil(Icon) ? null : _react2.default.createElement(Icon, { className: classes.icon })
+            _lib.valueLabel,
+            index === sections.length - 1 ? null : _react2.default.createElement(_Lens2.default, { className: classes.icon })
           )
         );
       })(sections)
@@ -180,41 +177,41 @@ Sections.propTypes = process.env.NODE_ENV !== "production" ? {
   colSpan: _propTypes2.default.number
 } : {};
 
-var RowValues = function RowValues(_ref8) {
-  var _ref8$id = _ref8.id,
-      id = _ref8$id === undefined ? 'rowValues' : _ref8$id,
-      rows = _ref8.rows,
-      emptyValues = _ref8.emptyValues;
+var RowValues = function RowValues(_ref7) {
+  var _ref7$id = _ref7.id,
+      id = _ref7$id === undefined ? 'rowValues' : _ref7$id,
+      rows = _ref7.rows,
+      emptyValues = _ref7.emptyValues;
 
   var classes = (0, _styles.useStyles)();
-  var rowValues = R.pipe(R.map(function (_ref9) {
-    var _ref9$values = _ref9.values,
-        values = _ref9$values === undefined ? [] : _ref9$values;
-    return R.map(R.identity)(values);
-  }), R.transpose)(rows);
-  return R.addIndex(R.map)(function (values, rowIndex) {
+
+  var totalMaxCount = R.min(_lib.maxCount, R.reduce(R.max, 0, R.pluck('count', rows)));
+
+  return R.times(function (rowIndex) {
     return _react2.default.createElement(
       _TableRow2.default,
       { key: id + '-' + rowIndex },
-      R.map(function (_ref10) {
-        var id = _ref10.id,
-            label = _ref10.label;
+      R.map(function (_ref8) {
+        var id = _ref8.id,
+            count = _ref8.count;
         return _react2.default.createElement(
           _TableCell2.default,
           {
-            key: id,
-            className: (0, _classnames2.default)(classes.rows, classes.border, classes.cell),
-            title: label
+            key: id + '-' + rowIndex,
+            className: (0, _classnames2.default)(classes.rows, classes.border, classes.cell)
           },
-          label
+          rowIndex < count ? _lib.valueLabel : ''
         );
-      })(values),
+      })(rows),
       _react2.default.createElement(_TableCell2.default, { className: (0, _classnames2.default)(classes.separatorValues, classes.separatorSize, classes.border) }),
-      R.addIndex(R.map)(function (value, valueIndex) {
-        return _react2.default.createElement(_TableCell2.default, { key: rowIndex + '-' + valueIndex, className: (0, _classnames2.default)(classes.border, classes.cell) });
-      })(emptyValues)
+      R.times(function (columnIndex) {
+        return _react2.default.createElement(_TableCell2.default, {
+          key: rowIndex + '-header-' + columnIndex,
+          className: (0, _classnames2.default)(classes.border, classes.cell)
+        });
+      })(emptyValues.length)
     );
-  })(rowValues);
+  }, totalMaxCount);
 };
 
 RowValues.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -223,26 +220,25 @@ RowValues.propTypes = process.env.NODE_ENV !== "production" ? {
   emptyValues: _propTypes2.default.array
 } : {};
 
-var MyTable = function MyTable(_ref11) {
-  var _ref11$header = _ref11.header,
-      header = _ref11$header === undefined ? [] : _ref11$header,
-      _ref11$sections = _ref11.sections,
-      sections = _ref11$sections === undefined ? [] : _ref11$sections,
-      _ref11$rows = _ref11.rows,
-      rows = _ref11$rows === undefined ? [] : _ref11$rows,
-      _ref11$labelRenderer = _ref11.labelRenderer,
-      labelRenderer = _ref11$labelRenderer === undefined ? R.prop('name') : _ref11$labelRenderer;
+var MyTable = function MyTable(_ref9) {
+  var _ref9$header = _ref9.header,
+      header = _ref9$header === undefined ? [] : _ref9$header,
+      _ref9$sections = _ref9.sections,
+      sections = _ref9$sections === undefined ? [] : _ref9$sections,
+      _ref9$rows = _ref9.rows,
+      rows = _ref9$rows === undefined ? [] : _ref9$rows,
+      _ref9$labelRenderer = _ref9.labelRenderer,
+      labelRenderer = _ref9$labelRenderer === undefined ? R.prop('name') : _ref9$labelRenderer;
 
   var classes = (0, _styles.useStyles)();
   var nbShowedValuesHeader = (0, _lib.getMaxValuesLength)(header);
-  var nbShowedValuesRows = (0, _lib.getMaxValuesLength)(rows);
 
   var emptyValues = (0, _lib.getEmptyValues)(nbShowedValuesHeader);
-  var nbColumns = R.max(R.length(header) + nbShowedValuesHeader, R.length(rows) + nbShowedValuesRows) + 2;
+  var nbColumns = R.length(rows) + R.max(nbShowedValuesHeader, 1) + 1;
   var nbColumnRows = R.length(rows) + 1;
-  var enhancedHeader = R.pipe((0, _lib.getLabel)(labelRenderer), (0, _lib.getEqualLengthValues)(nbShowedValuesHeader))(header);
-  var enhancedRows = R.pipe((0, _lib.getLabel)(labelRenderer), (0, _lib.getEqualLengthValues)(nbShowedValuesRows))(rows);
-  var enhancedSections = R.pipe((0, _lib.getLabel)(labelRenderer), (0, _lib.getEnhancedSections)(R.length(sections)))(sections);
+  var enhancedHeader = R.pipe((0, _lib.getLabel)(labelRenderer))(header);
+  var enhancedRows = R.pipe((0, _lib.getLabel)(labelRenderer))(rows);
+  var enhancedSections = R.pipe((0, _lib.getLabel)(labelRenderer))(sections);
 
   return _react2.default.createElement(
     _Table2.default,
@@ -254,7 +250,11 @@ var MyTable = function MyTable(_ref11) {
     _react2.default.createElement(
       'tbody',
       null,
-      R.isEmpty(enhancedHeader) ? null : _react2.default.createElement(Header, { colSpan: nbColumnRows, header: enhancedHeader }),
+      R.isEmpty(enhancedHeader) ? null : _react2.default.createElement(Header, {
+        colSpan: nbColumnRows,
+        header: enhancedHeader,
+        valuesSpan: nbShowedValuesHeader
+      }),
       _react2.default.createElement(RowHeader, { rows: enhancedRows, emptyValues: emptyValues }),
       R.isEmpty(enhancedSections) ? null : _react2.default.createElement(Sections, { colSpan: nbColumns, sections: enhancedSections }),
       _react2.default.createElement(RowValues, { rows: enhancedRows, emptyValues: emptyValues })
@@ -269,10 +269,10 @@ MyTable.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: _propTypes2.default.func
 } : {};
 
-exports.default = (0, _utils.withBlank)(function (_ref12) {
-  var _ref12$rows = _ref12.rows,
-      rows = _ref12$rows === undefined ? [] : _ref12$rows,
-      isBlank = _ref12.isBlank;
+exports.default = (0, _utils.withBlank)(function (_ref10) {
+  var _ref10$rows = _ref10.rows,
+      rows = _ref10$rows === undefined ? [] : _ref10$rows,
+      isBlank = _ref10.isBlank;
   return {
     isBlank: R.or(isBlank, R.isEmpty(rows))
   };

package/lib/TablePreview/lib.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.getEnhancedSections = exports.getEqualLengthValues = exports.getLabel = exports.getEmptyValues = exports.getMaxValuesLength = undefined;
+exports.getEnhancedSections = exports.getEqualLengthValues = exports.getLabel = exports.getEmptyValues = exports.getMaxValuesLength = exports.maxCount = exports.valueLabel = undefined;
 
 var _ramda = require('ramda');
 
@@ -15,12 +15,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 getMaxValuesLength = exports.getMaxValuesLength = function getMaxValuesLength(lists) {
-  return Math.max.apply(Math, R.map(function (_ref) {
-    var _ref$values = _ref.values,
-        values = _ref$values === undefined ? [] : _ref$values;
-    return R.length(values);
-  })(lists));
+var valueLabel = exports.valueLabel = 'Xxxx';
+var maxCount = exports.maxCount = 3;
+
+var getMaxValuesLength = exports.getMaxValuesLength = function getMaxValuesLength(items) {
+  return Math.min(Math.max.apply(Math, R.pluck('count', items)), maxCount);
 };
 var getEmptyValues = exports.getEmptyValues = R.ifElse(R.flip(R.lte)(0), R.always(['']), R.times(R.always('')));
 var getLabel = exports.getLabel = function getLabel(itemRenderer) {

package/package.json

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