@atlaskit/table 0.11.7 → 0.12.0

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 (81) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/body.js +9 -10
  3. package/dist/cjs/expandable-cell.js +7 -12
  4. package/dist/cjs/head-cell.js +4 -10
  5. package/dist/cjs/row.js +7 -12
  6. package/dist/cjs/selectable-cell.js +7 -12
  7. package/dist/cjs/sortable-column.compiled.css +6 -0
  8. package/dist/cjs/sortable-column.js +16 -21
  9. package/dist/cjs/table.js +7 -12
  10. package/dist/cjs/thead.js +7 -14
  11. package/dist/cjs/ui/expand-icon.js +6 -11
  12. package/dist/cjs/ui/sort-icon.js +6 -11
  13. package/dist/cjs/ui/table.js +4 -10
  14. package/dist/cjs/ui/tbody.compiled.css +7 -0
  15. package/dist/cjs/ui/tbody.js +13 -22
  16. package/dist/cjs/ui/td.js +3 -7
  17. package/dist/cjs/ui/thead.compiled.css +7 -0
  18. package/dist/cjs/ui/thead.js +13 -19
  19. package/dist/cjs/ui/tr.compiled.css +11 -0
  20. package/dist/cjs/ui/tr.js +17 -36
  21. package/dist/es2019/body.js +5 -12
  22. package/dist/es2019/expandable-cell.js +4 -11
  23. package/dist/es2019/head-cell.js +3 -9
  24. package/dist/es2019/row.js +4 -11
  25. package/dist/es2019/selectable-cell.js +4 -11
  26. package/dist/es2019/sortable-column.compiled.css +6 -0
  27. package/dist/es2019/sortable-column.js +12 -21
  28. package/dist/es2019/table.js +4 -11
  29. package/dist/es2019/thead.js +7 -13
  30. package/dist/es2019/ui/expand-icon.js +3 -10
  31. package/dist/es2019/ui/sort-icon.js +3 -10
  32. package/dist/es2019/ui/table.js +3 -9
  33. package/dist/es2019/ui/tbody.compiled.css +7 -0
  34. package/dist/es2019/ui/tbody.js +7 -21
  35. package/dist/es2019/ui/td.js +3 -8
  36. package/dist/es2019/ui/thead.compiled.css +7 -0
  37. package/dist/es2019/ui/thead.js +7 -18
  38. package/dist/es2019/ui/tr.compiled.css +11 -0
  39. package/dist/es2019/ui/tr.js +11 -35
  40. package/dist/esm/body.js +5 -12
  41. package/dist/esm/expandable-cell.js +4 -11
  42. package/dist/esm/head-cell.js +3 -9
  43. package/dist/esm/row.js +4 -11
  44. package/dist/esm/selectable-cell.js +4 -11
  45. package/dist/esm/sortable-column.compiled.css +6 -0
  46. package/dist/esm/sortable-column.js +12 -21
  47. package/dist/esm/table.js +4 -11
  48. package/dist/esm/thead.js +7 -13
  49. package/dist/esm/ui/expand-icon.js +3 -10
  50. package/dist/esm/ui/sort-icon.js +3 -10
  51. package/dist/esm/ui/table.js +3 -9
  52. package/dist/esm/ui/tbody.compiled.css +7 -0
  53. package/dist/esm/ui/tbody.js +10 -21
  54. package/dist/esm/ui/td.js +3 -8
  55. package/dist/esm/ui/thead.compiled.css +7 -0
  56. package/dist/esm/ui/thead.js +10 -18
  57. package/dist/esm/ui/tr.compiled.css +11 -0
  58. package/dist/esm/ui/tr.js +14 -35
  59. package/dist/types/body.d.ts +2 -7
  60. package/dist/types/expandable-cell.d.ts +2 -3
  61. package/dist/types/head-cell.d.ts +1 -5
  62. package/dist/types/row.d.ts +0 -4
  63. package/dist/types/selectable-cell.d.ts +2 -2
  64. package/dist/types/table.d.ts +2 -7
  65. package/dist/types/thead.d.ts +0 -4
  66. package/dist/types/ui/expand-icon.d.ts +3 -4
  67. package/dist/types/ui/sort-icon.d.ts +0 -4
  68. package/dist/types/ui/table.d.ts +0 -4
  69. package/dist/types/ui/td.d.ts +1 -5
  70. package/dist/types-ts4.5/body.d.ts +2 -7
  71. package/dist/types-ts4.5/expandable-cell.d.ts +2 -3
  72. package/dist/types-ts4.5/head-cell.d.ts +1 -5
  73. package/dist/types-ts4.5/row.d.ts +0 -4
  74. package/dist/types-ts4.5/selectable-cell.d.ts +2 -2
  75. package/dist/types-ts4.5/table.d.ts +2 -7
  76. package/dist/types-ts4.5/thead.d.ts +0 -4
  77. package/dist/types-ts4.5/ui/expand-icon.d.ts +3 -4
  78. package/dist/types-ts4.5/ui/sort-icon.d.ts +0 -4
  79. package/dist/types-ts4.5/ui/table.d.ts +0 -4
  80. package/dist/types-ts4.5/ui/td.d.ts +1 -5
  81. package/package.json +7 -7
