@dhis2-ui/table 8.1.11 → 8.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/build/cjs/data-table/__tests__/data-table-row/expanded-row.test.js +2 -2
  2. package/build/cjs/data-table/data-table-cell.js +23 -22
  3. package/build/cjs/data-table/data-table-column-header/data-table-column-header.js +60 -57
  4. package/build/cjs/data-table/data-table-column-header/data-table-column-header.styles.js +1 -1
  5. package/build/cjs/data-table/data-table-column-header/filter-handle.js +6 -5
  6. package/build/cjs/data-table/data-table-column-header/sorter.js +9 -8
  7. package/build/cjs/data-table/data-table-row/data-table-row.js +12 -11
  8. package/build/cjs/data-table/data-table-row/data-table-row.styles.js +1 -1
  9. package/build/cjs/data-table/data-table-row/expand-handle-cell.js +15 -12
  10. package/build/cjs/data-table/data-table-row/expanded-row.js +23 -20
  11. package/build/cjs/data-table/data-table.js +12 -11
  12. package/build/cjs/data-table/data-table.stories.e2e.js +1 -1
  13. package/build/cjs/data-table/data-table.stories.js +147 -145
  14. package/build/cjs/data-table/table-elements/__tests__/table-data-cell.test.js +3 -3
  15. package/build/cjs/data-table/table-elements/__tests__/table-header-cell.test.js +4 -4
  16. package/build/cjs/data-table/table-elements/__tests__/table.test.js +2 -2
  17. package/build/cjs/data-table/table-elements/index.js +8 -8
  18. package/build/cjs/data-table/table-elements/table-body.js +21 -18
  19. package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.js +40 -37
  20. package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.styles.js +1 -1
  21. package/build/cjs/data-table/table-elements/table-foot.js +15 -12
  22. package/build/cjs/data-table/table-elements/table-head.js +15 -12
  23. package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.js +43 -40
  24. package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.styles.js +1 -1
  25. package/build/cjs/data-table/table-elements/table-header-cell-action.js +20 -17
  26. package/build/cjs/data-table/table-elements/table-row.js +21 -18
  27. package/build/cjs/data-table/table-elements/table-scroll-box.js +18 -15
  28. package/build/cjs/data-table/table-elements/table-toolbar.js +17 -14
  29. package/build/cjs/data-table/table-elements/table.js +23 -20
  30. package/build/cjs/data-table/table-elements/table.stories.e2e.js +1 -1
  31. package/build/cjs/data-table/table-elements/table.stories.internal.js +119 -127
  32. package/build/cjs/index.js +42 -42
  33. package/build/cjs/stacked-table/content-with-title.js +14 -11
  34. package/build/cjs/stacked-table/index.js +10 -10
  35. package/build/cjs/stacked-table/stacked-table-body.js +13 -10
  36. package/build/cjs/stacked-table/stacked-table-cell-head.js +20 -17
  37. package/build/cjs/stacked-table/stacked-table-cell.js +13 -12
  38. package/build/cjs/stacked-table/stacked-table-foot.js +13 -10
  39. package/build/cjs/stacked-table/stacked-table-head.js +13 -10
  40. package/build/cjs/stacked-table/stacked-table-row-head.js +11 -8
  41. package/build/cjs/stacked-table/stacked-table-row.js +19 -13
  42. package/build/cjs/stacked-table/stacked-table.js +7 -6
  43. package/build/cjs/stacked-table/stacked-table.stories.js +3 -20
  44. package/build/cjs/stacked-table/stacked-table.test.js +24 -15
  45. package/build/cjs/stacked-table/table-context.js +1 -1
  46. package/build/cjs/stacked-table/table.js +14 -11
  47. package/build/cjs/table/index.js +10 -10
  48. package/build/cjs/table/table-body.js +13 -10
  49. package/build/cjs/table/table-cell-head.js +22 -19
  50. package/build/cjs/table/table-cell.js +22 -19
  51. package/build/cjs/table/table-context.js +1 -1
  52. package/build/cjs/table/table-foot.js +13 -10
  53. package/build/cjs/table/table-head.js +13 -10
  54. package/build/cjs/table/table-row-head.js +15 -12
  55. package/build/cjs/table/table-row.js +9 -8
  56. package/build/cjs/table/table.js +19 -16
  57. package/build/cjs/table/table.stories.js +3 -18
  58. package/build/es/data-table/__tests__/data-table-row/expanded-row.test.js +2 -2
  59. package/build/es/data-table/data-table-cell.js +23 -22
  60. package/build/es/data-table/data-table-column-header/data-table-column-header.js +60 -57
  61. package/build/es/data-table/data-table-column-header/filter-handle.js +6 -5
  62. package/build/es/data-table/data-table-column-header/sorter.js +8 -7
  63. package/build/es/data-table/data-table-row/data-table-row.js +12 -11
  64. package/build/es/data-table/data-table-row/data-table-row.styles.js +1 -1
  65. package/build/es/data-table/data-table-row/expand-handle-cell.js +15 -12
  66. package/build/es/data-table/data-table-row/expanded-row.js +23 -20
  67. package/build/es/data-table/data-table.js +12 -11
  68. package/build/es/data-table/data-table.stories.js +146 -144
  69. package/build/es/data-table/table-elements/__tests__/table-data-cell.test.js +3 -3
  70. package/build/es/data-table/table-elements/__tests__/table-header-cell.test.js +4 -4
  71. package/build/es/data-table/table-elements/__tests__/table.test.js +2 -2
  72. package/build/es/data-table/table-elements/table-body.js +21 -18
  73. package/build/es/data-table/table-elements/table-data-cell/table-data-cell.js +40 -37
  74. package/build/es/data-table/table-elements/table-data-cell/table-data-cell.styles.js +1 -1
  75. package/build/es/data-table/table-elements/table-foot.js +15 -12
  76. package/build/es/data-table/table-elements/table-head.js +15 -12
  77. package/build/es/data-table/table-elements/table-header-cell/table-header-cell.js +43 -40
  78. package/build/es/data-table/table-elements/table-header-cell/table-header-cell.styles.js +1 -1
  79. package/build/es/data-table/table-elements/table-header-cell-action.js +20 -17
  80. package/build/es/data-table/table-elements/table-row.js +21 -18
  81. package/build/es/data-table/table-elements/table-scroll-box.js +18 -15
  82. package/build/es/data-table/table-elements/table-toolbar.js +17 -14
  83. package/build/es/data-table/table-elements/table.js +23 -20
  84. package/build/es/data-table/table-elements/table.stories.internal.js +118 -126
  85. package/build/es/stacked-table/content-with-title.js +14 -11
  86. package/build/es/stacked-table/stacked-table-body.js +13 -10
  87. package/build/es/stacked-table/stacked-table-cell-head.js +20 -17
  88. package/build/es/stacked-table/stacked-table-cell.js +13 -12
  89. package/build/es/stacked-table/stacked-table-foot.js +13 -10
  90. package/build/es/stacked-table/stacked-table-head.js +13 -10
  91. package/build/es/stacked-table/stacked-table-row-head.js +11 -8
  92. package/build/es/stacked-table/stacked-table-row.js +19 -13
  93. package/build/es/stacked-table/stacked-table.js +7 -6
  94. package/build/es/stacked-table/stacked-table.stories.js +2 -19
  95. package/build/es/stacked-table/stacked-table.test.js +24 -15
  96. package/build/es/stacked-table/table.js +14 -11
  97. package/build/es/table/table-body.js +13 -10
  98. package/build/es/table/table-cell-head.js +22 -19
  99. package/build/es/table/table-cell.js +22 -19
  100. package/build/es/table/table-foot.js +13 -10
  101. package/build/es/table/table-head.js +13 -10
  102. package/build/es/table/table-row-head.js +15 -12
  103. package/build/es/table/table-row.js +9 -8
  104. package/build/es/table/table.js +19 -16
  105. package/build/es/table/table.stories.js +2 -17
  106. package/package.json +3 -3
