@atlaskit/table 0.2.1 → 0.2.3
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/CHANGELOG.md +12 -0
- package/dist/cjs/body.js +16 -35
- package/dist/cjs/head-cell.js +5 -11
- package/dist/cjs/hooks/selection-provider.js +1 -9
- package/dist/cjs/hooks/use-row-id.js +2 -5
- package/dist/cjs/hooks/use-selectable.js +13 -29
- package/dist/cjs/hooks/use-sorting.js +6 -17
- package/dist/cjs/hooks/use-table-body.js +1 -7
- package/dist/cjs/hooks/use-table.js +4 -13
- package/dist/cjs/index.js +0 -8
- package/dist/cjs/row.js +8 -25
- package/dist/cjs/selectable-cell.js +9 -21
- package/dist/cjs/sortable-column.js +33 -44
- package/dist/cjs/table.js +8 -22
- package/dist/cjs/thead.js +12 -29
- package/dist/cjs/ui/base-cell.js +17 -21
- package/dist/cjs/ui/bulk-action-overlay.js +2 -5
- package/dist/cjs/ui/index.js +0 -9
- package/dist/cjs/ui/selectable-cell.js +4 -7
- package/dist/cjs/ui/sort-icon.js +2 -14
- package/dist/cjs/ui/table.js +2 -5
- package/dist/cjs/ui/tbody.js +2 -5
- package/dist/cjs/ui/td.js +3 -10
- package/dist/cjs/ui/th.js +8 -11
- package/dist/cjs/ui/thead.js +2 -4
- package/dist/cjs/ui/tr.js +6 -11
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/body.js +11 -8
- package/dist/es2019/head-cell.js +2 -3
- package/dist/es2019/hooks/selection-provider.js +1 -2
- package/dist/es2019/hooks/use-row-id.js +2 -2
- package/dist/es2019/hooks/use-selectable.js +4 -13
- package/dist/es2019/hooks/use-sorting.js +0 -4
- package/dist/es2019/hooks/use-table-body.js +1 -1
- package/dist/es2019/hooks/use-table.js +3 -4
- package/dist/es2019/row.js +2 -4
- package/dist/es2019/selectable-cell.js +3 -3
- package/dist/es2019/sortable-column.js +24 -26
- package/dist/es2019/table.js +0 -2
- package/dist/es2019/thead.js +5 -8
- package/dist/es2019/ui/base-cell.js +5 -4
- package/dist/es2019/ui/bulk-action-overlay.js +2 -1
- package/dist/es2019/ui/selectable-cell.js +2 -1
- package/dist/es2019/ui/sort-icon.js +1 -5
- package/dist/es2019/ui/table.js +1 -1
- package/dist/es2019/ui/tbody.js +2 -2
- package/dist/es2019/ui/td.js +4 -3
- package/dist/es2019/ui/th.js +4 -3
- package/dist/es2019/ui/thead.js +2 -1
- package/dist/es2019/ui/tr.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/body.js +16 -21
- package/dist/esm/head-cell.js +7 -8
- package/dist/esm/hooks/selection-provider.js +1 -2
- package/dist/esm/hooks/use-row-id.js +2 -2
- package/dist/esm/hooks/use-selectable.js +13 -25
- package/dist/esm/hooks/use-sorting.js +6 -12
- package/dist/esm/hooks/use-table-body.js +1 -1
- package/dist/esm/hooks/use-table.js +4 -5
- package/dist/esm/row.js +8 -13
- package/dist/esm/selectable-cell.js +8 -10
- package/dist/esm/sortable-column.js +33 -36
- package/dist/esm/table.js +8 -12
- package/dist/esm/thead.js +12 -18
- package/dist/esm/ui/base-cell.js +16 -15
- package/dist/esm/ui/bulk-action-overlay.js +2 -1
- package/dist/esm/ui/selectable-cell.js +4 -3
- package/dist/esm/ui/sort-icon.js +3 -8
- package/dist/esm/ui/table.js +3 -3
- package/dist/esm/ui/tbody.js +2 -2
- package/dist/esm/ui/td.js +5 -5
- package/dist/esm/ui/th.js +8 -7
- package/dist/esm/ui/thead.js +2 -1
- package/dist/esm/ui/tr.js +6 -6
- package/dist/esm/version.json +1 -1
- package/dist/types/ui/base-cell.d.ts +7 -1
- package/dist/types/ui/th.d.ts +6 -2
- package/package.json +9 -6
- package/constellation/index/examples.mdx +0 -19
- package/constellation/index/props.mdx +0 -17
|
@@ -1,41 +1,30 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _react = require("react");
|
|
15
|
-
|
|
16
11
|
var _react2 = require("@emotion/react");
|
|
17
|
-
|
|
18
12
|
var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
|
|
19
|
-
|
|
13
|
+
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
20
14
|
var _selectionProvider = require("./hooks/selection-provider");
|
|
21
|
-
|
|
22
15
|
var _useRowId = require("./hooks/use-row-id");
|
|
23
|
-
|
|
24
16
|
var Primitives = _interopRequireWildcard(require("./ui"));
|
|
25
|
-
|
|
26
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
|
|
28
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
-
|
|
30
19
|
/** @jsx jsx */
|
|
20
|
+
|
|
31
21
|
var SelectableCell = function SelectableCell() {
|
|
32
22
|
var _useSelection = (0, _selectionProvider.useSelection)(),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
23
|
+
_useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
|
|
24
|
+
_useSelection2$ = _useSelection2[0],
|
|
25
|
+
allChecked = _useSelection2$.allChecked,
|
|
26
|
+
checked = _useSelection2$.checked,
|
|
27
|
+
toggleSelection = _useSelection2[1].toggleSelection;
|
|
39
28
|
var idx = (0, _useRowId.useRowId)();
|
|
40
29
|
var isChecked = (0, _react.useMemo)(function () {
|
|
41
30
|
return allChecked || checked.includes(idx);
|
|
@@ -47,10 +36,9 @@ var SelectableCell = function SelectableCell() {
|
|
|
47
36
|
as: "td"
|
|
48
37
|
}, (0, _react2.jsx)(_checkbox.default, {
|
|
49
38
|
isChecked: isChecked,
|
|
50
|
-
onChange: onChange
|
|
39
|
+
onChange: onChange,
|
|
40
|
+
label: (0, _react2.jsx)(_visuallyHidden.default, null, "Select row ", idx + 1)
|
|
51
41
|
}));
|
|
52
42
|
};
|
|
53
|
-
|
|
54
43
|
var _default = /*#__PURE__*/(0, _react.memo)(SelectableCell);
|
|
55
|
-
|
|
56
44
|
exports.default = _default;
|
|
@@ -1,30 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
|
|
14
10
|
var _react = require("react");
|
|
15
|
-
|
|
16
11
|
var _react2 = require("@emotion/react");
|
|
17
|
-
|
|
18
12
|
var _button = _interopRequireDefault(require("@atlaskit/button"));
|
|
19
|
-
|
|
20
13
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
21
|
-
|
|
22
14
|
var _useTable2 = require("./hooks/use-table");
|
|
23
|
-
|
|
24
15
|
var _ui = require("./ui");
|
|
25
|
-
|
|
26
16
|
var _excluded = ["name", "testId", "onClick", "children"];
|
|
27
|
-
|
|
28
17
|
/**
|
|
29
18
|
* TODO these need to be i18n supported
|
|
30
19
|
*/
|
|
@@ -49,57 +38,57 @@ var overrideStyles = (0, _react2.css)({
|
|
|
49
38
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
50
39
|
paddingInline: "2px !important"
|
|
51
40
|
});
|
|
41
|
+
|
|
52
42
|
/**
|
|
53
43
|
* __SortableColumn__
|
|
54
44
|
*
|
|
55
45
|
* SortableColumn is used in place of the default Column when sorting is desired.
|
|
56
46
|
*/
|
|
57
|
-
|
|
58
47
|
var SortableColumn = function SortableColumn(_ref) {
|
|
59
48
|
var name = _ref.name,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
49
|
+
testId = _ref.testId,
|
|
50
|
+
onClick = _ref.onClick,
|
|
51
|
+
children = _ref.children,
|
|
52
|
+
other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
65
53
|
var _useTable = (0, _useTable2.useTable)(),
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
sortKey = _useTable.sortKey,
|
|
55
|
+
sortDirection = _useTable.sortDirection,
|
|
56
|
+
setSortState = _useTable.setSortState;
|
|
70
57
|
var getSortMessage = function getSortMessage() {
|
|
71
58
|
if (sortKey === name) {
|
|
72
59
|
// TODO: Change message depending on data type (string/number)
|
|
73
60
|
return sortingMessages[sortDirection || 'unsorted'].string;
|
|
74
61
|
}
|
|
75
|
-
|
|
76
62
|
return sortingMessages.unsorted.string;
|
|
77
63
|
};
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
var updateSortState = (0, _react.useCallback)(
|
|
65
|
+
// @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
|
|
80
66
|
function () {
|
|
81
67
|
return setSortState(name);
|
|
82
68
|
}, [setSortState, name]);
|
|
83
|
-
return (
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
69
|
+
return (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
|
|
70
|
+
testId: testId,
|
|
71
|
+
sortDirection: sortKey === name ? sortDirection : 'none'
|
|
72
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
73
|
+
}, other), (0, _react2.jsx)(_tooltip.default, {
|
|
74
|
+
content: getSortMessage(),
|
|
75
|
+
position: "top"
|
|
76
|
+
}, function (tooltipProps) {
|
|
77
|
+
return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
|
|
78
|
+
testId: "".concat(testId, "--button"),
|
|
79
|
+
spacing: "compact",
|
|
80
|
+
appearance: "subtle",
|
|
81
|
+
iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
|
|
82
|
+
name: name
|
|
83
|
+
})
|
|
84
|
+
}, tooltipProps, {
|
|
85
|
+
onClick: updateSortState,
|
|
86
|
+
css: overrideStyles
|
|
87
|
+
// TODO: i18n support for this attr
|
|
88
|
+
,
|
|
89
|
+
"aria-roledescription": "Column sort button"
|
|
90
|
+
}), children);
|
|
91
|
+
}));
|
|
102
92
|
};
|
|
103
|
-
|
|
104
93
|
var _default = SortableColumn;
|
|
105
94
|
exports.default = _default;
|
package/dist/cjs/table.js
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _react2 = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _selectionProvider = _interopRequireDefault(require("./hooks/selection-provider"));
|
|
17
|
-
|
|
18
12
|
var _useSorting2 = require("./hooks/use-sorting");
|
|
19
|
-
|
|
20
13
|
var _useTable = require("./hooks/use-table");
|
|
21
|
-
|
|
22
14
|
var Primitives = _interopRequireWildcard(require("./ui"));
|
|
23
|
-
|
|
24
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
-
|
|
26
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
-
|
|
28
17
|
/** @jsx jsx */
|
|
29
18
|
|
|
30
19
|
/**
|
|
@@ -36,17 +25,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
36
25
|
*/
|
|
37
26
|
function Table(_ref) {
|
|
38
27
|
var children = _ref.children,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
28
|
+
isSelectable = _ref.isSelectable,
|
|
29
|
+
_ref$sortKey = _ref.sortKey,
|
|
30
|
+
sortKey = _ref$sortKey === void 0 ? 'unset' : _ref$sortKey,
|
|
31
|
+
testId = _ref.testId;
|
|
44
32
|
var _useSorting = (0, _useSorting2.useSorting)(sortKey),
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
33
|
+
localSortKey = _useSorting.sortKey,
|
|
34
|
+
sortDirection = _useSorting.sortDirection,
|
|
35
|
+
setSortState = _useSorting.setSortState,
|
|
36
|
+
sortFn = _useSorting.sortFn;
|
|
50
37
|
var tableProviderState = (0, _react.useMemo)(function () {
|
|
51
38
|
return {
|
|
52
39
|
isSelectable: isSelectable,
|
|
@@ -62,6 +49,5 @@ function Table(_ref) {
|
|
|
62
49
|
testId: testId
|
|
63
50
|
}, isSelectable ? (0, _react2.jsx)(_selectionProvider.default, null, children) : children));
|
|
64
51
|
}
|
|
65
|
-
|
|
66
52
|
var _default = Table;
|
|
67
53
|
exports.default = _default;
|
package/dist/cjs/thead.js
CHANGED
|
@@ -1,74 +1,57 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _react = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
|
|
17
|
-
|
|
18
12
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
19
|
-
|
|
20
13
|
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
21
|
-
|
|
22
14
|
var _selectionProvider = require("./hooks/selection-provider");
|
|
23
|
-
|
|
24
15
|
var _useTable2 = require("./hooks/use-table");
|
|
25
|
-
|
|
26
16
|
var Primitives = _interopRequireWildcard(require("./ui"));
|
|
27
|
-
|
|
28
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
-
|
|
30
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
32
19
|
/** @jsx jsx */
|
|
20
|
+
|
|
33
21
|
var THead = function THead(_ref) {
|
|
34
22
|
var actions = _ref.actions,
|
|
35
|
-
|
|
36
|
-
|
|
23
|
+
children = _ref.children;
|
|
37
24
|
var _useTable = (0, _useTable2.useTable)(),
|
|
38
|
-
|
|
39
|
-
|
|
25
|
+
isSelectable = _useTable.isSelectable;
|
|
40
26
|
var _useSelection = (0, _selectionProvider.useSelection)(),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
27
|
+
_useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
|
|
28
|
+
state = _useSelection2[0],
|
|
29
|
+
_useSelection2$ = _useSelection2[1],
|
|
30
|
+
setAll = _useSelection2$.setAll,
|
|
31
|
+
removeAll = _useSelection2$.removeAll;
|
|
47
32
|
if (!isSelectable) {
|
|
48
33
|
return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
|
|
49
34
|
isBodyRow: false
|
|
50
35
|
}, children));
|
|
51
36
|
}
|
|
52
|
-
|
|
53
37
|
var isChecked = state.allChecked || state.anyChecked;
|
|
54
38
|
return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
|
|
55
39
|
isBodyRow: false
|
|
56
40
|
}, (0, _react.jsx)(Primitives.SelectableCell, {
|
|
57
41
|
as: "th"
|
|
58
42
|
}, (0, _react.jsx)(_checkbox.default, {
|
|
59
|
-
|
|
43
|
+
label: (0, _react.jsx)(_visuallyHidden.default, {
|
|
44
|
+
id: "select-all"
|
|
45
|
+
}, "Select all rows"),
|
|
60
46
|
onChange: isChecked ? removeAll : setAll,
|
|
61
47
|
isChecked: isChecked,
|
|
62
48
|
isIndeterminate: state.anyChecked && !state.allChecked
|
|
63
|
-
}), (0, _react.jsx)(
|
|
64
|
-
id: "select-all"
|
|
65
|
-
}, "Select all rows")), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
|
|
49
|
+
})), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
|
|
66
50
|
color: "color.text",
|
|
67
51
|
fontWeight: "medium"
|
|
68
52
|
}, state.checked.length, " selected"), actions && (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
|
|
69
53
|
gap: "space.100"
|
|
70
54
|
}, actions(state.checked)))));
|
|
71
55
|
};
|
|
72
|
-
|
|
73
56
|
var _default = THead;
|
|
74
57
|
exports.default = _default;
|
package/dist/cjs/ui/base-cell.js
CHANGED
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.BaseCell = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _react2 = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
|
|
15
|
-
|
|
16
11
|
var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
|
|
17
|
-
|
|
18
12
|
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
19
|
-
|
|
20
13
|
/** @jsx jsx */
|
|
14
|
+
|
|
21
15
|
var alignMap = {
|
|
22
16
|
text: 'flexStart',
|
|
23
17
|
number: 'flexEnd',
|
|
@@ -33,6 +27,7 @@ var baseResetStyles = (0, _react2.css)({
|
|
|
33
27
|
paddingRight: "var(--ds-space-100, 8px)"
|
|
34
28
|
}
|
|
35
29
|
});
|
|
30
|
+
|
|
36
31
|
/**
|
|
37
32
|
* __BaseCell__
|
|
38
33
|
*
|
|
@@ -40,21 +35,21 @@ var baseResetStyles = (0, _react2.css)({
|
|
|
40
35
|
*
|
|
41
36
|
* Basic cell element.
|
|
42
37
|
*/
|
|
43
|
-
|
|
44
38
|
var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
45
39
|
var testId = _ref.testId,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
40
|
+
as = _ref.as,
|
|
41
|
+
children = _ref.children,
|
|
42
|
+
_ref$align = _ref.align,
|
|
43
|
+
align = _ref$align === void 0 ? 'text' : _ref$align,
|
|
44
|
+
_ref$paddingBlock = _ref.paddingBlock,
|
|
45
|
+
paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
|
|
46
|
+
_ref$paddingInline = _ref.paddingInline,
|
|
47
|
+
paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
|
|
48
|
+
backgroundColor = _ref.backgroundColor,
|
|
49
|
+
scope = _ref.scope,
|
|
50
|
+
width = _ref.width,
|
|
51
|
+
className = _ref.className,
|
|
52
|
+
sortDirection = _ref.sortDirection;
|
|
58
53
|
return (0, _react2.jsx)(_box.default, {
|
|
59
54
|
css: baseResetStyles,
|
|
60
55
|
ref: ref,
|
|
@@ -67,7 +62,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
67
62
|
className: className,
|
|
68
63
|
UNSAFE_style: width ? {
|
|
69
64
|
width: width
|
|
70
|
-
} : undefined
|
|
65
|
+
} : undefined,
|
|
66
|
+
"aria-sort": sortDirection
|
|
71
67
|
}, (0, _react2.jsx)(_inline.default, {
|
|
72
68
|
justifyContent: alignMap[align],
|
|
73
69
|
gap: "space.0"
|
|
@@ -4,24 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.BulkActionOverlay = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
var _dsExplorations = require("@atlaskit/ds-explorations");
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var overlayStyles = (0, _react.css)({
|
|
14
12
|
top: 0,
|
|
15
13
|
right: 0,
|
|
16
14
|
bottom: 0,
|
|
17
15
|
left: 32
|
|
18
16
|
});
|
|
17
|
+
|
|
19
18
|
/**
|
|
20
19
|
* __Bulk action overlay__
|
|
21
20
|
*
|
|
22
21
|
* A bulk action overlay is used to conditionally render when a user makes a row selection
|
|
23
22
|
*/
|
|
24
|
-
|
|
25
23
|
var BulkActionOverlay = function BulkActionOverlay(_ref) {
|
|
26
24
|
var children = _ref.children;
|
|
27
25
|
return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, {
|
|
@@ -35,5 +33,4 @@ var BulkActionOverlay = function BulkActionOverlay(_ref) {
|
|
|
35
33
|
alignItems: "center"
|
|
36
34
|
}, children));
|
|
37
35
|
};
|
|
38
|
-
|
|
39
36
|
exports.BulkActionOverlay = BulkActionOverlay;
|
package/dist/cjs/ui/index.js
CHANGED
|
@@ -57,21 +57,12 @@ Object.defineProperty(exports, "Table", {
|
|
|
57
57
|
return _table.Table;
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
-
|
|
61
60
|
var _table = require("./table");
|
|
62
|
-
|
|
63
61
|
var _tbody = require("./tbody");
|
|
64
|
-
|
|
65
62
|
var _tr = require("./tr");
|
|
66
|
-
|
|
67
63
|
var _td = require("./td");
|
|
68
|
-
|
|
69
64
|
var _th = require("./th");
|
|
70
|
-
|
|
71
65
|
var _selectableCell = require("./selectable-cell");
|
|
72
|
-
|
|
73
66
|
var _thead = require("./thead");
|
|
74
|
-
|
|
75
67
|
var _bulkActionOverlay = require("./bulk-action-overlay");
|
|
76
|
-
|
|
77
68
|
var _sortIcon = require("./sort-icon");
|
|
@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SelectableCell = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
var _baseCell = require("./base-cell");
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var spacingStyles = (0, _react.css)({
|
|
14
12
|
width: 32,
|
|
15
13
|
padding: "var(--ds-space-0, 0px)",
|
|
@@ -20,20 +18,19 @@ var spacingStyles = (0, _react.css)({
|
|
|
20
18
|
paddingLeft: '8px !important'
|
|
21
19
|
}
|
|
22
20
|
});
|
|
21
|
+
|
|
23
22
|
/**
|
|
24
23
|
* __Selectable cell__
|
|
25
24
|
*
|
|
26
25
|
* A selectable cell primitive designed to be used for light weight composition.
|
|
27
26
|
*/
|
|
28
|
-
|
|
29
27
|
var SelectableCell = function SelectableCell(_ref) {
|
|
30
28
|
var children = _ref.children,
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
_ref$as = _ref.as,
|
|
30
|
+
as = _ref$as === void 0 ? 'td' : _ref$as;
|
|
33
31
|
return (0, _react.jsx)(_baseCell.BaseCell, {
|
|
34
32
|
as: as,
|
|
35
33
|
css: spacingStyles
|
|
36
34
|
}, children);
|
|
37
35
|
};
|
|
38
|
-
|
|
39
36
|
exports.SelectableCell = SelectableCell;
|
package/dist/cjs/ui/sort-icon.js
CHANGED
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.SortIcon = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _react2 = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
|
|
15
|
-
|
|
16
11
|
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
|
|
17
|
-
|
|
18
12
|
var _useTable2 = require("../hooks/use-table");
|
|
19
|
-
|
|
20
13
|
/* eslint-disable no-unused-vars */
|
|
21
|
-
|
|
22
14
|
/** @jsx jsx */
|
|
23
15
|
|
|
24
16
|
/**
|
|
@@ -28,11 +20,9 @@ var _useTable2 = require("../hooks/use-table");
|
|
|
28
20
|
*/
|
|
29
21
|
var SortIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
30
22
|
var name = _ref.name;
|
|
31
|
-
|
|
32
23
|
var _useTable = (0, _useTable2.useTable)(),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
24
|
+
sortKey = _useTable.sortKey,
|
|
25
|
+
sortDirection = _useTable.sortDirection;
|
|
36
26
|
if (sortKey === name) {
|
|
37
27
|
switch (sortDirection) {
|
|
38
28
|
case 'ascending':
|
|
@@ -41,7 +31,6 @@ var SortIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
41
31
|
label: "",
|
|
42
32
|
primaryColor: "inherit"
|
|
43
33
|
});
|
|
44
|
-
|
|
45
34
|
case 'descending':
|
|
46
35
|
return (0, _react2.jsx)(_arrowDown.default, {
|
|
47
36
|
size: "small",
|
|
@@ -50,7 +39,6 @@ var SortIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
50
39
|
});
|
|
51
40
|
}
|
|
52
41
|
}
|
|
53
|
-
|
|
54
42
|
return null;
|
|
55
43
|
});
|
|
56
44
|
exports.SortIcon = SortIcon;
|
package/dist/cjs/ui/table.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Table = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
/** @jsx jsx */
|
|
11
9
|
|
|
12
10
|
/**
|
|
@@ -21,11 +19,10 @@ var _react = require("@emotion/react");
|
|
|
21
19
|
*/
|
|
22
20
|
var Table = function Table(_ref) {
|
|
23
21
|
var children = _ref.children,
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
testId = _ref.testId,
|
|
23
|
+
summary = _ref.summary;
|
|
26
24
|
return (0, _react.jsx)("table", {
|
|
27
25
|
"data-testid": testId
|
|
28
26
|
}, summary && (0, _react.jsx)("caption", null, summary), children);
|
|
29
27
|
};
|
|
30
|
-
|
|
31
28
|
exports.Table = Table;
|
package/dist/cjs/ui/tbody.js
CHANGED
|
@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.TBody = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
/* eslint-disable @repo/internal/react/no-clone-element */
|
|
11
|
-
|
|
12
9
|
/** @jsx jsx */
|
|
10
|
+
|
|
13
11
|
var bodyStyles = (0, _react.css)({
|
|
14
12
|
position: 'relative',
|
|
15
13
|
border: 'none',
|
|
@@ -21,18 +19,17 @@ var bodyStyles = (0, _react.css)({
|
|
|
21
19
|
pointerEvents: 'none'
|
|
22
20
|
}
|
|
23
21
|
});
|
|
22
|
+
|
|
24
23
|
/**
|
|
25
24
|
* __TBody__
|
|
26
25
|
* @primitive
|
|
27
26
|
*/
|
|
28
|
-
|
|
29
27
|
var TBody = function TBody(_ref) {
|
|
30
28
|
var children = _ref.children;
|
|
31
29
|
return (0, _react.jsx)("tbody", {
|
|
32
30
|
css: bodyStyles
|
|
33
31
|
}, children);
|
|
34
32
|
};
|
|
35
|
-
|
|
36
33
|
exports.TBody = TBody;
|
|
37
34
|
var _default = TBody;
|
|
38
35
|
exports.default = _default;
|
package/dist/cjs/ui/td.js
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.TD = void 0;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
|
|
14
10
|
var _react = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _baseCell = require("./base-cell");
|
|
17
|
-
|
|
18
12
|
var _excluded = ["testId"];
|
|
19
|
-
|
|
20
13
|
/**
|
|
21
14
|
* __Cell__
|
|
22
15
|
*
|
|
@@ -26,13 +19,13 @@ var _excluded = ["testId"];
|
|
|
26
19
|
*/
|
|
27
20
|
var TD = function TD(_ref) {
|
|
28
21
|
var testId = _ref.testId,
|
|
29
|
-
|
|
30
|
-
return (
|
|
22
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
23
|
+
return (
|
|
24
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
31
25
|
(0, _react.jsx)(_baseCell.BaseCell, (0, _extends2.default)({
|
|
32
26
|
as: "td",
|
|
33
27
|
testId: testId
|
|
34
28
|
}, props))
|
|
35
29
|
);
|
|
36
30
|
};
|
|
37
|
-
|
|
38
31
|
exports.TD = TD;
|