@dhis2-ui/table 8.2.0 → 8.2.3

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

@@ -13,18 +13,21 @@ var _tableRow = require("./table-row.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const TableRowHead = ({
-  role,
-  children,
-  className,
-  dataTest,
-  suppressZebraStriping
-}) => /*#__PURE__*/_react.default.createElement(_tableRow.TableRow, {
-  className: className,
-  dataTest: dataTest,
-  suppressZebraStriping: suppressZebraStriping,
-  role: role
-}, children);
+const TableRowHead = _ref => {
+  let {
+    role,
+    children,
+    className,
+    dataTest,
+    suppressZebraStriping
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_tableRow.TableRow, {
+    className: className,
+    dataTest: dataTest,
+    suppressZebraStriping: suppressZebraStriping,
+    role: role
+  }, children);
+};
 
 exports.TableRowHead = TableRowHead;
 TableRowHead.defaultProps = {

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

@@ -24,13 +24,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const tableRowStyles = [".zebraStriping.jsx-3124144591:nth-child(even){background:#fbfcfd;}"];
 tableRowStyles.__hash = "3124144591";
 
-const TableRow = ({
-  role,
-  children,
-  className,
-  dataTest,
-  suppressZebraStriping
-}) => {
+const TableRow = _ref => {
+  let {
+    role,
+    children,
+    className,
+    dataTest,
+    suppressZebraStriping
+  } = _ref;
   const {
     suppressZebraStriping: suppressZebraStripingFromContext
   } = (0, _react.useContext)(_tableContext.TableContext);
@@ -38,7 +39,7 @@ const TableRow = ({
   return /*#__PURE__*/_react.default.createElement("tr", {
     "data-test": dataTest,
     role: role,
-    className: `jsx-${tableRowStyles.__hash}` + " " + ((0, _classnames.default)(className, {
+    className: "jsx-".concat(tableRowStyles.__hash) + " " + ((0, _classnames.default)(className, {
       zebraStriping
     }) || "")
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {

package/build/cjs/table/table.js

@@ -18,23 +18,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const tableStyles = ["table.jsx-2430604489{border:1px solid #e8edf2;background-color:#ffffff;min-width:100%;text-align:left;border-collapse:collapse;vertical-align:top;}"];
 tableStyles.__hash = "2430604489";
 
-const Table = ({
-  role,
-  children,
-  className,
-  dataTest,
-  suppressZebraStriping
-}) => /*#__PURE__*/_react.default.createElement(_tableContext.Provider, {
-  value: {
+const Table = _ref => {
+  let {
+    role,
+    children,
+    className,
+    dataTest,
     suppressZebraStriping
-  }
-}, /*#__PURE__*/_react.default.createElement("table", {
-  "data-test": dataTest,
-  role: role,
-  className: `jsx-${tableStyles.__hash}` + " " + (className || "")
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: tableStyles.__hash
-}, tableStyles)));
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_tableContext.Provider, {
+    value: {
+      suppressZebraStriping
+    }
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    "data-test": dataTest,
+    role: role,
+    className: "jsx-".concat(tableStyles.__hash) + " " + (className || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: tableStyles.__hash
+  }, tableStyles)));
+};
 
 exports.Table = Table;
 Table.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CustomAlternatingBgColor = exports.NoAlternatingBgColor = exports.OneDenseCell = exports.StaticLayout = exports.default = void 0;
+exports.default = exports.StaticLayout = exports.OneDenseCell = exports.NoAlternatingBgColor = exports.CustomAlternatingBgColor = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -30,22 +30,7 @@ var _table = require("./table.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const subtitle = 'Used to display information in a standard, effective way.';
-const description = `
-Should be used with multiple Table-related child components - see the table and examples below.
-
-\`\`\`js
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableCellHead,
-    TableFoot,
-    TableHead,
-    TableRow,
-    TableRowHead,
-} from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nShould be used with multiple Table-related child components - see the table and examples below.\n\n```js\nimport {\n    Table,\n    TableBody,\n    TableCell,\n    TableCellHead,\n    TableFoot,\n    TableHead,\n    TableRow,\n    TableRowHead,\n} from '@dhis2/ui'\n```\n";
 
 const TableFooterButton = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-3056176987"
@@ -60,7 +45,7 @@ const TableButton = () => /*#__PURE__*/_react.default.createElement(_button.Butt
 }, "Table button");
 
 var _default = {
-  title: 'Data Display/Table',
+  title: 'Table',
   component: _table.Table,
   // Add subcomponents to the args table
   subcomponents: {

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

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

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

@@ -2,28 +2,29 @@ import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { TableDataCell, TableHeaderCell } from './table-elements/index.js';
-export const DataTableCell = /*#__PURE__*/forwardRef(({
-  active,
-  align,
-  bordered,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  error,
-  fixed,
-  large,
-  left,
-  muted,
-  rowSpan,
-  role,
-  scope,
-  staticStyle,
-  tag,
-  valid,
-  width,
-  onClick
-}, ref) => {
+export const DataTableCell = /*#__PURE__*/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' ? TableHeaderCell : TableDataCell;
   return /*#__PURE__*/React.createElement(TableCell, {
     active: active,

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

@@ -12,63 +12,66 @@ const flexboxAlignLookup = {
   center: 'center',
   right: 'flex-end'
 };
-export const DataTableColumnHeader = /*#__PURE__*/forwardRef(({
-  align,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  filter,
-  fixed,
-  large,
-  left,
-  name,
-  role,
-  rowSpan,
-  scope,
-  showFilter,
-  sortDirection,
-  sortIconTitle,
-  top,
-  width,
-  onFilterIconClick,
-  onSortIconClick
-}, ref) => /*#__PURE__*/React.createElement(TableHeaderCell, {
-  align: align,
-  className: cx(className, 'DataTableColumnHeader', 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.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "container"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + (cx('top', {
-    large
-  }) || "")
-}, /*#__PURE__*/React.createElement("span", {
-  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "content"
-}, children), sortDirection && /*#__PURE__*/React.createElement(Sorter, {
-  name: name,
-  sortDirection: sortDirection,
-  onClick: onSortIconClick,
-  title: sortIconTitle
-}), filter && /*#__PURE__*/React.createElement(FilterHandle, {
-  name: name,
-  active: showFilter,
-  onClick: onFilterIconClick
-})), showFilter && filter), resolvedTableHeaderCss.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: styles.__hash
-}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3463223249"
-}, [`.label.jsx-3463223249{-webkit-box-pack:${flexboxAlignLookup[align]};-webkit-justify-content:${flexboxAlignLookup[align]};-ms-flex-pack:${flexboxAlignLookup[align]};justify-content:${flexboxAlignLookup[align]};}`])));
+export const DataTableColumnHeader = /*#__PURE__*/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.createElement(TableHeaderCell, {
+    align: align,
+    className: cx(className, 'DataTableColumnHeader', 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.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(styles.__hash) + " " + "container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(styles.__hash) + " " + (cx('top', {
+      large
+    }) || "")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "jsx-3463223249 " + "jsx-".concat(styles.__hash) + " " + "content"
+  }, children), sortDirection && /*#__PURE__*/React.createElement(Sorter, {
+    name: name,
+    sortDirection: sortDirection,
+    onClick: onSortIconClick,
+    title: sortIconTitle
+  }), filter && /*#__PURE__*/React.createElement(FilterHandle, {
+    name: name,
+    active: showFilter,
+    onClick: onFilterIconClick
+  })), showFilter && filter), resolvedTableHeaderCss.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: styles.__hash
+  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+    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], ";}")]));
+});
 DataTableColumnHeader.displayName = 'DataTableColumnHeader';
 DataTableColumnHeader.defaultProps = {
   dataTest: 'dhis2-uicore-datatablecellhead'

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

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
 import { TableHeaderCellAction } from '../table-elements/index.js';
-export const FilterHandle = ({
-  active,
-  name,
-  onClick
-}) => {
+export const FilterHandle = _ref => {
+  let {
+    active,
+    name,
+    onClick
+  } = _ref;
   const filterIconColor = active ? colors.blue700 : colors.grey600;
   const clickHandler = onClick ? event => {
     onClick({

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

@@ -14,12 +14,13 @@ export const getNextSortDirection = currentDirection => {
   const nextIndex = (currentIndex + 1) % SORT_DIRECTIONS.length;
   return SORT_DIRECTIONS[nextIndex];
 };
-export const Sorter = ({
-  name,
-  sortDirection,
-  title,
-  onClick
-}) => {
+export const Sorter = _ref => {
+  let {
+    name,
+    sortDirection,
+    title,
+    onClick
+  } = _ref;
   const nextSortDirection = getNextSortDirection(sortDirection);
   const clickHandler = onClick ? event => {
     onClick({
@@ -49,7 +50,7 @@ export const Sorter = ({
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "884818973",
     dynamic: [colors.grey500, colors.blue700]
-  }, [`svg.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:${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:${colors.blue700};}`]));
+  }, ["svg.__jsx-style-dynamic-selector .top.__jsx-style-dynamic-selector,svg.__jsx-style-dynamic-selector .bottom.__jsx-style-dynamic-selector{fill:".concat(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(colors.blue700, ";}")]));
 };
 Sorter.propTypes = {
   name: PropTypes.string,

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

@@ -7,17 +7,18 @@ import resolvedCss from './data-table-row.styles.js';
 import { DragHandleCell } from './drag-handle-cell.js';
 import { ExpandHandleCell } from './expand-handle-cell.js';
 import { ExpandedRow } from './expanded-row.js';
-export const DataTableRow = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  dataTest,
-  expandableContent,
-  expanded,
-  selected,
-  draggable,
-  role,
-  onExpandToggle
-}, ref) => {
+export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    expandableContent,
+    expanded,
+    selected,
+    draggable,
+    role,
+    onExpandToggle
+  } = _ref;
   const [isHoveringExpandedContent, setIsHoveringExpandedContent] = useState(false);
   const classes = cx(className, resolvedCss.className, {
     expanded,

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

@@ -4,6 +4,6 @@ import { colors } from '@dhis2/ui-constants';
 export default {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1795567040"
-  }, [`tr.isHoveringExpandedContent.jsx-1795567040>td{background-color:${colors.grey100};}`, `tr.isHoveringExpandedContent.jsx-1795567040>th{background-color:${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:${colors.grey300};}`]),
+  }, ["tr.isHoveringExpandedContent.jsx-1795567040>td{background-color:".concat(colors.grey100, ";}"), "tr.isHoveringExpandedContent.jsx-1795567040>th{background-color:".concat(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(colors.grey300, ";}")]),
   className: "jsx-1795567040"
 };

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

@@ -10,18 +10,21 @@ const pointer = {
   }, ["td.jsx-927553068{cursor:pointer;}"]),
   className: "jsx-927553068"
 };
-export const ExpandHandleCell = ({
-  expanded,
-  onClick
-}) => /*#__PURE__*/React.createElement(TableDataCell, {
-  className: cx(pointer.className, {
-    expanded
-  }),
-  onClick: () => onClick({
-    expanded: !expanded
-  }),
-  width: "48px"
-}, expanded ? /*#__PURE__*/React.createElement(IconChevronUp24, null) : /*#__PURE__*/React.createElement(IconChevronDown24, null), pointer.styles);
+export const ExpandHandleCell = _ref => {
+  let {
+    expanded,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TableDataCell, {
+    className: cx(pointer.className, {
+      expanded
+    }),
+    onClick: () => onClick({
+      expanded: !expanded
+    }),
+    width: "48px"
+  }, expanded ? /*#__PURE__*/React.createElement(IconChevronUp24, null) : /*#__PURE__*/React.createElement(IconChevronDown24, null), pointer.styles);
+};
 ExpandHandleCell.propTypes = {
   expanded: PropTypes.bool,
   onClick: PropTypes.func

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

@@ -10,28 +10,31 @@ const {
 } = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "626485122"
-  }, [`tr.expanded:hover+tr>td.jsx-626485122{background-color:${colors.grey100};}`, `tr.expanded:active+tr>td.jsx-626485122{background-color:${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(colors.grey100, ";}"), "tr.expanded:active+tr>td.jsx-626485122{background-color:".concat(colors.grey200, ";}"), "tr.selected.expanded:hover+tr.jsx-626485122>td.jsx-626485122{background-color:#cdeae8;}"]),
   className: "jsx-626485122"
 };
-export const ExpandedRow = ({
-  children,
-  className,
-  colSpan,
-  dataTest,
-  selected,
-  setIsHoveringExpandedContent
-}) => /*#__PURE__*/React.createElement(TableRow, {
-  onMouseOver: () => setIsHoveringExpandedContent(true),
-  onMouseOut: () => setIsHoveringExpandedContent(false),
-  className: cx({
-    [`${className}-expandedrow`]: !!className
-  }),
-  selected: selected,
-  dataTest: dataTest && `${dataTest}-expandedrow`
-}, /*#__PURE__*/React.createElement(TableDataCell, {
-  className: cellClassName,
-  colSpan: colSpan
-}, children, styles));
+export const ExpandedRow = _ref => {
+  let {
+    children,
+    className,
+    colSpan,
+    dataTest,
+    selected,
+    setIsHoveringExpandedContent
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TableRow, {
+    onMouseOver: () => setIsHoveringExpandedContent(true),
+    onMouseOut: () => setIsHoveringExpandedContent(false),
+    className: cx({
+      ["".concat(className, "-expandedrow")]: !!className
+    }),
+    selected: selected,
+    dataTest: dataTest && "".concat(dataTest, "-expandedrow")
+  }, /*#__PURE__*/React.createElement(TableDataCell, {
+    className: cellClassName,
+    colSpan: colSpan
+  }, children, styles));
+};
 ExpandedRow.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

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

@@ -2,16 +2,17 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { Table, TableScrollBox } from './table-elements/index.js';
-export const DataTable = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  dataTest,
-  layout,
-  role,
-  scrollHeight,
-  scrollWidth,
-  width
-}, ref) => {
+export const DataTable = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    layout,
+    role,
+    scrollHeight,
+    scrollWidth,
+    width
+  } = _ref;
   const scrollable = !!(scrollHeight || scrollWidth);
   const table = /*#__PURE__*/React.createElement(Table, {
     borderless: scrollable,
@@ -24,7 +25,7 @@ export const DataTable = /*#__PURE__*/forwardRef(({
   }, children);
   return !scrollable ? table : /*#__PURE__*/React.createElement(TableScrollBox, {
     className: cx(className, 'tablescrollbox'),
-    dataTest: `${dataTest}-scrollbox`,
+    dataTest: "".concat(dataTest, "-scrollbox"),
     maxHeight: scrollHeight,
     maxWidth: scrollWidth
   }, table);