@dhis2-ui/table 8.1.11 → 8.2.2

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LongCellContentLargeCells = exports.LongCellContent = exports.InlineFiltering = exports.ColumnHeaderSorting = exports.ScrollingDataTableWithToolbars = exports.FixedHeaderAndTwoColumns = exports.FixedFirstColumn = exports.FixedHeader = exports.SelectableRows = exports.ExpandableContent = exports.Toolbars = exports.CellStyling = exports.DraggableRows = exports.LargeCells = exports.BorderedCells = exports.Loading = exports.Default = exports.default = void 0;
+exports.default = exports.Toolbars = exports.SelectableRows = exports.ScrollingDataTableWithToolbars = exports.LongCellContentLargeCells = exports.LongCellContent = exports.Loading = exports.LargeCells = exports.InlineFiltering = exports.FixedHeaderAndTwoColumns = exports.FixedHeader = exports.FixedFirstColumn = exports.ExpandableContent = exports.DraggableRows = exports.Default = exports.ColumnHeaderSorting = exports.CellStyling = exports.BorderedCells = void 0;
 
 var _box = require("@dhis2-ui/box");
 
@@ -36,24 +36,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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); }
 
 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";
 var _default = {
-  title: 'Data Display/DataTable',
+  title: 'DataTable',
   component: _dataTable.DataTable,
   // Add subcomponents to the args datatable
   subcomponents: {
@@ -100,67 +85,70 @@ var _default = {
 };
 exports.default = _default;
 
-const BasicTemplate = ({
-  bordered,
-  large,
-  draggable,
-  bodyProps,
-  ...args
-}) => /*#__PURE__*/_react.default.createElement(_dataTable.DataTable, args, /*#__PURE__*/_react.default.createElement(_dataTableHead.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, draggable && /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large
-}), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large
-}, "First name"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large
-}, "Last name"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large
-}, "Incident date"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large
-}, "Last updated"))), /*#__PURE__*/_react.default.createElement(_dataTableBody.DataTableBody, bodyProps, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Onyekachukwu"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Kariuki"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/06/2007"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "05/25/1972")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Kwasi"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Okafor"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "08/11/2010"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/26/1991")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
-  draggable: draggable
-}, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Siyabonga"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "Abiodun"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "07/21/1981"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  large: large,
-  bordered: bordered
-}, "02/06/2007"))), /*#__PURE__*/_react.default.createElement(_dataTableFoot.DataTableFoot, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
-  colSpan: draggable ? '5' : '4'
-}, "Footer content"))));
+const BasicTemplate = _ref => {
+  let {
+    bordered,
+    large,
+    draggable,
+    bodyProps,
+    ...args
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_dataTable.DataTable, args, /*#__PURE__*/_react.default.createElement(_dataTableHead.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, draggable && /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large
+  }), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large
+  }, "First name"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large
+  }, "Last name"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large
+  }, "Incident date"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large
+  }, "Last updated"))), /*#__PURE__*/_react.default.createElement(_dataTableBody.DataTableBody, bodyProps, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Onyekachukwu"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Kariuki"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/06/2007"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "05/25/1972")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Kwasi"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Okafor"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "08/11/2010"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/26/1991")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
+    draggable: draggable
+  }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Siyabonga"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "Abiodun"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "07/21/1981"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    large: large,
+    bordered: bordered
+  }, "02/06/2007"))), /*#__PURE__*/_react.default.createElement(_dataTableFoot.DataTableFoot, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
+    colSpan: draggable ? '5' : '4'
+  }, "Footer content"))));
+};
 
 const Default = BasicTemplate.bind({});
 exports.Default = Default;
@@ -267,18 +255,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,
@@ -644,10 +634,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
@@ -677,12 +668,15 @@ const ColumnHeaderSortingTemplate = args => {
     }
 
     return 0;
-  }).map(({
-    firstName,
-    lastName
-  }) => /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
-    key: firstName + lastName
-  }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, firstName), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, lastName)))));
+  }).map(_ref5 => {
+    let {
+      firstName,
+      lastName
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
+      key: firstName + lastName
+    }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, firstName), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, lastName));
+  })));
 };
 
 const ColumnHeaderSorting = ColumnHeaderSortingTemplate.bind({});
