@laerdal/life-react-components 1.10.3-dev.5 → 1.10.3-dev.7

package/dist/Table/TableFooter.cjs

@@ -40,62 +40,67 @@ var TableFooter = function TableFooter(props) {
     value: '100'
   }];
   var dropDownText = "".concat((_props$rowsPerPageLab = props.rowsPerPageLabel) !== null && _props$rowsPerPageLab !== void 0 ? _props$rowsPerPageLab : 'Rows per page', " : ").concat(props.rowsPerPage);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooter, {
-    "data-testid": "TestTableFooterRow",
-    children: [props.accordion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterCollapseButton, {
-      onClick: function onClick() {
-        return props.setIsCollapsed(!props.isCollapsed);
-      },
-      onMouseDown: _common.defaultOnMouseDownHandler,
-      disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage,
-      children: [props.isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          children: [(_props$showMoreLabel = props.showMoreLabel) !== null && _props$showMoreLabel !== void 0 ? _props$showMoreLabel : 'Show more', " (", props.rows.length - props.rowsPerPage, ")"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {})]
-      }), !props.isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: (_props$showFewerLabel = props.showFewerLabel) !== null && _props$showFewerLabel !== void 0 ? _props$showFewerLabel : 'Show fewer'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropUp, {})]
-      })]
-    }), !props.accordion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterContent, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.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__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterCurrentInfo, {
-        children: [props.total === 0 ? 0 : props.from, "-", props.to, " of ", props.total]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterControls, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: function action() {
-            return props.prevPage();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableFooter, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("td", {
+        colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
+        "data-testid": "TestTableFooterRow",
+        children: [props.accordion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterCollapseButton, {
+          onClick: function onClick() {
+            return props.setIsCollapsed(!props.isCollapsed);
           },
-          disabled: props.from === 1 || props.showLoadingIndicator,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronLeft, {
-            size: "24",
-            color: _styles.COLORS.neutral_600
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: function action() {
-            return props.nextPage();
-          },
-          disabled: props.to === props.total || props.showLoadingIndicator,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronRight, {
-            size: "24",
-            color: _styles.COLORS.neutral_600
-          })
+          onMouseDown: _common.defaultOnMouseDownHandler,
+          disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage,
+          children: [props.isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: [(_props$showMoreLabel = props.showMoreLabel) !== null && _props$showMoreLabel !== void 0 ? _props$showMoreLabel : 'Show more', " (", props.rows.length - props.rowsPerPage, ")"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {})]
+          }), !props.isCollapsed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (_props$showFewerLabel = props.showFewerLabel) !== null && _props$showFewerLabel !== void 0 ? _props$showFewerLabel : 'Show fewer'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropUp, {})]
+          })]
+        }), !props.accordion && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterContent, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.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__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterCurrentInfo, {
+            children: [props.total === 0 ? 0 : props.from, "-", props.to, " of ", props.total]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableFooterControls, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              variant: "secondary",
+              shape: "circular",
+              action: function action() {
+                return props.prevPage();
+              },
+              disabled: props.from === 1 || props.showLoadingIndicator,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronLeft, {
+                size: "24",
+                color: _styles.COLORS.neutral_600
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+              variant: "secondary",
+              shape: "circular",
+              action: function action() {
+                return props.nextPage();
+              },
+              disabled: props.to === props.total || props.showLoadingIndicator,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ChevronRight, {
+                size: "24",
+                color: _styles.COLORS.neutral_600
+              })
+            })]
+          })]
         })]
-      })]
-    })]
+      })
+    })
   });
 };
 

package/dist/Table/TableFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.cjs"}
+{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","columns","length","multiSelect","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter>\n      <tr>\n        <td colSpan={props.columns.length + (props.multiSelect ? 1 : 0)} data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n        </td>\n      </tr>\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.cjs"}

package/dist/Table/TableFooter.js

@@ -24,62 +24,67 @@ var TableFooter = function TableFooter(props) {
     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();
+  return /*#__PURE__*/_jsx(StyledTableFooter, {
+    children: /*#__PURE__*/_jsx("tr", {
+      children: /*#__PURE__*/_jsxs("td", {
+        colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
+        "data-testid": "TestTableFooterRow",
+        children: [props.accordion && /*#__PURE__*/_jsxs(StyledTableFooterCollapseButton, {
+          onClick: function onClick() {
+            return props.setIsCollapsed(!props.isCollapsed);
           },
-          disabled: props.from === 1 || props.showLoadingIndicator,
-          children: /*#__PURE__*/_jsx(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(ChevronRight, {
-            size: "24",
-            color: COLORS.neutral_600
-          })
+          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(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(ChevronRight, {
+                size: "24",
+                color: COLORS.neutral_600
+              })
+            })]
+          })]
         })]
-      })]
-    })]
+      })
+    })
   });
 };
 