@@ -2,18 +2,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import PropTypes from 'prop-types';
4
4
  import React, { forwardRef } from 'react';
5
- export const TableHead = /*#__PURE__*/forwardRef(({
6
- children,
7
- className,
8
- dataTest,
9
- role,
10
- ...props
11
- }, ref) => /*#__PURE__*/React.createElement("thead", _extends({}, props, {
12
- className: className,
13
- "data-test": dataTest,
14
- ref: ref,
15
- role: role
16
- }), children));
5
+ export const TableHead = /*#__PURE__*/forwardRef((_ref, ref) => {
6
+ let {
7
+ children,
8
+ className,
9
+ dataTest,
10
+ role,
11
+ ...props
12
+ } = _ref;
13
+ return /*#__PURE__*/React.createElement("thead", _extends({}, props, {
14
+ className: className,
15
+ "data-test": dataTest,
16
+ ref: ref,
17
+ role: role
18
+ }), children);
19
+ });
17
20
  TableHead.displayName = 'TableHead';
18
21
  TableHead.defaultProps = {
19
22
  dataTest: 'dhis2-uicore-tablehead'
@@ -8,53 +8,56 @@ import PropTypes from 'prop-types';
8
8
  import React, { forwardRef } from 'react';
9
9
  import styles from './table-header-cell.styles.js';
10
10
  const AUTO = 'auto';
11
- export const TableHeaderCell = /*#__PURE__*/forwardRef(({
12
- active,
13
- align,
14
- bordered,
15
- children,
16
- className,
17
- colSpan,
18
- dataTest,
19
- error,
20
- fixed,
21
- large,
22
- left,
23
- muted,
24
- rowSpan,
25
- role,
26
- scope,
27
- staticStyle,
28
- top,
29
- valid,
30
- width,
31
- onClick,
32
- ...props
33
- }, ref) => /*#__PURE__*/React.createElement("th", _extends({}, props, {
34
- ref: ref,
35
- colSpan: colSpan,
36
- rowSpan: rowSpan,
37
- onClick: onClick,
38
- "data-test": dataTest,
39
- role: role,
40
- scope: scope,
41
- className: `jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([["1837557188", [left, top, align, width]]]) + " " + (cx(className, {
11
+ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
12
+ let {
42
13
  active,
14
+ align,
43
15
  bordered,
16
+ children,
17
+ className,
18
+ colSpan,
19
+ dataTest,
44
20
  error,
45
21
  fixed,
46
- fixedHorizontally: fixed && left !== AUTO,
47
22
  large,
23
+ left,
48
24
  muted,
25
+ rowSpan,
26
+ role,
27
+ scope,
49
28
  staticStyle,
50
- valid
51
- }) || "")
52
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
53
- id: styles.__hash
54
- }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
55
- id: "1837557188",
56
- dynamic: [left, top, align, width]
57
- }, [`th.__jsx-style-dynamic-selector{left:${left};top:${top};text-align:${align};width:${width};}`])));
29
+ top,
30
+ valid,
31
+ width,
32
+ onClick,
33
+ ...props
34
+ } = _ref;
35
+ return /*#__PURE__*/React.createElement("th", _extends({}, props, {
36
+ ref: ref,
37
+ colSpan: colSpan,
38
+ rowSpan: rowSpan,
39
+ onClick: onClick,
40
+ "data-test": dataTest,
41
+ role: role,
42
+ scope: scope,
43
+ className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["1837557188", [left, top, align, width]]]) + " " + (cx(className, {
44
+ active,
45
+ bordered,
46
+ error,
47
+ fixed,
48
+ fixedHorizontally: fixed && left !== AUTO,
49
+ large,
50
+ muted,
51
+ staticStyle,
52
+ valid
53
+ }) || "")
54
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
55
+ id: styles.__hash
56
+ }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
57
+ id: "1837557188",
58
+ dynamic: [left, top, align, width]
59
+ }, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
60
+ });
58
61
  TableHeaderCell.displayName = 'TableHeaderCell';
59
62
  TableHeaderCell.defaultProps = {
60
63
  align: 'left',
@@ -1,4 +1,4 @@
1
1
  import { colors } from '@dhis2/ui-constants';
2
- const _defaultExport = [`th.jsx-3777082606{padding:12px;border:1px solid transparant;border-bottom:1px solid ${colors.grey300};color:${colors.grey800};background-color:${colors.grey200};font-weight:normal;font-size:14px;vertical-align:top;}`, "thead th.jsx-3777082606{padding:8px 12px;font-size:13px;}", `th.jsx-3777082606:last-of-type{border-right:1px solid ${colors.grey300};}`, `th.active.jsx-3777082606{background-color:${colors.white};outline:2px solid ${colors.grey600};outline-offset:-2px;}`, `th.bordered.jsx-3777082606{border-right:1px solid ${colors.grey300};}`, "th.bordered.jsx-3777082606:last-child{border-right:1px solid transparent;}", `th.error.jsx-3777082606{color:${colors.red700};}`, `th.muted.jsx-3777082606{color:${colors.grey700};font-style:italic;}`, `th.valid.jsx-3777082606{color:${colors.green700};}`, "th.large.jsx-3777082606{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-3777082606{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:2;}", `thead th.fixedHorizontally.jsx-3777082606{z-index:3;background-color:${colors.grey300};}`, "tr:last-child th.jsx-3777082606{border-bottom:1px solid transparent;}", `thead tr:last-child th.jsx-3777082606{border-bottom:1px solid ${colors.grey300};}`, `tbody>tr:hover>th.jsx-3777082606:not(.staticStyle),tfoot>tr:hover>th.jsx-3777082606:not(.staticStyle){background-color:${colors.grey300};}`, `tbody>tr:active>th.jsx-3777082606:not(.staticStyle){background-color:${colors.grey200};}`, `tfoot>tr:first-child th.jsx-3777082606{border-top:1px solid ${colors.grey300};}`];
2
+ const _defaultExport = ["th.jsx-3777082606{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey800, ";background-color:").concat(colors.grey200, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-3777082606{padding:8px 12px;font-size:13px;}", "th.jsx-3777082606:last-of-type{border-right:1px solid ".concat(colors.grey300, ";}"), "th.active.jsx-3777082606{background-color:".concat(colors.white, ";outline:2px solid ").concat(colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-3777082606{border-right:1px solid ".concat(colors.grey300, ";}"), "th.bordered.jsx-3777082606:last-child{border-right:1px solid transparent;}", "th.error.jsx-3777082606{color:".concat(colors.red700, ";}"), "th.muted.jsx-3777082606{color:".concat(colors.grey700, ";font-style:italic;}"), "th.valid.jsx-3777082606{color:".concat(colors.green700, ";}"), "th.large.jsx-3777082606{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-3777082606{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-3777082606{z-index:3;background-color:".concat(colors.grey300, ";}"), "tr:last-child th.jsx-3777082606{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-3777082606{border-bottom:1px solid ".concat(colors.grey300, ";}"), "tbody>tr:hover>th.jsx-3777082606:not(.staticStyle),tfoot>tr:hover>th.jsx-3777082606:not(.staticStyle){background-color:".concat(colors.grey300, ";}"), "tbody>tr:active>th.jsx-3777082606:not(.staticStyle){background-color:".concat(colors.grey200, ";}"), "tfoot>tr:first-child th.jsx-3777082606{border-top:1px solid ".concat(colors.grey300, ";}")];
3
3
  _defaultExport.__hash = "3777082606";
4
4
  export default _defaultExport;
@@ -5,23 +5,26 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
5
5
  import { colors } from '@dhis2/ui-constants';
6
6
  import PropTypes from 'prop-types';
7
7
  import React, { forwardRef } from 'react';
8
- export const TableHeaderCellAction = /*#__PURE__*/forwardRef(({
9
- onClick,
10
- children,
11
- className,
12
- dataTest,
13
- title,
14
- ...props
15
- }, ref) => /*#__PURE__*/React.createElement("button", _extends({}, props, {
16
- "data-test": dataTest,
17
- onClick: onClick,
18
- title: title,
19
- ref: ref,
20
- className: _JSXStyle.dynamic([["997535212", [colors.grey400]]]) + " " + (className || "")
21
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
22
- id: "997535212",
23
- dynamic: [colors.grey400]
24
- }, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-left:2px;}", `button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:${colors.grey400};}`, "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"])));
8
+ export const TableHeaderCellAction = /*#__PURE__*/forwardRef((_ref, ref) => {
9
+ let {
10
+ onClick,
11
+ children,
12
+ className,
13
+ dataTest,
14
+ title,
15
+ ...props
16
+ } = _ref;
17
+ return /*#__PURE__*/React.createElement("button", _extends({}, props, {
18
+ "data-test": dataTest,
19
+ onClick: onClick,
20
+ title: title,
21
+ ref: ref,
22
+ className: _JSXStyle.dynamic([["997535212", [colors.grey400]]]) + " " + (className || "")
23
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
24
+ id: "997535212",
25
+ dynamic: [colors.grey400]
26
+ }, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-left:2px;}", "button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:".concat(colors.grey400, ";}"), "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"]));
27
+ });
25
28
  TableHeaderCellAction.displayName = 'TableHeaderCellAction';
26
29
  TableHeaderCellAction.defaultProps = {
27
30
  dataTest: 'dhis2-uicore-tableheadercellaction'
@@ -5,25 +5,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
5
5
  import cx from 'classnames';
6
6
  import PropTypes from 'prop-types';
7
7
  import React, { forwardRef } from 'react';
8
- export const TableRow = /*#__PURE__*/forwardRef(({
9
- children,
10
- className,
11
- dataTest,
12
- draggable,
13
- role,
14
- selected,
15
- ...props
16
- }, ref) => /*#__PURE__*/React.createElement("tr", _extends({}, props, {
17
- ref: ref,
18
- "data-test": dataTest,
19
- role: role,
20
- className: "jsx-1820444258" + " " + (cx(className, {
8
+ export const TableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
9
+ let {
10
+ children,
11
+ className,
12
+ dataTest,
13
+ draggable,
14
+ role,
21
15
  selected,
22
- draggable
23
- }) || "")
24
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
25
- id: "1820444258"
26
- }, ["tbody>tr.draggable.jsx-1820444258,tfoot>tr.draggable.jsx-1820444258{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"])));
16
+ ...props
17
+ } = _ref;
18
+ return /*#__PURE__*/React.createElement("tr", _extends({}, props, {
19
+ ref: ref,
20
+ "data-test": dataTest,
21
+ role: role,
22
+ className: "jsx-1820444258" + " " + (cx(className, {
23
+ selected,
24
+ draggable
25
+ }) || "")
26
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
27
+ id: "1820444258"
28
+ }, ["tbody>tr.draggable.jsx-1820444258,tfoot>tr.draggable.jsx-1820444258{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
29
+ });
27
30
  TableRow.displayName = 'TableRow';
28
31
  TableRow.defaultProps = {
29
32
  dataTest: 'dhis2-uicore-tablerow'
@@ -5,21 +5,24 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
5
5
  import { colors } from '@dhis2/ui-constants';
6
6
  import PropTypes from 'prop-types';
7
7
  import React, { forwardRef } from 'react';
8
- export const TableScrollBox = /*#__PURE__*/forwardRef(({
9
- children,
10
- className,
11
- dataTest,
12
- maxHeight,
13
- maxWidth,
14
- ...props
15
- }, ref) => /*#__PURE__*/React.createElement("div", _extends({}, props, {
16
- "data-test": dataTest,
17
- ref: ref,
18
- className: _JSXStyle.dynamic([["2859562182", [colors.grey300, maxHeight, maxWidth]]]) + " " + (className || "")
19
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
20
- id: "2859562182",
21
- dynamic: [colors.grey300, maxHeight, maxWidth]
22
- }, [`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;}`])));
8
+ export const TableScrollBox = /*#__PURE__*/forwardRef((_ref, ref) => {
9
+ let {
10
+ children,
11
+ className,
12
+ dataTest,
13
+ maxHeight,
14
+ maxWidth,
15
+ ...props
16
+ } = _ref;
17
+ return /*#__PURE__*/React.createElement("div", _extends({}, props, {
18
+ "data-test": dataTest,
19
+ ref: ref,
20
+ className: _JSXStyle.dynamic([["2859562182", [colors.grey300, maxHeight, maxWidth]]]) + " " + (className || "")
21
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
22
+ id: "2859562182",
23
+ dynamic: [colors.grey300, maxHeight, maxWidth]
24
+ }, ["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;}")]));
25
+ });
23
26
  TableScrollBox.displayName = 'TableScrollBox';
24
27
  TableScrollBox.defaultProps = {
25
28
  dataTest: 'dhis2-uicore-tablescrollbox',
@@ -6,20 +6,23 @@ import { colors, spacers } from '@dhis2/ui-constants';
6
6
  import cx from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
8
  import React, { forwardRef } from 'react';
9
- export const TableToolbar = /*#__PURE__*/forwardRef(({
10
- children,
11
- className,
12
- dataTest,
13
- position,
14
- ...props
15
- }, ref) => /*#__PURE__*/React.createElement("div", _extends({}, props, {
16
- "data-test": dataTest,
17
- ref: ref,
18
- className: _JSXStyle.dynamic([["247244135", [colors.grey300, spacers.dp12]]]) + " " + (cx(className, position) || "")
19
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
20
- id: "247244135",
21
- dynamic: [colors.grey300, spacers.dp12]
22
- }, [`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;}"])));
9
+ export const TableToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
10
+ let {
11
+ children,
12
+ className,
13
+ dataTest,
14
+ position,
15
+ ...props
16
+ } = _ref;
17
+ return /*#__PURE__*/React.createElement("div", _extends({}, props, {
18
+ "data-test": dataTest,
19
+ ref: ref,
20
+ className: _JSXStyle.dynamic([["247244135", [colors.grey300, spacers.dp12]]]) + " " + (cx(className, position) || "")
21
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
22
+ id: "247244135",
23
+ dynamic: [colors.grey300, spacers.dp12]
24
+ }, ["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;}"]));
25
+ });
23
26
  TableToolbar.displayName = 'TableToolbar';
