@dhis2-ui/table 8.1.11 → 8.2.2

package/build/cjs/data-table/__tests__/data-table-row/expanded-row.test.js

@@ -28,14 +28,14 @@ describe('<ExpandedRow>', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_expandedRow.ExpandedRow, {
       className: className
     }));
-    expect(wrapper.find(_index.TableRow).prop('className')).toBe(`${className}-expandedrow`);
+    expect(wrapper.find(_index.TableRow).prop('className')).toBe("".concat(className, "-expandedrow"));
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_expandedRow.ExpandedRow, {
       dataTest: dataTest
     }));
-    expect(wrapper.find(_index.TableRow).prop('dataTest')).toBe(`${dataTest}-expandedrow`);
+    expect(wrapper.find(_index.TableRow).prop('dataTest')).toBe("".concat(dataTest, "-expandedrow"));
   });
   it('accepts a selected prop', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_expandedRow.ExpandedRow, {

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

@@ -19,28 +19,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DataTableCell = /*#__PURE__*/(0, _react.forwardRef)(({
-  active,
-  align,
-  bordered,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  error,
-  fixed,
-  large,
-  left,
-  muted,
-  rowSpan,
-  role,
-  scope,
-  staticStyle,
-  tag,
-  valid,
-  width,
-  onClick
-}, ref) => {
+const DataTableCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    active,
+    align,
+    bordered,
+    children,
+    className,
+    colSpan,
+    dataTest,
+    error,
+    fixed,
+    large,
+    left,
+    muted,
+    rowSpan,
+    role,
+    scope,
+    staticStyle,
+    tag,
+    valid,
+    width,
+    onClick
+  } = _ref;
   const TableCell = !tag && fixed || tag && tag === 'th' ? _index.TableHeaderCell : _index.TableDataCell;
   return /*#__PURE__*/_react.default.createElement(TableCell, {
     active: active,

package/build/cjs/data-table/data-table-column-header/data-table-column-header.js

@@ -34,63 +34,66 @@ const flexboxAlignLookup = {
   center: 'center',
   right: 'flex-end'
 };
-const DataTableColumnHeader = /*#__PURE__*/(0, _react.forwardRef)(({
-  align,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  filter,
-  fixed,
-  large,
-  left,
-  name,
-  role,
-  rowSpan,
-  scope,
-  showFilter,
-  sortDirection,
-  sortIconTitle,
-  top,
-  width,
-  onFilterIconClick,
-  onSortIconClick
-}, ref) => /*#__PURE__*/_react.default.createElement(_index.TableHeaderCell, {
-  align: align,
-  className: (0, _classnames.default)(className, 'DataTableColumnHeader', _dataTableColumnHeaderStyles.resolvedTableHeaderCss.className),
-  colSpan: colSpan,
-  dataTest: dataTest,
-  fixed: fixed,
-  large: large,
-  left: left,
-  ref: ref,
-  rowSpan: rowSpan,
-  role: role,
-  scope: scope,
-  top: top,
-  width: width
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${_dataTableColumnHeaderStyles.styles.__hash}` + " " + "container"
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${_dataTableColumnHeaderStyles.styles.__hash}` + " " + ((0, _classnames.default)('top', {
-    large
-  }) || "")
-}, /*#__PURE__*/_react.default.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${_dataTableColumnHeaderStyles.styles.__hash}` + " " + "content"
-}, children), sortDirection && /*#__PURE__*/_react.default.createElement(_sorter.Sorter, {
-  name: name,
-  sortDirection: sortDirection,
-  onClick: onSortIconClick,
-  title: sortIconTitle
-}), filter && /*#__PURE__*/_react.default.createElement(_filterHandle.FilterHandle, {
-  name: name,
-  active: showFilter,
-  onClick: onFilterIconClick
-})), showFilter && filter), _dataTableColumnHeaderStyles.resolvedTableHeaderCss.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: _dataTableColumnHeaderStyles.styles.__hash
-}, _dataTableColumnHeaderStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3463223249"
-}, [`.label.jsx-3463223249{-webkit-box-pack:${flexboxAlignLookup[align]};-webkit-justify-content:${flexboxAlignLookup[align]};-ms-flex-pack:${flexboxAlignLookup[align]};justify-content:${flexboxAlignLookup[align]};}`])));
+const DataTableColumnHeader = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    align,
+    children,
+    className,
+    colSpan,
+    dataTest,
+    filter,
+    fixed,
+    large,
+    left,
+    name,
+    role,
+    rowSpan,
+    scope,
+    showFilter,
+    sortDirection,
+    sortIconTitle,
+    top,
+    width,
+    onFilterIconClick,
+    onSortIconClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_index.TableHeaderCell, {
+    align: align,
+    className: (0, _classnames.default)(className, 'DataTableColumnHeader', _dataTableColumnHeaderStyles.resolvedTableHeaderCss.className),
+    colSpan: colSpan,
+    dataTest: dataTest,
+    fixed: fixed,
+    large: large,
+    left: left,
+    ref: ref,
+    rowSpan: rowSpan,
+    role: role,
+    scope: scope,
+    top: top,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(_dataTableColumnHeaderStyles.styles.__hash) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(_dataTableColumnHeaderStyles.styles.__hash) + " " + ((0, _classnames.default)('top', {
+      large
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(_dataTableColumnHeaderStyles.styles.__hash) + " " + "content"
+  }, children), sortDirection && /*#__PURE__*/_react.default.createElement(_sorter.Sorter, {
+    name: name,
+    sortDirection: sortDirection,
+    onClick: onSortIconClick,
+    title: sortIconTitle
+  }), filter && /*#__PURE__*/_react.default.createElement(_filterHandle.FilterHandle, {
+    name: name,
+    active: showFilter,
+    onClick: onFilterIconClick
+  })), showFilter && filter), _dataTableColumnHeaderStyles.resolvedTableHeaderCss.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _dataTableColumnHeaderStyles.styles.__hash
+  }, _dataTableColumnHeaderStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3463223249"
+  }, [".label.jsx-3463223249{-webkit-box-pack:".concat(flexboxAlignLookup[align], ";-webkit-justify-content:").concat(flexboxAlignLookup[align], ";-ms-flex-pack:").concat(flexboxAlignLookup[align], ";justify-content:").concat(flexboxAlignLookup[align], ";}")]));
+});
 exports.DataTableColumnHeader = DataTableColumnHeader;
 DataTableColumnHeader.displayName = 'DataTableColumnHeader';
 DataTableColumnHeader.defaultProps = {

package/build/cjs/data-table/data-table-column-header/data-table-column-header.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolvedTableHeaderCss = exports.styles = void 0;
+exports.styles = exports.resolvedTableHeaderCss = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 

package/build/cjs/data-table/data-table-column-header/filter-handle.js

@@ -19,11 +19,12 @@ var _index2 = require("../table-elements/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FilterHandle = ({
-  active,
-  name,
-  onClick
-}) => {
+const FilterHandle = _ref => {
+  let {
+    active,
+    name,
+    onClick
+  } = _ref;
   const filterIconColor = active ? _uiConstants.colors.blue700 : _uiConstants.colors.grey600;
   const clickHandler = onClick ? event => {
     onClick({

package/build/cjs/data-table/data-table-column-header/sorter.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Sorter = exports.getNextSortDirection = exports.SORT_DIRECTIONS = exports.DEFAULT = exports.DESC = exports.ASC = void 0;
+exports.getNextSortDirection = exports.Sorter = exports.SORT_DIRECTIONS = exports.DESC = exports.DEFAULT = exports.ASC = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -38,12 +38,13 @@ const getNextSortDirection = currentDirection => {
 
 exports.getNextSortDirection = getNextSortDirection;
 
-const Sorter = ({
-  name,
-  sortDirection,
-  title,
-  onClick
-}) => {
+const Sorter = _ref => {
+  let {
+    name,
+    sortDirection,
+    title,
+    onClick
+  } = _ref;
   const nextSortDirection = getNextSortDirection(sortDirection);
   const clickHandler = onClick ? event => {
     onClick({
@@ -73,7 +74,7 @@ const Sorter = ({
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "884818973",
     dynamic: [_uiConstants.colors.grey500, _uiConstants.colors.blue700]
-  }, [`svg.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey500};}`, `svg.asc.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.desc.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.blue700};}`]));
+  }, ["svg.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), "svg.asc.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.desc.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue700, ";}")]));
 };
 
 exports.Sorter = Sorter;

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

@@ -29,17 +29,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DataTableRow = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  expandableContent,
-  expanded,
-  selected,
-  draggable,
-  role,
-  onExpandToggle
-}, ref) => {
+const DataTableRow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    expandableContent,
+    expanded,
+    selected,
+    draggable,
+    role,
+    onExpandToggle
+  } = _ref;
   const [isHoveringExpandedContent, setIsHoveringExpandedContent] = (0, _react.useState)(false);
   const classes = (0, _classnames.default)(className, _dataTableRowStyles.default.className, {
     expanded,

package/build/cjs/data-table/data-table-row/data-table-row.styles.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1795567040"
-  }, [`tr.isHoveringExpandedContent.jsx-1795567040>td{background-color:${_uiConstants.colors.grey100};}`, `tr.isHoveringExpandedContent.jsx-1795567040>th{background-color:${_uiConstants.colors.grey300};}`, "tr.selected.isHoveringExpandedContent.jsx-1795567040>td{background-color:#cdeae8;}", "tr.expanded.jsx-1795567040>td{border-bottom-color:transparent;}", `tr.expanded.jsx-1795567040>td.bordered{border-bottom-color:${_uiConstants.colors.grey300};}`]),
+  }, ["tr.isHoveringExpandedContent.jsx-1795567040>td{background-color:".concat(_uiConstants.colors.grey100, ";}"), "tr.isHoveringExpandedContent.jsx-1795567040>th{background-color:".concat(_uiConstants.colors.grey300, ";}"), "tr.selected.isHoveringExpandedContent.jsx-1795567040>td{background-color:#cdeae8;}", "tr.expanded.jsx-1795567040>td{border-bottom-color:transparent;}", "tr.expanded.jsx-1795567040>td.bordered{border-bottom-color:".concat(_uiConstants.colors.grey300, ";}")]),
   className: "jsx-1795567040"
 };
 exports.default = _default;

package/build/cjs/data-table/data-table-row/expand-handle-cell.js

@@ -26,18 +26,21 @@ const pointer = {
   className: "jsx-927553068"
 };
 
-const ExpandHandleCell = ({
-  expanded,
-  onClick
-}) => /*#__PURE__*/_react.default.createElement(_index.TableDataCell, {
-  className: (0, _classnames.default)(pointer.className, {
-    expanded
-  }),
-  onClick: () => onClick({
-    expanded: !expanded
-  }),
-  width: "48px"
-}, expanded ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronUp24, null) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDown24, null), pointer.styles);
+const ExpandHandleCell = _ref => {
+  let {
+    expanded,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_index.TableDataCell, {
+    className: (0, _classnames.default)(pointer.className, {
+      expanded
+    }),
+    onClick: () => onClick({
+      expanded: !expanded
+    }),
+    width: "48px"
+  }, expanded ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronUp24, null) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDown24, null), pointer.styles);
+};
 
 exports.ExpandHandleCell = ExpandHandleCell;
 ExpandHandleCell.propTypes = {

package/build/cjs/data-table/data-table-row/expanded-row.js

@@ -25,29 +25,32 @@ const {
 } = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "626485122"
-  }, [`tr.expanded:hover+tr>td.jsx-626485122{background-color:${_uiConstants.colors.grey100};}`, `tr.expanded:active+tr>td.jsx-626485122{background-color:${_uiConstants.colors.grey200};}`, "tr.selected.expanded:hover+tr.jsx-626485122>td.jsx-626485122{background-color:#cdeae8;}"]),
+  }, ["tr.expanded:hover+tr>td.jsx-626485122{background-color:".concat(_uiConstants.colors.grey100, ";}"), "tr.expanded:active+tr>td.jsx-626485122{background-color:".concat(_uiConstants.colors.grey200, ";}"), "tr.selected.expanded:hover+tr.jsx-626485122>td.jsx-626485122{background-color:#cdeae8;}"]),
   className: "jsx-626485122"
 };
 
-const ExpandedRow = ({
-  children,
-  className,
-  colSpan,
-  dataTest,
-  selected,
-  setIsHoveringExpandedContent
-}) => /*#__PURE__*/_react.default.createElement(_index.TableRow, {
-  onMouseOver: () => setIsHoveringExpandedContent(true),
-  onMouseOut: () => setIsHoveringExpandedContent(false),
-  className: (0, _classnames.default)({
-    [`${className}-expandedrow`]: !!className
-  }),
-  selected: selected,
-  dataTest: dataTest && `${dataTest}-expandedrow`
-}, /*#__PURE__*/_react.default.createElement(_index.TableDataCell, {
-  className: cellClassName,
-  colSpan: colSpan
-}, children, styles));
+const ExpandedRow = _ref => {
+  let {
+    children,
+    className,
+    colSpan,
+    dataTest,
+    selected,
+    setIsHoveringExpandedContent
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_index.TableRow, {
+    onMouseOver: () => setIsHoveringExpandedContent(true),
+    onMouseOut: () => setIsHoveringExpandedContent(false),
+    className: (0, _classnames.default)({
+      ["".concat(className, "-expandedrow")]: !!className
+    }),
+    selected: selected,
+    dataTest: dataTest && "".concat(dataTest, "-expandedrow")
+  }, /*#__PURE__*/_react.default.createElement(_index.TableDataCell, {
+    className: cellClassName,
+    colSpan: colSpan
+  }, children, styles));
+};
 
 exports.ExpandedRow = ExpandedRow;
 ExpandedRow.propTypes = {

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

@@ -19,16 +19,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const DataTable = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  layout,
-  role,
-  scrollHeight,
-  scrollWidth,
-  width
-}, ref) => {
+const DataTable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    layout,
+    role,
+    scrollHeight,
+    scrollWidth,
+    width
+  } = _ref;
   const scrollable = !!(scrollHeight || scrollWidth);
 
   const table = /*#__PURE__*/_react.default.createElement(_index.Table, {
@@ -43,7 +44,7 @@ const DataTable = /*#__PURE__*/(0, _react.forwardRef)(({
 
   return !scrollable ? table : /*#__PURE__*/_react.default.createElement(_index.TableScrollBox, {
     className: (0, _classnames.default)(className, 'tablescrollbox'),
-    dataTest: `${dataTest}-scrollbox`,
+    dataTest: "".concat(dataTest, "-scrollbox"),
     maxHeight: scrollHeight,
     maxWidth: scrollWidth
   }, table);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FixedHeaderAndColumns = exports.default = void 0;
+exports.default = exports.FixedHeaderAndColumns = void 0;
 
 var _react = _interopRequireDefault(require("react"));