@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.
Files changed (80) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/body.js +16 -35
  3. package/dist/cjs/head-cell.js +5 -11
  4. package/dist/cjs/hooks/selection-provider.js +1 -9
  5. package/dist/cjs/hooks/use-row-id.js +2 -5
  6. package/dist/cjs/hooks/use-selectable.js +13 -29
  7. package/dist/cjs/hooks/use-sorting.js +6 -17
  8. package/dist/cjs/hooks/use-table-body.js +1 -7
  9. package/dist/cjs/hooks/use-table.js +4 -13
  10. package/dist/cjs/index.js +0 -8
  11. package/dist/cjs/row.js +8 -25
  12. package/dist/cjs/selectable-cell.js +9 -21
  13. package/dist/cjs/sortable-column.js +33 -44
  14. package/dist/cjs/table.js +8 -22
  15. package/dist/cjs/thead.js +12 -29
  16. package/dist/cjs/ui/base-cell.js +17 -21
  17. package/dist/cjs/ui/bulk-action-overlay.js +2 -5
  18. package/dist/cjs/ui/index.js +0 -9
  19. package/dist/cjs/ui/selectable-cell.js +4 -7
  20. package/dist/cjs/ui/sort-icon.js +2 -14
  21. package/dist/cjs/ui/table.js +2 -5
  22. package/dist/cjs/ui/tbody.js +2 -5
  23. package/dist/cjs/ui/td.js +3 -10
  24. package/dist/cjs/ui/th.js +8 -11
  25. package/dist/cjs/ui/thead.js +2 -4
  26. package/dist/cjs/ui/tr.js +6 -11
  27. package/dist/cjs/version.json +1 -1
  28. package/dist/es2019/body.js +11 -8
  29. package/dist/es2019/head-cell.js +2 -3
  30. package/dist/es2019/hooks/selection-provider.js +1 -2
  31. package/dist/es2019/hooks/use-row-id.js +2 -2
  32. package/dist/es2019/hooks/use-selectable.js +4 -13
  33. package/dist/es2019/hooks/use-sorting.js +0 -4
  34. package/dist/es2019/hooks/use-table-body.js +1 -1
  35. package/dist/es2019/hooks/use-table.js +3 -4
  36. package/dist/es2019/row.js +2 -4
  37. package/dist/es2019/selectable-cell.js +3 -3
  38. package/dist/es2019/sortable-column.js +24 -26
  39. package/dist/es2019/table.js +0 -2
  40. package/dist/es2019/thead.js +5 -8
  41. package/dist/es2019/ui/base-cell.js +5 -4
  42. package/dist/es2019/ui/bulk-action-overlay.js +2 -1
  43. package/dist/es2019/ui/selectable-cell.js +2 -1
  44. package/dist/es2019/ui/sort-icon.js +1 -5
  45. package/dist/es2019/ui/table.js +1 -1
  46. package/dist/es2019/ui/tbody.js +2 -2
  47. package/dist/es2019/ui/td.js +4 -3
  48. package/dist/es2019/ui/th.js +4 -3
  49. package/dist/es2019/ui/thead.js +2 -1
  50. package/dist/es2019/ui/tr.js +2 -2
  51. package/dist/es2019/version.json +1 -1
  52. package/dist/esm/body.js +16 -21
  53. package/dist/esm/head-cell.js +7 -8
  54. package/dist/esm/hooks/selection-provider.js +1 -2
  55. package/dist/esm/hooks/use-row-id.js +2 -2
  56. package/dist/esm/hooks/use-selectable.js +13 -25
  57. package/dist/esm/hooks/use-sorting.js +6 -12
  58. package/dist/esm/hooks/use-table-body.js +1 -1
  59. package/dist/esm/hooks/use-table.js +4 -5
  60. package/dist/esm/row.js +8 -13
  61. package/dist/esm/selectable-cell.js +8 -10
  62. package/dist/esm/sortable-column.js +33 -36
  63. package/dist/esm/table.js +8 -12
  64. package/dist/esm/thead.js +12 -18
  65. package/dist/esm/ui/base-cell.js +16 -15
  66. package/dist/esm/ui/bulk-action-overlay.js +2 -1
  67. package/dist/esm/ui/selectable-cell.js +4 -3
  68. package/dist/esm/ui/sort-icon.js +3 -8
  69. package/dist/esm/ui/table.js +3 -3
  70. package/dist/esm/ui/tbody.js +2 -2
  71. package/dist/esm/ui/td.js +5 -5
  72. package/dist/esm/ui/th.js +8 -7
  73. package/dist/esm/ui/thead.js +2 -1
  74. package/dist/esm/ui/tr.js +6 -6
  75. package/dist/esm/version.json +1 -1
  76. package/dist/types/ui/base-cell.d.ts +7 -1
  77. package/dist/types/ui/th.d.ts +6 -2
  78. package/package.json +9 -6
  79. package/constellation/index/examples.mdx +0 -19
  80. 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
