@dhis2-ui/table 9.2.0 → 9.3.0-alpha.1
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.
- package/build/cjs/data-table/data-table.stories.js +8 -2
- package/build/cjs/data-table/table-elements/__tests__/table-data-cell.test.js +1 -1
- package/build/cjs/data-table/table-elements/__tests__/table-header-cell.test.js +1 -1
- package/build/cjs/data-table/table-elements/table-body.js +3 -3
- package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.js +12 -4
- package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.styles.js +2 -2
- package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.js +3 -3
- package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.styles.js +2 -2
- package/build/cjs/data-table/table-elements/table-header-cell-action.js +3 -3
- package/build/cjs/stacked-table/stacked-table-cell.js +3 -3
- package/build/cjs/stacked-table/stacked-table.stories.js +8 -2
- package/build/es/data-table/data-table.stories.js +4 -1
- package/build/es/data-table/table-elements/__tests__/table-data-cell.test.js +1 -1
- package/build/es/data-table/table-elements/__tests__/table-header-cell.test.js +1 -1
- package/build/es/data-table/table-elements/table-body.js +3 -3
- package/build/es/data-table/table-elements/table-data-cell/table-data-cell.js +12 -4
- package/build/es/data-table/table-elements/table-data-cell/table-data-cell.styles.js +2 -2
- package/build/es/data-table/table-elements/table-header-cell/table-header-cell.js +3 -3
- package/build/es/data-table/table-elements/table-header-cell/table-header-cell.styles.js +2 -2
- package/build/es/data-table/table-elements/table-header-cell-action.js +3 -3
- package/build/es/stacked-table/stacked-table-cell.js +3 -3
- package/build/es/stacked-table/stacked-table.stories.js +4 -1
- package/package.json +3 -3
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
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;
|
|
6
|
+
exports.default = exports.Toolbars = exports.SelectableRows = exports.ScrollingDataTableWithToolbars = exports.RTL = 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;
|
|
7
7
|
|
|
8
8
|
var _box = require("@dhis2-ui/box");
|
|
9
9
|
|
|
@@ -829,4 +829,10 @@ const LongCellContentLargeCells = LongCellContentTemplate.bind({});
|
|
|
829
829
|
exports.LongCellContentLargeCells = LongCellContentLargeCells;
|
|
830
830
|
LongCellContentLargeCells.args = {
|
|
831
831
|
large: 'true'
|
|
832
|
-
};
|
|
832
|
+
};
|
|
833
|
+
|
|
834
|
+
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
835
|
+
dir: "rtl"
|
|
836
|
+
}, /*#__PURE__*/_react.default.createElement(BasicTemplate, args));
|
|
837
|
+
|
|
838
|
+
exports.RTL = RTL;
|
|
@@ -79,7 +79,7 @@ describe('<TableDataCell>', () => {
|
|
|
79
79
|
const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.TableDataCell, {
|
|
80
80
|
left: left
|
|
81
81
|
}));
|
|
82
|
-
expect(wrapper.html()).toContain("
|
|
82
|
+
expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
|
|
83
83
|
});
|
|
84
84
|
it('accepts a muted prop', () => {
|
|
85
85
|
const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableDataCell.TableDataCell, {
|
|
@@ -86,7 +86,7 @@ describe('<TableHeaderCell>', () => {
|
|
|
86
86
|
const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
|
|
87
87
|
left: left
|
|
88
88
|
}));
|
|
89
|
-
expect(wrapper.html()).toContain("
|
|
89
|
+
expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
|
|
90
90
|
});
|
|
91
91
|
it('accepts an muted prop', () => {
|
|
92
92
|
const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_tableHeaderCell.TableHeaderCell, {
|
|
@@ -36,13 +36,13 @@ const TableBody = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
36
36
|
"data-test": dataTest,
|
|
37
37
|
ref: ref,
|
|
38
38
|
role: role,
|
|
39
|
-
className: _style.default.dynamic([["
|
|
39
|
+
className: _style.default.dynamic([["2478922139", [_uiConstants.colors.blue600]]]) + " " + ((0, _classnames.default)(className, {
|
|
40
40
|
loading
|
|
41
41
|
}) || "")
|
|
42
42
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
43
|
-
id: "
|
|
43
|
+
id: "2478922139",
|
|
44
44
|
dynamic: [_uiConstants.colors.blue600]
|
|
45
|
-
}, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;
|
|
45
|
+
}, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:0;background-color:rgba(255,255,255,0.8);}", ".loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);inset-inline-start: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);}}"]));
|
|
46
46
|
});
|
|
47
47
|
exports.TableBody = TableBody;
|
|
48
48
|
TableBody.displayName = 'TableBody';
|
|
@@ -27,7 +27,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
27
27
|
|
|
28
28
|
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); }
|
|
29
29
|
|
|
30
|
+
const rtlCorrespondingAlignments = {
|
|
31
|
+
left: 'right',
|
|
32
|
+
right: 'left',
|
|
33
|
+
center: 'center'
|
|
34
|
+
};
|
|
30
35
|
const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
36
|
+
var _rtlCorrespondingAlig;
|
|
37
|
+
|
|
31
38
|
let {
|
|
32
39
|
active,
|
|
33
40
|
align,
|
|
@@ -50,6 +57,7 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
50
57
|
onClick,
|
|
51
58
|
...props
|
|
52
59
|
} = _ref;
|
|
60
|
+
const rtlAlign = (_rtlCorrespondingAlig = rtlCorrespondingAlignments[align]) !== null && _rtlCorrespondingAlig !== void 0 ? _rtlCorrespondingAlig : align;
|
|
53
61
|
return /*#__PURE__*/_react.default.createElement("td", _extends({}, props, {
|
|
54
62
|
ref: ref,
|
|
55
63
|
colSpan: colSpan,
|
|
@@ -58,7 +66,7 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
58
66
|
"data-test": dataTest,
|
|
59
67
|
role: role,
|
|
60
68
|
scope: scope,
|
|
61
|
-
className: "jsx-".concat(_tableDataCellStyles.default.__hash) + " " + _style.default.dynamic([["
|
|
69
|
+
className: "jsx-".concat(_tableDataCellStyles.default.__hash) + " " + _style.default.dynamic([["836058623", [left, align, width, backgroundColor || _uiConstants.colors.white, rtlAlign, backgroundColor || _uiConstants.colors.teal100, backgroundColor || _uiConstants.colors.grey100, backgroundColor || _uiConstants.colors.grey200, backgroundColor || '#cdeae8']]]) + " " + ((0, _classnames.default)(className, {
|
|
62
70
|
active,
|
|
63
71
|
bordered,
|
|
64
72
|
error,
|
|
@@ -70,9 +78,9 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
70
78
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
71
79
|
id: _tableDataCellStyles.default.__hash
|
|
72
80
|
}, _tableDataCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
73
|
-
id: "
|
|
74
|
-
dynamic: [left, align, width, backgroundColor || _uiConstants.colors.white, backgroundColor || _uiConstants.colors.teal100, backgroundColor || _uiConstants.colors.grey100, backgroundColor || _uiConstants.colors.grey200, backgroundColor || '#cdeae8']
|
|
75
|
-
}, ["td.__jsx-style-dynamic-selector{
|
|
81
|
+
id: "836058623",
|
|
82
|
+
dynamic: [left, align, width, backgroundColor || _uiConstants.colors.white, rtlAlign, backgroundColor || _uiConstants.colors.teal100, backgroundColor || _uiConstants.colors.grey100, backgroundColor || _uiConstants.colors.grey200, backgroundColor || '#cdeae8']
|
|
83
|
+
}, ["td.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || _uiConstants.colors.white, ";}"), ".__jsx-style-dynamic-selector:dir(rtl){text-align:".concat(rtlAlign, ";}"), "tr.selected>td.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || _uiConstants.colors.teal100, ";}"), "tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey100, ";}"), "tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey200, ";}"), "tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || '#cdeae8', ";}")]));
|
|
76
84
|
});
|
|
77
85
|
exports.TableDataCell = TableDataCell;
|
|
78
86
|
TableDataCell.displayName = 'TableDataCell';
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["td.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["td.jsx-533878895{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";color:").concat(_uiConstants.colors.grey900, ";}"), "td.active.jsx-533878895{outline:2px solid ".concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-533878895{border-inline-end:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "td.bordered.jsx-533878895:last-child{border-inline-end:1px solid transparent;}", "td.error.jsx-533878895{color:".concat(_uiConstants.colors.red700, ";}"), "td.muted.jsx-533878895{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "td.valid.jsx-533878895{color:".concat(_uiConstants.colors.green700, ";}"), "td.large.jsx-533878895{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-533878895{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-533878895{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}")];
|
|
11
|
+
_defaultExport.__hash = "533878895";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -61,7 +61,7 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
61
61
|
"data-test": dataTest,
|
|
62
62
|
role: role,
|
|
63
63
|
scope: scope,
|
|
64
|
-
className: "jsx-".concat(_tableHeaderCellStyles.default.__hash) + " " + _style.default.dynamic([["
|
|
64
|
+
className: "jsx-".concat(_tableHeaderCellStyles.default.__hash) + " " + _style.default.dynamic([["2588011372", [left, top, align, width, backgroundColor || _uiConstants.colors.grey200, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey200]]]) + " " + ((0, _classnames.default)(className, {
|
|
65
65
|
active,
|
|
66
66
|
bordered,
|
|
67
67
|
error,
|
|
@@ -75,9 +75,9 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
75
75
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
76
76
|
id: _tableHeaderCellStyles.default.__hash
|
|
77
77
|
}, _tableHeaderCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
78
|
-
id: "
|
|
78
|
+
id: "2588011372",
|
|
79
79
|
dynamic: [left, top, align, width, backgroundColor || _uiConstants.colors.grey200, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey200]
|
|
80
|
-
}, ["th.__jsx-style-dynamic-selector{
|
|
80
|
+
}, ["th.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || _uiConstants.colors.grey200, ";}"), "thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || _uiConstants.colors.grey300, ";}"), "tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey300, ";}"), "tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey200, ";}")]));
|
|
81
81
|
});
|
|
82
82
|
exports.TableHeaderCell = TableHeaderCell;
|
|
83
83
|
TableHeaderCell.displayName = 'TableHeaderCell';
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["th.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["th.jsx-2895298632{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";color:").concat(_uiConstants.colors.grey800, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-2895298632{padding:8px 12px;font-size:13px;}", "th.jsx-2895298632:last-of-type{border-inline-end:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.active.jsx-2895298632{outline:2px solid ".concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-2895298632{border-inline-end:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.bordered.jsx-2895298632:last-child{border-inline-end:1px solid transparent;}", "th.error.jsx-2895298632{color:".concat(_uiConstants.colors.red700, ";}"), "th.muted.jsx-2895298632{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "th.valid.jsx-2895298632{color:".concat(_uiConstants.colors.green700, ";}"), "th.large.jsx-2895298632{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2895298632{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2895298632{z-index:3;}", "tr:last-child th.jsx-2895298632{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-2895298632{border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "tfoot>tr:first-child th.jsx-2895298632{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}")];
|
|
11
|
+
_defaultExport.__hash = "2895298632";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -35,11 +35,11 @@ const TableHeaderCellAction = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
|
|
|
35
35
|
onClick: onClick,
|
|
36
36
|
title: title,
|
|
37
37
|
ref: ref,
|
|
38
|
-
className: _style.default.dynamic([["
|
|
38
|
+
className: _style.default.dynamic([["4225768774", [_uiConstants.colors.grey400]]]) + " " + (className || "")
|
|
39
39
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
40
|
-
id: "
|
|
40
|
+
id: "4225768774",
|
|
41
41
|
dynamic: [_uiConstants.colors.grey400]
|
|
42
|
-
}, ["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-
|
|
42
|
+
}, ["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-inline-start:2px;}", "button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:".concat(_uiConstants.colors.grey400, ";}"), "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"]));
|
|
43
43
|
});
|
|
44
44
|
exports.TableHeaderCellAction = TableHeaderCellAction;
|
|
45
45
|
TableHeaderCellAction.displayName = 'TableHeaderCellAction';
|
|
@@ -35,13 +35,13 @@ const StackedTableCell = _ref => {
|
|
|
35
35
|
colSpan: colSpan,
|
|
36
36
|
rowSpan: rowSpan,
|
|
37
37
|
"data-test": dataTest,
|
|
38
|
-
className: _style.default.dynamic([["
|
|
38
|
+
className: _style.default.dynamic([["1923758240", [_uiConstants.colors.grey300]]]) + " " + (className || "")
|
|
39
39
|
}, /*#__PURE__*/_react.default.createElement(_contentWithTitle.ContentWithTitle, {
|
|
40
40
|
title: realTitle
|
|
41
41
|
}, children), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
42
|
-
id: "
|
|
42
|
+
id: "1923758240",
|
|
43
43
|
dynamic: [_uiConstants.colors.grey300]
|
|
44
|
-
}, ["td.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";padding:0 12px;font-size:14px;width:100%;display:block;}"), "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
|
|
44
|
+
}, ["td.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";padding:0 12px;font-size:14px;width:100%;display:block;}"), "td.__jsx-style-dynamic-selector:dir(rtl){text-align:right;}", "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
exports.StackedTableCell = StackedTableCell;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports._CustomCell = exports.MultipleHeaderRows = exports.LongTitle = exports.LargerTable = exports.HiddenLabelInCell = exports.HiddenLabel = exports.Default = exports.CustomCellTitle = exports.ColspanInHeader = exports.ColspanInBody = void 0;
|
|
6
|
+
exports.default = exports._CustomCell = exports.RTL = exports.MultipleHeaderRows = exports.LongTitle = exports.LargerTable = exports.HiddenLabelInCell = exports.HiddenLabel = exports.Default = exports.CustomCellTitle = exports.ColspanInHeader = exports.ColspanInBody = void 0;
|
|
7
7
|
|
|
8
8
|
var _button = require("@dhis2-ui/button");
|
|
9
9
|
|
|
@@ -114,4 +114,10 @@ const LargerTable = args => /*#__PURE__*/_react.default.createElement(_stackedTa
|
|
|
114
114
|
primary: true
|
|
115
115
|
}, "StackedTable footer button")))));
|
|
116
116
|
|
|
117
|
-
exports.LargerTable = LargerTable;
|
|
117
|
+
exports.LargerTable = LargerTable;
|
|
118
|
+
|
|
119
|
+
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
120
|
+
dir: "rtl"
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(Default, args));
|
|
122
|
+
|
|
123
|
+
exports.RTL = RTL;
|
|
@@ -786,4 +786,7 @@ export const LongCellContent = LongCellContentTemplate.bind({});
|
|
|
786
786
|
export const LongCellContentLargeCells = LongCellContentTemplate.bind({});
|
|
787
787
|
LongCellContentLargeCells.args = {
|
|
788
788
|
large: 'true'
|
|
789
|
-
};
|
|
789
|
+
};
|
|
790
|
+
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
791
|
+
dir: "rtl"
|
|
792
|
+
}, /*#__PURE__*/React.createElement(BasicTemplate, args));
|
|
@@ -71,7 +71,7 @@ describe('<TableDataCell>', () => {
|
|
|
71
71
|
const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
|
|
72
72
|
left: left
|
|
73
73
|
}));
|
|
74
|
-
expect(wrapper.html()).toContain("
|
|
74
|
+
expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
|
|
75
75
|
});
|
|
76
76
|
it('accepts a muted prop', () => {
|
|
77
77
|
const wrapper = shallow( /*#__PURE__*/React.createElement(TableDataCell, {
|
|
@@ -78,7 +78,7 @@ describe('<TableHeaderCell>', () => {
|
|
|
78
78
|
const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
|
|
79
79
|
left: left
|
|
80
80
|
}));
|
|
81
|
-
expect(wrapper.html()).toContain("
|
|
81
|
+
expect(wrapper.html()).toContain("inset-inline-start: ".concat(left, ";"));
|
|
82
82
|
});
|
|
83
83
|
it('accepts an muted prop', () => {
|
|
84
84
|
const wrapper = shallow( /*#__PURE__*/React.createElement(TableHeaderCell, {
|
|
@@ -19,13 +19,13 @@ export const TableBody = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
19
19
|
"data-test": dataTest,
|
|
20
20
|
ref: ref,
|
|
21
21
|
role: role,
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["2478922139", [colors.blue600]]]) + " " + (cx(className, {
|
|
23
23
|
loading
|
|
24
24
|
}) || "")
|
|
25
25
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
26
|
-
id: "
|
|
26
|
+
id: "2478922139",
|
|
27
27
|
dynamic: [colors.blue600]
|
|
28
|
-
}, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;
|
|
28
|
+
}, ["tbody.__jsx-style-dynamic-selector{position:relative;}", ".loading.__jsx-style-dynamic-selector:before{content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:0;background-color:rgba(255,255,255,0.8);}", ".loading.__jsx-style-dynamic-selector:after{content:'';position:absolute;top:calc(50% - 24px);inset-inline-start:calc(50% - 24px);width:48px;height:48px;border:6px solid rgba(110,122,138,0.15);border-bottom-color:".concat(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);}}"]));
|
|
29
29
|
});
|
|
30
30
|
TableBody.displayName = 'TableBody';
|
|
31
31
|
TableBody.defaultProps = {
|
|
@@ -8,7 +8,14 @@ import cx from 'classnames';
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import React, { forwardRef } from 'react';
|
|
10
10
|
import styles from './table-data-cell.styles.js';
|
|
11
|
+
const rtlCorrespondingAlignments = {
|
|
12
|
+
left: 'right',
|
|
13
|
+
right: 'left',
|
|
14
|
+
center: 'center'
|
|
15
|
+
};
|
|
11
16
|
export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
17
|
+
var _rtlCorrespondingAlig;
|
|
18
|
+
|
|
12
19
|
let {
|
|
13
20
|
active,
|
|
14
21
|
align,
|
|
@@ -31,6 +38,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
31
38
|
onClick,
|
|
32
39
|
...props
|
|
33
40
|
} = _ref;
|
|
41
|
+
const rtlAlign = (_rtlCorrespondingAlig = rtlCorrespondingAlignments[align]) !== null && _rtlCorrespondingAlig !== void 0 ? _rtlCorrespondingAlig : align;
|
|
34
42
|
return /*#__PURE__*/React.createElement("td", _extends({}, props, {
|
|
35
43
|
ref: ref,
|
|
36
44
|
colSpan: colSpan,
|
|
@@ -39,7 +47,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
39
47
|
"data-test": dataTest,
|
|
40
48
|
role: role,
|
|
41
49
|
scope: scope,
|
|
42
|
-
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["
|
|
50
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["836058623", [left, align, width, backgroundColor || colors.white, rtlAlign, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']]]) + " " + (cx(className, {
|
|
43
51
|
active,
|
|
44
52
|
bordered,
|
|
45
53
|
error,
|
|
@@ -51,9 +59,9 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
51
59
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
52
60
|
id: styles.__hash
|
|
53
61
|
}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
54
|
-
id: "
|
|
55
|
-
dynamic: [left, align, width, backgroundColor || colors.white, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']
|
|
56
|
-
}, ["td.__jsx-style-dynamic-selector{
|
|
62
|
+
id: "836058623",
|
|
63
|
+
dynamic: [left, align, width, backgroundColor || colors.white, rtlAlign, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']
|
|
64
|
+
}, ["td.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.white, ";}"), ".__jsx-style-dynamic-selector:dir(rtl){text-align:".concat(rtlAlign, ";}"), "tr.selected>td.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.teal100, ";}"), "tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey100, ";}"), "tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}"), "tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || '#cdeae8', ";}")]));
|
|
57
65
|
});
|
|
58
66
|
TableDataCell.displayName = 'TableDataCell';
|
|
59
67
|
TableDataCell.defaultProps = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["td.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["td.jsx-533878895{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey900, ";}"), "td.active.jsx-533878895{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-533878895{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "td.bordered.jsx-533878895:last-child{border-inline-end:1px solid transparent;}", "td.error.jsx-533878895{color:".concat(colors.red700, ";}"), "td.muted.jsx-533878895{color:".concat(colors.grey700, ";font-style:italic;}"), "td.valid.jsx-533878895{color:".concat(colors.green700, ";}"), "td.large.jsx-533878895{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-533878895{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-533878895{border-top:1px solid ".concat(colors.grey300, ";}")];
|
|
3
|
+
_defaultExport.__hash = "533878895";
|
|
4
4
|
export default _defaultExport;
|
|
@@ -42,7 +42,7 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
42
42
|
"data-test": dataTest,
|
|
43
43
|
role: role,
|
|
44
44
|
scope: scope,
|
|
45
|
-
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["
|
|
45
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["2588011372", [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]]]) + " " + (cx(className, {
|
|
46
46
|
active,
|
|
47
47
|
bordered,
|
|
48
48
|
error,
|
|
@@ -56,9 +56,9 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
56
56
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
57
57
|
id: styles.__hash
|
|
58
58
|
}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
59
|
-
id: "
|
|
59
|
+
id: "2588011372",
|
|
60
60
|
dynamic: [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]
|
|
61
|
-
}, ["th.__jsx-style-dynamic-selector{
|
|
61
|
+
}, ["th.__jsx-style-dynamic-selector{inset-inline-start:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.grey200, ";}"), "thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}")]));
|
|
62
62
|
});
|
|
63
63
|
TableHeaderCell.displayName = 'TableHeaderCell';
|
|
64
64
|
TableHeaderCell.defaultProps = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["th.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["th.jsx-2895298632{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey800, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-2895298632{padding:8px 12px;font-size:13px;}", "th.jsx-2895298632:last-of-type{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "th.active.jsx-2895298632{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-2895298632{border-inline-end:1px solid ".concat(colors.grey300, ";}"), "th.bordered.jsx-2895298632:last-child{border-inline-end:1px solid transparent;}", "th.error.jsx-2895298632{color:".concat(colors.red700, ";}"), "th.muted.jsx-2895298632{color:".concat(colors.grey700, ";font-style:italic;}"), "th.valid.jsx-2895298632{color:".concat(colors.green700, ";}"), "th.large.jsx-2895298632{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2895298632{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2895298632{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2895298632{z-index:3;}", "tr:last-child th.jsx-2895298632{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-2895298632{border-bottom:1px solid ".concat(colors.grey300, ";}"), "tfoot>tr:first-child th.jsx-2895298632{border-top:1px solid ".concat(colors.grey300, ";}")];
|
|
3
|
+
_defaultExport.__hash = "2895298632";
|
|
4
4
|
export default _defaultExport;
|
|
@@ -19,11 +19,11 @@ export const TableHeaderCellAction = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
19
19
|
onClick: onClick,
|
|
20
20
|
title: title,
|
|
21
21
|
ref: ref,
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["4225768774", [colors.grey400]]]) + " " + (className || "")
|
|
23
23
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
24
|
-
id: "
|
|
24
|
+
id: "4225768774",
|
|
25
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-
|
|
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-inline-start: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
27
|
});
|
|
28
28
|
TableHeaderCellAction.displayName = 'TableHeaderCellAction';
|
|
29
29
|
TableHeaderCellAction.defaultProps = {
|
|
@@ -21,13 +21,13 @@ export const StackedTableCell = _ref => {
|
|
|
21
21
|
colSpan: colSpan,
|
|
22
22
|
rowSpan: rowSpan,
|
|
23
23
|
"data-test": dataTest,
|
|
24
|
-
className: _JSXStyle.dynamic([["
|
|
24
|
+
className: _JSXStyle.dynamic([["1923758240", [colors.grey300]]]) + " " + (className || "")
|
|
25
25
|
}, /*#__PURE__*/React.createElement(ContentWithTitle, {
|
|
26
26
|
title: realTitle
|
|
27
27
|
}, children), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
28
|
-
id: "
|
|
28
|
+
id: "1923758240",
|
|
29
29
|
dynamic: [colors.grey300]
|
|
30
|
-
}, ["td.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(colors.grey300, ";padding:0 12px;font-size:14px;width:100%;display:block;}"), "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
|
|
30
|
+
}, ["td.__jsx-style-dynamic-selector{border-bottom:1px solid ".concat(colors.grey300, ";padding:0 12px;font-size:14px;width:100%;display:block;}"), "td.__jsx-style-dynamic-selector:dir(rtl){text-align:right;}", "td.__jsx-style-dynamic-selector:last-child{border-bottom:0;}"]));
|
|
31
31
|
};
|
|
32
32
|
StackedTableCell.propTypes = {
|
|
33
33
|
children: PropTypes.node,
|
|
@@ -64,4 +64,7 @@ export const LargerTable = args => /*#__PURE__*/React.createElement(StackedTable
|
|
|
64
64
|
hideTitle: true
|
|
65
65
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
66
66
|
primary: true
|
|
67
|
-
}, "StackedTable footer button")))));
|
|
67
|
+
}, "StackedTable footer button")))));
|
|
68
|
+
export const RTL = args => /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
dir: "rtl"
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Default, args));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/table",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.3.0-alpha.1",
|
|
4
4
|
"description": "UI Table",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@dhis2/prop-types": "^3.1.2",
|
|
37
|
-
"@dhis2/ui-constants": "9.
|
|
38
|
-
"@dhis2/ui-icons": "9.
|
|
37
|
+
"@dhis2/ui-constants": "9.3.0-alpha.1",
|
|
38
|
+
"@dhis2/ui-icons": "9.3.0-alpha.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|