@atlaskit/table 0.11.7 → 0.12.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.
Files changed (86) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/body.js +8 -10
  3. package/dist/cjs/expandable-cell.js +6 -12
  4. package/dist/cjs/head-cell.js +4 -10
  5. package/dist/cjs/hooks/selection-provider.js +1 -2
  6. package/dist/cjs/hooks/use-expand-content.js +1 -2
  7. package/dist/cjs/hooks/use-expand.js +1 -2
  8. package/dist/cjs/hooks/use-table.js +1 -2
  9. package/dist/cjs/row.js +6 -12
  10. package/dist/cjs/selectable-cell.js +6 -12
  11. package/dist/cjs/sortable-column.compiled.css +6 -0
  12. package/dist/cjs/sortable-column.js +15 -21
  13. package/dist/cjs/table.js +6 -12
  14. package/dist/cjs/thead.js +7 -14
  15. package/dist/cjs/ui/base-cell.js +1 -2
  16. package/dist/cjs/ui/expand-icon.js +5 -11
  17. package/dist/cjs/ui/sort-icon.js +5 -11
  18. package/dist/cjs/ui/table.js +4 -10
  19. package/dist/cjs/ui/tbody.compiled.css +7 -0
  20. package/dist/cjs/ui/tbody.js +12 -22
  21. package/dist/cjs/ui/td.js +3 -7
  22. package/dist/cjs/ui/thead.compiled.css +7 -0
  23. package/dist/cjs/ui/thead.js +12 -19
  24. package/dist/cjs/ui/tr.compiled.css +11 -0
  25. package/dist/cjs/ui/tr.js +16 -36
  26. package/dist/es2019/body.js +5 -12
  27. package/dist/es2019/expandable-cell.js +4 -11
  28. package/dist/es2019/head-cell.js +3 -9
  29. package/dist/es2019/row.js +4 -11
  30. package/dist/es2019/selectable-cell.js +4 -11
  31. package/dist/es2019/sortable-column.compiled.css +6 -0
  32. package/dist/es2019/sortable-column.js +12 -21
  33. package/dist/es2019/table.js +4 -11
  34. package/dist/es2019/thead.js +7 -13
  35. package/dist/es2019/ui/expand-icon.js +3 -10
  36. package/dist/es2019/ui/sort-icon.js +3 -10
  37. package/dist/es2019/ui/table.js +3 -9
  38. package/dist/es2019/ui/tbody.compiled.css +7 -0
  39. package/dist/es2019/ui/tbody.js +7 -21
  40. package/dist/es2019/ui/td.js +3 -8
  41. package/dist/es2019/ui/thead.compiled.css +7 -0
  42. package/dist/es2019/ui/thead.js +7 -18
  43. package/dist/es2019/ui/tr.compiled.css +11 -0
  44. package/dist/es2019/ui/tr.js +11 -35
  45. package/dist/esm/body.js +5 -12
  46. package/dist/esm/expandable-cell.js +4 -11
  47. package/dist/esm/head-cell.js +3 -9
  48. package/dist/esm/row.js +4 -11
  49. package/dist/esm/selectable-cell.js +4 -11
  50. package/dist/esm/sortable-column.compiled.css +6 -0
  51. package/dist/esm/sortable-column.js +12 -21
  52. package/dist/esm/table.js +4 -11
  53. package/dist/esm/thead.js +7 -13
  54. package/dist/esm/ui/expand-icon.js +3 -10
  55. package/dist/esm/ui/sort-icon.js +3 -10
  56. package/dist/esm/ui/table.js +3 -9
  57. package/dist/esm/ui/tbody.compiled.css +7 -0
  58. package/dist/esm/ui/tbody.js +10 -21
  59. package/dist/esm/ui/td.js +3 -8
  60. package/dist/esm/ui/thead.compiled.css +7 -0
  61. package/dist/esm/ui/thead.js +10 -18
  62. package/dist/esm/ui/tr.compiled.css +11 -0
  63. package/dist/esm/ui/tr.js +14 -35
  64. package/dist/types/body.d.ts +2 -7
  65. package/dist/types/expandable-cell.d.ts +2 -3
  66. package/dist/types/head-cell.d.ts +1 -5
  67. package/dist/types/row.d.ts +0 -4
  68. package/dist/types/selectable-cell.d.ts +2 -2
  69. package/dist/types/table.d.ts +2 -7
  70. package/dist/types/thead.d.ts +0 -4
  71. package/dist/types/ui/expand-icon.d.ts +3 -4
  72. package/dist/types/ui/sort-icon.d.ts +0 -4
  73. package/dist/types/ui/table.d.ts +0 -4
  74. package/dist/types/ui/td.d.ts +1 -5
  75. package/dist/types-ts4.5/body.d.ts +2 -7
  76. package/dist/types-ts4.5/expandable-cell.d.ts +2 -3
  77. package/dist/types-ts4.5/head-cell.d.ts +1 -5
  78. package/dist/types-ts4.5/row.d.ts +0 -4
  79. package/dist/types-ts4.5/selectable-cell.d.ts +2 -2
  80. package/dist/types-ts4.5/table.d.ts +2 -7
  81. package/dist/types-ts4.5/thead.d.ts +0 -4
  82. package/dist/types-ts4.5/ui/expand-icon.d.ts +3 -4
  83. package/dist/types-ts4.5/ui/sort-icon.d.ts +0 -4
  84. package/dist/types-ts4.5/ui/table.d.ts +0 -4
  85. package/dist/types-ts4.5/ui/td.d.ts +1 -5
  86. package/package.json +10 -10
