@laerdal/life-react-components 1.3.2-dev.9 → 1.4.0

package/dist/js/Modals/ModalNote.js

@@ -69,7 +69,7 @@ var ModalNote = function ModalNote(_ref) {
 
 exports.ModalNote = ModalNote;
 ModalNote.propTypes = {
-  note: _propTypes.default.string.isRequired,
+  note: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
   icon: _propTypes.default.node,
   state: _propTypes.default.string,
   size: _propTypes.default.string

package/dist/js/Modals/ModalNote.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA8C,GAAG,SAAjDA,SAAiD,OAAyC;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,IAAiC,QAAjCA,IAAiC;AAAA,MAA3BC,IAA2B,QAA3BA,IAA2B;AAAA,wBAArBC,KAAqB;AAAA,MAArBA,KAAqB,2BAAf,SAAe;AACnG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAOD,QAAP;AACI,SAAK,UAAL;AAAiB,0BACb,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACKD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEK,SAAOC;AAA7B,QADnB,eAEI,kCAAOP,IAAP,CAFJ,CADa;;AAOjB,SAAK,SAAL;AAAgB,0BACZ,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACKD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEK,SAAOE;AAAhC,QADnB,eAEI,kCAAOR,IAAP,CAFJ,CADY;;AAOhB,SAAK,UAAL;AAAiB,0BACb,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACKD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEK,SAAOE;AAAhC,QADnB,eAEI,kCAAOR,IAAP,CAFJ,CADa;;AAOjB;AAAS,0BACL,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACKD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,wBAAD;AAAa,QAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,QAAA,SAAS,EAAEP;AAAnD,QADnB,eAEI,kCAAOF,IAAP,CAFJ,CADK;AAtBb;AA+BH,CAlCM;;;;AANHA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAuCWH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport {ModalNoteSection} from './ModalStyles'\n\ninterface NoteProps {\n    note: string;\n    icon?: React.ReactNode;\n    state?: string;\n    size?: string;\n}\n\nexport const ModalNote : React.FunctionComponent<NoteProps> = ({note, icon, size, state='neutral'}) => {   \n    const stateVal = state.toLowerCase();\n\n    switch(stateVal) {\n        case 'positive': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <CheckComplete color={COLORS.correct_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n            );\n\n        case 'warning': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <TechnicalWarning color={COLORS.warning_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n        );\n\n        case 'critical': return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <TechnicalWarning color={COLORS.warning_500}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n            );\n\n        default: return (\n            <ModalNoteSection state={stateVal} size={size}>\n                {icon ? icon : <Information color={COLORS.primary_500} className={size}/>}\n                <span>{note}</span>\n            </ModalNoteSection>\n        );\n    }\n    \n   \n};\n\nexport default ModalNote;"],"file":"ModalNote.js"}
+{"version":3,"sources":["../../../src/Modals/ModalNote.tsx"],"names":["ModalNote","note","icon","size","state","stateVal","toLowerCase","COLORS","correct_500","warning_500","primary_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AASO,IAAMA,SAA6C,GAAG,SAAhDA,SAAgD,OAA6C;AAAA,MAA1CC,IAA0C,QAA1CA,IAA0C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,IAA8B,QAA9BA,IAA8B;AAAA,wBAAxBC,KAAwB;AAAA,MAAxBA,KAAwB,2BAAhB,SAAgB;AACxG,MAAMC,QAAQ,GAAGD,KAAK,CAACE,WAAN,EAAjB;;AAEA,UAAQD,QAAR;AACE,SAAK,UAAL;AACE,0BACE,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEA,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEK,SAAOC;AAA7B,QADjB,eAEE,kCAAOP,IAAP,CAFF,CADF;;AAOF,SAAK,SAAL;AACE,0BACE,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEK,SAAOE;AAAhC,QADjB,eAEE,kCAAOR,IAAP,CAFF,CADF;;AAOF,SAAK,UAAL;AACE,0BACE,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEK,SAAOE;AAAhC,QADjB,eAEE,kCAAOR,IAAP,CAFF,CADF;;AAOF;AACE,0BACE,oBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEI,QAAzB;AAAmC,QAAA,IAAI,EAAEF;AAAzC,SACGD,IAAI,GAAGA,IAAH,gBAAU,oBAAC,wBAAD;AAAa,QAAA,KAAK,EAAEK,SAAOG,WAA3B;AAAwC,QAAA,SAAS,EAAEP;AAAnD,QADjB,eAEE,kCAAOF,IAAP,CAFF,CADF;AA1BJ;AAiCD,CApCM;;;;AANLA,EAAAA,I;AACAC,EAAAA,I;AACAE,EAAAA,K;AACAD,EAAAA,I;;eAyCaH,S","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '..';\nimport { CheckComplete, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { ModalNoteSection } from './ModalStyles';\n\ninterface NoteProps {\n  note: string | React.ReactNode;\n  icon?: React.ReactNode;\n  state?: string;\n  size?: string;\n}\n\nexport const ModalNote: React.FunctionComponent<NoteProps> = ({ note, icon, size, state = 'neutral' }) => {\n  const stateVal = state.toLowerCase();\n\n  switch (stateVal) {\n    case 'positive':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <CheckComplete color={COLORS.correct_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'warning':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    case 'critical':\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <TechnicalWarning color={COLORS.warning_500} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n\n    default:\n      return (\n        <ModalNoteSection state={stateVal} size={size}>\n          {icon ? icon : <Information color={COLORS.primary_500} className={size} />}\n          <span>{note}</span>\n        </ModalNoteSection>\n      );\n  }\n};\n\nexport default ModalNote;\n"],"file":"ModalNote.js"}

package/dist/js/Table/Table.js

@@ -9,26 +9,34 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
-var _index = require("../icons/index");
+var _types = require("../types");
 
-var _index2 = require("../Dropdown/index");
+var _TableStyles = require("./TableStyles");
 
-var _index3 = require("../Button/index");
+var _LoadingIndicator = require("../LoadingIndicator");
 
-var _types = require("../types");
+var _TableHeaders = _interopRequireDefault(require("./TableHeaders"));
 
-var _styles = require("../styles");
+var _TableFooter = _interopRequireDefault(require("./TableFooter"));
 
-var _TableStyles = require("./TableStyles");
+var _TableBody = _interopRequireDefault(require("./TableBody"));
 
-var _LoadingIndicator = require("../LoadingIndicator");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } 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); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -43,22 +51,24 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Table = function Table(_ref) {
-  var rowClick = _ref.rowClick,
-      linkClick = _ref.linkClick,
-      iconClick = _ref.iconClick,
-      previousPageClick = _ref.previousPageClick,
-      nextPageClick = _ref.nextPageClick,
-      rowsPerPageChange = _ref.rowsPerPageChange,
-      triggerSortingChange = _ref.triggerSortingChange,
-      title = _ref.title,
-      columns = _ref.columns,
-      rows = _ref.rows,
-      remotePagination = _ref.remotePagination,
-      pagination = _ref.pagination,
-      showLoadingIndicator = _ref.showLoadingIndicator;
-
-  // States used within the component
+var Table = function Table(props) {
+  var onPreviousPageClick = props.onPreviousPageClick,
+      onNextPageClick = props.onNextPageClick,
+      onRowsPerPageChange = props.onRowsPerPageChange,
+      onTriggerSortingChange = props.onTriggerSortingChange,
+      columns = props.columns,
+      rows = props.rows,
+      remoteOperations = props.remoteOperations,
+      pagination = props.pagination,
+      showLoadingIndicator = props.showLoadingIndicator,
+      selectable = props.selectable,
+      multiSelect = props.multiSelect,
+      keyExpr = props.keyExpr,
+      accordion = props.accordion,
+      _props$collapsed = props.collapsed,
+      collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
+      collapsedRows = props.collapsedRows; // States used within the component
+
   var _React$useState = React.useState(10),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowsPerPage = _React$useState2[0],
@@ -103,14 +113,47 @@ var Table = function Table(_ref) {
       _React$useState18 = _slicedToArray(_React$useState17, 2),
       total = _React$useState18[0],
       setTotal = _React$useState18[1];
+
+  var _React$useState19 = React.useState(true),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      isCollapsed = _React$useState20[0],
+      setIsCollapsed = _React$useState20[1];
+
+  var _React$useState21 = React.useState('none'),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      selectAllState = _React$useState22[0],
+      setSelectAllState = _React$useState22[1];
+
+  var _React$useState23 = React.useState(multiSelect ? [] : undefined),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      selected = _React$useState24[0],
+      setSelected = _React$useState24[1];
+
+  React.useEffect(function () {
+    setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+  }, [props.selectedRows, multiSelect]);
+  /**
+   * update select all checkbox state
+   */
+
+  React.useEffect(function () {
+    if (multiSelect) {
+      var currentList = currentPageRows.map(function (row) {
+        return keyExpr ? row[keyExpr] : row;
+      });
+      var count = selected.filter(function (item) {
+        return 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(function () {
-    if (!remotePagination) {
+    if (!remoteOperations) {
       // Let's retrieve temporary filtered rows and update globally filtered rows
       var tmpFilteredRows = filterAndSortRows();
       setFilteredRows(tmpFilteredRows);
@@ -124,14 +167,14 @@ var Table = function Table(_ref) {
 
       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(function () {
-    if (remotePagination) {
+    if (remoteOperations) {
       setCurrentPageRows(rows); // Let's assign pagination values
 
       setFrom(pagination === null || pagination === void 0 ? void 0 : pagination.from);
@@ -140,7 +183,19 @@ var Table = function Table(_ref) {
       setCurrentPage(pagination === null || pagination === void 0 ? void 0 : pagination.currentPage);
       setRowsPerPage(pagination === null || pagination === void 0 ? void 0 : pagination.rowsPerPage);
     }
-  }, [remotePagination, pagination, rows]);
+  }, [remoteOperations, pagination, rows]);
+  /**
+   * Sets number of rows to display when accordion.
+   */
+
+  React.useEffect(function () {
+    if (!accordion) return;
+    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
+  }, [rows, accordion, collapsedRows, isCollapsed]);
+  React.useEffect(function () {
+    if (!accordion) return;
+    setIsCollapsed(!!collapsed);
+  }, [accordion, collapsed]);
   /**
    * Filters out a rows by specific column filters and sorts them if any sorting is set.
    * @returns Filtered and sorted rows.
@@ -224,8 +279,8 @@ var Table = function Table(_ref) {
             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
@@ -233,8 +288,8 @@ var Table = function Table(_ref) {
             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 {
@@ -244,8 +299,8 @@ var Table = function Table(_ref) {
           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) {
@@ -262,10 +317,10 @@ var Table = function Table(_ref) {
 
 
   var previousPage = function 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
@@ -278,10 +333,10 @@ var Table = function Table(_ref) {
 
 
   var nextPage = function 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
@@ -296,10 +351,10 @@ var Table = function Table(_ref) {
 
   var changeRowsPerPage = function 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
@@ -307,67 +362,7 @@ var Table = function Table(_ref) {
     } // Let's set rows per page
 
 
-    setRowsPerPage(parseInt(value));
-  };
-  /**
-   * Renders the table header.
-   */
-
-
-  var renderHeader = function 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(function (column) {
-      return /*#__PURE__*/React.createElement(_TableStyles.TableColumnHeaderCol, {
-        onClick: function onClick() {
-          return sortTableColumn(column);
-        },
-        key: column.key,
-        style: {
-          width: column.width
-        },
-        className: "".concat(column.sortable ? 'sortable' : '', " ").concat(!title ? 'no-border' : '', " ").concat(column.justify ? "justify-".concat(column.justify) : '')
-      }, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineUp, {
-        size: "20px"
-      }) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineDown, {
-        size: "20px"
-      }) : '');
-    })));
-  };
-  /**
-   * Function which is called when a mouse click happens on a link 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.
-   */
-
-
-  var onLinkClick = function 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.
-   */
-
-
-  var onIconClick = function onIconClick(row, key, event) {
-    if (iconClick) {
-      event.stopPropagation();
-      iconClick(row, key);
-    }
+    setRowsPerPage(value);
   };
   /**
    * Function which is called when a mouse click happens on a row to pass data to the parent component.
@@ -378,125 +373,87 @@ var Table = function Table(_ref) {
   var onRowClick = function onRowClick(row) {
     var _window, _window$getSelection;
 
-    var selectedText = (_window = window) === null || _window === void 0 ? void 0 : (_window$getSelection = _window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString(); // Let's trigger row click only if we haven't selected any text and action exists
+    var selectedText = (_window = window) === null || _window === void 0 ? void 0 : (_window$getSelection = _window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
 
-    if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && rowClick) {
-      rowClick(row);
-    }
-  };
-  /**
-   * Renders the table body.
-   */
+    if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && selectable) {
+      var value = keyExpr ? row[keyExpr] : row;
+      var currentSelection = value;
 
+      if (!!multiSelect) {
+        var existing = selected === null || selected === void 0 ? void 0 : selected.indexOf(value);
 
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React.createElement("tbody", null, currentPageRows.length > 0 ? currentPageRows.map(function (row, index) {
-      return /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        key: "row_".concat(index),
-        onClick: function onClick() {
-          return onRowClick(row);
-        },
-        "data-testid": "TestTableDataRow"
-      }, columns.map(function (column) {
-        return /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-          key: "row_".concat(index, "_").concat(column.key),
-          style: column.colorFn ? {
-            color: column.colorFn(row, column.key),
-            maxWidth: column.width
-          } : {
-            maxWidth: column.width
-          },
-          className: "".concat(column.shortenText && "truncate-text", " ").concat(column.justify ? "justify-".concat(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: function onClick(event) {
-            return 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: function action(event) {
-            return 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")));
+        if (existing > -1) {
+          currentSelection = _toConsumableArray(selected);
+          currentSelection.splice(existing, 1);
+        } else {
+          currentSelection = [].concat(_toConsumableArray(selected), [currentSelection]);
+        }
+      }
+
+      setSelected(currentSelection);
+      props.onSelectionChange && props.onSelectionChange(currentSelection);
+    }
   };
   /**
-   * Renders the table footer.
+   * Function which is called when user clicks checkbox to select or deselect all rows.
    */
 
 
-  var renderFooter = function renderFooter() {
-    // Define local values used within the footer
-    var 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(function (x) {
-        return {
-          label: x
-        };
-      }),
-      disableSorting: true,
-      onSelect: function onSelect(value) {
-        return 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: function action() {
-        return 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: function action() {
-        return nextPage();
-      },
-      disabled: to === total
-    }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-      size: "24",
-      color: _styles.COLORS.neutral_600
-    })))))));
+  var onSelectAllClick = function onSelectAllClick() {
+    var currentList = currentPageRows.map(function (row) {
+      return keyExpr ? row[keyExpr] : row;
+    });
+
+    switch (selectAllState) {
+      case 'all':
+        setSelected(_toConsumableArray(selected).filter(function (item) {
+          return !currentList.includes(item);
+        }));
+        setSelectAllState('none');
+        break;
+
+      case 'none':
+        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList)));
+        setSelectAllState('all');
+        break;
+
+      case 'some':
+        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList.filter(function (item) {
+          return !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(_TableHeaders.default, _extends({}, props, {
+    sortByColumn: sortTableColumn,
+    onSelectAllClick: onSelectAllClick,
+    selectAllState: selectAllState
+  })), /*#__PURE__*/React.createElement(_TableBody.default, _extends({}, props, {
+    currentPageRows: currentPageRows,
+    selected: selected,
+    onRowClick: onRowClick
+  })), /*#__PURE__*/React.createElement(_TableFooter.default, _extends({}, props, {
+    onRowsPerPageChange: changeRowsPerPage,
+    rowsPerPage: rowsPerPage,
+    setIsCollapsed: setIsCollapsed,
+    isCollapsed: isCollapsed,
+    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"
   })));