@laerdal/life-react-components 1.3.1 → 1.3.2-dev.12

package/dist/umd/Modals/__tests__/Modal.test.js

@@ -0,0 +1,173 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "..", "../..", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require(".."), require("../.."), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global._, global._, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _, _2) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<ModalDialog />', () => {
+    let mountingDiv;
+    beforeEach(() => {
+      //being rendered as a React.Portal we need to have the 'root' div defined
+      mountingDiv = document.createElement('div');
+      mountingDiv.id = 'root';
+      document.body.appendChild(mountingDiv);
+    });
+    afterEach(() => {
+      document.body.removeChild(mountingDiv);
+    });
+    it('Check modal not rendered when isModalOpen is false', async () => {
+      const {
+        container,
+        getByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: false,
+        closeAction: () => {},
+        submitAction: () => {}
+      })); //check modal portal not exists when modal not opened
+
+      expect(container.querySelector('.ReactModalPortal')).toBeNull();
+    });
+    it('Check modal visible, title and footer buttons displayed correctly', async () => {
+      const {
+        container,
+        getByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {},
+        buttons: [{
+          action: () => {},
+          text: 'Close',
+          variant: 'tertiary'
+        }, {
+          action: () => {},
+          text: 'Save'
+        }]
+      })); //check modal portal defined
+
+      expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
+
+      expect(getByText('Header')).toBeDefined();
+      expect(getByText('Close')).toBeDefined();
+      expect(getByText('Save')).toBeDefined();
+    });
+    it('Check tooltip, and link displayed without right footer buttons', async () => {
+      const {
+        baseElement,
+        getByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {},
+        tooltip: 'some test tooltip',
+        leftFooterAction: {
+          id: 'test-link',
+          actionType: 'hyperlink',
+          text: 'Link',
+          href: 'http://test.com',
+          icon: /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null),
+          variant: 'default'
+        }
+      })); //check tooltip displayed
+
+      expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
+
+      expect(getByText('Link').children).toBeDefined();
+    });
+    it('Check note and footer note displayed', async () => {
+      const {
+        baseElement,
+        getByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {},
+        leftFooterAction: {
+          id: 'test-note',
+          actionType: 'note',
+          text: 'Test note',
+          icon: /*#__PURE__*/_react2.default.createElement(_2.SystemIcons.Information, null)
+        },
+        note: 'Message text',
+        state: 'critical'
+      })); //check footer note text displayed
+
+      expect(getByText('Test note').textContent).toBeDefined(); //check note section added
+
+      expect(baseElement.querySelectorAll('section')?.length).toEqual(4); //check note message displayed
+
+      expect(getByText('Message text').children).toBeDefined();
+    });
+    it('Check back button and close icon displayed', async () => {
+      const {
+        baseElement,
+        getByText,
+        container
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        backButton: () => {},
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {}
+      })); //only 2 svg elements should be found in the header of the modal
+
+      expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
+    });
+    it('Check modal body displayed', async () => {
+      const {
+        baseElement,
+        getByText,
+        container
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_.ModalDialog, {
+        key: "smallModalWithoutImage",
+        closeModalAndClearInput: () => {},
+        title: 'Header',
+        size: _2.Size.Small,
+        isModalOpen: true,
+        closeAction: () => {},
+        submitAction: () => {}
+      }, /*#__PURE__*/_react2.default.createElement("span", null, "Inner modal text"))); //Check all dialog sections are displayed
+
+      expect(baseElement.querySelectorAll('section')?.length).toEqual(3); //Check that the second section (modal body) has the correct text
+
+      expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
+    });
+  });
+});
+//# sourceMappingURL=Modal.test.js.map