- _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
34
- _useSelection2$ = _useSelection2[0],
35
- allChecked = _useSelection2$.allChecked,
36
- checked = _useSelection2$.checked,
37
- toggleSelection = _useSelection2[1].toggleSelection;
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
- testId = _ref.testId,
61
- onClick = _ref.onClick,
62
- children = _ref.children,
63
- other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
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
- sortKey = _useTable.sortKey,
67
- sortDirection = _useTable.sortDirection,
68
- setSortState = _useTable.setSortState;
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
- var updateSortState = (0, _react.useCallback)( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
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 (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
84
- (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
85
- testId: testId
86
- }, other), (0, _react2.jsx)(_tooltip.default, {
87
- content: getSortMessage(),
88
- position: "top"
89
- }, function (tooltipProps) {
90
- return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
91
- spacing: "compact",
92
- appearance: "subtle",
93
- iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
94
- name: name
95
- })
96
- }, tooltipProps, {
97
- onClick: updateSortState,
98
- css: overrideStyles
99
- }), children);
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
- isSelectable = _ref.isSelectable,
40
- _ref$sortKey = _ref.sortKey,
41
- sortKey = _ref$sortKey === void 0 ? 'unset' : _ref$sortKey,
42
- testId = _ref.testId;
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
- localSortKey = _useSorting.sortKey,
46
- sortDirection = _useSorting.sortDirection,
47
- setSortState = _useSorting.setSortState,
48
- sortFn = _useSorting.sortFn;
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
- children = _ref.children;
36
-
23
+ children = _ref.children;
37
24
  var _useTable = (0, _useTable2.useTable)(),
38
- isSelectable = _useTable.isSelectable;
39
-
25
+ isSelectable = _useTable.isSelectable;
40
26
  var _useSelection = (0, _selectionProvider.useSelection)(),
41
- _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
42
- state = _useSelection2[0],
43
- _useSelection2$ = _useSelection2[1],
44
- setAll = _useSelection2$.setAll,
45
- removeAll = _useSelection2$.removeAll;
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
- "aria-labelledby": "select-all",
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)(_visuallyHidden.default, {
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;
@@ -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
- as = _ref.as,
47
- children = _ref.children,
48
- _ref$align = _ref.align,
49
- align = _ref$align === void 0 ? 'text' : _ref$align,
50
- _ref$paddingBlock = _ref.paddingBlock,
51
- paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
52
- _ref$paddingInline = _ref.paddingInline,
53
- paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
54
- backgroundColor = _ref.backgroundColor,
55
- scope = _ref.scope,
56
- width = _ref.width,
57
- className = _ref.className;
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;
@@ -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
- _ref$as = _ref.as,
32
- as = _ref$as === void 0 ? 'td' : _ref$as;
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;
@@ -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
- sortKey = _useTable.sortKey,
34
- sortDirection = _useTable.sortDirection;
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;
@@ -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
- testId = _ref.testId,
25
- summary = _ref.summary;
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;
@@ -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
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
30
- return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
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;