@dhis2-ui/table 9.10.3 → 9.11.1-beta.1

package/build/es/data-table/{data-table.stories.js → data-table.prod.stories.js}

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { Box } from '@dhis2-ui/box';
 import { Checkbox } from '@dhis2-ui/checkbox';
 import { Input } from '@dhis2-ui/input';
@@ -13,7 +12,22 @@ import { DataTableRow } from './data-table-row/data-table-row.js';
 import { DataTableToolbar } from './data-table-toolbar.js';
 import { DataTable } from './data-table.js';
 const subtitle = 'Used to display information in a standard, effective way.';
-const description = "\nShould be used with multiple DataTable-related child components - see the datatable and examples below.\n\n```js\nimport {\n    DataTable,\n    DataTableToolbar,\n    DataTableHead,\n    DataTableBody,\n    DataTableFoot,\n    DataTableRow,\n    DataTableCell,\n    DataTableColumnHeader,\n} from '@dhis2/ui'\n```\n";
+const description = `
+Should be used with multiple DataTable-related child components - see the datatable and examples below.
+
+\`\`\`js
+import {
+    DataTable,
+    DataTableToolbar,
+    DataTableHead,
+    DataTableBody,
+    DataTableFoot,
+    DataTableRow,
+    DataTableCell,
+    DataTableColumnHeader,
+} from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'DataTable',
   component: DataTable,
@@ -60,7 +74,6 @@ export default {
     }
   }
 };
-
 const BasicTemplate = _ref => {
   let {
     bordered,
@@ -125,7 +138,6 @@ const BasicTemplate = _ref => {
     colSpan: draggable ? '5' : '4'
   }, "Footer content"))));
 };
-
 export const Default = BasicTemplate.bind({});
 Default.args = {};
 export const Loading = BasicTemplate.bind({});
@@ -146,7 +158,6 @@ export const DraggableRows = BasicTemplate.bind({});
 DraggableRows.args = {
   draggable: true
 };
-
 const IndividualCellTemplate = args => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Header"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Header"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Header"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Header"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
   tag: "th"
 }, "Active Cells"), /*#__PURE__*/React.createElement(DataTableCell, null, "Inactive cell"), /*#__PURE__*/React.createElement(DataTableCell, {
@@ -187,22 +198,16 @@ const IndividualCellTemplate = args => /*#__PURE__*/React.createElement(DataTabl
 }, "#eff"), /*#__PURE__*/React.createElement(DataTableCell, {
   backgroundColor: "yellow"
 }, "yellow"), /*#__PURE__*/React.createElement(DataTableCell, null, "None"))));
-
 export const CellStyling = IndividualCellTemplate.bind({});
 CellStyling.args = {};
-
 const ToolbarsTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTableToolbar, null, /*#__PURE__*/React.createElement("p", null, "Content")), /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Last name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Incident date"), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, "Last updated"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, null, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, null, "05/25/1972")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/26/1991")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, null, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007")))), /*#__PURE__*/React.createElement(DataTableToolbar, {
   position: "bottom"
 }, /*#__PURE__*/React.createElement("p", null, "Content (bottom)")));
-
 export const Toolbars = ToolbarsTemplate.bind({});
 Toolbars.args = {};
-
 const ExpandableContentTemplate = args => {
   const [openRowIndex, setOpenRowIndex] = useState(null);
-
   const toggleOpenRow = index => setOpenRowIndex(openRowIndex === index ? null : index);
-
   const style = {
     margin: 8,
     padding: 4,
@@ -228,25 +233,22 @@ const ExpandableContentTemplate = args => {
     expandableContent: expandableContent
   }, /*#__PURE__*/React.createElement(DataTableCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, null, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007"))));
 };
-
 export const ExpandableContent = ExpandableContentTemplate.bind({});
 ExpandableContent.args = {};
-
 const SelectableRowsTemplate = args => {
   const [selected, setSelected] = useState({
     id_2: true
   });
-
   const toggleSelected = _ref2 => {
     let {
       value,
       checked
     } = _ref2;
-    setSelected({ ...selected,
+    setSelected({
+      ...selected,
       [value]: checked
     });
   };
-
   const toggleAll = _ref3 => {
     let {
       checked
@@ -257,9 +259,7 @@ const SelectableRowsTemplate = args => {
       id_3: checked
     });
   };
-
   const allSelected = () => Object.values(selected).filter(value => value).length === 3;
-
   return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
     width: "48px"
   }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -291,10 +291,8 @@ const SelectableRowsTemplate = args => {
     onChange: toggleSelected
   })), /*#__PURE__*/React.createElement(DataTableCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, null, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007"))));
 };
-
 export const SelectableRows = SelectableRowsTemplate.bind({});
 SelectableRows.args = {};
-
 const FixedHeaderTemplate = args => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
   fixed: true,
   top: "0"
@@ -320,12 +318,10 @@ const FixedHeaderTemplate = args => /*#__PURE__*/React.createElement(DataTable,
   fixed: true,
   top: "0"
 }, "Status"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, null, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, null, "05/25/1972"), /*#__PURE__*/React.createElement(DataTableCell, null, "66"), /*#__PURE__*/React.createElement(DataTableCell, null, "Jawi"), /*#__PURE__*/React.createElement(DataTableCell, null, "Sofie Hubert"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/26/1991"), /*#__PURE__*/React.createElement(DataTableCell, null, "38"), /*#__PURE__*/React.createElement(DataTableCell, null, "Mokassie MCHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Dashonte Clarke"), /*#__PURE__*/React.createElement(DataTableCell, null, "Complete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, null, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, null, "98"), /*#__PURE__*/React.createElement(DataTableCell, null, "Bathurst MCHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Unassigned"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Chiyembekezo"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okeke"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/23/1982"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/15/2003"), /*#__PURE__*/React.createElement(DataTableCell, null, "2"), /*#__PURE__*/React.createElement(DataTableCell, null, "Mayolla MCHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Wan Gengxin"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Mtendere"), /*#__PURE__*/React.createElement(DataTableCell, null, "Afolayan"), /*#__PURE__*/React.createElement(DataTableCell, null, "08/12/1994"), /*#__PURE__*/React.createElement(DataTableCell, null, "05/12/1972"), /*#__PURE__*/React.createElement(DataTableCell, null, "37"), /*#__PURE__*/React.createElement(DataTableCell, null, "Gbangadu MCHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Gvozden Boskovsky"), /*#__PURE__*/React.createElement(DataTableCell, null, "Complete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Inyene"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okonkwo"), /*#__PURE__*/React.createElement(DataTableCell, null, "04/01/1971"), /*#__PURE__*/React.createElement(DataTableCell, null, "03/16/2000"), /*#__PURE__*/React.createElement(DataTableCell, null, "70"), /*#__PURE__*/React.createElement(DataTableCell, null, "Kunike Barina"), /*#__PURE__*/React.createElement(DataTableCell, null, "Oscar de la Cavaller\xEDa"), /*#__PURE__*/React.createElement(DataTableCell, null, "Complete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Amaka"), /*#__PURE__*/React.createElement(DataTableCell, null, "Pretorius"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/25/1996"), /*#__PURE__*/React.createElement(DataTableCell, null, "09/15/1986"), /*#__PURE__*/React.createElement(DataTableCell, null, "32"), /*#__PURE__*/React.createElement(DataTableCell, null, "Bargbo"), /*#__PURE__*/React.createElement(DataTableCell, null, "Alberto Raya"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Meti"), /*#__PURE__*/React.createElement(DataTableCell, null, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, null, "10/24/2010"), /*#__PURE__*/React.createElement(DataTableCell, null, "07/26/1989"), /*#__PURE__*/React.createElement(DataTableCell, null, "8"), /*#__PURE__*/React.createElement(DataTableCell, null, "Majihun MCHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Unassigned"), /*#__PURE__*/React.createElement(DataTableCell, null, "Complete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Eshe"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okeke"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/31/1995"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/31/1995"), /*#__PURE__*/React.createElement(DataTableCell, null, "63"), /*#__PURE__*/React.createElement(DataTableCell, null, "Mambiama CHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Shadrias Pearson"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, null, "Obi"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(DataTableCell, null, "28"), /*#__PURE__*/React.createElement(DataTableCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete"))));
-
 export const FixedHeader = FixedHeaderTemplate.bind({});
 FixedHeader.args = {
   scrollHeight: '350px'
 };
-
 const FixedFirstColumnTemplate = args => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
   fixed: true,
   top: "0",
@@ -361,12 +357,10 @@ const FixedFirstColumnTemplate = args => /*#__PURE__*/React.createElement(DataTa
   fixed: true,
   left: "0"
 }, "Obi"), /*#__PURE__*/React.createElement(DataTableCell, null, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(DataTableCell, null, "28"), /*#__PURE__*/React.createElement(DataTableCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete"))));
-
 export const FixedFirstColumn = FixedFirstColumnTemplate.bind({});
 FixedFirstColumn.args = {
   scrollWidth: '500px'
 };
-
 const FixedHeaderAndTwoColumnsTemplate = args => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
   fixed: true,
   top: "0",
@@ -465,7 +459,6 @@ const FixedHeaderAndTwoColumnsTemplate = args => /*#__PURE__*/React.createElemen
   fixed: true,
   left: "120px"
 }, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(DataTableCell, null, "28"), /*#__PURE__*/React.createElement(DataTableCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete"))));
-
 export const FixedHeaderAndTwoColumns = FixedHeaderAndTwoColumnsTemplate.bind({});
 FixedHeaderAndTwoColumns.args = {
   layout: 'fixed',
@@ -473,7 +466,6 @@ FixedHeaderAndTwoColumns.args = {
   scrollWidth: '500px',
   scrollHeight: '400px'
 };
-
 const ScrollingDataTableWithToolbarsTemplate = args => /*#__PURE__*/React.createElement(Box, {
   width: "500px"
 }, /*#__PURE__*/React.createElement(DataTableToolbar, null, /*#__PURE__*/React.createElement("p", null, "Content")), /*#__PURE__*/React.createElement(DataTable, _extends({}, args, {
@@ -581,7 +573,6 @@ const ScrollingDataTableWithToolbarsTemplate = args => /*#__PURE__*/React.create
 }, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(DataTableCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(DataTableCell, null, "28"), /*#__PURE__*/React.createElement(DataTableCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(DataTableCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(DataTableCell, null, "Incomplete")))), /*#__PURE__*/React.createElement(DataTableToolbar, {
   position: "bottom"
 }, /*#__PURE__*/React.createElement("p", null, "Content (bottom)")));
-
 export const ScrollingDataTableWithToolbars = ScrollingDataTableWithToolbarsTemplate.bind({});
 ScrollingDataTableWithToolbars.args = {
   layout: 'fixed',
@@ -589,7 +580,6 @@ ScrollingDataTableWithToolbars.args = {
   scrollWidth: '500px',
   scrollHeight: '400px'
 };
-
 const ColumnHeaderSortingTemplate = args => {
   const rows = [{
     firstName: 'Onyekachukwu',
@@ -608,9 +598,7 @@ const ColumnHeaderSortingTemplate = args => {
     column: 'firstName',
     direction: 'default'
   });
-
   const getSortDirection = columnName => columnName === column ? direction : 'default';
-
   const onSortIconClick = _ref4 => {
     let {
       name,
@@ -621,7 +609,6 @@ const ColumnHeaderSortingTemplate = args => {
       direction
     });
   };
-
   return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
     onSortIconClick: onSortIconClick,
     sortDirection: getSortDirection('firstName'),
@@ -635,15 +622,12 @@ const ColumnHeaderSortingTemplate = args => {
   }, "Last name"))), /*#__PURE__*/React.createElement(DataTableBody, null, rows.sort((a, b) => {
     const strA = a[column];
     const strB = b[column];
-
     if (direction === 'asc' && strA < strB || direction === 'desc' && strA > strB) {
       return -1;
     }
-
     if (direction === 'desc' && strA < strB || direction === 'asc' && strA > strB) {
       return 1;
     }
-
     return 0;
   }).map(_ref5 => {
     let {
@@ -655,10 +639,8 @@ const ColumnHeaderSortingTemplate = args => {
     }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
   })));
 };
-
 export const ColumnHeaderSorting = ColumnHeaderSortingTemplate.bind({});
 ColumnHeaderSorting.args = {};
-
 const InlineFilteringTemplate = args => {
   const rows = [{
     firstName: 'Onyekachukwu',
@@ -677,7 +659,6 @@ const InlineFilteringTemplate = args => {
     column: null,
     value: ''
   });
-
   const onFilterIconClick = _ref6 => {
     let {
       name,
@@ -688,7 +669,6 @@ const InlineFilteringTemplate = args => {
       value: ''
     });
   };
-
   const onFilterInputChange = _ref7 => {
     let {
       value
@@ -698,7 +678,6 @@ const InlineFilteringTemplate = args => {
       value
     });
   };
-
   return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
     onFilterIconClick: onFilterIconClick,
     name: "firstName",
@@ -723,7 +702,6 @@ const InlineFilteringTemplate = args => {
     if (!column || !value) {
       return true;
     }
-
     return row[column].toUpperCase().includes(value.toUpperCase());
   }).map(_ref8 => {
     let {
@@ -735,12 +713,10 @@ const InlineFilteringTemplate = args => {
     }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
   })));
 };
-
 export const InlineFiltering = InlineFilteringTemplate.bind({});
 InlineFiltering.args = {
   layout: 'fixed'
 };
-
 const LongCellContentTemplate = _ref9 => {
   let {
     large
@@ -781,7 +757,6 @@ const LongCellContentTemplate = _ref9 => {
     large: large
   }, "Fourth - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"))));
 };
-
 export const LongCellContent = LongCellContentTemplate.bind({});
 export const LongCellContentLargeCells = LongCellContentTemplate.bind({});
 LongCellContentLargeCells.args = {

package/build/es/data-table/table-elements/__tests__/table-data-cell.test.js

@@ -25,7 +25,7 @@ describe('<TableDataCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
       align: align
     }));
-    expect(wrapper.html()).toContain("text-align: ".concat(align, ";"));
+    expect(wrapper.html()).toContain(`text-align: ${align};`);
   });
   it('accepts a bordered prop', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
@@ -71,7 +71,7 @@ describe('<TableDataCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
       left: left
     }));
-    expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
+    expect(wrapper.html()).toContain(`inset-inline-start: ${left};`);
   });
   it('accepts a muted prop', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
@@ -117,7 +117,7 @@ describe('<TableDataCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
       width: width
     }));
-    expect(wrapper.html()).toContain("width: ".concat(width, ";"));
+    expect(wrapper.html()).toContain(`width: ${width};`);
   });
   it('accepts an onClick prop', () => {
     const onClick = jest.fn();

package/build/es/data-table/table-elements/__tests__/table-header-cell.test.js

@@ -25,7 +25,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
       align: align
     }));
-    expect(wrapper.html()).toContain("text-align: ".concat(align, ";"));
+    expect(wrapper.html()).toContain(`text-align: ${align};`);
   });
   it('accepts a bordered prop', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
@@ -78,7 +78,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
       left: left
     }));
-    expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
+    expect(wrapper.html()).toContain(`inset-inline-start: ${left};`);
   });
   it('accepts an muted prop', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
@@ -112,7 +112,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
       top: top
     }));
-    expect(wrapper.html()).toContain("top: ".concat(top, ";"));
+    expect(wrapper.html()).toContain(`top: ${top};`);
   });
   it('accepts a valid prop', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
@@ -125,7 +125,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
       width: width
     }));
-    expect(wrapper.html()).toContain("width: ".concat(width, ";"));
+    expect(wrapper.html()).toContain(`width: ${width};`);
   });
   it('accepts an onClick prop', () => {
     const onClick = jest.fn();

package/build/es/data-table/table-elements/__tests__/table.test.js

@@ -39,7 +39,7 @@ describe('<Table>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(Table, {
       layout: layout
     }));
-    expect(wrapper.html()).toContain("table-layout: ".concat(layout, ";"));
+    expect(wrapper.html()).toContain(`table-layout: ${layout};`);
   });
   it('accepts a role prop', () => {
     const role = 'test';
@@ -53,6 +53,6 @@ describe('<Table>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(Table, {
       width: width
     }));
-    expect(wrapper.html()).toContain("width: ".concat(width, ";"));
+    expect(wrapper.html()).toContain(`width: ${width};`);
   });
 });

package/build/es/data-table/table-elements/table-body.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -25,7 +23,7 @@ export const TableBody = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2478922139",
     dynamic: [colors.blue600]
-  }, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:0;background-color:rgba(255,255,255,0.8);}", ".loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);inset-inline-start:calc(50% - 24px);width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:".concat(colors.blue600, ";border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}"), "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
+  }, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:0;background-color:rgba(255,255,255,0.8);}", `.loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);inset-inline-start:calc(50% - 24px);width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:${colors.blue600};border-radius:50%;-webkit-animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;animation:rotation-__jsx-style-dynamic-selector 1s linear infinite;}`, "@-webkit-keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes rotation-__jsx-style-dynamic-selector{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}"]));
 });
 TableBody.displayName = 'TableBody';
 TableBody.defaultProps = {

package/build/es/data-table/table-elements/table-data-cell/table-data-cell.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types';
 import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
@@ -15,7 +13,6 @@ const rtlCorrespondingAlignments = {
 };
 export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _rtlCorrespondingAlig;
-
   let {
     active,
     align,
@@ -47,7 +44,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
     "data-test": dataTest,
     role: role,
     scope: scope,
-    className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["836058623", [left, align, width, backgroundColor || colors.white, rtlAlign, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']]]) + " " + (cx(className, {
+    className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["836058623", [left, align, width, backgroundColor || colors.white, rtlAlign, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']]]) + " " + (cx(className, {
       active,
       bordered,
       error,
@@ -61,7 +58,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "836058623",
     dynamic: [left, align, width, backgroundColor || colors.white, rtlAlign, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']
-  }, ["td.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.white, ";}"), ".__jsx-style-dynamic-selector:dir(rtl){text-align:".concat(rtlAlign, ";}"), "tr.selected>td.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.teal100, ";}"), "tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey100, ";}"), "tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}"), "tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || '#cdeae8', ";}")]));
+  }, [`td.__jsx-style-dynamic-selector{inset-inline-start:${left};text-align:${align};width:${width};background-color:${backgroundColor || colors.white};}`, `.__jsx-style-dynamic-selector:dir(rtl){text-align:${rtlAlign};}`, `tr.selected>td.__jsx-style-dynamic-selector{background-color:${backgroundColor || colors.teal100};}`, `tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:${backgroundColor || colors.grey100};}`, `tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:${backgroundColor || colors.grey200};}`, `tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:${backgroundColor || '#cdeae8'};}`]));
 });
 TableDataCell.displayName = 'TableDataCell';
 TableDataCell.defaultProps = {
@@ -75,7 +72,6 @@ TableDataCell.propTypes = {
   /** To toggle border color, for example for editing */
   active: PropTypes.bool,
   align: PropTypes.oneOf(['left', 'center', 'right']),
-
   /** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
   backgroundColor: PropTypes.string,
   bordered: PropTypes.bool,
@@ -83,23 +79,18 @@ TableDataCell.propTypes = {
   className: PropTypes.string,
   colSpan: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Mutually exclusive with muted and valid */
   error: stylePropType,
   large: PropTypes.bool,
-
   /** Required when fixed */
   left: requiredIf(props => props.fixed, PropTypes.string),
-
   /** Mutually exclusive with error and valid */
   muted: stylePropType,
   role: PropTypes.string,
   rowSpan: PropTypes.string,
   scope: PropTypes.string,
-
   /** Surpress hover and active event styles */
   staticStyle: PropTypes.bool,
-
   /** Mutually exclusive with error and muted */
   valid: stylePropType,
   width: PropTypes.string,

package/build/es/data-table/table-elements/table-data-cell/table-data-cell.styles.js

@@ -1,4 +1,4 @@
 import { colors } from '@dhis2/ui-constants';
-const _defaultExport = ["td.jsx-533878895{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey900, ";}"), "td.active.jsx-533878895{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-533878895{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "td.bordered.jsx-533878895:last-child{border-inline-end:1px solid transparent;}", "td.error.jsx-533878895{color:".concat(colors.red700, ";}"), "td.muted.jsx-533878895{color:".concat(colors.grey700, ";font-style:italic;}"), "td.valid.jsx-533878895{color:".concat(colors.green700, ";}"), "td.large.jsx-533878895{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-533878895{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-533878895{border-top:1px solid ".concat(colors.grey300, ";}")];
+const _defaultExport = [`td.jsx-533878895{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ${colors.grey300};color:${colors.grey900};}`, `td.active.jsx-533878895{outline:2px solid ${colors.grey600};outline-offset:-2px;}`, `td.bordered.jsx-533878895{border-inline-end:1px solid ${colors.grey300};}`, "td.bordered.jsx-533878895:last-child{border-inline-end:1px solid transparent;}", `td.error.jsx-533878895{color:${colors.red700};}`, `td.muted.jsx-533878895{color:${colors.grey700};font-style:italic;}`, `td.valid.jsx-533878895{color:${colors.green700};}`, "td.large.jsx-533878895{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-533878895{border-bottom:1px solid transparent;}", `tfoot tr:first-child td.jsx-533878895{border-top:1px solid ${colors.grey300};}`];
 _defaultExport.__hash = "533878895";
 export default _defaultExport;

package/build/es/data-table/table-elements/table-foot.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 export const TableFoot = /*#__PURE__*/forwardRef((_ref, ref) => {

package/build/es/data-table/table-elements/table-head.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 export const TableHead = /*#__PURE__*/forwardRef((_ref, ref) => {

package/build/es/data-table/table-elements/table-header-cell/table-header-cell.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types';
 import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
@@ -42,7 +40,7 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
     "data-test": dataTest,
     role: role,
     scope: scope,
-    className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["2588011372", [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]]]) + " " + (cx(className, {
+    className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["2588011372", [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]]]) + " " + (cx(className, {
       active,
       bordered,
       error,
@@ -58,7 +56,7 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2588011372",
     dynamic: [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]
-  }, ["th.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.grey200, ";}"), "thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}")]));
+  }, [`th.__jsx-style-dynamic-selector{inset-inline-start:${left};top:${top};text-align:${align};width:${width};background-color:${backgroundColor || colors.grey200};}`, `thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:${backgroundColor || colors.grey300};}`, `tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:${backgroundColor || colors.grey300};}`, `tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:${backgroundColor || colors.grey200};}`]));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 TableHeaderCell.defaultProps = {
@@ -73,7 +71,6 @@ TableHeaderCell.propTypes = {
   /** To toggle border color, for example for editing */
   active: PropTypes.bool,
   align: PropTypes.oneOf(['left', 'center', 'right']),
-
   /** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
   backgroundColor: PropTypes.string,
   bordered: PropTypes.bool,
@@ -81,27 +78,21 @@ TableHeaderCell.propTypes = {
   className: PropTypes.string,
   colSpan: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Mutually exclusive with muted and valid */
   error: stylePropType,
   fixed: PropTypes.bool,
   large: PropTypes.bool,
-
   /** Left or top required when fixed */
   left: requiredIf(props => props.fixed && !props.top, PropTypes.string),
-
   /** Mutually exclusive with error and valid */
   muted: stylePropType,
   role: PropTypes.string,
   rowSpan: PropTypes.string,
   scope: PropTypes.string,
-
   /** Surpress hover and active event styles */
   staticStyle: PropTypes.bool,
-
   /** Left or top required when fixed */
   top: requiredIf(props => props.fixed && !props.left, PropTypes.string),
-
   /** Mutually exclusive with error and muted */
   valid: stylePropType,
   width: PropTypes.string,

package/build/es/data-table/table-elements/table-header-cell/table-header-cell.styles.js

@@ -1,4 +1,4 @@
 import { colors } from '@dhis2/ui-constants';
-const _defaultExport = ["th.jsx-2895298632{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey800, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-2895298632{padding:8px 12px;font-size:13px;}", "th.jsx-2895298632:last-of-type{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "th.active.jsx-2895298632{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-2895298632{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "th.bordered.jsx-2895298632:last-child{border-inline-end:1px solid transparent;}", "th.error.jsx-2895298632{color:".concat(colors.red700, ";}"), "th.muted.jsx-2895298632{color:".concat(colors.grey700, ";font-style:italic;}"), "th.valid.jsx-2895298632{color:".concat(colors.green700, ";}"), "th.large.jsx-2895298632{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2895298632{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2895298632{z-index:3;}", "tr:last-child th.jsx-2895298632{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-2895298632{border-bottom:1px solid ".concat(colors.grey300, ";}"), "tfoot>tr:first-child th.jsx-2895298632{border-top:1px solid ".concat(colors.grey300, ";}")];
+const _defaultExport = [`th.jsx-2895298632{padding:12px;border:1px solid transparant;border-bottom:1px solid ${colors.grey300};color:${colors.grey800};font-weight:normal;font-size:14px;vertical-align:top;}`, "thead th.jsx-2895298632{padding:8px 12px;font-size:13px;}", `th.jsx-2895298632:last-of-type{border-inline-end:1px solid ${colors.grey300};}`, `th.active.jsx-2895298632{outline:2px solid ${colors.grey600};outline-offset:-2px;}`, `th.bordered.jsx-2895298632{border-inline-end:1px solid ${colors.grey300};}`, "th.bordered.jsx-2895298632:last-child{border-inline-end:1px solid transparent;}", `th.error.jsx-2895298632{color:${colors.red700};}`, `th.muted.jsx-2895298632{color:${colors.grey700};font-style:italic;}`, `th.valid.jsx-2895298632{color:${colors.green700};}`, "th.large.jsx-2895298632{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2895298632{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2895298632{z-index:3;}", "tr:last-child th.jsx-2895298632{border-bottom:1px solid transparent;}", `thead tr:last-child th.jsx-2895298632{border-bottom:1px solid ${colors.grey300};}`, `tfoot>tr:first-child th.jsx-2895298632{border-top:1px solid ${colors.grey300};}`];
 _defaultExport.__hash = "2895298632";
 export default _defaultExport;

package/build/es/data-table/table-elements/table-header-cell-action.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
@@ -23,7 +21,7 @@ export const TableHeaderCellAction = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4225768774",
     dynamic: [colors.grey400]
-  }, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-inline-start:2px;}", "button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:".concat(colors.grey400, ";}"), "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"]));
+  }, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-inline-start:2px;}", `button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:${colors.grey400};}`, "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"]));
 });
 TableHeaderCellAction.displayName = 'TableHeaderCellAction';
 TableHeaderCellAction.defaultProps = {

package/build/es/data-table/table-elements/table-row.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
@@ -36,11 +34,9 @@ TableRow.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Applies draggable cursor styles */
   draggable: PropTypes.bool,
   role: PropTypes.string,
-
   /** Sets a selected (teal) background color */
   selected: PropTypes.bool
 };