package/dist/Table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["React","DropdownButton","IconButton","ChevronLeft","ChevronRight","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","SystemIcons","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.js"}
+{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["React","DropdownButton","IconButton","ChevronLeft","ChevronRight","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","SystemIcons","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","columns","length","multiSelect","accordion","setIsCollapsed","isCollapsed","rows","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter>\n      <tr>\n        <td colSpan={props.columns.length + (props.multiSelect ? 1 : 0)} data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n        </td>\n      </tr>\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.js"}

package/dist/Table/TableHeaders.cjs

@@ -9,16 +9,24 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
 var _Dropdown = require("../Dropdown");
 
 var _icons = require("../icons");
 
 var _types = require("../types");
 
+var _InputFields = require("../InputFields");
+
 var _TableStyles = require("./TableStyles");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -26,24 +34,70 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var TableHeader = function TableHeader(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeader, {
-    children: (!!props.title || !!props.menu) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderTitle, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeader, {
+    children: [!!props.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderTitle, {
       "data-testid": "TestTableHeaderRow",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderTitleContent, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: props.title
-        }), props.menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, _objectSpread({
-          className: 'title-menu',
-          type: 'icon',
-          disabled: props.showLoadingIndicator,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {}),
-          size: _types.Size.Medium
-        }, props.menu))]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+        colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderTitleContent, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: props.title
+          }), props.menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, _objectSpread({
+            className: 'title-menu',
+            type: 'icon',
+            disabled: props.showLoadingIndicator,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {}),
+            size: _types.Size.Medium
+          }, props.menu))]
+        })
       })
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumns, {
+      "data-testid": "TestTableColumnHeaderRow",
+      children: [props.multiSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumn, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumnContent, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
+            selected: props.selectAllState === 'all',
+            disabled: props.showLoadingIndicator,
+            semiSelected: props.selectAllState === 'some',
+            select: props.onSelectAllClick
+          })
+        })
+      }), props.columns.map(function (column) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderColumn, {
+          onMouseDown: _common.defaultOnMouseDownHandler,
+          onClick: function onClick(e) {
+            return props.sortByColumn(column);
+          },
+          onKeyPress: function onKeyPress(e) {
+            if (e.key === 'Enter') {
+              props.sortByColumn(column);
+            }
+          },
+          style: {
+            width: column.width
+          },
+          tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
+          className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(!!column.sortable && !!column.sortingDirection ? 'sorted' : ''),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumnContent, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: column.name
+            }), column.sortable && (column.sortingDirection === 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineUp, {
+              size: '24px'
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowLineDown, {
+              size: '24px'
+            }))]
+          })
+        }, column.key);
+      })]
+    })]
   });
 };
 
+TableHeader.propTypes = {
+  sortByColumn: _propTypes.default.func.isRequired,
+  onSelectAllClick: _propTypes.default.func.isRequired,
+  selectAllState: _propTypes.default.oneOf(['all', 'some', 'none']).isRequired
+};
 var _default = TableHeader;
 exports.default = _default;
 //# sourceMappingURL=TableHeaders.cjs.map