@@ -1,17 +1,11 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.Table = void 0;
7
- var _react = require("@emotion/react");
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
8
+ var _react = _interopRequireDefault(require("react"));
15
9
  /**
16
10
  * __Table__
17
11
  *
@@ -26,7 +20,7 @@ var Table = exports.Table = function Table(_ref) {
26
20
  var children = _ref.children,
27
21
  testId = _ref.testId,
28
22
  summary = _ref.summary;
29
- return (0, _react.jsx)("table", {
23
+ return /*#__PURE__*/_react.default.createElement("table", {
30
24
  "data-testid": testId
31
- }, summary && (0, _react.jsx)("caption", null, summary), children);
25
+ }, summary && /*#__PURE__*/_react.default.createElement("caption", null, summary), children);
32
26
  };
@@ -0,0 +1,7 @@
1
+
2
+ ._19itglyw{border:none}
3
+ ._9v7aidpf:after{inset:0}._11fnglyw:after{pointer-events:none}
4
+ ._18postnw:after{position:absolute}
5
+ ._8x3ud1es:after{box-shadow:var(--_1tz90uq)}
6
+ ._aetrb3bt:after{content:""}
7
+ ._kqswh2mm{position:relative}
@@ -1,29 +1,16 @@
1
+ /* tbody.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.TBody = void 0;
7
- var _react = require("@emotion/react");
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
15
- var bodyStyles = (0, _react.css)({
16
- position: 'relative',
17
- border: 'none',
18
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
19
- '&:after': {
20
- position: 'absolute',
21
- inset: 0,
22
- boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
23
- content: "''",
24
- pointerEvents: 'none'
25
- }
26
- });
9
+ require("./tbody.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
12
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
+ var bodyStyles = null;
27
14
 
28
15
  /**
29
16
  * __TBody__
@@ -31,7 +18,10 @@ var bodyStyles = (0, _react.css)({
31
18
  */
