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

package/build/es/data-table/table-elements/table-scroll-box.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';
@@ -21,7 +19,7 @@ export const TableScrollBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2859562182",
     dynamic: [colors.grey300, maxHeight, maxWidth]
-  }, ["div.__jsx-style-dynamic-selector{border:1px solid ".concat(colors.grey300, ";border-top:none;box-sizing:border-box;max-height:").concat(maxHeight, ";max-width:").concat(maxWidth, ";overflow:auto;}")]));
+  }, [`div.__jsx-style-dynamic-selector{border:1px solid ${colors.grey300};border-top:none;box-sizing:border-box;max-height:${maxHeight};max-width:${maxWidth};overflow:auto;}`]));
 });
 TableScrollBox.displayName = 'TableScrollBox';
 TableScrollBox.defaultProps = {

package/build/es/data-table/table-elements/table-toolbar.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, spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -21,7 +19,7 @@ export const TableToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "247244135",
     dynamic: [colors.grey300, spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid ".concat(colors.grey300, ";padding:").concat(spacers.dp12, ";}"), "div.top.__jsx-style-dynamic-selector{border-bottom:none;}", "div.bottom.__jsx-style-dynamic-selector{border-top:none;}"]));
+  }, [`div.__jsx-style-dynamic-selector{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid ${colors.grey300};padding:${spacers.dp12};}`, "div.top.__jsx-style-dynamic-selector{border-bottom:none;}", "div.bottom.__jsx-style-dynamic-selector{border-top:none;}"]));
 });
 TableToolbar.displayName = 'TableToolbar';
 TableToolbar.defaultProps = {

package/build/es/data-table/table-elements/table.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';
@@ -27,7 +25,7 @@ export const Table = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3140496910",
     dynamic: [layout, width, colors.grey300]
-  }, ["table.__jsx-style-dynamic-selector{table-layout:".concat(layout, ";border-collapse:separate;border-spacing:0;width:").concat(width, ";box-sizing:border-box;border:1px solid ").concat(colors.grey300, ";}"), "table.borderless.__jsx-style-dynamic-selector{border:none;}"]));
+  }, [`table.__jsx-style-dynamic-selector{table-layout:${layout};border-collapse:separate;border-spacing:0;width:${width};box-sizing:border-box;border:1px solid ${colors.grey300};}`, "table.borderless.__jsx-style-dynamic-selector{border:none;}"]));
 });
 Table.displayName = 'Table';
 Table.defaultProps = {
@@ -40,14 +38,12 @@ Table.propTypes = {
    * Removes border from the table
    */
   borderless: PropTypes.bool,
-
   /**
    * Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components
    */
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /**
    * Sets the `table-layout` property. Switching to `fixed` can prevent style
    * issues when dealing with a table with multiple frozen columns or when dealing
@@ -55,7 +51,6 @@ Table.propTypes = {
    */
   layout: PropTypes.oneOf(['auto', 'fixed', 'initial', 'inherit']),
   role: PropTypes.string,
-
   /**
    * Sets the `width` property. Providing an explicit width can prevent style
    * issues when dealing with horizontally scrolling tables with a fixed layout.

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

@@ -1,20 +1,36 @@
 /* eslint-disable react/prop-types */
+import { IconAttachment16 } from '@dhis2/ui-icons';
 import { Box } from '@dhis2-ui/box';
 import { Checkbox } from '@dhis2-ui/checkbox';
-import { IconAttachment16 } from '@dhis2/ui-icons';
 import React, { useState } from 'react';
 import { TableBody } from './table-body.js';
 import { TableDataCell } from './table-data-cell/table-data-cell.js';
 import { TableFoot } from './table-foot.js';
 import { TableHead } from './table-head.js';
-import { TableHeaderCellAction } from './table-header-cell-action.js';
 import { TableHeaderCell } from './table-header-cell/table-header-cell.js';
+import { TableHeaderCellAction } from './table-header-cell-action.js';
 import { TableRow } from './table-row.js';
 import { TableScrollBox } from './table-scroll-box.js';
 import { TableToolbar } from './table-toolbar.js';
 import { Table } from './table.js';
 const subtitle = 'Used to display information in a standard, effective way.';
-const description = "\nShould be used with multiple Table-related child components - see the table and examples below.\n\n```js\nimport {\n    Table,\n    TableToolbar,\n    TableHead,\n    TableBody,\n    TableFoot,\n    TableRow,\n    TableDataCell,\n    TableHeaderCell,\n    TableScrollBox,\n} from '@dhis2/ui'\n```\n";
+const description = `
+Should be used with multiple Table-related child components - see the table and examples below.
+
+\`\`\`js
+import {
+    Table,
+    TableToolbar,
+    TableHead,
+    TableBody,
+    TableFoot,
+    TableRow,
+    TableDataCell,
+    TableHeaderCell,
+    TableScrollBox,
+} from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Data Display/Table',
   component: Table,
@@ -66,7 +82,6 @@ export default {
     }
   }
 };
-
 const BasicTemplate = _ref => {
   let {
     borderedCells,
@@ -144,7 +159,6 @@ const BasicTemplate = _ref => {
     colSpan: "4"
   }, "Footer content"))));
 };
-
 export const Default = BasicTemplate.bind({});
 Default.args = {};
 export const BorderedCells = BasicTemplate.bind({});
@@ -163,7 +177,6 @@ export const DraggableRows = BasicTemplate.bind({});
 DraggableRows.args = {
   draggableRows: true
 };
-
 const IndividualCellTemplate = args => /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeaderCell, null, "Header"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Header"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Header"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Header"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, {
   tag: "th"
 }, "Active Cells"), /*#__PURE__*/React.createElement(TableDataCell, null, "Inactive cell"), /*#__PURE__*/React.createElement(TableDataCell, {
@@ -188,10 +201,8 @@ const IndividualCellTemplate = args => /*#__PURE__*/React.createElement(Table, a
 }, "Valid"), /*#__PURE__*/React.createElement(TableDataCell, {
   muted: true
 }, "Muted"))));
-
 export const CellStyling = IndividualCellTemplate.bind({});
 CellStyling.args = {};
-
 const IrregularHeadersTemplate = args => /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement("colgroup", null), /*#__PURE__*/React.createElement("colgroup", {
   span: "2"
 }), /*#__PURE__*/React.createElement("colgroup", {
@@ -246,32 +257,27 @@ const IrregularHeadersTemplate = args => /*#__PURE__*/React.createElement(Table,
 }, "12,000"), /*#__PURE__*/React.createElement(TableDataCell, {
   staticStyle: true
 }, "9,000"))));
-
 export const IrregularHeaders = IrregularHeadersTemplate.bind({});
 IrregularHeaders.args = {};
-
 const ToolbarsTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement("p", null, "Content")), /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeaderCell, null, "First name"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Last name"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Incident date"), /*#__PURE__*/React.createElement(TableHeaderCell, null, "Last updated"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Onyekachukwu"), /*#__PURE__*/React.createElement(TableDataCell, null, "Kariuki"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(TableDataCell, null, "05/25/1972")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Kwasi"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "08/11/2010"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/26/1991")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(TableDataCell, null, "Abiodun"), /*#__PURE__*/React.createElement(TableDataCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/06/2007")))), /*#__PURE__*/React.createElement(TableToolbar, {
   position: "bottom"
 }, /*#__PURE__*/React.createElement("p", null, "Content (bottom)")));
-
 export const Toolbars = ToolbarsTemplate.bind({});
 Toolbars.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
@@ -282,9 +288,7 @@ const SelectableRowsTemplate = args => {
       id_3: checked
     });
   };
-
   const allSelected = () => Object.values(selected).filter(value => value).length === 3;
-
   return /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeaderCell, {
     width: "48px"
   }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -316,12 +320,11 @@ const SelectableRowsTemplate = args => {
     onChange: toggleSelected
   })), /*#__PURE__*/React.createElement(TableDataCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(TableDataCell, null, "Abiodun"), /*#__PURE__*/React.createElement(TableDataCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/06/2007"))));
 };
-
 export const SelectableRows = SelectableRowsTemplate.bind({});
 SelectableRows.args = {};
-
 const FixedHeaderTemplate = _ref4 => {
-  let { ...args
+  let {
+    ...args
   } = _ref4;
   return /*#__PURE__*/React.createElement(TableScrollBox, {
     maxHeight: "350px"
@@ -351,12 +354,10 @@ const FixedHeaderTemplate = _ref4 => {
     top: "0"
   }, "Status"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Onyekachukwu"), /*#__PURE__*/React.createElement(TableDataCell, null, "Kariuki"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(TableDataCell, null, "05/25/1972"), /*#__PURE__*/React.createElement(TableDataCell, null, "66"), /*#__PURE__*/React.createElement(TableDataCell, null, "Jawi"), /*#__PURE__*/React.createElement(TableDataCell, null, "Sofie Hubert"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Kwasi"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "08/11/2010"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/26/1991"), /*#__PURE__*/React.createElement(TableDataCell, null, "38"), /*#__PURE__*/React.createElement(TableDataCell, null, "Mokassie MCHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Dashonte Clarke"), /*#__PURE__*/React.createElement(TableDataCell, null, "Complete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Siyabonga"), /*#__PURE__*/React.createElement(TableDataCell, null, "Abiodun"), /*#__PURE__*/React.createElement(TableDataCell, null, "07/21/1981"), /*#__PURE__*/React.createElement(TableDataCell, null, "02/06/2007"), /*#__PURE__*/React.createElement(TableDataCell, null, "98"), /*#__PURE__*/React.createElement(TableDataCell, null, "Bathurst MCHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Unassigned"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Chiyembekezo"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okeke"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/23/1982"), /*#__PURE__*/React.createElement(TableDataCell, null, "07/15/2003"), /*#__PURE__*/React.createElement(TableDataCell, null, "2"), /*#__PURE__*/React.createElement(TableDataCell, null, "Mayolla MCHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Wan Gengxin"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Mtendere"), /*#__PURE__*/React.createElement(TableDataCell, null, "Afolayan"), /*#__PURE__*/React.createElement(TableDataCell, null, "08/12/1994"), /*#__PURE__*/React.createElement(TableDataCell, null, "05/12/1972"), /*#__PURE__*/React.createElement(TableDataCell, null, "37"), /*#__PURE__*/React.createElement(TableDataCell, null, "Gbangadu MCHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Gvozden Boskovsky"), /*#__PURE__*/React.createElement(TableDataCell, null, "Complete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Inyene"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okonkwo"), /*#__PURE__*/React.createElement(TableDataCell, null, "04/01/1971"), /*#__PURE__*/React.createElement(TableDataCell, null, "03/16/2000"), /*#__PURE__*/React.createElement(TableDataCell, null, "70"), /*#__PURE__*/React.createElement(TableDataCell, null, "Kunike Barina"), /*#__PURE__*/React.createElement(TableDataCell, null, "Oscar de la Cavaller\xEDa"), /*#__PURE__*/React.createElement(TableDataCell, null, "Complete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Amaka"), /*#__PURE__*/React.createElement(TableDataCell, null, "Pretorius"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/25/1996"), /*#__PURE__*/React.createElement(TableDataCell, null, "09/15/1986"), /*#__PURE__*/React.createElement(TableDataCell, null, "32"), /*#__PURE__*/React.createElement(TableDataCell, null, "Bargbo"), /*#__PURE__*/React.createElement(TableDataCell, null, "Alberto Raya"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Meti"), /*#__PURE__*/React.createElement(TableDataCell, null, "Abiodun"), /*#__PURE__*/React.createElement(TableDataCell, null, "10/24/2010"), /*#__PURE__*/React.createElement(TableDataCell, null, "07/26/1989"), /*#__PURE__*/React.createElement(TableDataCell, null, "8"), /*#__PURE__*/React.createElement(TableDataCell, null, "Majihun MCHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Unassigned"), /*#__PURE__*/React.createElement(TableDataCell, null, "Complete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Eshe"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okeke"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/31/1995"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/31/1995"), /*#__PURE__*/React.createElement(TableDataCell, null, "63"), /*#__PURE__*/React.createElement(TableDataCell, null, "Mambiama CHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Shadrias Pearson"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, null, "Obi"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(TableDataCell, null, "28"), /*#__PURE__*/React.createElement(TableDataCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")))));
 };
-
 export const FixedHeader = FixedHeaderTemplate.bind({});
 FixedHeader.args = {
   borderless: true
 };
-
 const FixedFirstColumnTemplate = args => /*#__PURE__*/React.createElement(TableScrollBox, {
   maxWidth: "500px"
 }, /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeaderCell, {
@@ -394,13 +395,11 @@ const FixedFirstColumnTemplate = args => /*#__PURE__*/React.createElement(TableS
   fixed: true,
   left: "0"
 }, "Obi"), /*#__PURE__*/React.createElement(TableDataCell, null, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(TableDataCell, null, "28"), /*#__PURE__*/React.createElement(TableDataCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")))));
-
 export const FixedFirstColumn = FixedFirstColumnTemplate.bind({});
 FixedFirstColumn.args = {
   borderless: true,
   width: '1000px'
 };
-
 const FixedHeaderAndTwoColumnsTemplate = args => /*#__PURE__*/React.createElement(TableScrollBox, {
   maxHeight: "350px",
   maxWidth: "500px"
@@ -502,14 +501,12 @@ const FixedHeaderAndTwoColumnsTemplate = args => /*#__PURE__*/React.createElemen
   fixed: true,
   left: "120px"
 }, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(TableDataCell, null, "28"), /*#__PURE__*/React.createElement(TableDataCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete")))));
-
 export const FixedHeaderAndTwoColumns = FixedHeaderAndTwoColumnsTemplate.bind({});
 FixedHeaderAndTwoColumns.args = {
   layout: 'fixed',
   borderless: true,
   width: '1000px'
 };
-
 const ScrollingTableWithToolbarsTemplate = args => /*#__PURE__*/React.createElement(Box, {
   width: "500px"
 }, /*#__PURE__*/React.createElement(TableToolbar, null, /*#__PURE__*/React.createElement("p", null, "Content")), /*#__PURE__*/React.createElement(TableScrollBox, {
@@ -615,14 +612,12 @@ const ScrollingTableWithToolbarsTemplate = args => /*#__PURE__*/React.createElem
 }, "Okafor"), /*#__PURE__*/React.createElement(TableDataCell, null, "06/07/1990"), /*#__PURE__*/React.createElement(TableDataCell, null, "01/03/2006"), /*#__PURE__*/React.createElement(TableDataCell, null, "28"), /*#__PURE__*/React.createElement(TableDataCell, null, "Dalakuru CHP"), /*#__PURE__*/React.createElement(TableDataCell, null, "Anatoliy Shcherbatykh"), /*#__PURE__*/React.createElement(TableDataCell, null, "Incomplete"))))), /*#__PURE__*/React.createElement(TableToolbar, {
   position: "bottom"
 }, /*#__PURE__*/React.createElement("p", null, "Content (bottom)")));
-
 export const ScrollingTableWithToolbars = ScrollingTableWithToolbarsTemplate.bind({});
 ScrollingTableWithToolbars.args = {
   layout: 'fixed',
   borderless: true,
   width: '1000px'
 };
-
 const HeaderActionsTemplate = args => /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeaderCell, null, /*#__PURE__*/React.createElement("span", {
   style: {
     display: 'flex',
@@ -642,6 +637,5 @@ const HeaderActionsTemplate = args => /*#__PURE__*/React.createElement(Table, ar
 })))))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableDataCell, {
   colSpan: "3"
 }))));
-
 export const HeaderActions = HeaderActionsTemplate.bind({});
 HeaderActions.args = {};

package/build/es/stacked-table/content-with-title.js

@@ -14,7 +14,7 @@ export const ContentWithTitle = _ref => {
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "215664166",
     dynamic: [colors.grey700]
-  }, [".title.__jsx-style-dynamic-selector{display:block;white-space:normal;min-height:24px;font-size:13px;line-height:16px;padding:8px 0 4px;font-weight:normal;color:".concat(colors.grey700, ";}"), ".content.__jsx-style-dynamic-selector{display:block;padding:0 0 8px 0;font-size:14px;line-height:18px;}", ".content.__jsx-style-dynamic-selector:first-child{padding-top:8px;padding-bottom:8px;}"]));
+  }, [`.title.__jsx-style-dynamic-selector{display:block;white-space:normal;min-height:24px;font-size:13px;line-height:16px;padding:8px 0 4px;font-weight:normal;color:${colors.grey700};}`, ".content.__jsx-style-dynamic-selector{display:block;padding:0 0 8px 0;font-size:14px;line-height:18px;}", ".content.__jsx-style-dynamic-selector:first-child{padding-top:8px;padding-bottom:8px;}"]));
 };
 ContentWithTitle.propTypes = {
   children: PropTypes.node.isRequired,

package/build/es/stacked-table/extract-header-labels.js

@@ -1,60 +1,61 @@
 import React from 'react';
 import { StackedTableHead } from './stacked-table-head.js';
-
 const isChildTableHead = child => child.type === StackedTableHead;
-
 const extractChildrenProp = component => component.props.children;
+const extractRowsFromTableChildren = children => React.Children.toArray(children).filter(isChildTableHead)
 
-const extractRowsFromTableChildren = children => React.Children.toArray(children).filter(isChildTableHead) // extract table head children (rows)
-.map(extractChildrenProp) // when there are multiple header rows,
+// extract table head children (rows)
+.map(extractChildrenProp)
+
+// when there are multiple header rows,
 // children will come as arrays
-.reduce((flattened, row) => Array.isArray(row) ? [...flattened, ...row] : [...flattened, row], []) // extract table row children (cells),
+.reduce((flattened, row) => Array.isArray(row) ? [...flattened, ...row] : [...flattened, row], [])
+
+// extract table row children (cells),
 // will return an array with arrays of cells
 .map(extractChildrenProp);
-
-const calculateColumnCount = row => Array.isArray(row) ? row.reduce((total, col) => // make sure to take col span into account
+const calculateColumnCount = row => Array.isArray(row) ? row.reduce((total, col) =>
+// make sure to take col span into account
 col.props.colSpan ? total + parseInt(col.props.colSpan, 10) : total + 1, 0) : 1;
-
 const mapCellsToLabels = rowChildren => {
-  let labels = []; // in case there's only one cell, the children are not an array
+  let labels = [];
+  // in case there's only one cell, the children are not an array
+  const row = Array.isArray(rowChildren) ? rowChildren : [rowChildren];
 
-  const row = Array.isArray(rowChildren) ? rowChildren : [rowChildren]; // Using a for loop here to be able to increment "i"
+  // Using a for loop here to be able to increment "i"
   // when a cell has a colspan prop by the colspan number
-
   for (let i = 0, count = row.length; i < count; ++i) {
     const cell = row[i];
     const colSpan = cell.props.colSpan ? parseInt(cell.props.colSpan, 10) : 1;
-    const label = extractLabelFromCell(cell); // Add a label entry for each column
+    const label = extractLabelFromCell(cell);
 
+    // Add a label entry for each column
     labels = [...labels, ...Array(colSpan).fill(label)];
   }
-
   return labels;
 };
-
 const extractLabelFromCell = cell => !cell.props.hideResponsiveLabel ? cell.props.children : '';
-
-const combineRowLables = (columnCount, rowCount, headerLabels) => // create array with length of column count
+const combineRowLables = (columnCount, rowCount, headerLabels) =>
+// create array with length of column count
 Array(columnCount).fill('').reduce((labels, _, colIndex) => {
   // an array with all labels for a column
-  const colLabels = // create array with length of rows
-  Array(rowCount).fill('') // get label for current row & col
-  .map((__, rowIndex) => headerLabels[rowIndex][colIndex]) // remove empty ones
+  const colLabels =
+  // create array with length of rows
+  Array(rowCount).fill('')
+  // get label for current row & col
+  .map((__, rowIndex) => headerLabels[rowIndex][colIndex])
+  // remove empty ones
   .filter(val => val);
   return [...labels, colLabels.join(' / ')];
 }, []);
-
 export const extractHeaderLabels = children => {
   if (React.Children.count(children) === 0) {
     return [];
   }
-
   const rows = extractRowsFromTableChildren(children);
-
   if (!rows.length) {
     return [];
   }
-
   const rowCount = rows.length;
   const columnCount = calculateColumnCount(rows[0]);
   const headerLabels = rows.map(mapCellsToLabels);

package/build/es/stacked-table/stacked-table-cell-head.js

@@ -20,7 +20,7 @@ export const StackedTableCellHead = _ref => {
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "178822310",
     dynamic: [colors.grey300]
-  }, ["th.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(colors.grey300, ";padding:0 12px;}"), "div.__jsx-style-dynamic-selector{min-height:36px;}"]));
+  }, [`th.__jsx-style-dynamic-selector{border-bottom:1px solid ${colors.grey300};padding:0 12px;}`, "div.__jsx-style-dynamic-selector{min-height:36px;}"]));
 };
 StackedTableCellHead.propTypes = {
   children: PropTypes.string,

package/build/es/stacked-table/stacked-table-cell.js

@@ -27,7 +27,7 @@ export const StackedTableCell = _ref => {
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1923758240",
     dynamic: [colors.grey300]
-  }, ["td.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(colors.grey300, ";padding:0 12px;font-size:14px;width:100%;display:block;}"), "td.__jsx-style-dynamic-selector:dir(rtl){text-align:right;}", "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
+  }, [`td.__jsx-style-dynamic-selector{border-bottom:1px solid ${colors.grey300};padding:0 12px;font-size:14px;width:100%;display:block;}`, "td.__jsx-style-dynamic-selector:dir(rtl){text-align:right;}", "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
 };
 StackedTableCell.propTypes = {
   children: PropTypes.node,

package/build/es/stacked-table/stacked-table-row.js

@@ -22,7 +22,7 @@ export const StackedTableRow = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2003961452",
     dynamic: [colors.grey300, colors.white]
-  }, ["tr.__jsx-style-dynamic-selector{min-height:45px;display:block;border:1px solid ".concat(colors.grey300, ";}"), "tr.__jsx-style-dynamic-selector:nth-child(even){background:".concat(colors.white, ";}"), "thead>tr.__jsx-style-dynamic-selector,tbody>tr.__jsx-style-dynamic-selector{min-height:36px;}", "tr.__jsx-style-dynamic-selector+tr.__jsx-style-dynamic-selector{margin-top:32px;}"]));
+  }, [`tr.__jsx-style-dynamic-selector{min-height:45px;display:block;border:1px solid ${colors.grey300};}`, `tr.__jsx-style-dynamic-selector:nth-child(even){background:${colors.white};}`, "thead>tr.__jsx-style-dynamic-selector,tbody>tr.__jsx-style-dynamic-selector{min-height:36px;}", "tr.__jsx-style-dynamic-selector+tr.__jsx-style-dynamic-selector{margin-top:32px;}"]));
 };
 StackedTableRow.propTypes = {
   children: PropTypes.node,

package/build/es/stacked-table/stacked-table.js

@@ -25,7 +25,6 @@ StackedTable.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Labels for columns. Use an empty string for a column without a header. */
   headerLabels: PropTypes.arrayOf(PropTypes.string)
 };

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

@@ -8,10 +8,25 @@ import { StackedTableHead } from './stacked-table-head.js';
 import { StackedTableRowHead } from './stacked-table-row-head.js';
 import { StackedTableRow } from './stacked-table-row.js';
 import { StackedTable } from './stacked-table.js';
-const description = "\nExpresses tabular data such that each 'row' becomes a table section with the 'column' header in each cell. Multiple rows become multiple sections.\n\nCompose with StackedTable child components, as seen in the examples.\n\n```js\nimport {\n    StackedTable,\n    StackedTableBody,\n    StackedTableCell,\n    StackedTableCellHead,\n    StackedTableFoot,\n    StackedTableHead,\n    StackedTableRow,\n    StackedTableRowHead,\n} from 'dhis2/ui'\n```\n";
+const description = `
+Expresses tabular data such that each 'row' becomes a table section with the 'column' header in each cell. Multiple rows become multiple sections.
 
-const CustomCell = props => /*#__PURE__*/React.createElement("td", null, "Received props:", /*#__PURE__*/React.createElement("code", null, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(props, null, 2))));
+Compose with StackedTable child components, as seen in the examples.
 
+\`\`\`js
+import {
+    StackedTable,
+    StackedTableBody,
+    StackedTableCell,
+    StackedTableCellHead,
+    StackedTableFoot,
+    StackedTableHead,
+    StackedTableRow,
+    StackedTableRowHead,
+} from 'dhis2/ui'
+\`\`\`
+`;
+const CustomCell = props => /*#__PURE__*/React.createElement("td", null, "Received props:", /*#__PURE__*/React.createElement("code", null, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(props, null, 2))));
 export default {
   title: 'Stacked Table',
   component: StackedTable,

package/build/es/stacked-table/stacked-table.test.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); }
 /* eslint-disable react/prop-types */
 import { mount } from 'enzyme';
 import React from 'react';
