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

package/dist/Table/TableBody.js

@@ -1,244 +1,116 @@
-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
+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;

package/dist/Table/TableFooter.js

@@ -1,94 +1,41 @@
-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
+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;

package/dist/Table/TableHeaders.js

@@ -1,31 +1,26 @@
-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
+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;