package/dist/Table/TableHeaders.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableHeaders.tsx"],"names":["TableHeader","props","title","menu","showLoadingIndicator","Size","Medium"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;AASA,IAAMA,WAAsD,GAAG,SAAzDA,WAAyD,CAAAC,KAAK,EAAI;AAEtE,sBACE,qBAAC,8BAAD;AAAA,cAEI,CAAC,CAAC,CAACA,KAAK,CAACC,KAAR,IAAiB,CAAC,CAACD,KAAK,CAACE,IAA1B,kBACA,qBAAC,mCAAD;AAAwB,qBAAY,oBAApC;AAAA,6BACI,sBAAC,0CAAD;AAAA,gCACE;AAAA,oBAAOF,KAAK,CAACC;AAAb,UADF,EAGID,KAAK,CAACE,IAAN,iBACA,qBAAC,wBAAD;AAAgB,UAAA,SAAS,EAAE,YAA3B;AACgB,UAAA,IAAI,EAAE,MADtB;AAEgB,UAAA,QAAQ,EAAEF,KAAK,CAACG,oBAFhC;AAGgB,UAAA,IAAI,eAAE,qBAAC,kBAAD,CAAa,YAAb,KAHtB;AAIgB,UAAA,IAAI,EAAEC,YAAKC;AAJ3B,WAIuCL,KAAK,CAACE,IAJ7C,EAJJ;AAAA;AADJ;AAHJ,IADF;AAoBD,CAtBD;;eAwBeH,W","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {\n  StyledTableHeaderTitleContent\n} from './TableStyles';\nimport {StyledTableHeaderTitle, StyledTableHeader} from \"./TableStyles\";\n\n\ninterface TableHeaderProps extends TableProps {\n}\n\nconst TableHeader: React.FunctionComponent<TableHeaderProps> = props => {\n\n  return (\n    <StyledTableHeader>\n      {\n        (!!props.title || !!props.menu) &&\n        <StyledTableHeaderTitle data-testid=\"TestTableHeaderRow\">\n            <StyledTableHeaderTitleContent>\n              <span>{props.title}</span>\n              {\n                props.menu &&\n                <DropdownButton className={'title-menu'}\n                                type={'icon'}\n                                disabled={props.showLoadingIndicator}\n                                icon={<SystemIcons.MoreVertical/>}\n                                size={Size.Medium} {...props.menu}/>\n              }\n            </StyledTableHeaderTitleContent>\n        </StyledTableHeaderTitle>\n      }\n    </StyledTableHeader>\n  )\n}\n\nexport default TableHeader;\n"],"file":"TableHeaders.cjs"}
+{"version":3,"sources":["../../src/Table/TableHeaders.tsx"],"names":["TableHeader","props","title","columns","length","multiSelect","menu","showLoadingIndicator","Size","Medium","selectAllState","onSelectAllClick","map","column","defaultOnMouseDownHandler","e","sortByColumn","key","width","sortable","sortingDirection","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableColumn, TableProps} from './TableTypes';\nimport {ArrowLineDown, ArrowLineUp} from '../icons/systemicons/SystemIcons';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Checkbox} from '../InputFields';\nimport {\n  StyledTableHeader, StyledTableHeaderColumn, StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableHeaderTitle,\n  StyledTableHeaderTitleContent\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableHeaderProps extends TableProps {\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableHeader: React.FunctionComponent<TableHeaderProps> = props => {\n\n  return (\n    <StyledTableHeader>\n      {\n        !!props.title &&\n        <StyledTableHeaderTitle data-testid=\"TestTableHeaderRow\">\n          <th colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n            <StyledTableHeaderTitleContent>\n              <span>{props.title}</span>\n              {\n                props.menu &&\n                <DropdownButton className={'title-menu'}\n                                type={'icon'}\n                                disabled={props.showLoadingIndicator}\n                                icon={<SystemIcons.MoreVertical/>}\n                                size={Size.Medium} {...props.menu}/>\n              }\n            </StyledTableHeaderTitleContent>\n          </th>\n        </StyledTableHeaderTitle>\n      }\n      <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n        {\n          props.multiSelect &&\n          <StyledTableHeaderColumn>\n            <StyledTableHeaderColumnContent>\n              <Checkbox selected={props.selectAllState === 'all'}\n                        disabled={props.showLoadingIndicator}\n                        semiSelected={props.selectAllState === 'some'}\n                        select={props.onSelectAllClick}/>\n            </StyledTableHeaderColumnContent>\n          </StyledTableHeaderColumn>\n        }\n        {props.columns.map((column: TableColumn) => (\n          <StyledTableHeaderColumn key={column.key}\n              onMouseDown={defaultOnMouseDownHandler}\n              onClick={(e) => props.sortByColumn(column)}\n              onKeyPress={(e) => {\n                if (e.key === 'Enter') {\n                  props.sortByColumn(column)\n                }\n              }}\n              style={{width: column.width}}\n              tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n              className={`${!!column.sortable ? 'sortable' : ''} ${!!column.sortable && !!column.sortingDirection ? 'sorted' : ''}`}>\n            <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n              {\n                column.sortable &&\n                (\n                  column.sortingDirection === 'asc'\n                    ? <ArrowLineUp size={'24px'}/>\n                    : <ArrowLineDown size={'24px'}/>\n                )\n              }\n            </StyledTableHeaderColumnContent>\n          </StyledTableHeaderColumn>\n        ))}\n      </StyledTableHeaderColumns>\n\n    </StyledTableHeader>\n  )\n}\n\nexport default TableHeader;\n"],"file":"TableHeaders.cjs"}

