@dhis2-ui/table 8.2.0 → 8.2.1

package/build/es/data-table/data-table.stories.js

@@ -13,24 +13,9 @@ 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 = `
-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'
-\`\`\`
-`;
+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";
 export default {
-  title: 'Data Display/DataTable',
+  title: 'DataTable',
   component: DataTable,
   // Add subcomponents to the args datatable
   subcomponents: {
@@ -76,67 +61,70 @@ export default {
   }
 };
 
-const BasicTemplate = ({
-  bordered,
-  large,
-  draggable,
-  bodyProps,
-  ...args
-}) => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, draggable && /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large
-}), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large
-}, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large
-}, "Last name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large
-}, "Incident date"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large
-}, "Last updated"))), /*#__PURE__*/React.createElement(DataTableBody, bodyProps, /*#__PURE__*/React.createElement(DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "05/25/1972")), /*#__PURE__*/React.createElement(DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/26/1991")), /*#__PURE__*/React.createElement(DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/06/2007"))), /*#__PURE__*/React.createElement(DataTableFoot, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
-  colSpan: draggable ? '5' : '4'
-}, "Footer content"))));
+const BasicTemplate = _ref => {
+  let {
+    bordered,
+    large,
+    draggable,
+    bodyProps,
+    ...args
+  } = _ref;
+  return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, draggable && /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large
+  }), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large
+  }, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large
+  }, "Last name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large
+  }, "Incident date"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large
+  }, "Last updated"))), /*#__PURE__*/React.createElement(DataTableBody, bodyProps, /*#__PURE__*/React.createElement(DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "05/25/1972")), /*#__PURE__*/React.createElement(DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/26/1991")), /*#__PURE__*/React.createElement(DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/06/2007"))), /*#__PURE__*/React.createElement(DataTableFoot, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
+    colSpan: draggable ? '5' : '4'
+  }, "Footer content"))));
+};
 
 export const Default = BasicTemplate.bind({});
 Default.args = {};
@@ -233,18 +221,20 @@ const SelectableRowsTemplate = args => {
     id_2: true
   });
 
-  const toggleSelected = ({
-    value,
-    checked
-  }) => {
+  const toggleSelected = _ref2 => {
+    let {
+      value,
+      checked
+    } = _ref2;
     setSelected({ ...selected,
       [value]: checked
     });
   };
 
-  const toggleAll = ({
-    checked
-  }) => {
+  const toggleAll = _ref3 => {
+    let {
+      checked
+    } = _ref3;
     setSelected({
       id_1: checked,
       id_2: checked,
@@ -605,10 +595,11 @@ const ColumnHeaderSortingTemplate = args => {
 
   const getSortDirection = columnName => columnName === column ? direction : 'default';
 
-  const onSortIconClick = ({
-    name,
-    direction
-  }) => {
+  const onSortIconClick = _ref4 => {
+    let {
+      name,
+      direction
+    } = _ref4;
     setSortInstructions({
       column: name,
       direction
@@ -638,12 +629,15 @@ const ColumnHeaderSortingTemplate = args => {
     }
 
     return 0;
-  }).map(({
-    firstName,
-    lastName
-  }) => /*#__PURE__*/React.createElement(DataTableRow, {
-    key: firstName + lastName
-  }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName)))));
+  }).map(_ref5 => {
+    let {
+      firstName,
+      lastName
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(DataTableRow, {
+      key: firstName + lastName
+    }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
+  })));
 };
 
 export const ColumnHeaderSorting = ColumnHeaderSortingTemplate.bind({});
@@ -668,19 +662,21 @@ const InlineFilteringTemplate = args => {
     value: ''
   });
 
-  const onFilterIconClick = ({
-    name,
-    show
-  }) => {
+  const onFilterIconClick = _ref6 => {
+    let {
+      name,
+      show
+    } = _ref6;
     setFilter({
       column: show ? name : null,
       value: ''
     });
   };
 
-  const onFilterInputChange = ({
-    value
-  }) => {
+  const onFilterInputChange = _ref7 => {
+    let {
+      value
+    } = _ref7;
     setFilter({
       column: column,
       value
@@ -713,12 +709,15 @@ const InlineFilteringTemplate = args => {
     }
 
     return row[column].toUpperCase().includes(value.toUpperCase());
-  }).map(({
-    firstName,
-    lastName
-  }) => /*#__PURE__*/React.createElement(DataTableRow, {
-    key: firstName + lastName
-  }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName)))));
+  }).map(_ref8 => {
+    let {
+      firstName,
+      lastName
+    } = _ref8;
+    return /*#__PURE__*/React.createElement(DataTableRow, {
+      key: firstName + lastName
+    }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
+  })));
 };
 
 export const InlineFiltering = InlineFilteringTemplate.bind({});
