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

package/dist/Table/TableHeaders.cjs

@@ -9,24 +9,16 @@ 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; }
@@ -34,70 +26,24 @@ 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.jsxs)(_TableStyles.StyledTableHeader, {
-    children: [!!props.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderTitle, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeader, {
+    children: (!!props.title || !!props.menu) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableHeaderTitle, {
       "data-testid": "TestTableHeaderRow",
-      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))]
-        })
+      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","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"}
+{"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"}

package/dist/Table/TableHeaders.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
-import { TableColumn, TableProps } from './TableTypes';
+import { 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,85 +1,36 @@
 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 { Checkbox } from '../InputFields';
-import { StyledTableHeader, StyledTableHeaderColumn, StyledTableHeaderColumnContent, StyledTableHeaderColumns, StyledTableHeaderTitle, StyledTableHeaderTitleContent } from './TableStyles';
-import { defaultOnMouseDownHandler } from '../common';
+import { StyledTableHeaderTitleContent } from './TableStyles';
+import { StyledTableHeaderTitle, StyledTableHeader } from "./TableStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var TableHeader = function TableHeader(props) {
-  return /*#__PURE__*/_jsxs(StyledTableHeader, {
-    children: [!!props.title && /*#__PURE__*/_jsx(StyledTableHeaderTitle, {
+  return /*#__PURE__*/_jsx(StyledTableHeader, {
+    children: (!!props.title || !!props.menu) && /*#__PURE__*/_jsx(StyledTableHeaderTitle, {
       "data-testid": "TestTableHeaderRow",
-      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))]
-        })
+      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","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"}
+{"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"}

package/dist/Table/TableStyles.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableNoRowsLabelRow = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
+exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableNoRowsLabelRow = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderRow = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyWrapper = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,9 @@ var _zIndexes = require("../styles/z-indexes");
 
 var _Checkbox = require("../InputFields/Checkbox");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _types = require("../types");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
 /**
  * Table styles
@@ -32,11 +34,11 @@ var StyledTable = _styledComponents.default.table(_templateObject2 || (_template
 
 exports.StyledTable = StyledTable;
 
-var StyledTableHeader = _styledComponents.default.thead(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 
 exports.StyledTableHeader = StyledTableHeader;
 
-var StyledTableHeaderTitle = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableHeaderTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 
 exports.StyledTableHeaderTitle = StyledTableHeaderTitle;
 
@@ -44,67 +46,75 @@ var StyledTableHeaderTitleContent = _styledComponents.default.div(_templateObjec
 
 exports.StyledTableHeaderTitleContent = StyledTableHeaderTitleContent;
 
-var StyledTableHeaderColumns = _styledComponents.default.tr(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableHeaderRow = _styledComponents.default.thead(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+
+exports.StyledTableHeaderRow = StyledTableHeaderRow;
+
+var StyledTableHeaderColumns = _styledComponents.default.tr(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 
 exports.StyledTableHeaderColumns = StyledTableHeaderColumns;
 
-var StyledTableHeaderColumnContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+var StyledTableHeaderColumnContent = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
 
 exports.StyledTableHeaderColumnContent = StyledTableHeaderColumnContent;
 
-var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
+var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
 
 exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
 
-var StyledTableBodyRow = _styledComponents.default.tr(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), _styles.COLORS.primary_100, _styles.COLORS.primary_200, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
+var StyledTableBodyRow = _styledComponents.default.tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), _styles.COLORS.primary_100, _styles.COLORS.primary_200, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
 
 exports.StyledTableBodyRow = StyledTableBodyRow;
 
-var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), _styles.COLORS.neutral_50);
+var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), _styles.COLORS.neutral_50);
 
 exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
 
-var StyledTableBody = _styledComponents.default.tbody(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_50, StyledTableBodyRow, _styles.COLORS.neutral_20);
+var StyledTableBody = _styledComponents.default.tbody(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_50, StyledTableBodyRow, _styles.COLORS.neutral_20);
 
 exports.StyledTableBody = StyledTableBody;
 
-var StyledTableCell = _styledComponents.default.td(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([""])));
+var StyledTableCell = _styledComponents.default.td(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)([""])));
 
 exports.StyledTableCell = StyledTableCell;
 
-var StyledTableCellContent = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 48px;\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
+var StyledTableCellContent = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 48px;\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
 
 exports.StyledTableCellContent = StyledTableCellContent;
 
-var StyledTableCellIcon = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
+var StyledTableCellIcon = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
 
 exports.StyledTableCellIcon = StyledTableCellIcon;
 
-var StyledTableCellText = _styledComponents.default.span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px 0;\n"])));
+var StyledTableCellText = _styledComponents.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px 0;\n"])));
 
 exports.StyledTableCellText = StyledTableCellText;
 
-var StyledTableFooter = _styledComponents.default.tfoot(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableFooter = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 
 exports.StyledTableFooter = StyledTableFooter;
 
-var StyledTableFooterContent = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+var StyledTableFooterContent = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
 
 exports.StyledTableFooterContent = StyledTableFooterContent;
 
-var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 16px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
+var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 16px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
 
 exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
 
-var StyledTableFooterControls = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var StyledTableFooterControls = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 exports.StyledTableFooterControls = StyledTableFooterControls;
 
-var StyledTableSpinner = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.backdrop);
+var StyledTableSpinner = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.backdrop);
 
 exports.StyledTableSpinner = StyledTableSpinner;
 
-var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.focusStyles, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
+var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.focusStyles, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
 
 exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
+
+var StyledTableBodyWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+exports.StyledTableBodyWrapper = StyledTableBodyWrapper;
 //# sourceMappingURL=TableStyles.cjs.map

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.cjs"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Size","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;"],"file":"TableStyles.cjs"}

package/dist/Table/TableStyles.d.ts

@@ -3,9 +3,10 @@
  */
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const StyledTableHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
-export declare const StyledTableHeaderTitle: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTableHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTableHeaderTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableHeaderTitleContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTableHeaderRow: import("styled-components").StyledComponent<"thead", any, {}, never>;
 export declare const StyledTableHeaderColumns: import("styled-components").StyledComponent<"tr", any, {}, never>;
 export declare const StyledTableHeaderColumnContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableHeaderColumn: import("styled-components").StyledComponent<"th", any, {}, never>;
@@ -16,9 +17,10 @@ export declare const StyledTableCell: import("styled-components").StyledComponen
 export declare const StyledTableCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableCellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableCellText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledTableFooter: import("styled-components").StyledComponent<"tfoot", any, {}, never>;
+export declare const StyledTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableFooterContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableFooterCurrentInfo: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledTableFooterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableFooterCollapseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledTableBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/TableStyles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
 /**
  * Import third-party libraries.
@@ -10,33 +10,36 @@ import styled from 'styled-components';
  * Import custom style properties.
  */
 
-import { COLORS, focusStyles } from '../styles';
+import { COLORS, focusStyles, scrollBarStyling } from '../styles';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { StyledCheckBox } from '../InputFields/Checkbox';
+import { Size } from "../types";
 /**
  * Table styles
  */
 
 export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
-export var StyledTableHeader = styled.thead(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableHeaderTitle = styled.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
-export var StyledTableHeaderColumns = styled.tr(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableHeaderColumnContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTableHeaderColumn = styled.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
-export var StyledTableBodyRow = styled.tr(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
-export var StyledTableNoRowsLabelRow = styled.tr(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
-export var StyledTableBody = styled.tbody(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);
-export var StyledTableCell = styled.td(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
-export var StyledTableCellContent = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  min-height: 48px;\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
-export var StyledTableCellIcon = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
-export var StyledTableCellText = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 12px 0;\n"])));
-export var StyledTableFooter = styled.tfoot(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableFooterContent = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTableFooterCurrentInfo = styled.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
-export var StyledTableFooterControls = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var StyledTableSpinner = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), Z_INDEXES.backdrop);
-export var StyledTableFooterCollapseButton = styled.button(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
+export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTableHeaderColumn = styled.th(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
+export var StyledTableBodyRow = styled.tr(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
+export var StyledTableNoRowsLabelRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
+export var StyledTableBody = styled.tbody(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);
+export var StyledTableCell = styled.td(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([""])));
+export var StyledTableCellContent = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  min-height: 48px;\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
+export var StyledTableCellIcon = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
+export var StyledTableCellText = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  padding: 12px 0;\n"])));
+export var StyledTableFooter = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableFooterContent = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTableFooterCurrentInfo = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
+export var StyledTableFooterControls = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var StyledTableSpinner = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), Z_INDEXES.backdrop);
+export var StyledTableFooterCollapseButton = styled.button(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
+export var StyledTableBodyWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
 //# sourceMappingURL=TableStyles.js.map