@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Table/TableBody.js

@@ -1,116 +1,244 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { Button } from '../Button';
-import { Size } from '../types';
-import * as React from 'react';
-import { Checkbox } from '../InputFields';
-import IconButton from '../Button/Iconbutton';
-import { HyperLink } from '../HyperLink';
-import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection, StyledTableCellNoteText, StyledTableCellTextWrapper, } from './TableStyles';
-import { defaultOnMouseDownHandler } from '../common';
-import { SystemIcons } from '../icons';
-import { useDimensionsRef } from 'rooks';
-import styled from 'styled-components';
-var ColumnLabel = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
-var TableBody = function (props) {
-    var _a;
-    var _b = useDimensionsRef({ updateOnResize: true }), scrollContainerRef = _b[0], dimensions = _b[1], node = _b[2];
-    var _c = React.useState(false), scrollable = _c[0], setScrollable = _c[1];
-    React.useEffect(function () {
-        var _a, _b;
-        var clientWidth = (_a = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _a !== void 0 ? _a : 0;
-        var scrollWidth = (_b = node === null || node === void 0 ? void 0 : node.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-        setScrollable(scrollWidth > clientWidth);
-    }, [dimensions, node, props.columns, props.rows]);
-    var renderCellBody = function (column, row) {
-        switch (column.type) {
-            case 'link': {
-                var tmp = __assign({ variant: 'default', href: '#', tabIndex: props.showLoadingIndicator ? -1 : 0 }, column.additionalProps);
-                return (React.createElement(HyperLink, __assign({ style: column.colorFn && { color: column.colorFn(row, column.key) } }, tmp, { onClick: function (e) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        column.action && column.action(row, e);
-                    } }), row[column.key]));
-            }
-            case 'icon': {
-                var tmp = __assign({ iconColor: column.colorFn && column.colorFn(row, column.key), variant: 'secondary', shape: 'circular', tabIndex: props.showLoadingIndicator ? -1 : 0, useTransparentBackground: true }, column.additionalProps);
-                return (React.createElement(IconButton, __assign({}, tmp, { action: function (e) {
-                        e === null || e === void 0 ? void 0 : e.stopPropagation();
-                        column.action && column.action(row, e);
-                    } }), column.icon));
-            }
-            case 'button': {
-                var tmp = __assign({ variant: 'tertiary', size: Size.Small, tabIndex: props.showLoadingIndicator ? -1 : 0 }, column.additionalProps);
-                return (React.createElement(Button, __assign({ style: column.colorFn && { color: column.colorFn(row, column.key) } }, tmp, { onClick: function (e) {
-                        e === null || e === void 0 ? void 0 : e.stopPropagation();
-                        column.action && column.action(row, e);
-                    } }), row[column.key]));
-            }
-            case 'boolean':
-                return React.createElement(Checkbox, { selected: !!row[column.key], readOnly: true });
-            case 'custom':
-                return column.customContent && column.customContent(row, column.key);
-            case 'number':
-            case 'text':
-            default:
-                return (React.createElement(React.Fragment, null,
-                    column.icon && React.createElement(StyledTableCellIcon, null, column.icon),
-                    React.createElement(StyledTableCellTextWrapper, { textWrap: !column.shortenText },
-                        React.createElement(StyledTableCellText, null, row[column.key]),
-                        Boolean(column.noteKey) && Boolean(row[column.noteKey]) && (React.createElement(React.Fragment, null,
-                            React.createElement(StyledTableCellNoteText, null, row[column.noteKey]))))));
-        }
-    };
-    var isSelected = function (row) {
-        var _a;
-        return ((props.multiSelect && ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.indexOf(props.keyExpr ? row[props.keyExpr] : row)) > -1) ||
-            (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row)));
-    };
-    return (React.createElement(StyledTableBodyWrapper, { ref: scrollContainerRef, className: scrollable ? 'scrollable' : '' },
-        React.createElement(StyledTable, { cellPadding: "0", cellSpacing: "0", "data-testid": "TestTable", className: "table ".concat(props.layout || '') },
-            React.createElement(StyledTableHeaderRow, null,
-                React.createElement(StyledTableHeaderColumns, { "data-testid": "TestTableColumnHeaderRow" },
-                    props.multiSelect && (React.createElement(StyledTableHeaderColumn, null,
-                        React.createElement(StyledTableHeaderColumnContent, null,
-                            React.createElement(Checkbox, { selected: props.selectAllState === 'all', disabled: props.showLoadingIndicator, semiSelected: props.selectAllState === 'some', select: props.onSelectAllClick })))),
-                    props.columns.map(function (column) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                        return (React.createElement(StyledTableHeaderColumn, { key: column.key, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) { return column.sortable && props.sortByColumn(column); }, onKeyPress: function (e) {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    column.sortable && props.sortByColumn(column);
-                                }
-                            }, "aria-pressed": column.key === ((_a = props.sortProps) === null || _a === void 0 ? void 0 : _a.column) && !!((_b = props.sortProps) === null || _b === void 0 ? void 0 : _b.direction) ? true : undefined, "aria-sort": column.key === ((_c = props.sortProps) === null || _c === void 0 ? void 0 : _c.column) && !!((_d = props.sortProps) === null || _d === void 0 ? void 0 : _d.direction) ? (((_e = props.sortProps) === null || _e === void 0 ? void 0 : _e.direction) == 'asc' ? 'ascending' : 'descending') : undefined, style: { width: column.width }, tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1, className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_f = props.sortProps) === null || _f === void 0 ? void 0 : _f.column) && !!((_g = props.sortProps) === null || _g === void 0 ? void 0 : _g.direction) ? 'sorted' : '', " ").concat(column.justify || '') },
-                            React.createElement(StyledTableHeaderColumnContent, null,
-                                React.createElement(ColumnLabel, null, column.name),
-                                column.key === ((_h = props.sortProps) === null || _h === void 0 ? void 0 : _h.column) && (React.createElement(StyledTableHeaderColumnSortDirection, null, ((_j = props.sortProps) === null || _j === void 0 ? void 0 : _j.direction) === 'asc' ? React.createElement(SystemIcons.ArrowLineUp, { size: '20px' }) : React.createElement(SystemIcons.ArrowLineDown, { size: '20px' }))))));
-                    }))),
-            React.createElement(StyledTableBody, null, props.currentPageRows.length > 0 ? (props.currentPageRows.map(function (row, index) { return (React.createElement(StyledTableBodyRow, { key: "row_".concat(index), className: "".concat(props.selectable ? 'selectable' : '', " ").concat(isSelected(row) ? 'selected' : ''), onClick: function () { return props.onRowClick && props.onRowClick(row); }, onMouseDown: defaultOnMouseDownHandler, onKeyPress: function (e) {
-                    if (e.key === 'Enter') {
-                        props.onRowClick && props.onRowClick(row);
-                    }
-                }, tabIndex: props.selectable && !props.showLoadingIndicator ? 0 : undefined, "data-testid": "TestTableDataRow" },
-                props.multiSelect && (React.createElement(StyledTableCell, null,
-                    React.createElement(StyledTableCellContent, null,
-                        React.createElement(Checkbox, { selected: isSelected(row) })))),
-                props.columns.map(function (column) { return (React.createElement(StyledTableCell, { key: "row_".concat(index, "_").concat(column.key), style: { maxWidth: column.width }, title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '' },
-                    React.createElement(StyledTableCellContent, { withNote: Boolean(column.noteKey), className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''), style: {
-                            color: column.colorFn && column.colorFn(row, column.key),
-                        } }, renderCellBody(column, row)))); }))); })) : (React.createElement(StyledTableNoRowsLabelRow, { "data-testid": "TestTableNoDataRow" },
-                React.createElement(StyledTableCell, { colSpan: props.columns.length + (props.multiSelect ? 1 : 0) },
-                    React.createElement(StyledTableCellContent, { className: 'center' }, (_a = props.noRowsLabel) !== null && _a !== void 0 ? _a : 'There are no rows to display'))))))));
-};
-export default TableBody;
-var templateObject_1;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Button } from '../Button';
+import { Size } from '../types';
+import * as React from 'react';
+import { Checkbox } from '../InputFields';
+import IconButton from '../Button/Iconbutton';
+import { HyperLink } from '../HyperLink';
+import { StyledTableBody, StyledTableBodyRow, StyledTableCell, StyledTableCellContent, StyledTableCellIcon, StyledTableCellText, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableNoRowsLabelRow, StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection, StyledTableCellNoteText, StyledTableCellTextWrapper } from './TableStyles';
+import { defaultOnMouseDownHandler } from '../common';
+import { SystemIcons } from '../icons';
+import { useDimensionsRef } from 'rooks';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ColumnLabel = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
+var TableBody = function TableBody(props) {
+  var _props$noRowsLabel;
+  var _useDimensionsRef = useDimensionsRef({
+      updateOnResize: true
+    }),
+    _useDimensionsRef2 = _slicedToArray(_useDimensionsRef, 3),
+    scrollContainerRef = _useDimensionsRef2[0],
+    dimensions = _useDimensionsRef2[1],
+    node = _useDimensionsRef2[2];
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    scrollable = _React$useState2[0],
+    setScrollable = _React$useState2[1];
+  React.useEffect(function () {
+    var _node$clientWidth, _node$scrollWidth;
+    var clientWidth = (_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0;
+    var scrollWidth = (_node$scrollWidth = node === null || node === void 0 ? void 0 : node.scrollWidth) !== null && _node$scrollWidth !== void 0 ? _node$scrollWidth : 0;
+    setScrollable(scrollWidth > clientWidth);
+  }, [dimensions, node, props.columns, props.rows]);
+  var renderCellBody = function renderCellBody(column, row) {
+    switch (column.type) {
+      case 'link':
+        {
+          var tmp = _objectSpread({
+            variant: 'default',
+            href: '#',
+            tabIndex: props.showLoadingIndicator ? -1 : 0
+          }, column.additionalProps);
+          return /*#__PURE__*/_jsx(HyperLink, _objectSpread(_objectSpread({
+            style: column.colorFn && {
+              color: column.colorFn(row, column.key)
+            }
+          }, tmp), {}, {
+            onClick: function onClick(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              column.action && column.action(row, e);
+            },
+            children: row[column.key]
+          }));
+        }
+      case 'icon':
+        {
+          var _tmp = _objectSpread({
+            iconColor: column.colorFn && column.colorFn(row, column.key),
+            variant: 'secondary',
+            shape: 'circular',
+            tabIndex: props.showLoadingIndicator ? -1 : 0,
+            useTransparentBackground: true
+          }, column.additionalProps);
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, _tmp), {}, {
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.stopPropagation();
+              column.action && column.action(row, e);
+            },
+            children: column.icon
+          }));
+        }
+      case 'button':
+        {
+          var _tmp2 = _objectSpread({
+            variant: 'tertiary',
+            size: Size.Small,
+            tabIndex: props.showLoadingIndicator ? -1 : 0
+          }, column.additionalProps);
+          return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            style: column.colorFn && {
+              color: column.colorFn(row, column.key)
+            }
+          }, _tmp2), {}, {
+            onClick: function onClick(e) {
+              e === null || e === void 0 ? void 0 : e.stopPropagation();
+              column.action && column.action(row, e);
+            },
+            children: row[column.key]
+          }));
+        }
+      case 'boolean':
+        return /*#__PURE__*/_jsx(Checkbox, {
+          selected: !!row[column.key],
+          readOnly: true
+        });
+      case 'custom':
+        return column.customContent && column.customContent(row, column.key);
+      case 'number':
+      case 'text':
+      default:
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [column.icon && /*#__PURE__*/_jsx(StyledTableCellIcon, {
+            children: column.icon
+          }), /*#__PURE__*/_jsxs(StyledTableCellTextWrapper, {
+            textWrap: !column.shortenText,
+            children: [/*#__PURE__*/_jsx(StyledTableCellText, {
+              children: row[column.key]
+            }), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/_jsx(_Fragment, {
+              children: /*#__PURE__*/_jsx(StyledTableCellNoteText, {
+                children: row[column.noteKey]
+              })
+            })]
+          })]
+        });
+    }
+  };
+  var isSelected = function isSelected(row) {
+    var _props$selected;
+    return props.multiSelect && ((_props$selected = props.selected) === null || _props$selected === void 0 ? void 0 : _props$selected.indexOf(props.keyExpr ? row[props.keyExpr] : row)) > -1 || !props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row);
+  };
+  return /*#__PURE__*/_jsx(StyledTableBodyWrapper, {
+    ref: scrollContainerRef,
+    className: scrollable ? 'scrollable' : '',
+    children: /*#__PURE__*/_jsxs(StyledTable, {
+      cellPadding: "0",
+      cellSpacing: "0",
+      "data-testid": "TestTable",
+      className: "table ".concat(props.layout || ''),
+      children: [/*#__PURE__*/_jsx(StyledTableHeaderRow, {
+        children: /*#__PURE__*/_jsxs(StyledTableHeaderColumns, {
+          "data-testid": "TestTableColumnHeaderRow",
+          children: [props.multiSelect && /*#__PURE__*/_jsx(StyledTableHeaderColumn, {
+            children: /*#__PURE__*/_jsx(StyledTableHeaderColumnContent, {
+              children: /*#__PURE__*/_jsx(Checkbox, {
+                selected: props.selectAllState === 'all',
+                disabled: props.showLoadingIndicator,
+                semiSelected: props.selectAllState === 'some',
+                select: props.onSelectAllClick
+              })
+            })
+          }), props.columns.map(function (column) {
+            var _props$sortProps, _props$sortProps2, _props$sortProps3, _props$sortProps4, _props$sortProps5, _props$sortProps6, _props$sortProps7, _props$sortProps8, _props$sortProps9;
+            return /*#__PURE__*/_jsx(StyledTableHeaderColumn, {
+              onMouseDown: defaultOnMouseDownHandler,
+              onClick: function onClick(e) {
+                return column.sortable && props.sortByColumn(column);
+              },
+              onKeyPress: function onKeyPress(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  column.sortable && props.sortByColumn(column);
+                }
+              },
+              "aria-pressed": column.key === ((_props$sortProps = props.sortProps) === null || _props$sortProps === void 0 ? void 0 : _props$sortProps.column) && !!((_props$sortProps2 = props.sortProps) !== null && _props$sortProps2 !== void 0 && _props$sortProps2.direction) ? true : undefined,
+              "aria-sort": column.key === ((_props$sortProps3 = props.sortProps) === null || _props$sortProps3 === void 0 ? void 0 : _props$sortProps3.column) && !!((_props$sortProps4 = props.sortProps) !== null && _props$sortProps4 !== void 0 && _props$sortProps4.direction) ? ((_props$sortProps5 = props.sortProps) === null || _props$sortProps5 === void 0 ? void 0 : _props$sortProps5.direction) == 'asc' ? 'ascending' : 'descending' : undefined,
+              style: {
+                width: column.width
+              },
+              tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
+              className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === ((_props$sortProps6 = props.sortProps) === null || _props$sortProps6 === void 0 ? void 0 : _props$sortProps6.column) && !!((_props$sortProps7 = props.sortProps) !== null && _props$sortProps7 !== void 0 && _props$sortProps7.direction) ? 'sorted' : '', " ").concat(column.justify || ''),
+              children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
+                children: [/*#__PURE__*/_jsx(ColumnLabel, {
+                  children: column.name
+                }), column.key === ((_props$sortProps8 = props.sortProps) === null || _props$sortProps8 === void 0 ? void 0 : _props$sortProps8.column) && /*#__PURE__*/_jsx(StyledTableHeaderColumnSortDirection, {
+                  children: ((_props$sortProps9 = props.sortProps) === null || _props$sortProps9 === void 0 ? void 0 : _props$sortProps9.direction) === 'asc' ? /*#__PURE__*/_jsx(SystemIcons.ArrowLineUp, {
+                    size: '20px'
+                  }) : /*#__PURE__*/_jsx(SystemIcons.ArrowLineDown, {
+                    size: '20px'
+                  })
+                })]
+              })
+            }, column.key);
+          })]
+        })
+      }), /*#__PURE__*/_jsx(StyledTableBody, {
+        children: props.currentPageRows.length > 0 ? props.currentPageRows.map(function (row, index) {
+          return /*#__PURE__*/_jsxs(StyledTableBodyRow, {
+            className: "".concat(props.selectable ? 'selectable' : '', " ").concat(isSelected(row) ? 'selected' : ''),
+            onClick: function onClick() {
+              return props.onRowClick && props.onRowClick(row);
+            },
+            onMouseDown: defaultOnMouseDownHandler,
+            onKeyPress: function onKeyPress(e) {
+              if (e.key === 'Enter') {
+                props.onRowClick && props.onRowClick(row);
+              }
+            },
+            tabIndex: props.selectable && !props.showLoadingIndicator ? 0 : undefined,
+            "data-testid": "TestTableDataRow",
+            children: [props.multiSelect && /*#__PURE__*/_jsx(StyledTableCell, {
+              children: /*#__PURE__*/_jsx(StyledTableCellContent, {
+                children: /*#__PURE__*/_jsx(Checkbox, {
+                  selected: isSelected(row)
+                })
+              })
+            }), props.columns.map(function (column) {
+              return /*#__PURE__*/_jsx(StyledTableCell, {
+                style: {
+                  maxWidth: column.width
+                },
+                title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
+                children: /*#__PURE__*/_jsx(StyledTableCellContent, {
+                  withNote: Boolean(column.noteKey),
+                  className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
+                  style: {
+                    color: column.colorFn && column.colorFn(row, column.key)
+                  },
+                  children: renderCellBody(column, row)
+                })
+              }, "row_".concat(index, "_").concat(column.key));
+            })]
+          }, "row_".concat(index));
+        }) : /*#__PURE__*/_jsx(StyledTableNoRowsLabelRow, {
+          "data-testid": "TestTableNoDataRow",
+          children: /*#__PURE__*/_jsx(StyledTableCell, {
+            colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
+            children: /*#__PURE__*/_jsx(StyledTableCellContent, {
+              className: 'center',
+              children: (_props$noRowsLabel = props.noRowsLabel) !== null && _props$noRowsLabel !== void 0 ? _props$noRowsLabel : 'There are no rows to display'
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+TableBody.propTypes = {
+  currentPageRows: _pt.arrayOf(_pt.any).isRequired,
+  onRowClick: _pt.func,
+  selected: _pt.any,
+  sortByColumn: _pt.func.isRequired,
+  onSelectAllClick: _pt.func.isRequired,
+  selectAllState: _pt.oneOf(['all', 'some', 'none']).isRequired
+};
+export default TableBody;
+//# sourceMappingURL=TableBody.js.map

package/dist/Table/TableFooter.js

@@ -1,41 +1,94 @@
-import React from 'react';
-import { DropdownButton } from '../Dropdown';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-import { COLORS } from '../styles';
-import { StyledTableFooter, StyledTableFooterCollapseButton, StyledTableFooterContent, StyledTableFooterControls, StyledTableFooterCurrentInfo } from './TableStyles';
-import { defaultOnMouseDownHandler } from '../common';
-var TableFooter = function (props) {
-    var _a, _b, _c;
-    var rowsPerPageValues = [{ value: '10' }, { value: '20' }, { value: '50' }, { value: '100' }];
-    var dropDownText = "".concat((_a = props.rowsPerPageLabel) !== null && _a !== void 0 ? _a : 'Rows per page', " : ").concat(props.rowsPerPage);
-    return (React.createElement(StyledTableFooter, { "data-testid": "TestTableFooterRow" },
-        props.accordion &&
-            React.createElement(StyledTableFooterCollapseButton, { onClick: function () { return props.setIsCollapsed(!props.isCollapsed); }, onMouseDown: defaultOnMouseDownHandler, disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage },
-                props.isCollapsed &&
-                    React.createElement(React.Fragment, null,
-                        React.createElement("span", null, (_b = props.showMoreLabel) !== null && _b !== void 0 ? _b : 'Show more',
-                            " (",
-                            props.rows.length - props.rowsPerPage,
-                            ")"),
-                        React.createElement(SystemIcons.ArrowDropDown, null)),
-                !props.isCollapsed &&
-                    React.createElement(React.Fragment, null,
-                        React.createElement("span", null, (_c = props.showFewerLabel) !== null && _c !== void 0 ? _c : 'Show fewer'),
-                        React.createElement(SystemIcons.ArrowDropUp, null))),
-        !props.accordion &&
-            React.createElement(StyledTableFooterContent, null,
-                React.createElement(DropdownButton, { type: 'text', items: rowsPerPageValues, disabled: props.showLoadingIndicator, value: ["".concat(props.rowsPerPage)], onClick: function (value) { return props.onRowsPerPageChange(+value[0]); }, label: dropDownText, keepLabel: true }),
-                React.createElement(StyledTableFooterCurrentInfo, null,
-                    props.total === 0 ? 0 : props.from,
-                    "-",
-                    props.to,
-                    " of ",
-                    props.total),
-                React.createElement(StyledTableFooterControls, null,
-                    React.createElement(IconButton, { variant: "secondary", shape: "circular", action: function () { return props.prevPage(); }, disabled: props.from === 1 || props.showLoadingIndicator },
-                        React.createElement(SystemIcons.ChevronLeft, { size: "24", color: COLORS.neutral_600 })),
-                    React.createElement(IconButton, { variant: "secondary", shape: "circular", action: function () { return props.nextPage(); }, disabled: props.to === props.total || props.showLoadingIndicator },
-                        React.createElement(SystemIcons.ChevronRight, { size: "24", color: COLORS.neutral_600 }))))));
-};
-export default TableFooter;
+import _pt from "prop-types";
+import React from 'react';
+import { DropdownButton } from '../Dropdown';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { COLORS } from '../styles';
+import { StyledTableFooter, StyledTableFooterCollapseButton, StyledTableFooterContent, StyledTableFooterControls, StyledTableFooterCurrentInfo } from './TableStyles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var TableFooter = function TableFooter(props) {
+  var _props$rowsPerPageLab, _props$showMoreLabel, _props$showFewerLabel;
+  var rowsPerPageValues = [{
+    value: '10'
+  }, {
+    value: '20'
+  }, {
+    value: '50'
+  }, {
+    value: '100'
+  }];
+  var dropDownText = "".concat((_props$rowsPerPageLab = props.rowsPerPageLabel) !== null && _props$rowsPerPageLab !== void 0 ? _props$rowsPerPageLab : 'Rows per page', " : ").concat(props.rowsPerPage);
+  return /*#__PURE__*/_jsxs(StyledTableFooter, {
+    "data-testid": "TestTableFooterRow",
+    children: [props.accordion && /*#__PURE__*/_jsxs(StyledTableFooterCollapseButton, {
+      onClick: function onClick() {
+        return props.setIsCollapsed(!props.isCollapsed);
+      },
+      onMouseDown: defaultOnMouseDownHandler,
+      disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage,
+      children: [props.isCollapsed && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("span", {
+          children: [(_props$showMoreLabel = props.showMoreLabel) !== null && _props$showMoreLabel !== void 0 ? _props$showMoreLabel : 'Show more', " (", props.rows.length - props.rowsPerPage, ")"]
+        }), /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {})]
+      }), !props.isCollapsed && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: (_props$showFewerLabel = props.showFewerLabel) !== null && _props$showFewerLabel !== void 0 ? _props$showFewerLabel : 'Show fewer'
+        }), /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {})]
+      })]
+    }), !props.accordion && /*#__PURE__*/_jsxs(StyledTableFooterContent, {
+      children: [/*#__PURE__*/_jsx(DropdownButton, {
+        type: 'text',
+        items: rowsPerPageValues,
+        disabled: props.showLoadingIndicator,
+        value: ["".concat(props.rowsPerPage)],
+        onClick: function onClick(value) {
+          return props.onRowsPerPageChange(+value[0]);
+        },
+        label: dropDownText,
+        keepLabel: true
+      }), /*#__PURE__*/_jsxs(StyledTableFooterCurrentInfo, {
+        children: [props.total === 0 ? 0 : props.from, "-", props.to, " of ", props.total]
+      }), /*#__PURE__*/_jsxs(StyledTableFooterControls, {
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {
+            return props.prevPage();
+          },
+          disabled: props.from === 1 || props.showLoadingIndicator,
+          children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {
+            size: "24",
+            color: COLORS.neutral_600
+          })
+        }), /*#__PURE__*/_jsx(IconButton, {
+          variant: "secondary",
+          shape: "circular",
+          action: function action() {
+            return props.nextPage();
+          },
+          disabled: props.to === props.total || props.showLoadingIndicator,
+          children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
+            size: "24",
+            color: COLORS.neutral_600
+          })
+        })]
+      })]
+    })]
+  });
+};
+TableFooter.propTypes = {
+  onRowsPerPageChange: _pt.func.isRequired,
+  rowsPerPage: _pt.number.isRequired,
+  from: _pt.number,
+  to: _pt.number,
+  total: _pt.number,
+  nextPage: _pt.func.isRequired,
+  prevPage: _pt.func.isRequired,
+  setIsCollapsed: _pt.func.isRequired,
+  isCollapsed: _pt.bool.isRequired
+};
+export default TableFooter;
+//# sourceMappingURL=TableFooter.js.map