package/dist/esm/ui/tr.js CHANGED
@@ -1,36 +1,12 @@
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 { css, jsx } from '@emotion/react';
1
+ /* tr.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./tr.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
8
5
  import FocusRing from '@atlaskit/focus-ring';
9
- var baseStyles = css({
10
- height: '3rem',
11
- position: 'relative',
12
- border: 'none',
13
- borderImageWidth: 0,
14
- borderSpacing: 0
15
- });
16
- var selectedStyles = css({
17
- backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
18
- '&:hover': {
19
- backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
20
- }
21
- });
22
- var subitemStyles = css({
23
- backgroundColor: "var(--ds-background-neutral, #091E420F)"
24
- });
25
- var bodyRowStyles = css({
26
- borderBlockEnd: "1px solid ".concat("var(--ds-border, #eee)"),
27
- '&:hover': {
28
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
29
- },
30
- '&:focus-visible::after': {
31
- boxShadow: 'none'
32
- }
33
- });
6
+ var baseStyles = null;
7
+ var selectedStyles = null;
8
+ var subitemStyles = null;
9
+ var bodyRowStyles = null;
34
10
  /**
35
11
  * __Row__
36
12
  *
@@ -45,12 +21,15 @@ export var TR = function TR(_ref) {
45
21
  _ref$isBodyRow = _ref.isBodyRow,
46
22
  isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
47
23
  isSubitem = _ref.isSubitem;
48
- return jsx(FocusRing, {
24
+ return /*#__PURE__*/React.createElement(FocusRing, {
49
25
  isInset: true
50
- }, jsx("tr", {
26
+ }, /*#__PURE__*/React.createElement("tr", {
51
27
  tabIndex: -1,
52
28
  "aria-selected": isSelected,
53
29
  "data-testid": testId,
54
- css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles, isSubitem && subitemStyles]
30
+ className: ax(["_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf", isBodyRow && "_179rmc7d _x6vyglyw _irr3134o", isSelected && "_bfhkcslv _irr3quvt", isSubitem && "_bfhkm7j4"]),
31
+ style: {
32
+ "--_1748cv6": ix("1px solid ".concat("var(--ds-border, #eee)"))
33
+ }
55
34
  }, children));
56
35
  };
