@dhis2-ui/table 10.0.0-alpha.6 → 10.0.0-alpha.8

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

@@ -5,52 +5,52 @@ import { Table, TableScrollBox } from '../table-elements/index.js';
 describe('<DataTable>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = mount(/*#__PURE__*/React.createElement(DataTable, {
       ref: ref
     }));
     expect(wrapper.find('table').getDOMNode()).toBe(ref.current);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       className: className
     }));
     expect(wrapper.find(Table).prop('className')).toBe(className);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       dataTest: dataTest
     }));
     expect(wrapper.find(Table).prop('dataTest')).toBe(dataTest);
   });
   it('accepts a layout prop', () => {
     const layout = 'fixed';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       layout: layout
     }));
     expect(wrapper.find(Table).prop('layout')).toBe(layout);
   });
   it('accepts a role prop', () => {
     const role = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       role: role
     }));
     expect(wrapper.find(Table).prop('role')).toBe(role);
   });
   it('renders a datatable when no scrollHeight or scrollWidth are provided', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, null));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, null));
     expect(wrapper.find(Table)).toHaveLength(1);
     expect(wrapper.find(TableScrollBox)).toHaveLength(0);
   });
   it('wraps the datatable in a scroll box when scrollHeight is provided', () => {
     const height = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       scrollHeight: height
     }));
     expect(wrapper.dive().type()).toBe('div');
@@ -60,7 +60,7 @@ describe('<DataTable>', () => {
   });
   it('wraps the datatable in a scroll box when scrollWidth is provided', () => {
     const width = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       scrollWidth: width
     }));
     expect(wrapper.dive().type()).toBe('div');
@@ -70,7 +70,7 @@ describe('<DataTable>', () => {
   });
   it('wraps the datatable in a scroll box when both scrollHeight and scrollWidth are provided', () => {
     const size = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       scrollHeight: size,
       scrollWidth: size
     }));
@@ -82,7 +82,7 @@ describe('<DataTable>', () => {
   });
   it('accepts a width prop', () => {
     const width = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(DataTable, {
       width: width
     }));
     expect(wrapper.find(Table).prop('width')).toBe(width);

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

@@ -6,17 +6,17 @@ import { TableDataCell, TableHeaderCell } from './table-elements/index.js';
 export const DataTableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     active,
-    align,
+    align = 'left',
     backgroundColor,
     bordered,
     children,
     className,
     colSpan,
-    dataTest,
+    dataTest = 'dhis2-uicore-datatablecell',
     error,
     fixed,
     large,
-    left,
+    left = 'auto',
     muted,
     rowSpan,
     role,
@@ -24,7 +24,7 @@ export const DataTableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
     staticStyle,
     tag,
     valid,
-    width,
+    width = 'auto',
     onClick,
     ...props
   } = _ref;
@@ -53,12 +53,6 @@ export const DataTableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
   }), children);
 });
 DataTableCell.displayName = 'DataTableCell';
-DataTableCell.defaultProps = {
-  align: 'left',
-  dataTest: 'dhis2-uicore-datatablecell',
-  left: 'auto',
-  width: 'auto'
-};
 const stylePropType = mutuallyExclusive(['valid', 'error', 'muted'], PropTypes.bool);
 const requiredIfFixedPropType = requiredIf(props => props.fixed, PropTypes.string);
 DataTableCell.propTypes = {

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

@@ -18,7 +18,7 @@ export const DataTableColumnHeader = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     className,
     colSpan,
-    dataTest,
+    dataTest = 'dhis2-uicore-datatablecellhead',
     filter,
     fixed,
     large,
@@ -73,9 +73,6 @@ export const DataTableColumnHeader = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [`.label.jsx-3463223249{-webkit-box-pack:${flexboxAlignLookup[align]};-webkit-justify-content:${flexboxAlignLookup[align]};-ms-flex-pack:${flexboxAlignLookup[align]};justify-content:${flexboxAlignLookup[align]};}`]));
 });
 DataTableColumnHeader.displayName = 'DataTableColumnHeader';