package/dist/Table/TableHeaders.js

@@ -1,26 +1,31 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { DropdownButton } from '../Dropdown';
-import { SystemIcons } from '../icons';
-import { Size } from '../types';
-import { StyledTableHeaderTitleContent } from './TableStyles';
-import { StyledTableHeaderTitle, StyledTableHeader } from "./TableStyles";
-var TableHeader = function (props) {
-    return (React.createElement(StyledTableHeader, null, (!!props.title || !!props.menu) &&
-        React.createElement(StyledTableHeaderTitle, { "data-testid": "TestTableHeaderRow" },
-            React.createElement(StyledTableHeaderTitleContent, null,
-                React.createElement("span", null, props.title),
-                props.menu &&
-                    React.createElement(DropdownButton, __assign({ className: 'title-menu', type: 'icon', disabled: props.showLoadingIndicator, icon: React.createElement(SystemIcons.MoreVertical, null), size: Size.Medium }, props.menu))))));
-};
-export default TableHeader;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { DropdownButton } from '../Dropdown';
+import { SystemIcons } from '../icons';
+import { Size } from '../types';
+import { StyledTableHeaderTitleContent } from './TableStyles';
+import { StyledTableHeaderTitle, StyledTableHeader } from "./TableStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TableHeader = function TableHeader(props) {
+  return /*#__PURE__*/_jsx(StyledTableHeader, {
+    children: (!!props.title || !!props.menu) && /*#__PURE__*/_jsx(StyledTableHeaderTitle, {
+      "data-testid": "TestTableHeaderRow",
+      children: /*#__PURE__*/_jsxs(StyledTableHeaderTitleContent, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: props.title
+        }), props.menu && /*#__PURE__*/_jsx(DropdownButton, _objectSpread({
+          className: 'title-menu',
+          type: 'icon',
+          disabled: props.showLoadingIndicator,
+          icon: /*#__PURE__*/_jsx(SystemIcons.MoreVertical, {}),
+          size: Size.Medium
+        }, props.menu))]
+      })
+    })
+  });
+};
+export default TableHeader;
+//# sourceMappingURL=TableHeaders.js.map