24
27
  TableToolbar.defaultProps = {
25
28
  dataTest: 'dhis2-uicore-tabletoolbar',
@@ -6,26 +6,29 @@ import { colors } from '@dhis2/ui-constants';
6
6
  import cx from 'classnames';
7
7
  import PropTypes from 'prop-types';
8
8
  import React, { forwardRef } from 'react';
9
- export const Table = /*#__PURE__*/forwardRef(({
10
- children,
11
- className,
12
- dataTest,
13
- layout,
14
- role,
15
- borderless,
16
- width,
17
- ...props
18
- }, ref) => /*#__PURE__*/React.createElement("table", _extends({}, props, {
19
- "data-test": dataTest,
20
- ref: ref,
21
- role: role,
22
- className: _JSXStyle.dynamic([["3140496910", [layout, width, colors.grey300]]]) + " " + (cx(className, {
23
- borderless
24
- }) || "")
25
- }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
26
- id: "3140496910",
27
- dynamic: [layout, width, colors.grey300]
28
- }, [`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;}"])));
9
+ export const Table = /*#__PURE__*/forwardRef((_ref, ref) => {
10
+ let {
11
+ children,
12
+ className,
13
+ dataTest,
14
+ layout,
15
+ role,
16
+ borderless,
17
+ width,
18
+ ...props
19
+ } = _ref;
20
+ return /*#__PURE__*/React.createElement("table", _extends({}, props, {
21
+ "data-test": dataTest,
22
+ ref: ref,
23
+ role: role,
24
+ className: _JSXStyle.dynamic([["3140496910", [layout, width, colors.grey300]]]) + " " + (cx(className, {
25
+ borderless
26
+ }) || "")
27
+ }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
28
+ id: "3140496910",
29
+ dynamic: [layout, width, colors.grey300]
30
+ }, ["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;}"]));
31
+ });
29
32
  Table.displayName = 'Table';
30
33
  Table.defaultProps = {
31
34
  dataTest: 'dhis2-uicore-table',