package/dist/umd/Modals/__tests__/Modal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["describe","beforeEach","mountingDiv","document","afterEach","it","getByText","render","Size","expect","container","action","text","variant","id","actionType","href","icon","baseElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n  let mountingDiv: HTMLElement;\n\n  beforeEach(() => {\n    //being rendered as a React.Portal we need to have the 'root' div defined\n    mountingDiv = document.createElement('div');\n    mountingDiv.id = 'root';\n    document.body.appendChild(mountingDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(mountingDiv);\n  });\n\n  it('Check modal not rendered when isModalOpen is false', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={false}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //check modal portal not exists when modal not opened\n    expect(container.querySelector('.ReactModalPortal')).toBeNull();\n  });\n\n  it('Check modal visible, title and footer buttons displayed correctly', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        buttons={[\n          {\n            action: () => {},\n            text: 'Close',\n            variant: 'tertiary',\n          },\n          {\n            action: () => {},\n            text: 'Save',\n          },\n        ]}\n      />,\n    );\n    //check modal portal defined\n    expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n    //Check header and footer buttons\n    expect(getByText('Header')).toBeDefined();\n    expect(getByText('Close')).toBeDefined();\n    expect(getByText('Save')).toBeDefined();\n  });\n\n  it('Check tooltip, and link displayed without right footer buttons', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        tooltip={'some test tooltip'}\n        leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n      />,\n    );\n    //check tooltip displayed\n    expect(getByText('some test tooltip').textContent).toBeDefined();\n    //check footer link displayed\n    expect(getByText('Link').children).toBeDefined();\n  });\n\n  it('Check note and footer note displayed', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n        note={'Message text'}\n        state={'critical'}\n      />,\n    );\n    //check footer note text displayed\n    expect(getByText('Test note').textContent).toBeDefined();\n    //check note section added\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n    //check note message displayed\n    expect(getByText('Message text').children).toBeDefined();\n  });\n\n  it('Check back button and close icon displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        backButton={() => {}}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //only 2 svg elements should be found in the header of the modal\n    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n  });\n\n  it('Check modal body displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}>\n        <span>Inner modal text</span>\n      </ModalDialog>,\n    );\n    //Check all dialog sections are displayed\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n    //Check that the second section (modal body) has the correct text\n    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n  });\n});\n"],"file":"Modal.test.js"}