package/dist/Table/TableHeaders.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-import { TableProps } from './TableTypes';
+import { TableColumn, TableProps } from './TableTypes';
 interface TableHeaderProps extends TableProps {
+    sortByColumn: (column: TableColumn) => void;
+    onSelectAllClick: () => void;
+    selectAllState: 'all' | 'some' | 'none';
 }
 declare const TableHeader: React.FunctionComponent<TableHeaderProps>;
 export default TableHeader;

package/dist/Table/TableHeaders.js

@@ -1,36 +1,85 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _pt from "prop-types";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
+import { ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';
 import { DropdownButton } from '../Dropdown';
 import { SystemIcons } from '../icons';
 import { Size } from '../types';
-import { StyledTableHeaderTitleContent } from './TableStyles';
-import { StyledTableHeaderTitle, StyledTableHeader } from "./TableStyles";
+import { Checkbox } from '../InputFields';
+import { StyledTableHeader, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableHeaderTitle, StyledTableHeaderTitleContent } from './TableStyles';
+import { defaultOnMouseDownHandler } from '../common';
 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, {
+  return /*#__PURE__*/_jsxs(StyledTableHeader, {
+    children: [!!props.title && /*#__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))]
+      children: /*#__PURE__*/_jsx("th", {
+        colSpan: props.columns.length + (props.multiSelect ? 1 : 0),
+        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))]
+        })
       })
-    })
+    }), /*#__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) {
+        return /*#__PURE__*/_jsx(StyledTableHeaderColumn, {
+          onMouseDown: defaultOnMouseDownHandler,
+          onClick: function onClick(e) {
+            return props.sortByColumn(column);
+          },
+          onKeyPress: function onKeyPress(e) {
+            if (e.key === 'Enter') {
+              props.sortByColumn(column);
+            }
+          },
+          style: {
+            width: column.width
+          },
+          tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
+          className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(!!column.sortable && !!column.sortingDirection ? 'sorted' : ''),
+          children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
+            children: [/*#__PURE__*/_jsx("span", {
+              children: column.name
+            }), column.sortable && (column.sortingDirection === 'asc' ? /*#__PURE__*/_jsx(ArrowLineUp, {
+              size: '24px'
+            }) : /*#__PURE__*/_jsx(ArrowLineDown, {
+              size: '24px'
+            }))]
+          })
+        }, column.key);
+      })]
+    })]
   });
 };
 
+TableHeader.propTypes = {
+  sortByColumn: _pt.func.isRequired,
+  onSelectAllClick: _pt.func.isRequired,
+  selectAllState: _pt.oneOf(['all', 'some', 'none']).isRequired
+};
 export default TableHeader;
 //# sourceMappingURL=TableHeaders.js.map