@@ -708,19 +702,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
@@ -753,12 +749,15 @@ const InlineFilteringTemplate = args => {
     }
 
     return row[column].toUpperCase().includes(value.toUpperCase());
-  }).map(({
-    firstName,
-    lastName
-  }) => /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
-    key: firstName + lastName
-  }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, firstName), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, lastName)))));
+  }).map(_ref8 => {
+    let {
+      firstName,
+      lastName
+    } = _ref8;
+    return /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
+      key: firstName + lastName
+    }, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, firstName), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, lastName));
+  })));
 };
 
 const InlineFiltering = InlineFilteringTemplate.bind({});
@@ -767,43 +766,46 @@ InlineFiltering.args = {
   layout: 'fixed'
 };
 
-const LongCellContentTemplate = ({
-  large
-}) => /*#__PURE__*/_react.default.createElement(_dataTable.DataTable, null, /*#__PURE__*/_react.default.createElement(_dataTableHead.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.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.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large,
-  onFilterIconClick: () => {},
-  name: "firstName",
-  showFilter: true,
-  filter: /*#__PURE__*/_react.default.createElement(_input.Input, {
-    dense: true,
-    onChange: () => {},
+const LongCellContentTemplate = _ref9 => {
+  let {
+    large
+  } = _ref9;
+  return /*#__PURE__*/_react.default.createElement(_dataTable.DataTable, null, /*#__PURE__*/_react.default.createElement(_dataTableHead.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.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.default.createElement(_dataTableColumnHeader.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.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
-  large: large,
-  onSortIconClick: () => {},
-  sortDirection: "asc",
-  name: "third"
-}, "Third (short)"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.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.default.createElement(_dataTableBody.DataTableBody, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableCell.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.default.createElement(_dataTableCell.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.default.createElement(_dataTableCell.DataTableCell, {
-  large: large
-}, "Third (short)"), /*#__PURE__*/_react.default.createElement(_dataTableCell.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.default.createElement(_input.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.default.createElement(_dataTableColumnHeader.DataTableColumnHeader, {
+    large: large,
+    onSortIconClick: () => {},
+    sortDirection: "asc",
+    name: "third"
+  }, "Third (short)"), /*#__PURE__*/_react.default.createElement(_dataTableColumnHeader.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.default.createElement(_dataTableBody.DataTableBody, null, /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableCell.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.default.createElement(_dataTableCell.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.default.createElement(_dataTableCell.DataTableCell, {
+    large: large
+  }, "Third (short)"), /*#__PURE__*/_react.default.createElement(_dataTableCell.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?"))));
+};
 
 const LongCellContent = LongCellContentTemplate.bind({});
 exports.LongCellContent = LongCellContent;

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

@@ -33,7 +33,7 @@ describe('<TableDataCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.TableDataCell, {
@@ -79,7 +79,7 @@ describe('<TableDataCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.TableDataCell, {
       left: left
     }));
-    expect(wrapper.html()).toContain(`left: ${left};`);
+    expect(wrapper.html()).toContain("left: ".concat(left, ";"));
   });
   it('accepts a muted prop', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.TableDataCell, {
@@ -125,7 +125,7 @@ describe('<TableDataCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.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/cjs/data-table/table-elements/__tests__/table-header-cell.test.js

@@ -33,7 +33,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.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 = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
@@ -86,7 +86,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
       left: left
     }));
-    expect(wrapper.html()).toContain(`left: ${left};`);
+    expect(wrapper.html()).toContain("left: ".concat(left, ";"));
   });
   it('accepts an muted prop', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
@@ -120,7 +120,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
       top: top
     }));
-    expect(wrapper.html()).toContain(`top: ${top};`);
+    expect(wrapper.html()).toContain("top: ".concat(top, ";"));
   });
   it('accepts a valid prop', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
@@ -133,7 +133,7 @@ describe('<TableHeaderCell>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.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/cjs/data-table/table-elements/__tests__/table.test.js

@@ -47,7 +47,7 @@ describe('<Table>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_table.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';
@@ -61,6 +61,6 @@ describe('<Table>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_table.Table, {
       width: width
     }));
-    expect(wrapper.html()).toContain(`width: ${width};`);
+    expect(wrapper.html()).toContain("width: ".concat(width, ";"));
   });
 });

package/build/cjs/data-table/table-elements/index.js

@@ -21,28 +21,28 @@ Object.defineProperty(exports, "TableDataCell", {
     return _tableDataCell.TableDataCell;
   }
 });
-Object.defineProperty(exports, "TableHeaderCell", {
+Object.defineProperty(exports, "TableFoot", {
   enumerable: true,
   get: function () {
-    return _tableHeaderCell.TableHeaderCell;
+    return _tableFoot.TableFoot;
   }
 });
-Object.defineProperty(exports, "TableHeaderCellAction", {
+Object.defineProperty(exports, "TableHead", {
   enumerable: true,
   get: function () {
-    return _tableHeaderCellAction.TableHeaderCellAction;
+    return _tableHead.TableHead;
   }
 });
-Object.defineProperty(exports, "TableFoot", {
+Object.defineProperty(exports, "TableHeaderCell", {
   enumerable: true,
   get: function () {
-    return _tableFoot.TableFoot;
+    return _tableHeaderCell.TableHeaderCell;
   }
 });
-Object.defineProperty(exports, "TableHead", {
+Object.defineProperty(exports, "TableHeaderCellAction", {
   enumerable: true,
   get: function () {
-    return _tableHead.TableHead;
+    return _tableHeaderCellAction.TableHeaderCellAction;
   }
 });
 Object.defineProperty(exports, "TableRow", {

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

@@ -23,24 +23,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const TableBody = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  role,
-  loading,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("tbody", _extends({}, props, {
-  "data-test": dataTest,
-  ref: ref,
-  role: role,
-  className: _style.default.dynamic([["2117748229", [_uiConstants.colors.blue600]]]) + " " + ((0, _classnames.default)(className, {
-    loading
-  }) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2117748229",
-  dynamic: [_uiConstants.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:${_uiConstants.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);}}"])));
+const TableBody = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    role,
+    loading,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("tbody", _extends({}, props, {
+    "data-test": dataTest,
+    ref: ref,
+    role: role,
+    className: _style.default.dynamic([["2117748229", [_uiConstants.colors.blue600]]]) + " " + ((0, _classnames.default)(className, {
+      loading
+    }) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2117748229",
+    dynamic: [_uiConstants.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(_uiConstants.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);}}"]));
+});
 exports.TableBody = TableBody;
 TableBody.displayName = 'TableBody';
 TableBody.defaultProps = {

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

@@ -25,49 +25,52 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)(({
-  active,
-  align,
-  bordered,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  error,
-  large,
-  left,
-  muted,
-  role,
-  rowSpan,
-  scope,
-  staticStyle,
-  valid,
-  width,
-  onClick,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("td", _extends({}, props, {
-  ref: ref,
-  colSpan: colSpan,
-  rowSpan: rowSpan,
-  onClick: onClick,
-  "data-test": dataTest,
-  role: role,
-  scope: scope,
-  className: `jsx-${_tableDataCellStyles.default.__hash}` + " " + _style.default.dynamic([["1956632613", [left, align, width]]]) + " " + ((0, _classnames.default)(className, {
+const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
     active,
+    align,
     bordered,
+    children,
+    className,
+    colSpan,
+    dataTest,
     error,
     large,
+    left,
     muted,
+    role,
+    rowSpan,
+    scope,
     staticStyle,
-    valid
-  }) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: _tableDataCellStyles.default.__hash
-}, _tableDataCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
-  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.default.createElement("td", _extends({}, props, {
+    ref: ref,
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    onClick: onClick,
+    "data-test": dataTest,
+    role: role,
+    scope: scope,
+    className: "jsx-".concat(_tableDataCellStyles.default.__hash) + " " + _style.default.dynamic([["1956632613", [left, align, width]]]) + " " + ((0, _classnames.default)(className, {
+      active,
+      bordered,
+      error,
+      large,
+      muted,
+      staticStyle,
+      valid
+    }) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _tableDataCellStyles.default.__hash
+  }, _tableDataCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1956632613",
+    dynamic: [left, align, width]
+  }, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
+});
 exports.TableDataCell = TableDataCell;
 TableDataCell.displayName = 'TableDataCell';
 TableDataCell.defaultProps = {