package/dist/umd/Table/Table.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/systemicons/SystemIcons", "../icons/index", "../Dropdown/index", "../Button/index", "../types", "../styles", "./TableStyles", "../LoadingIndicator"], factory);
+    define(["exports", "react", "../types", "./TableStyles", "../LoadingIndicator", "./TableHeaders", "./TableFooter", "./TableBody"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/systemicons/SystemIcons"), require("../icons/index"), require("../Dropdown/index"), require("../Button/index"), require("../types"), require("../styles"), require("./TableStyles"), require("../LoadingIndicator"));
+    factory(exports, require("react"), require("../types"), require("./TableStyles"), require("../LoadingIndicator"), require("./TableHeaders"), require("./TableFooter"), require("./TableBody"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.SystemIcons, global.index, global.index, global.index, global.types, global.styles, global.TableStyles, global.LoadingIndicator);
+    factory(mod.exports, global.react, global.types, global.TableStyles, global.LoadingIndicator, global.TableHeaders, global.TableFooter, global.TableBody);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _SystemIcons, _index, _index2, _index3, _types, _styles, _TableStyles, _LoadingIndicator) {
+})(this, function (exports, _react, _types, _TableStyles, _LoadingIndicator, _TableHeaders, _TableFooter, _TableBody) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -19,6 +19,18 @@
 
   var React = _interopRequireWildcard(_react);
 
+  var _TableHeaders2 = _interopRequireDefault(_TableHeaders);
+
+  var _TableFooter2 = _interopRequireDefault(_TableFooter);
+
+  var _TableBody2 = _interopRequireDefault(_TableBody);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -69,37 +81,44 @@
     return newObj;
   }
 
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
   /**
    * Import React libraries.
    */
 
-  /**
-   * Import custom components.
-   */
 
-  /**
-   * Import custom styles.
-   */
+  const Table = props => {
+    let {
+      onPreviousPageClick,
+      onNextPageClick,
+      onRowsPerPageChange,
+      onTriggerSortingChange,
+      columns,
+      rows,
+      remoteOperations,
+      pagination,
+      showLoadingIndicator,
+      selectable,
+      multiSelect,
+      keyExpr
+    } = props; // States used within the component
 
-  /**
-   * Import custom types.
-   */
-  const Table = ({
-    rowClick,
-    linkClick,
-    iconClick,
-    previousPageClick,
-    nextPageClick,
-    rowsPerPageChange,
-    triggerSortingChange,
-    title,
-    columns,
-    rows,
-    remotePagination,
-    pagination,
-    showLoadingIndicator
-  }) => {
-    // States used within the component
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
     const [filteredRows, setFilteredRows] = React.useState([]);
     const [currentPageRows, setCurrentPageRows] = React.useState([]);
@@ -109,13 +128,29 @@
     const [from, setFrom] = React.useState();
     const [to, setTo] = React.useState();
     const [total, setTotal] = React.useState();
+    const [selectAllState, setSelectAllState] = React.useState('none');
+    const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
+    React.useEffect(() => {
+      setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+    }, [props.selectedRows, multiSelect]);
+    /**
+     * update select all checkbox state
+     */
+
+    React.useEffect(() => {
+      if (multiSelect) {
+        const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+        const count = selected.filter(item => currentList.includes(item)).length;
+        setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
+      }
+    }, [currentPageRows, multiSelect, selected, keyExpr]);
     /**
      * Takes care of local pagination.
      * Works only in case remote pagination is not defined or is set to false.
      */
 
     React.useEffect(() => {
-      if (!remotePagination) {
+      if (!remoteOperations) {
         // Let's retrieve temporary filtered rows and update globally filtered rows
         const tmpFilteredRows = filterAndSortRows();
         setFilteredRows(tmpFilteredRows);
@@ -129,14 +164,14 @@
 
         setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
       }
-    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);
+    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
     /**
      * Takes care of remote pagination.
      * Works only in case remote pagination is set to true.
      */
 
     React.useEffect(() => {
-      if (remotePagination) {
+      if (remoteOperations) {
         setCurrentPageRows(rows); // Let's assign pagination values
 
         setFrom(pagination?.from);
@@ -145,7 +180,7 @@
         setCurrentPage(pagination?.currentPage);
         setRowsPerPage(pagination?.rowsPerPage);
       }
-    }, [remotePagination, pagination, rows]);
+    }, [remoteOperations, pagination, rows]);
     /**
      * Filters out a rows by specific column filters and sorts them if any sorting is set.
      * @returns Filtered and sorted rows.
@@ -214,8 +249,8 @@
               setSortedColumn(column.key);
               setSortedDirection('desc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'desc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'desc');
               }
             } else {
               tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
@@ -223,8 +258,8 @@
               setSortedColumn(column.key);
               setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'asc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'asc');
               }
             }
           } else {
@@ -234,8 +269,8 @@
             setSortedColumn(column.key);
             setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-            if (remotePagination && triggerSortingChange) {
-              triggerSortingChange(column.key, 'asc');
+            if (remoteOperations && onTriggerSortingChange) {
+              onTriggerSortingChange(column.key, 'asc');
             }
           }
         } else if (tmpColumn.sortingDirection !== undefined) {
@@ -252,10 +287,10 @@
 
 
     const previousPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (previousPageClick) {
-          previousPageClick();
+        if (onPreviousPageClick) {
+          onPreviousPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -268,10 +303,10 @@
 
 
     const nextPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (nextPageClick) {
-          nextPageClick();
+        if (onNextPageClick) {
+          onNextPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -286,10 +321,10 @@
 
     const changeRowsPerPage = value => {
       // Let's check if we are using remote pagination
-      if (remotePagination) {
+      if (remoteOperations) {
         // Inform parent component about rows per page change
-        if (rowsPerPageChange) {
-          rowsPerPageChange(parseInt(value));
+        if (onRowsPerPageChange) {
+          onRowsPerPageChange(value);
         }
       } else {
         // Let's reset current page to 1
@@ -297,172 +332,88 @@
       } // Let's set rows per page
 
 
-      setRowsPerPage(parseInt(value));
-    };
-    /**
-     * Renders the table header.
-     */
-
-
-    const renderHeader = () => {
-      return /*#__PURE__*/React.createElement("thead", null, title && /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableHeaderRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableHeaderRowCol, {
-        colSpan: columns.length
-      }, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(_SystemIcons.MoreVertical, {
-        size: "18px",
-        color: _styles.COLORS.neutral_600
-      })))), /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableColumnHeaderRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableColumnHeaderCol, {
-        onClick: () => sortTableColumn(column),
-        key: column.key,
-        style: {
-          width: column.width
-        },
-        className: `${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`
-      }, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineUp, {
-        size: "20px"
-      }) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineDown, {
-        size: "20px"
-      }) : ''))));
+      setRowsPerPage(value);
     };
     /**
-     * Function which is called when a mouse click happens on a link to pass data to the parent component.
+     * Function which is called when a mouse click happens on a row to pass data to the parent component.
      * @param row - Row in which the link is located.
-     * @param key - Key of the column for which the link is set.
-     * @param event - Click event handler.
      */
 
 