@@ -726,43 +725,46 @@ InlineFiltering.args = {
   layout: 'fixed'
 };
 
-const LongCellContentTemplate = ({
-  large
-}) => /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large,
-  onSortIconClick: () => {},
-  sortDirection: "asc",
-  name: "first"
-}, "FIRST - 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?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large,
-  onFilterIconClick: () => {},
-  name: "firstName",
-  showFilter: true,
-  filter: /*#__PURE__*/React.createElement(Input, {
-    dense: true,
-    onChange: () => {},
+const LongCellContentTemplate = _ref9 => {
+  let {
+    large
+  } = _ref9;
+  return /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large,
+    onSortIconClick: () => {},
+    sortDirection: "asc",
+    name: "first"
+  }, "FIRST - 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?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large,
+    onFilterIconClick: () => {},
     name: "firstName",
-    value: "Filter value"
-  })
-}, "SECOND - 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?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large,
-  onSortIconClick: () => {},
-  sortDirection: "asc",
-  name: "third"
-}, "Third (short)"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-  large: large,
-  onSortIconClick: () => {},
-  sortDirection: "asc",
-  name: "fourth"
-}, "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?"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large
-}, "FIRST - 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?"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large
-}, "SECOND - 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?"), /*#__PURE__*/React.createElement(DataTableCell, {
-  large: large
-}, "Third (short)"), /*#__PURE__*/React.createElement(DataTableCell, {
-  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?"))));
+    showFilter: true,
+    filter: /*#__PURE__*/React.createElement(Input, {
+      dense: true,
+      onChange: () => {},
+      name: "firstName",
+      value: "Filter value"
+    })
+  }, "SECOND - 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?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large,
+    onSortIconClick: () => {},
+    sortDirection: "asc",
+    name: "third"
+  }, "Third (short)"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+    large: large,
+    onSortIconClick: () => {},
+    sortDirection: "asc",
+    name: "fourth"
+  }, "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?"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large
+  }, "FIRST - 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?"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large
+  }, "SECOND - 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?"), /*#__PURE__*/React.createElement(DataTableCell, {
+    large: large
+  }, "Third (short)"), /*#__PURE__*/React.createElement(DataTableCell, {
+    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({});

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: ${align};`);
+    expect(wrapper.html()).toContain("text-align: ".concat(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(`left: ${left};`);
+    expect(wrapper.html()).toContain("left: ".concat(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: ${width};`);
+    expect(wrapper.html()).toContain("width: ".concat(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: ${align};`);
+    expect(wrapper.html()).toContain("text-align: ".concat(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(`left: ${left};`);
+    expect(wrapper.html()).toContain("left: ".concat(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: ${top};`);
+    expect(wrapper.html()).toContain("top: ".concat(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: ${width};`);
+    expect(wrapper.html()).toContain("width: ".concat(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: ${layout};`);
+    expect(wrapper.html()).toContain("table-layout: ".concat(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: ${width};`);
+    expect(wrapper.html()).toContain("width: ".concat(width, ";"));
   });
 });

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

@@ -6,24 +6,27 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-export const TableBody = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  dataTest,
-  role,
-  loading,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement("tbody", _extends({}, props, {
-  "data-test": dataTest,
-  ref: ref,
-  role: role,
-  className: _JSXStyle.dynamic([["2117748229", [colors.blue600]]]) + " " + (cx(className, {
-    loading
-  }) || "")
-}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2117748229",
-  dynamic: [colors.blue600]
-}, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(255,255,255,0.8);}", `.loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);left: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);}}"])));
+export const TableBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    role,
+    loading,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("tbody", _extends({}, props, {
+    "data-test": dataTest,
+    ref: ref,
+    role: role,
+    className: _JSXStyle.dynamic([["2117748229", [colors.blue600]]]) + " " + (cx(className, {
+      loading
+    }) || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2117748229",
+    dynamic: [colors.blue600]
+  }, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;background-color:rgba(255,255,255,0.8);}", ".loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);left: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);}}"]));
+});
 TableBody.displayName = 'TableBody';
 TableBody.defaultProps = {
   dataTest: 'dhis2-uicore-tablebody'

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

@@ -7,49 +7,52 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import styles from './table-data-cell.styles.js';
-export const TableDataCell = /*#__PURE__*/forwardRef(({
-  active,
-  align,
-  bordered,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  error,
-  large,
-  left,
-  muted,
-  role,
-  rowSpan,
-  scope,
-  staticStyle,
-  valid,
-  width,
-  onClick,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement("td", _extends({}, props, {
-  ref: ref,
-  colSpan: colSpan,
-  rowSpan: rowSpan,
-  onClick: onClick,
-  "data-test": dataTest,
-  role: role,
-  scope: scope,
-  className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["1956632613", [left, align, width]]]) + " " + (cx(className, {
+export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
     active,
+    align,
     bordered,
+    children,
+    className,
+    colSpan,
+    dataTest,
     error,
     large,
+    left,
     muted,
+    role,
+    rowSpan,
+    scope,
     staticStyle,
-    valid
-  }) || "")
-}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: styles.__hash
-}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1956632613",
-  dynamic: [left, align, width]
-}, [`td.__jsx-style-dynamic-selector{left:${left};text-align:${align};width:${width};}`])));
+    valid,
+    width,
+    onClick,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("td", _extends({}, props, {
+    ref: ref,
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    onClick: onClick,
+    "data-test": dataTest,
+    role: role,
+    scope: scope,
+    className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["1956632613", [left, align, width]]]) + " " + (cx(className, {
+      active,
+      bordered,
+      error,
+      large,
+      muted,
+      staticStyle,
+      valid
+    }) || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1956632613",
+    dynamic: [left, align, width]
+  }, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
+});
 TableDataCell.displayName = 'TableDataCell';
 TableDataCell.defaultProps = {
   align: 'left',

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-1115472719{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ${colors.grey300};background-color:${colors.white};color:${colors.grey900};}`, `td.active.jsx-1115472719{background-color:${colors.white};outline:2px solid ${colors.grey600};outline-offset:-2px;}`, `td.bordered.jsx-1115472719{border-right:1px solid ${colors.grey300};}`, "td.bordered.jsx-1115472719:last-child{border-right:1px solid transparent;}", `td.error.jsx-1115472719{color:${colors.red700};}`, `td.muted.jsx-1115472719{color:${colors.grey700};font-style:italic;}`, `td.valid.jsx-1115472719{color:${colors.green700};}`, "td.large.jsx-1115472719{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-1115472719{border-bottom:1px solid transparent;}", `tfoot tr:first-child td.jsx-1115472719{border-top:1px solid ${colors.grey300};}`, `tr.selected>td.jsx-1115472719{background-color:${colors.teal100};}`, `tr:hover>td.jsx-1115472719:not(.staticStyle){background-color:${colors.grey100};}`, `tr:active>td.jsx-1115472719:not(.staticStyle){background-color:${colors.grey200};}`, "tr.selected:hover>td.jsx-1115472719:not(.staticStyle){background-color:#cdeae8;}"];
+const _defaultExport = ["td.jsx-1115472719{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";background-color:").concat(colors.white, ";color:").concat(colors.grey900, ";}"), "td.active.jsx-1115472719{background-color:".concat(colors.white, ";outline:2px solid ").concat(colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-1115472719{border-right:1px solid ".concat(colors.grey300, ";}"), "td.bordered.jsx-1115472719:last-child{border-right:1px solid transparent;}", "td.error.jsx-1115472719{color:".concat(colors.red700, ";}"), "td.muted.jsx-1115472719{color:".concat(colors.grey700, ";font-style:italic;}"), "td.valid.jsx-1115472719{color:".concat(colors.green700, ";}"), "td.large.jsx-1115472719{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-1115472719{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-1115472719{border-top:1px solid ".concat(colors.grey300, ";}"), "tr.selected>td.jsx-1115472719{background-color:".concat(colors.teal100, ";}"), "tr:hover>td.jsx-1115472719:not(.staticStyle){background-color:".concat(colors.grey100, ";}"), "tr:active>td.jsx-1115472719:not(.staticStyle){background-color:".concat(colors.grey200, ";}"), "tr.selected:hover>td.jsx-1115472719:not(.staticStyle){background-color:#cdeae8;}"];
 _defaultExport.__hash = "1115472719";
 export default _defaultExport;

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

@@ -2,18 +2,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
-export const TableFoot = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  dataTest,
-  role,
-  ...props
-}, ref) => /*#__PURE__*/React.createElement("tfoot", _extends({}, props, {
-  className: className,
-  "data-test": dataTest,
-  ref: ref,
-  role: role
-}), children));
+export const TableFoot = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    role,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("tfoot", _extends({}, props, {
+    className: className,
+    "data-test": dataTest,
+    ref: ref,
+    role: role
+  }), children);
+});
 TableFoot.displayName = 'TableFoot';
 TableFoot.defaultProps = {
   dataTest: 'dhis2-uicore-tablefoot'