-DataTableColumnHeader.defaultProps = {
-  dataTest: 'dhis2-uicore-datatablecellhead'
-};
 DataTableColumnHeader.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right']),
   children: PropTypes.node,

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

@@ -12,7 +12,7 @@ export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-datatablerow',
     expandableContent,
     expanded,
     selected,
@@ -49,9 +49,6 @@ export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, expandableContent));
 });
 DataTableRow.displayName = 'DataTableRow';
-DataTableRow.defaultProps = {
-  dataTest: 'dhis2-uicore-datatablerow'
-};
 DataTableRow.propTypes = {
   /** Should be `<DataTableCell>` or `<DataTableCellHead>` components */
   children: PropTypes.node,

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

@@ -6,12 +6,12 @@ export const DataTable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     className,
-    dataTest,
-    layout,
+    dataTest = 'dhis2-uicore-datatable',
+    layout = 'auto',
     role,
     scrollHeight,
     scrollWidth,
-    width
+    width = '100%'
   } = _ref;
   const scrollable = !!(scrollHeight || scrollWidth);
   const table = /*#__PURE__*/React.createElement(Table, {
@@ -31,11 +31,6 @@ export const DataTable = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, table);
 });
 DataTable.displayName = 'DataTable';
-DataTable.defaultProps = {
-  dataTest: 'dhis2-uicore-datatable',
-  width: '100%',
-  layout: 'auto'
-};
 DataTable.propTypes = {
   /**
    * Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components

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

@@ -4,33 +4,33 @@ import { TableBody } from '../table-body.js';
 describe('<TableBody>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableBody, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableBody, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableBody, {
+    const wrapper = mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableBody, {
       ref: ref
     })));
     expect(wrapper.find('tbody').getDOMNode()).toBe(ref.current);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableBody, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableBody, {
       className: className
     }));
     expect(wrapper.find('tbody').hasClass(className)).toBe(true);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableBody, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableBody, {
       dataTest: dataTest
     }));
     expect(wrapper.find('tbody').prop('data-test')).toBe(dataTest);
   });
   it('accepts a role prop', () => {
     const role = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableBody, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableBody, {
       role: role
     }));
     expect(wrapper.find('tbody').prop('role')).toBe(role);

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

@@ -4,124 +4,124 @@ import { TableDataCell } from '../table-data-cell/table-data-cell.js';
 describe('<TableDataCell>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TableDataCell, {
       ref: ref
     })))));
     expect(wrapper.find('td').getDOMNode()).toBe(ref.current);
   });
   it('accepts an active prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       active: true
     }));
     expect(wrapper.find('td').hasClass('active')).toBe(true);
   });
   it('accepts an align prop', () => {
     const align = 'right';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       align: align
     }));
     expect(wrapper.html()).toContain(`text-align: ${align};`);
   });
   it('accepts a bordered prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       bordered: true
     }));
     expect(wrapper.find('td').hasClass('bordered')).toBe(true);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       className: className
     }));
     expect(wrapper.find('td').hasClass(className)).toBe(true);
   });
   it('accepts a colSpan prop', () => {
     const colSpan = '3';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       colSpan: colSpan
     }));
     expect(wrapper.find('td').prop('colSpan')).toBe(colSpan);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       dataTest: dataTest
     }));
     expect(wrapper.find('td').prop('data-test')).toBe(dataTest);
   });
   it('accepts an error prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       error: true
     }));
     expect(wrapper.find('td').hasClass('error')).toBe(true);
   });
   it('accepts a large prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       large: true
     }));
     expect(wrapper.find('td').hasClass('large')).toBe(true);
   });
   it('accepts a left prop', () => {
     const left = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       left: left
     }));
     expect(wrapper.html()).toContain(`inset-inline-start: ${left};`);
   });
   it('accepts a muted prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       muted: true
     }));
     expect(wrapper.find('td').hasClass('muted')).toBe(true);
   });
   it('accepts a role prop', () => {
     const role = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       role: role
     }));
     expect(wrapper.find('td').prop('role')).toBe(role);
   });
   it('accepts a rowSpan prop', () => {
     const rowSpan = '3';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       rowSpan: rowSpan
     }));
     expect(wrapper.find('td').prop('rowSpan')).toBe(rowSpan);
   });
   it('accepts a scope prop', () => {
     const scope = 'row';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       scope: scope
     }));
     expect(wrapper.find('td').prop('scope')).toBe(scope);
   });
   it('accepts a staticStyle prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       staticStyle: true
     }));
     expect(wrapper.find('td').hasClass('staticStyle')).toBe(true);
   });
   it('accepts a valid prop', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       valid: true
     }));
     expect(wrapper.find('td').hasClass('valid')).toBe(true);
   });
   it('accepts a width prop', () => {
     const width = '200px';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       width: width
     }));
     expect(wrapper.html()).toContain(`width: ${width};`);
   });
   it('accepts an onClick prop', () => {
     const onClick = jest.fn();
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableDataCell, {
       onClick: onClick
     }));
     wrapper.simulate('click');

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

@@ -4,33 +4,33 @@ import { TableFoot } from '../table-foot.js';
 describe('<TableFoot>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableFoot, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableFoot, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableFoot, {
+    const wrapper = mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableFoot, {
       ref: ref
     })));
     expect(wrapper.find('tfoot').getDOMNode()).toBe(ref.current);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableFoot, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableFoot, {
       className: className
     }));
     expect(wrapper.find('tfoot').hasClass(className)).toBe(true);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableFoot, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableFoot, {
       dataTest: dataTest
     }));
     expect(wrapper.find('tfoot').prop('data-test')).toBe(dataTest);
   });
   it('accepts a role prop', () => {
     const role = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableFoot, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableFoot, {
       role: role
     }));
     expect(wrapper.find('tfoot').prop('role')).toBe(role);

package/build/es/data-table/table-elements/__tests__/table-head.test.js

@@ -4,33 +4,33 @@ import { TableHead } from '../table-head.js';
 describe('<TableHead>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHead, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHead, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableHead, {
+    const wrapper = mount(/*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(TableHead, {
       ref: ref
     })));
     expect(wrapper.find('thead').getDOMNode()).toBe(ref.current);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHead, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHead, {
       className: className
     }));
     expect(wrapper.find('thead').hasClass(className)).toBe(true);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHead, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHead, {
       dataTest: dataTest
     }));
     expect(wrapper.find('thead').prop('data-test')).toBe(dataTest);
   });
   it('accepts a role prop', () => {
     const role = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHead, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHead, {
       role: role
     }));
     expect(wrapper.find('thead').prop('role')).toBe(role);

package/build/es/data-table/table-elements/__tests__/table-header-cell-action.test.js

@@ -4,40 +4,40 @@ import { TableHeaderCellAction } from '../table-header-cell-action.js';
 describe('<TableHeaderCellAction>', () => {
   it('renders children', () => {
     const children = 'children';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCellAction, null, children));
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHeaderCellAction, null, children));
     expect(wrapper.containsMatchingElement(children)).toBe(true);
   });
   it('accepts a ref', () => {
     const ref = /*#__PURE__*/React.createRef();
-    const wrapper = mount( /*#__PURE__*/React.createElement(TableHeaderCellAction, {
+    const wrapper = mount(/*#__PURE__*/React.createElement(TableHeaderCellAction, {
       ref: ref
     }));
     expect(wrapper.find('button').getDOMNode()).toBe(ref.current);
   });
   it('accepts a className prop', () => {
     const className = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCellAction, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHeaderCellAction, {
       className: className
     }));
     expect(wrapper.find('button').hasClass(className)).toBe(true);
   });
   it('accepts a dataTest prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCellAction, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHeaderCellAction, {
       dataTest: dataTest
     }));
     expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
   });
   it('accepts a title prop', () => {
     const title = 'test';
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCellAction, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHeaderCellAction, {
       title: title
     }));
     expect(wrapper.find('button').prop('title')).toBe(title);
   });
   it('accepts an onClick prop', () => {
     const onClick = jest.fn();
-    const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCellAction, {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(TableHeaderCellAction, {
       onClick: onClick
     }));
     wrapper.simulate('click');