-    const onLinkClick = (row, key, event) => {
-      if (linkClick) {
-        event.stopPropagation();
-        linkClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on an icon to pass data to the parent component.
-     * @param row - Row in which the icon is located.
-     * @param key - Key of the column for which the icon is set.
-     * @param event - Click event handler.
-     */
+    const onRowClick = row => {
+      const selectedText = window?.getSelection()?.toString();
 
+      if (selectedText?.length === 0 && selectable) {
+        const value = keyExpr ? row[keyExpr] : row;
+        let currentSelection = value;
 
-    const onIconClick = (row, key, event) => {
-      if (iconClick) {
-        event.stopPropagation();
-        iconClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on a row to pass data to the parent component.
-     * @param row - Row in which the link is located.
-     */
+        if (!!multiSelect) {
+          const existing = selected?.indexOf(value);
 
+          if (existing > -1) {
+            currentSelection = [...selected];
+            currentSelection.splice(existing, 1);
+          } else {
+            currentSelection = [...selected, currentSelection];
+          }
+        }
 
-    const onRowClick = row => {
-      const selectedText = window?.getSelection()?.toString(); // Let's trigger row click only if we haven't selected any text and action exists
-
-      if (selectedText?.length === 0 && rowClick) {
-        rowClick(row);
+        setSelected(currentSelection);
+        props.onSelectionChange && props.onSelectionChange(currentSelection);
       }
     };
     /**
-     * Renders the table body.
+     * Function which is called when user clicks checkbox to select or deselect all rows.
      */
 
 
-    const renderBody = () => {
-      return /*#__PURE__*/React.createElement("tbody", null, currentPageRows.length > 0 ? currentPageRows.map((row, index) => /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        key: `row_${index}`,
-        onClick: () => onRowClick(row),
-        "data-testid": "TestTableDataRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        key: `row_${index}_${column.key}`,
-        style: column.colorFn ? {
-          color: column.colorFn(row, column.key),
-          maxWidth: column.width
-        } : {
-          maxWidth: column.width
-        },
-        className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
-        title: column.shortenText && row[column.key]
-      }, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(_index3.Button, {
-        size: _types.Size.Small,
-        variant: "tertiary",
-        onClick: event => onLinkClick(row, column.key, event),
-        style: column.colorFn && {
-          color: column.colorFn(row, column.key)
-        }
-      }, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        action: event => onIconClick(row, column.key, event)
-      }, _index.SystemIcons[column.icon]({
-        size: '24',
-        className: 'icon'
-      })) : column.customContent ? column.customContent(row, column.key) : row[column.key])))) : /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        className: "no-rows",
-        "data-testid": "TestTableNoDataRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        colSpan: columns.length,
-        className: "center"
-      }, "There are no rows to display")));
-    };
-    /**
-     * Renders the table footer.
-     */
+    const onSelectAllClick = () => {
+      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+
+      switch (selectAllState) {
+        case 'all':
+          setSelected([...selected].filter(item => !currentList.includes(item)));
+          setSelectAllState('none');
+          break;
 
+        case 'none':
+          setSelected([...selected, ...currentList]);
+          setSelectAllState('all');
+          break;
 
-    const renderFooter = () => {
-      // Define local values used within the footer
-      const rowsPerPageValues = ['10', '20', '50', '100'];
-      return /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(_TableStyles.TableFooterCol, {
-        colSpan: columns.length,
-        "data-testid": "TestTableFooterRow"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Rows per page: "), /*#__PURE__*/React.createElement(_index2.DropdownFilter, {
-        id: "rows-per-page",
-        list: rowsPerPageValues.map(x => ({
-          label: x
-        })),
-        disableSorting: true,
-        onSelect: value => changeRowsPerPage(value),
-        initalValue: rowsPerPage.toString(),
-        isButton: true
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "current-page-info"
-      }, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
-        className: "controls"
-      }, /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => previousPage(),
-        disabled: from === 1
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })), /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => nextPage(),
-        disabled: to === total
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })))))));
+        case 'some':
+          setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
+          setSelectAllState('all');
+          break;
+      }
     };
     /**
      * Return Table component.
      */
 
 
-    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(_TableStyles.TableContainer, {
+    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(_TableStyles.StyledTable, {
       cellPadding: "0",
       cellSpacing: "0",
-      "data-testid": "TestTable"
-    }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+      "data-testid": "TestTable",
+      className: 'table'
+    }, /*#__PURE__*/React.createElement(_TableHeaders2.default, _extends({}, props, {
+      sortByColumn: sortTableColumn,
+      onSelectAllClick: onSelectAllClick,
+      selectAllState: selectAllState
+    })), /*#__PURE__*/React.createElement(_TableBody2.default, _extends({}, props, {
+      currentPageRows: currentPageRows,
+      selected: selected,
+      onRowClick: onRowClick
+    })), /*#__PURE__*/React.createElement(_TableFooter2.default, _extends({}, props, {
+      onRowsPerPageChange: changeRowsPerPage,
+      rowsPerPage: rowsPerPage,
+      from: from,
+      to: to,
+      total: total,
+      nextPage: nextPage,
+      prevPage: previousPage
+    }))), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.StyledTableSpinner, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
       size: _types.Size.Medium,
       color: "#ffffff"
     })));