32
19
  var TBody = exports.TBody = function TBody(_ref) {
33
20
  var children = _ref.children;
34
- return (0, _react.jsx)("tbody", {
35
- css: bodyStyles
21
+ return /*#__PURE__*/React.createElement("tbody", {
22
+ className: (0, _runtime.ax)(["_19itglyw _kqswh2mm _9v7aidpf _18postnw _8x3ud1es _aetrb3bt _11fnglyw"]),
23
+ style: {
24
+ "--_1tz90uq": (0, _runtime.ix)("inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"))
25
+ }
36
26
  }, children);
37
27
  };
package/dist/cjs/ui/td.js CHANGED
@@ -7,14 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.TD = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = require("@emotion/react");
10
+ var _react = _interopRequireDefault(require("react"));
11
11
  var _baseCell = require("./base-cell");
12
12
  var _excluded = ["testId"];
13
- /**
14
- * @jsxRuntime classic
15
- * @jsx jsx
16
- */
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
18
13
  /**
19
14
  * __Cell__
20
15
  *
@@ -26,8 +21,9 @@ var TD = exports.TD = function TD(_ref) {
26
21
  var testId = _ref.testId,
27
22
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
28
23
  return (
24
+ /*#__PURE__*/
29
25
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
30
- (0, _react.jsx)(_baseCell.BaseCell, (0, _extends2.default)({
26
+ _react.default.createElement(_baseCell.BaseCell, (0, _extends2.default)({
31
27
  as: "td",
32
28
  testId: testId
33
29
  }, props))
@@ -0,0 +1,7 @@
1
+
2
+ ._19itglyw{border:none}
3
+ ._1r04idpf{inset:0}._179r1n0b{border-block-end:var(--_ukuvb0)}
4
+ ._mqm21vrj{border-block-start:2px solid transparent}
5
+ ._1pbykb7n{z-index:1}
6
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
7
+ ._kqsw1if8{position:sticky}
@@ -1,26 +1,16 @@
1
+ /* thead.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.THead = void 0;
7
- var _react = require("@emotion/react");
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
15
- var baseStyles = (0, _react.css)({
16
- position: 'sticky',
17
- zIndex: 1,
18
- inset: 0,
19
- backgroundColor: "var(--ds-surface, white)",
20
- border: 'none',
21
- borderBlockEnd: "2px solid ".concat("var(--ds-border, #eee)"),
22
- borderBlockStart: '2px solid transparent'
23
- });
9
+ require("./thead.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
12
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
+ var baseStyles = null;
24
14
 
25
15
  /**
26
16
  * __THead__
@@ -31,7 +21,10 @@ var baseStyles = (0, _react.css)({
31
21
  */
32
22
  var THead = exports.THead = function THead(_ref) {
33
23
  var children = _ref.children;
34
- return (0, _react.jsx)("thead", {
35
- css: baseStyles
24
+ return /*#__PURE__*/React.createElement("thead", {
25
+ className: (0, _runtime.ax)(["_1r04idpf _19itglyw _179r1n0b _mqm21vrj _kqsw1if8 _1pbykb7n _bfhkvuon"]),
26
+ style: {
27
+ "--_ukuvb0": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, #eee)"))
28
+ }
36
29
  }, children);
37
30
  };
@@ -0,0 +1,11 @@
1
+
2
+ ._19itglyw{border:none}._179rmc7d{border-block-end:var(--_1748cv6)}
3
+ ._4t3i1wto{height:3rem}
4
+ ._bfhkcslv{background-color:var(--ds-background-selected,#deebff88)}
5
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
6
+ ._btyzidpf{border-spacing:0}
7
+ ._hpylidpf{border-image-width:0}
8
+ ._kqswh2mm{position:relative}
9
+ ._x6vyglyw:focus-visible:after{box-shadow:none}
10
+ ._irr3134o:hover{background-color:var(--ds-background-neutral-subtle-hovered,#f8f8f8)}
11
+ ._irr3quvt:hover{background-color:var(--ds-background-selected-hovered,#deebff)}
package/dist/cjs/ui/tr.js CHANGED
@@ -1,44 +1,21 @@
1
+ /* tr.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.TR = void 0;
8
- var _react = require("@emotion/react");
10
+ require("./tr.compiled.css");
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _runtime = require("@compiled/react/runtime");
9
13
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
10
- /**
11
- * @jsxRuntime classic
12
- * @jsx jsx
13
- */
14
-
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
-
17
- var baseStyles = (0, _react.css)({
18
- height: '3rem',
19
- position: 'relative',
20
- border: 'none',
21
- borderImageWidth: 0,
22
- borderSpacing: 0
23
- });
24
- var selectedStyles = (0, _react.css)({
25
- backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
26
- '&:hover': {
27
- backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
28
- }
29
- });
30
- var subitemStyles = (0, _react.css)({
31
- backgroundColor: "var(--ds-background-neutral, #091E420F)"
32
- });
33
- var bodyRowStyles = (0, _react.css)({
34
- borderBlockEnd: "1px solid ".concat("var(--ds-border, #eee)"),
35
- '&:hover': {
36
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
37
- },
38
- '&:focus-visible::after': {
39
- boxShadow: 'none'
40
- }
41
- });
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
+ var baseStyles = null;
16
+ var selectedStyles = null;
17
+ var subitemStyles = null;
18
+ var bodyRowStyles = null;
42
19
  /**
43
20
  * __Row__
44
21
  *
@@ -53,12 +30,15 @@ var TR = exports.TR = function TR(_ref) {
53
30
  _ref$isBodyRow = _ref.isBodyRow,
54
31
  isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
55
32
  isSubitem = _ref.isSubitem;
56
- return (0, _react.jsx)(_focusRing.default, {
33
+ return /*#__PURE__*/React.createElement(_focusRing.default, {
57
34
  isInset: true
58
- }, (0, _react.jsx)("tr", {
35
+ }, /*#__PURE__*/React.createElement("tr", {
59
36
  tabIndex: -1,
60
37
  "aria-selected": isSelected,
61
38
  "data-testid": testId,
62
- css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles, isSubitem && subitemStyles]
39
+ className: (0, _runtime.ax)(["_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf", isBodyRow && "_179rmc7d _x6vyglyw _irr3134o", isSelected && "_bfhkcslv _irr3quvt", isSubitem && "_bfhkm7j4"]),
40
+ style: {
41
+ "--_1748cv6": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #eee)"))
42
+ }
63
43
  }, children));
64
44
  };
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { Children, useEffect, useMemo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { Children, useEffect, useMemo } from 'react';
9
2
  import { useSelection } from './hooks/selection-provider';
10
3
  import { RowProvider } from './hooks/use-row-id';
11
4
  import { useTable } from './hooks/use-table';
@@ -47,7 +40,7 @@ function TBody({
47
40
  return sortedRows === null || sortedRows === void 0 ? void 0 : sortedRows.map(({
48
41
  idx,
49
42
  ...row
50
- }) => jsx(RowProvider, {
43
+ }) => /*#__PURE__*/React.createElement(RowProvider, {
51
44
  key: idx,
52
45
  value: idx
53
46
  },
@@ -55,13 +48,13 @@ function TBody({
55
48
  children(row)));
56
49
  }
57
50
  const childrenArray = Array.isArray(children) ? children : [children];
58
- return childrenArray.map((row, idx) => jsx(RowProvider, {
51
+ return childrenArray.map((row, idx) => /*#__PURE__*/React.createElement(RowProvider, {
59
52
  key: idx,
60
53
  value: idx
61
54
  }, row));
62
55
  })();
63
- return jsx(TableBodyProvider, {
56
+ return /*#__PURE__*/React.createElement(TableBodyProvider, {
64
57
  value: true
65
- }, jsx(TBodyPrimitive, null, renderedChildren));
58
+ }, /*#__PURE__*/React.createElement(TBodyPrimitive, null, renderedChildren));
66
59
  }
67
60
  export default TBody;
@@ -1,12 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
- import { memo, useCallback } from 'react';
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { jsx } from '@emotion/react';
2
+ import React, { memo, useCallback } from 'react';
10
3
  import { IconButton } from '@atlaskit/button/new';
11
4
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
12
5
  import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
@@ -28,12 +21,12 @@ const ExpandableCell = /*#__PURE__*/memo(() => {
28
21
  toggleExpanded();
29
22
  }, [toggleExpanded]);
30
23
  const Icon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
31
- return jsx(ExpandableCellPrimitive, {
24
+ return /*#__PURE__*/React.createElement(ExpandableCellPrimitive, {
32
25
  as: "td"
33
- }, jsx(IconButton, {
26
+ }, /*#__PURE__*/React.createElement(IconButton, {
34
27
  spacing: "compact",
35
28
  appearance: "subtle",
36
- icon: iconProps => jsx(Icon, _extends({}, iconProps, {
29
+ icon: iconProps => /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
37
30
  LEGACY_size: "small"
38
31
  })),
39
32
  label: "Expand row",
@@ -1,10 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
-
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
8
2
  import { Text } from '@atlaskit/primitives';
9
3
  import { TH } from './ui/th';
10
4
 
@@ -20,12 +14,12 @@ const HeadCell = ({
20
14
  backgroundColor,
21
15
  scope = 'col'
22
16
  }) => {
23
- return jsx(TH, {
17
+ return /*#__PURE__*/React.createElement(TH, {
24
18
  scope: scope,
25
19
  align: align,
26
20
  testId: testId,
27
21
  backgroundColor: backgroundColor
28
- }, children && jsx(Text, {
22
+ }, children && /*#__PURE__*/React.createElement(Text, {
29
23
  weight: "medium"
30
24
  }, children));
31
25
  };
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { memo, useMemo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { memo, useMemo } from 'react';
9
2
  import { useSelection } from './hooks/selection-provider';
10
3
  import useExpand from './hooks/use-expand';
11
4
  import useExpandContent from './hooks/use-expand-content';
@@ -52,13 +45,13 @@ const Row = /*#__PURE__*/memo(({
52
45
  if (isExpanded === false && isExpandableContent) {
53
46
  return null;
54
47
  }
55
- let selectableCell = isSelectable && jsx(SelectableCell, null);
48
+ let selectableCell = isSelectable && /*#__PURE__*/React.createElement(SelectableCell, null);
56
49
  if (isSelectable && isExpandableContent) {
57
- selectableCell = jsx(SelectableCellPrimitive, {
50
+ selectableCell = /*#__PURE__*/React.createElement(SelectableCellPrimitive, {
58
51
  as: "td"
59
52
  });
60
53
  }
61
- return jsx(TRPrimitive, {
54
+ return /*#__PURE__*/React.createElement(TRPrimitive, {
62
55
  isSelected: isSelected,
63
56
  testId: testId,
64
57
  isSubitem: isExpandableContent
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { memo, useCallback, useMemo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { memo, useCallback, useMemo } from 'react';
9
2
  import Checkbox from '@atlaskit/checkbox';
10
3
  import VisuallyHidden from '@atlaskit/visually-hidden';
11
4
  import { useSelection } from './hooks/selection-provider';
@@ -21,12 +14,12 @@ const SelectableCellComponent = () => {
21
14
  const idx = useRowId();
22
15
  const isChecked = useMemo(() => allChecked || checked.includes(idx), [allChecked, checked, idx]);
23
16
  const onChange = useCallback(e => toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey), [idx, toggleSelection]);
24
- return jsx(SelectableCellPrimitive, {
17
+ return /*#__PURE__*/React.createElement(SelectableCellPrimitive, {
25
18
  as: "td"
26
- }, jsx(Checkbox, {
19
+ }, /*#__PURE__*/React.createElement(Checkbox, {
27
20
  isChecked: isChecked,
28
21
  onChange: onChange,
29
- label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
22
+ label: /*#__PURE__*/React.createElement(VisuallyHidden, null, "Select row ", idx + 1)
30
23
  }));
31
24
  };
32
25
  const SelectableCell = /*#__PURE__*/memo(SelectableCellComponent);
@@ -0,0 +1,6 @@
1
+
2
+ ._zulp1b66{gap:var(--ds-space-050,4px)}
3
+ ._18zrud7t{padding-inline:2px!important}._18u0qyou{margin-left:-2px!important}
4
+ ._19pkgrf3{margin-top:0!important}
5
+ ._2hwxqyou{margin-right:-2px!important}
6
+ ._otyrgrf3{margin-bottom:0!important}
@@ -1,12 +1,9 @@
1
+ /* sortable-column.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
3
+ import "./sortable-column.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback } from 'react';
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { css, jsx } from '@emotion/react';
10
7
  import Button from '@atlaskit/button';
11
8
  import Tooltip from '@atlaskit/tooltip';
12
9
  import { useTable } from './hooks/use-table';
@@ -29,13 +26,7 @@ const sortingMessages = {
29
26
  number: 'Sort from 9 to 0'
30
27
  }
31
28
  };
32
- const overrideStyles = css({
33
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
34
- margin: '0 -2px !important',
35
- gap: "var(--ds-space-050, 4px)",
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
37
- paddingInline: `2px !important`
38
- });
29
+ const overrideStyles = null;
39
30
 
40
31
  /**
41
32
  * __SortableColumn__
@@ -64,28 +55,28 @@ const SortableColumn = ({
64
55
  const updateSortState = useCallback(
65
56
  // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
66
57
  () => setSortState(name), [setSortState, name]);
67
- return jsx(THPrimitive, _extends({
58
+ return /*#__PURE__*/React.createElement(THPrimitive, _extends({
68
59
  testId: testId,
69
60
  sortDirection: sortKey === name ? sortDirection : 'none'
70
61
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
71
- }, other), jsx(Tooltip, {
62
+ }, other), /*#__PURE__*/React.createElement(Tooltip, {
72
63
  content: getSortMessage(),
73
64
  position: "top"
74
- }, tooltipProps => jsx(Button, _extends({
65
+ }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({
75
66
  testId: `${testId}--button`,
76
67
  spacing: "compact",
77
68
  appearance: "subtle",
78
- iconAfter: jsx(SortIconPrimitive, {
69
+ iconAfter: /*#__PURE__*/React.createElement(SortIconPrimitive, {
79
70
  name: name
80
71
  })
81
72
  }, tooltipProps, {
82
73
  onClick: updateSortState
83
74
  // TODO: (from codemod) Buttons with "css" or "style" prop can't be migrated for now. Please wait for the support of xcss prop.
84
75
  ,
85
- css: overrideStyles
76
+
86
77
  // TODO: i18n support for this attr
87
- ,
88
- "aria-roledescription": "Column sort button"
78
+ "aria-roledescription": "Column sort button",
79
+ className: ax(["_19pkgrf3 _2hwxqyou _otyrgrf3 _18u0qyou _zulp1b66 _18zrud7t"])
89
80
  }), children)));
90
81
  };
91
82
  export default SortableColumn;
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { useMemo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { useMemo } from 'react';
9
2
  import SelectionProvider from './hooks/selection-provider';
10
3
  import { useSorting } from './hooks/use-sorting';
11
4
  import { TableProvider } from './hooks/use-table';
@@ -36,10 +29,10 @@ function Table({
36
29
  setSortState,
37
30
  sortFn
38
31
  }), [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
39
- return jsx(TableProvider, {
32
+ return /*#__PURE__*/React.createElement(TableProvider, {
40
33
  state: tableProviderState
41
- }, jsx(TablePrimitive, {
34
+ }, /*#__PURE__*/React.createElement(TablePrimitive, {
42
35
  testId: testId
43
- }, isSelectable ? jsx(SelectionProvider, null, children) : children));
36
+ }, isSelectable ? /*#__PURE__*/React.createElement(SelectionProvider, null, children) : children));
44
37
  }
45
38
  export default Table;
@@ -1,10 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
-
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
8
2
  import Checkbox from '@atlaskit/checkbox';
9
3
  import Inline from '@atlaskit/primitives/inline';
10
4
  import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -26,18 +20,18 @@ const THead = ({
26
20
  removeAll
27
21
  }] = useSelection();
28
22
  const isChecked = state.allChecked || state.anyChecked;
29
- return jsx(THeadPrimitive, null, jsx(TRPrimitive, {
23
+ return /*#__PURE__*/React.createElement(THeadPrimitive, null, /*#__PURE__*/React.createElement(TRPrimitive, {
30
24
  isBodyRow: false
31
- }, isSelectable && jsx(SelectableCellPrimitive, {
25
+ }, isSelectable && /*#__PURE__*/React.createElement(SelectableCellPrimitive, {
32
26
  as: "th"
33
- }, jsx(Checkbox, {
34
- label: jsx(VisuallyHidden, {
27
+ }, /*#__PURE__*/React.createElement(Checkbox, {
28
+ label: /*#__PURE__*/React.createElement(VisuallyHidden, {
35
29
  id: "select-all"
36
30
  }, "Select all rows"),
37
31
  onChange: isChecked ? removeAll : setAll,
38
32
  isChecked: isChecked,
39
33
  isIndeterminate: state.anyChecked && !state.allChecked
40
- })), children, isSelectable && isChecked && jsx(BulkActionOverlayPrimitive, null, jsx("span", {
34
+ })), children, isSelectable && isChecked && /*#__PURE__*/React.createElement(BulkActionOverlayPrimitive, null, /*#__PURE__*/React.createElement("span", {
41
35
  style: {
42
36
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
43
37
  color: "var(--ds-text, #172B4D)",
@@ -45,7 +39,7 @@ const THead = ({
45
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
46
40
  fontWeight: "var(--ds-font-weight-medium, 500)"
47
41
  }
48
- }, state.checked.length, " selected"), actions && jsx(Inline, {
42
+ }, state.checked.length, " selected"), actions && /*#__PURE__*/React.createElement(Inline, {
49
43
  alignBlock: "stretch",
50
44
  space: "space.100"
51
45
  }, actions(state.checked)))));
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { memo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { memo } from 'react';
9
2
 
10
3
  // TODO: Using HipChat icons as the standard icon set is missing large
11
4
  // versions of `chevron-up` and `chevron-down`, despite already including
@@ -23,14 +16,14 @@ export const ExpandIcon = /*#__PURE__*/memo(({
23
16
  }) => {
24
17
  switch (isExpanded) {
25
18
  case true:
26
- return jsx(ChevronUpIcon, {
19
+ return /*#__PURE__*/React.createElement(ChevronUpIcon, {
27
20
  color: "currentColor",
28
21
  LEGACY_size: "small",
29
22
  label: "",
30
23
  LEGACY_primaryColor: "inherit"
31
24
  });
32
25
  case false:
33
- return jsx(ChevronDownIcon, {
26
+ return /*#__PURE__*/React.createElement(ChevronDownIcon, {
34
27
  color: "currentColor",
35
28
  LEGACY_size: "small",
36
29
  label: "",
@@ -1,11 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { memo } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
1
+ import React, { memo } from 'react';
9
2
  import ArrowDownIcon from '@atlaskit/icon/utility/migration/arrow-down';
10
3
  import ArrowUpIcon from '@atlaskit/icon/utility/migration/arrow-up';
11
4
  import { useTable } from '../hooks/use-table';
@@ -25,14 +18,14 @@ export const SortIcon = /*#__PURE__*/memo(({
25
18
  if (sortKey === name) {
26
19
  switch (sortDirection) {
27
20
  case 'ascending':
28
- return jsx(ArrowUpIcon, {
21
+ return /*#__PURE__*/React.createElement(ArrowUpIcon, {
29
22
  color: "currentColor",
30
23
  LEGACY_size: "small",
31
24
  label: "",
32
25
  LEGACY_primaryColor: "inherit"
33
26
  });
34
27
  case 'descending':
35
- return jsx(ArrowDownIcon, {
28
+ return /*#__PURE__*/React.createElement(ArrowDownIcon, {
36
29
  color: "currentColor",
37
30
  LEGACY_size: "small",
38
31
  label: "",
@@ -1,10 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
-
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
8
2
  /**
9
3
  * __Table__
10
4
  *
@@ -20,7 +14,7 @@ export const Table = ({
20
14
  testId,
21
15
  summary
22
16
  }) => {
23
- return jsx("table", {
17
+ return /*#__PURE__*/React.createElement("table", {
24
18
  "data-testid": testId
25
- }, summary && jsx("caption", null, summary), children);
19
+ }, summary && /*#__PURE__*/React.createElement("caption", null, summary), children);
26
20
  };
@@ -0,0 +1,7 @@
1
+
2
+ ._19itglyw{border:none}
3
+ ._9v7aidpf:after{inset:0}._11fnglyw:after{pointer-events:none}
4
+ ._18postnw:after{position:absolute}
5
+ ._8x3u8fd9:after{box-shadow:inset 0 -2px 0 0 var(--ds-border,#eee)}
6
+ ._aetrb3bt:after{content:""}
7
+ ._kqswh2mm{position:relative}