@@ -1,9 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactElement } from 'react';
6
- import { jsx } from '@emotion/react';
1
+ import React, { type ReactElement } from 'react';
7
2
  type BodyProps<Item extends object> = {
8
3
  rows: Item[];
9
4
  children: (row: Item) => ReactElement;
@@ -14,5 +9,5 @@ type BodyProps<Item extends object> = {
14
9
  /**
15
10
  * __Table body__
16
11
  */
17
- declare function TBody<ObjectType extends object>({ rows, children }: BodyProps<ObjectType>): jsx.JSX.Element;
12
+ declare function TBody<ObjectType extends object>({ rows, children }: BodyProps<ObjectType>): React.JSX.Element;
18
13
  export default TBody;
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
2
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
3
2
  /**
4
3
  * __Expandable cell__
5
4
  *
6
5
  * A cell with an expand button that controls the expanded state
7
6
  * of the `<ExpandableRow>`.
8
7
  */
9
- declare const ExpandableCell: import("react").MemoExoticComponent<() => jsx.JSX.Element>;
8
+ declare const ExpandableCell: React.MemoExoticComponent<() => React.JSX.Element>;
10
9
  export default ExpandableCell;
@@ -1,8 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { FC } from 'react';
1
+ import { type FC } from 'react';
6
2
  import { type THProps } from './ui/th';
7
3
  /**
8
4
  * __HeadCell__
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type RowProps = {
7
3
  /**
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- declare const SelectableCell: import("react").NamedExoticComponent<{}>;
1
+ import React from 'react';
2
+ declare const SelectableCell: React.NamedExoticComponent<{}>;
3
3
  export default SelectableCell;
@@ -1,9 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactElement } from 'react';
6
- import { jsx } from '@emotion/react';
1
+ import React, { type ReactElement } from 'react';
7
2
  import { type SortKey } from './hooks/use-table';
8
3
  type TableProps<ItemType extends object = {}> = {
9
4
  /**
@@ -29,5 +24,5 @@ type TableProps<ItemType extends object = {}> = {
29
24
  *
30
25
  * - [Examples](https://atlassian.design/components/table/examples)
31
26
  */
32
- declare function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): jsx.JSX.Element;
27
+ declare function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): React.JSX.Element;
33
28
  export default Table;
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type THeadProps = {
7
3
  actions?: (selected: number[]) => ReactNode;
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
2
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
3
2
  /**
4
3
  * __Expand icon__
5
4
  *
6
5
  * An icon used to display the expanded state in an `<ExpandableCell>`.
7
6
  */
8
- export declare const ExpandIcon: import("react").MemoExoticComponent<({ isExpanded }: {
7
+ export declare const ExpandIcon: React.MemoExoticComponent<({ isExpanded }: {
9
8
  isExpanded: boolean;
10
- }) => jsx.JSX.Element>;
9
+ }) => React.JSX.Element>;
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  /**
7
3
  * __SortIcon__
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type TableProps = {
7
3
  /**
@@ -1,8 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { FC } from 'react';
1
+ import { type FC } from 'react';
6
2
  import { type BaseCellProps } from './base-cell';
7
3
  /**
8
4
  * __Cell__
@@ -1,9 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactElement } from 'react';
6
- import { jsx } from '@emotion/react';
1
+ import React, { type ReactElement } from 'react';
7
2
  type BodyProps<Item extends object> = {
8
3
  rows: Item[];
9
4
  children: (row: Item) => ReactElement;
@@ -14,5 +9,5 @@ type BodyProps<Item extends object> = {
14
9
  /**
15
10
  * __Table body__
16
11
  */
17
- declare function TBody<ObjectType extends object>({ rows, children }: BodyProps<ObjectType>): jsx.JSX.Element;
12
+ declare function TBody<ObjectType extends object>({ rows, children }: BodyProps<ObjectType>): React.JSX.Element;
18
13
  export default TBody;
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
2
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
3
2
  /**
4
3
  * __Expandable cell__
5
4
  *
6
5
  * A cell with an expand button that controls the expanded state
7
6
  * of the `<ExpandableRow>`.
8
7
  */
9
- declare const ExpandableCell: import("react").MemoExoticComponent<() => jsx.JSX.Element>;
8
+ declare const ExpandableCell: React.MemoExoticComponent<() => React.JSX.Element>;
10
9
  export default ExpandableCell;
@@ -1,8 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { FC } from 'react';
1
+ import { type FC } from 'react';
6
2
  import { type THProps } from './ui/th';
7
3
  /**
8
4
  * __HeadCell__
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type RowProps = {
7
3
  /**
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- declare const SelectableCell: import("react").NamedExoticComponent<{}>;
1
+ import React from 'react';
2
+ declare const SelectableCell: React.NamedExoticComponent<{}>;
3
3
  export default SelectableCell;
@@ -1,9 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactElement } from 'react';
6
- import { jsx } from '@emotion/react';
1
+ import React, { type ReactElement } from 'react';
7
2
  import { type SortKey } from './hooks/use-table';
8
3
  type TableProps<ItemType extends object = {}> = {
9
4
  /**
@@ -29,5 +24,5 @@ type TableProps<ItemType extends object = {}> = {
29
24
  *
30
25
  * - [Examples](https://atlassian.design/components/table/examples)
31
26
  */
32
- declare function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): jsx.JSX.Element;
27
+ declare function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): React.JSX.Element;
33
28
  export default Table;
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type THeadProps = {
7
3
  actions?: (selected: number[]) => ReactNode;
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
2
- import { jsx } from '@emotion/react';
1
+ import React from 'react';
3
2
  /**
4
3
  * __Expand icon__
5
4
  *
6
5
  * An icon used to display the expanded state in an `<ExpandableCell>`.
7
6
  */
8
- export declare const ExpandIcon: import("react").MemoExoticComponent<({ isExpanded }: {
7
+ export declare const ExpandIcon: React.MemoExoticComponent<({ isExpanded }: {
9
8
  isExpanded: boolean;
10
- }) => jsx.JSX.Element>;
9
+ }) => React.JSX.Element>;
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  /**
7
3
  * __SortIcon__
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC, type ReactNode } from 'react';
6
2
  type TableProps = {
7
3
  /**
@@ -1,8 +1,4 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import type { FC } from 'react';
1
+ import { type FC } from 'react';
6
2
  import { type BaseCellProps } from './base-cell';
7
3
  /**
8
4
  * __Cell__
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/table",
3
- "version": "0.11.7",
3
+ "version": "0.12.0",
4
4
  "description": "A table is used to display data.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -42,17 +42,17 @@
42
42
  "./primitives": "./src/ui/index.tsx"
43
43
  },
44
44
  "dependencies": {
45
- "@atlaskit/button": "^23.0.0",
45
+ "@atlaskit/button": "^23.2.0",
46
46
  "@atlaskit/checkbox": "^17.1.0",
47
47
  "@atlaskit/ds-lib": "^4.0.0",
48
48
  "@atlaskit/focus-ring": "^3.0.0",
49
- "@atlaskit/icon": "^26.0.0",
50
- "@atlaskit/primitives": "^14.7.0",
51
- "@atlaskit/tokens": "^4.8.0",
49
+ "@atlaskit/icon": "^26.1.0",
50
+ "@atlaskit/primitives": "^14.8.0",
51
+ "@atlaskit/tokens": "^4.9.0",
52
52
  "@atlaskit/tooltip": "^20.0.0",
53
53
  "@atlaskit/visually-hidden": "^3.0.0",
54
54
  "@babel/runtime": "^7.0.0",
55
- "@emotion/react": "^11.7.1",
55
+ "@compiled/react": "^0.18.3",
56
56
  "tiny-invariant": "^1.2.0"
57
57
  },
58
58
  "peerDependencies": {
@@ -61,7 +61,7 @@
61
61
  "devDependencies": {
62
62
  "@af/accessibility-testing": "workspace:^",
63
63
  "@af/integration-testing": "workspace:^",
64
- "@atlaskit/avatar": "^25.0.0",
64
+ "@atlaskit/avatar": "^25.1.0",
65
65
  "@atlaskit/date": "^2.0.0",
66
66
  "@atlaskit/docs": "^10.0.0",
67
67
  "@atlaskit/dynamic-table": "^18.1.0",