@sis-cc/dotstatsuite-visions 10.29.0 → 11.1.0

package/es/TablePreview/TablePreview.js

@@ -5,30 +5,28 @@ import * as R from 'ramda';
 import Table from '@material-ui/core/Table';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
+import Lens from '@material-ui/icons/Lens';
 import { withBlank } from '../utils';
 import { useStyles } from './styles';
-import { getMaxValuesLength, getEmptyValues, getLabel, getEqualLengthValues, getEnhancedSections } from './lib';
+import { getMaxValuesLength, getEmptyValues, getLabel, valueLabel, maxCount } from './lib';
 
 var patern = {
   id: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  values: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  }))
+  count: PropTypes.number
 };
 
 var Header = function Header(_ref) {
   var header = _ref.header,
-      colSpan = _ref.colSpan;
+      colSpan = _ref.colSpan,
+      valuesSpan = _ref.valuesSpan;
 
   var classes = 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 React.createElement(
       TableRow,
       { key: id, className: cx(classes.header, classes.border) },
@@ -43,43 +41,41 @@ var Header = function Header(_ref) {
         },
         label
       ),
-      R.map(function (_ref3) {
-        var id = _ref3.id,
-            label = _ref3.label;
+      R.times(function (index) {
         return React.createElement(
           TableCell,
           {
-            key: id,
+            key: id + '-' + index,
             className: cx(classes.border, classes.cell, classes.headerCell),
-            title: label,
             scope: 'col'
           },
-          label
+          index < count ? valueLabel : ''
         );
-      })(values)
+      }, valuesSpan)
     );
   })(header);
 };
 
 Header.propTypes = process.env.NODE_ENV !== "production" ? {
   header: PropTypes.array,
-  colSpan: PropTypes.number
+  colSpan: PropTypes.number,
+  valuesSpan: PropTypes.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 = useStyles();
 
   return React.createElement(
     TableRow,
     null,
-    R.map(function (_ref5) {
-      var id = _ref5.id,
-          label = _ref5.label;
+    R.map(function (_ref4) {
+      var id = _ref4.id,
+          label = _ref4.label;
       return React.createElement(
         TableCell,
         {
@@ -107,9 +103,9 @@ RowHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   emptyValues: PropTypes.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 = useStyles();
 
@@ -119,11 +115,9 @@ var Sections = function Sections(_ref6) {
     React.createElement(
       TableCell,
       { tabIndex: 0, className: cx(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 React.createElement(
           Fragment,
           { key: id },
@@ -135,8 +129,8 @@ var Sections = function Sections(_ref6) {
           React.createElement(
             'span',
             { className: classes.sectionsCell },
-            values,
-            R.isNil(Icon) ? null : React.createElement(Icon, { className: classes.icon })
+            valueLabel,
+            index === sections.length - 1 ? null : React.createElement(Lens, { className: classes.icon })
           )
         );
       })(sections)
@@ -149,41 +143,41 @@ Sections.propTypes = process.env.NODE_ENV !== "production" ? {
   colSpan: PropTypes.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 = 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(maxCount, R.reduce(R.max, 0, R.pluck('count', rows)));
+
+  return R.times(function (rowIndex) {
     return React.createElement(
       TableRow,
       { 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 React.createElement(
           TableCell,
           {
-            key: id,
-            className: cx(classes.rows, classes.border, classes.cell),
-            title: label
+            key: id + '-' + rowIndex,
+            className: cx(classes.rows, classes.border, classes.cell)
           },
-          label
+          rowIndex < count ? valueLabel : ''
         );
-      })(values),
+      })(rows),
       React.createElement(TableCell, { className: cx(classes.separatorValues, classes.separatorSize, classes.border) }),
-      R.addIndex(R.map)(function (value, valueIndex) {
-        return React.createElement(TableCell, { key: rowIndex + '-' + valueIndex, className: cx(classes.border, classes.cell) });
-      })(emptyValues)
+      R.times(function (columnIndex) {
+        return React.createElement(TableCell, {
+          key: rowIndex + '-header-' + columnIndex,
+          className: cx(classes.border, classes.cell)
+        });
+      })(emptyValues.length)
     );
-  })(rowValues);
+  }, totalMaxCount);
 };
 
 RowValues.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -192,26 +186,25 @@ RowValues.propTypes = process.env.NODE_ENV !== "production" ? {
   emptyValues: PropTypes.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 = useStyles();
   var nbShowedValuesHeader = getMaxValuesLength(header);
-  var nbShowedValuesRows = getMaxValuesLength(rows);
 
   var emptyValues = 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(getLabel(labelRenderer), getEqualLengthValues(nbShowedValuesHeader))(header);
-  var enhancedRows = R.pipe(getLabel(labelRenderer), getEqualLengthValues(nbShowedValuesRows))(rows);
-  var enhancedSections = R.pipe(getLabel(labelRenderer), getEnhancedSections(R.length(sections)))(sections);
+  var enhancedHeader = R.pipe(getLabel(labelRenderer))(header);
+  var enhancedRows = R.pipe(getLabel(labelRenderer))(rows);
+  var enhancedSections = R.pipe(getLabel(labelRenderer))(sections);
 
   return React.createElement(
     Table,
@@ -223,7 +216,11 @@ var MyTable = function MyTable(_ref11) {
     React.createElement(
       'tbody',
       null,
-      R.isEmpty(enhancedHeader) ? null : React.createElement(Header, { colSpan: nbColumnRows, header: enhancedHeader }),
+      R.isEmpty(enhancedHeader) ? null : React.createElement(Header, {
+        colSpan: nbColumnRows,
+        header: enhancedHeader,
+        valuesSpan: nbShowedValuesHeader
+      }),
       React.createElement(RowHeader, { rows: enhancedRows, emptyValues: emptyValues }),
       R.isEmpty(enhancedSections) ? null : React.createElement(Sections, { colSpan: nbColumns, sections: enhancedSections }),
       React.createElement(RowValues, { rows: enhancedRows, emptyValues: emptyValues })
@@ -238,10 +235,10 @@ MyTable.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: PropTypes.func
 } : {};
 
-export default withBlank(function (_ref12) {
-  var _ref12$rows = _ref12.rows,
-      rows = _ref12$rows === undefined ? [] : _ref12$rows,
-      isBlank = _ref12.isBlank;
+export default 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/es/TablePreview/lib.js

@@ -1,12 +1,11 @@
 import * as R from 'ramda';
 import Lens from '@material-ui/icons/Lens';
 
-export var 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));
+export var valueLabel = 'Xxxx';
+export var maxCount = 3;
+
+export var getMaxValuesLength = function getMaxValuesLength(items) {
+  return Math.min(Math.max.apply(Math, R.pluck('count', items)), maxCount);
 };
 export var getEmptyValues = R.ifElse(R.flip(R.lte)(0), R.always(['']), R.times(R.always('')));
 export var getLabel = function getLabel(itemRenderer) {

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -620,7 +620,7 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   isOpen: _propTypes2.default.bool,
   items: _propTypes2.default.array,
   labels: _propTypes2.default.shape({
-    placeholder: _propTypes2.default.string,
+    placeholder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
     disableItemLabel: _propTypes2.default.string,
     singleSelection: _propTypes2.default.string,
     childrenSelection: _propTypes2.default.string,

package/lib/NoData/NoData.js

@@ -38,7 +38,8 @@ var useStyles = (0, _styles.makeStyles)(function () {
 var NO_RESULT_MESSAGE_ID = 'noResultMessage';
 
 var NoData = function NoData(_ref) {
-  var icon = _ref.icon,
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === undefined ? _react2.default.createElement(_Error2.default, { color: 'primary', fontSize: 'large' }) : _ref$icon,
       message = _ref.message;
 
   var classes = useStyles();
@@ -63,9 +64,5 @@ NoData.propTypes = process.env.NODE_ENV !== "production" ? {
   message: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
 } : {};
 
-NoData.defaultProps = {
-  icon: _react2.default.createElement(_Error2.default, { color: 'primary', fontSize: 'large' })
-};
-
 exports.default = NoData;
 module.exports = exports['default'];

package/lib/Spotlight/Fields.js

@@ -40,7 +40,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Field = exports.Field = function Field(_ref) {
-  var spotlight = _ref.spotlight,
+  var _ref$spotlight = _ref.spotlight,
+      spotlight = _ref$spotlight === undefined ? {} : _ref$spotlight,
       onChangeField = _ref.onChangeField,
       isRtl = _ref.isRtl,
       classes = _ref.classes;
@@ -128,8 +129,4 @@ Field.propTypes = process.env.NODE_ENV !== "production" ? {
   }),
   onChangeField: _propTypes2.default.func.isRequired,
   isRtl: _propTypes2.default.bool
-} : {};
-
-Field.defaultProps = {
-  spotlight: {}
-};
+} : {};

package/lib/TableHtml5/TableHtml5.js

@@ -135,8 +135,6 @@ var TableHtml5 = function TableHtml5(_ref) {
   var headerRef = (0, _react.useRef)(null);
   var subHeadCellsRef = (0, _react.useRef)([]);
 
-  var cellValueAccessorHandler = (0, _react.useCallback)(cellValueAccessor, []);
-
   (0, _react.useEffect)(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
     setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -219,7 +217,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        cellValueAccessor: cellValueAccessorHandler,
+        cellValueAccessor: cellValueAccessor,
         labelAccessor: labelAccessor,
         isNoWrap: isNoWrap,
         textAlign: textAlign

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))
   };