@@ -10,7 +9,6 @@ import { StackedTableHead } from './stacked-table-head.js';
 import { StackedTableRowHead } from './stacked-table-row-head.js';
 import { StackedTableRow } from './stacked-table-row.js';
 import { StackedTable } from './stacked-table.js';
-
 const Table = _ref => {
   let {
     headerLabels,
@@ -34,7 +32,6 @@ const Table = _ref => {
     }), label);
   }))));
 };
-
 describe('StackedTable', () => {
   const headerLabels = [{
     label: 'First name',
@@ -106,25 +103,27 @@ describe('StackedTable', () => {
     const indexWithColspan = 1;
     const colSpan = 3;
     const originalHeaderLabel = headerLabels[indexWithColspan];
-    const headerLabelsWithColspan = [...headerLabels.slice(0, indexWithColspan), { ...originalHeaderLabel,
-      colSpan: "".concat(colSpan)
+    const headerLabelsWithColspan = [...headerLabels.slice(0, indexWithColspan), {
+      ...originalHeaderLabel,
+      colSpan: `${colSpan}`
     }, ...headerLabels.slice(indexWithColspan + colSpan)];
     const table = mount( /*#__PURE__*/React.createElement(Table, {
       headerLabels: headerLabelsWithColspan,
       bodyLabels: bodyLabels
     }));
     const cells = table.find('td');
-    const label = headerLabelsWithColspan[indexWithColspan].label; // all body cells that are group under the single header should share the same label
+    const label = headerLabelsWithColspan[indexWithColspan].label;
 
+    // all body cells that are group under the single header should share the same label
     for (let i = 0; i < colSpan; ++i) {
       const index = indexWithColspan + i;
       const cell = cells.at(index);
       expect(cell).toHaveLength(1);
       const title = cell.find('.title');
       expect(title.text()).toBe(label);
-    } // the next body cell should have the label of the next header cell
-
+    }
 
+    // the next body cell should have the label of the next header cell
     const titleAfterColspan = headerLabelsWithColspan[indexWithColspan + 1].label;
     const cellAfterColspan = cells.at(indexWithColspan + colSpan);
     expect(cellAfterColspan).toHaveLength(1);

package/build/es/stacked-table/table.js

@@ -14,7 +14,7 @@ export const Table = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4278890465",
     dynamic: [colors.white, colors.grey900]
-  }, ["table.__jsx-style-dynamic-selector{display:block;border:0;background-color:".concat(colors.white, ";min-width:100%;text-align:left;border-collapse:collapse;vertical-align:top;color:").concat(colors.grey900, ";}")]));
+  }, [`table.__jsx-style-dynamic-selector{display:block;border:0;background-color:${colors.white};min-width:100%;text-align:left;border-collapse:collapse;vertical-align:top;color:${colors.grey900};}`]));
 };
 Table.propTypes = {
   children: PropTypes.node.isRequired,

package/build/es/table/table-cell-head.js

@@ -19,7 +19,7 @@ export const TableCellHead = _ref => {
     rowSpan: rowSpan,
     "data-test": dataTest,
     role: role,
-    className: "jsx-".concat(tableCellHeadStyles.__hash) + " " + (cx({
+    className: `jsx-${tableCellHeadStyles.__hash}` + " " + (cx({
       dense
     }, className) || "")
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -34,7 +34,6 @@ TableCellHead.propTypes = {
   className: PropTypes.string,
   colSpan: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Uses less padding and height for information-dense layouts */
   dense: PropTypes.bool,
   role: PropTypes.string,

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

@@ -19,7 +19,7 @@ export const TableCell = _ref => {
     rowSpan: rowSpan,
     "data-test": dataTest,
     role: role,
-    className: "jsx-".concat(tableCellStyles.__hash) + " " + (cx({
+    className: `jsx-${tableCellStyles.__hash}` + " " + (cx({
       dense
     }, className) || "")
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -34,7 +34,6 @@ TableCell.propTypes = {
   className: PropTypes.string,
   colSpan: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Usees less padding and height for information-dense layouts */
   dense: PropTypes.bool,
   role: PropTypes.string,

package/build/es/table/table-row-head.js

@@ -25,7 +25,6 @@ TableRowHead.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,
   role: PropTypes.string,
-
   /** Disables the default row striping for this row */
   suppressZebraStriping: PropTypes.bool
 };

package/build/es/table/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, { useContext } from 'react';
@@ -25,7 +23,7 @@ export const TableRow = _ref => {
     "data-test": dataTest,
     role: role
   }, rest, {
-    className: "jsx-".concat(tableRowStyles.__hash) + " " + (rest && rest.className != null && rest.className || cx(className, {
+    className: `jsx-${tableRowStyles.__hash}` + " " + (rest && rest.className != null && rest.className || cx(className, {
       zebraStriping
     }) || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -41,7 +39,6 @@ TableRow.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,
   role: PropTypes.string,
-
   /** Disables the default row striping for this row */
   suppressZebraStriping: PropTypes.bool
 };

package/build/es/table/table.js

@@ -19,7 +19,7 @@ export const Table = _ref => {
   }, /*#__PURE__*/React.createElement("table", {
     "data-test": dataTest,
     role: role,
-    className: "jsx-".concat(tableStyles.__hash) + " " + (className || "")
+    className: `jsx-${tableStyles.__hash}` + " " + (className || "")
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: tableStyles.__hash
   }, tableStyles)));
@@ -33,7 +33,6 @@ Table.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,
   role: PropTypes.string,
-
   /** Remove the default striping on alternating rows */
   suppressZebraStriping: PropTypes.bool
 };