package/dist/Table/TableHeaders.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableHeaders.tsx"],"names":["React","DropdownButton","SystemIcons","Size","StyledTableHeaderTitleContent","StyledTableHeaderTitle","StyledTableHeader","TableHeader","props","title","menu","showLoadingIndicator","Medium"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SACEC,6BADF,QAEO,eAFP;AAGA,SAAQC,sBAAR,EAAgCC,iBAAhC,QAAwD,eAAxD;;;;AAMA,IAAMC,WAAsD,GAAG,SAAzDA,WAAyD,CAAAC,KAAK,EAAI;AAEtE,sBACE,KAAC,iBAAD;AAAA,cAEI,CAAC,CAAC,CAACA,KAAK,CAACC,KAAR,IAAiB,CAAC,CAACD,KAAK,CAACE,IAA1B,kBACA,KAAC,sBAAD;AAAwB,qBAAY,oBAApC;AAAA,6BACI,MAAC,6BAAD;AAAA,gCACE;AAAA,oBAAOF,KAAK,CAACC;AAAb,UADF,EAGID,KAAK,CAACE,IAAN,iBACA,KAAC,cAAD;AAAgB,UAAA,SAAS,EAAE,YAA3B;AACgB,UAAA,IAAI,EAAE,MADtB;AAEgB,UAAA,QAAQ,EAAEF,KAAK,CAACG,oBAFhC;AAGgB,UAAA,IAAI,eAAE,KAAC,WAAD,CAAa,YAAb,KAHtB;AAIgB,UAAA,IAAI,EAAER,IAAI,CAACS;AAJ3B,WAIuCJ,KAAK,CAACE,IAJ7C,EAJJ;AAAA;AADJ;AAHJ,IADF;AAoBD,CAtBD;;AAwBA,eAAeH,WAAf","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {\n  StyledTableHeaderTitleContent\n} from './TableStyles';\nimport {StyledTableHeaderTitle, StyledTableHeader} from \"./TableStyles\";\n\n\ninterface TableHeaderProps extends TableProps {\n}\n\nconst TableHeader: React.FunctionComponent<TableHeaderProps> = props => {\n\n  return (\n    <StyledTableHeader>\n      {\n        (!!props.title || !!props.menu) &&\n        <StyledTableHeaderTitle data-testid=\"TestTableHeaderRow\">\n            <StyledTableHeaderTitleContent>\n              <span>{props.title}</span>\n              {\n                props.menu &&\n                <DropdownButton className={'title-menu'}\n                                type={'icon'}\n                                disabled={props.showLoadingIndicator}\n                                icon={<SystemIcons.MoreVertical/>}\n                                size={Size.Medium} {...props.menu}/>\n              }\n            </StyledTableHeaderTitleContent>\n        </StyledTableHeaderTitle>\n      }\n    </StyledTableHeader>\n  )\n}\n\nexport default TableHeader;\n"],"file":"TableHeaders.js"}
+{"version":3,"sources":["../../src/Table/TableHeaders.tsx"],"names":["React","ArrowLineDown","ArrowLineUp","DropdownButton","SystemIcons","Size","Checkbox","StyledTableHeader","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableHeaderTitle","StyledTableHeaderTitleContent","defaultOnMouseDownHandler","TableHeader","props","title","columns","length","multiSelect","menu","showLoadingIndicator","Medium","selectAllState","onSelectAllClick","map","column","e","sortByColumn","key","width","sortable","sortingDirection","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableColumn, TableProps} from './TableTypes';\nimport {ArrowLineDown, ArrowLineUp} from '../icons/systemicons/SystemIcons';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Checkbox} from '../InputFields';\nimport {\n  StyledTableHeader, StyledTableHeaderColumn, StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableHeaderTitle,\n  StyledTableHeaderTitleContent\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableHeaderProps extends TableProps {\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n}\n\nconst TableHeader: React.FunctionComponent<TableHeaderProps> = props => {\n\n  return (\n    <StyledTableHeader>\n      {\n        !!props.title &&\n        <StyledTableHeaderTitle data-testid=\"TestTableHeaderRow\">\n          <th colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n            <StyledTableHeaderTitleContent>\n              <span>{props.title}</span>\n              {\n                props.menu &&\n                <DropdownButton className={'title-menu'}\n                                type={'icon'}\n                                disabled={props.showLoadingIndicator}\n                                icon={<SystemIcons.MoreVertical/>}\n                                size={Size.Medium} {...props.menu}/>\n              }\n            </StyledTableHeaderTitleContent>\n          </th>\n        </StyledTableHeaderTitle>\n      }\n      <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n        {\n          props.multiSelect &&\n          <StyledTableHeaderColumn>\n            <StyledTableHeaderColumnContent>\n              <Checkbox selected={props.selectAllState === 'all'}\n                        disabled={props.showLoadingIndicator}\n                        semiSelected={props.selectAllState === 'some'}\n                        select={props.onSelectAllClick}/>\n            </StyledTableHeaderColumnContent>\n          </StyledTableHeaderColumn>\n        }\n        {props.columns.map((column: TableColumn) => (\n          <StyledTableHeaderColumn key={column.key}\n              onMouseDown={defaultOnMouseDownHandler}\n              onClick={(e) => props.sortByColumn(column)}\n              onKeyPress={(e) => {\n                if (e.key === 'Enter') {\n                  props.sortByColumn(column)\n                }\n              }}\n              style={{width: column.width}}\n              tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n              className={`${!!column.sortable ? 'sortable' : ''} ${!!column.sortable && !!column.sortingDirection ? 'sorted' : ''}`}>\n            <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n              {\n                column.sortable &&\n                (\n                  column.sortingDirection === 'asc'\n                    ? <ArrowLineUp size={'24px'}/>\n                    : <ArrowLineDown size={'24px'}/>\n                )\n              }\n            </StyledTableHeaderColumnContent>\n          </StyledTableHeaderColumn>\n        ))}\n      </StyledTableHeaderColumns>\n\n    </StyledTableHeader>\n  )\n}\n\nexport default TableHeader;\n"],"file":"TableHeaders.js"}