@atlaskit/dynamic-table 14.4.4 → 14.5.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 (25) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/Body.js +1 -1
  3. package/dist/cjs/components/Stateless.js +1 -1
  4. package/dist/cjs/styled/TableHead.js +4 -4
  5. package/dist/cjs/styled/TableRow.js +4 -4
  6. package/dist/cjs/styled/rankable/TableRow.js +3 -3
  7. package/dist/cjs/theme.js +18 -18
  8. package/dist/cjs/version.json +1 -1
  9. package/dist/es2019/components/Body.js +1 -1
  10. package/dist/es2019/components/Stateless.js +1 -1
  11. package/dist/es2019/styled/TableHead.js +4 -4
  12. package/dist/es2019/styled/TableRow.js +4 -4
  13. package/dist/es2019/styled/rankable/TableRow.js +3 -3
  14. package/dist/es2019/theme.js +18 -18
  15. package/dist/es2019/version.json +1 -1
  16. package/dist/esm/components/Body.js +1 -1
  17. package/dist/esm/components/Stateless.js +1 -1
  18. package/dist/esm/styled/TableHead.js +4 -4
  19. package/dist/esm/styled/TableRow.js +4 -4
  20. package/dist/esm/styled/rankable/TableRow.js +3 -3
  21. package/dist/esm/theme.js +18 -18
  22. package/dist/esm/version.json +1 -1
  23. package/dist/types/theme.d.ts +9 -9
  24. package/dist/types/types.d.ts +4 -0
  25. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/dynamic-table
2
2
 
3
+ ## 14.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Rows can now also be highlighted using the isHighlighted property inside the rows data
8
+
9
+ ### Patch Changes
10
+
11
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
12
+ - Updated dependencies
13
+
3
14
  ## 14.4.4
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/components/Body.js CHANGED
@@ -54,7 +54,7 @@ var Body = /*#__PURE__*/function (_React$Component) {
54
54
  isFixedSize: isFixedSize,
55
55
  key: row.key || rowIndex,
56
56
  row: row,
57
- isHighlighted: !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
57
+ isHighlighted: row.isHighlighted || !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
58
58
  testId: testId
59
59
  });
60
60
  }));
package/dist/cjs/components/Stateless.js CHANGED
@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
52
52
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
53
53
 
54
54
  var packageName = "@atlaskit/dynamic-table";
55
- var packageVersion = "14.4.4";
55
+ var packageVersion = "14.5.0";
56
56
 
57
57
  function toggleSortOrder(currentSortOrder) {
58
58
  switch (currentSortOrder) {
package/dist/cjs/styled/TableHead.js CHANGED
@@ -44,7 +44,7 @@ var rankingStyles = (0, _core.css)({
44
44
 
45
45
  var getHeadStyles = function getHeadStyles(theme) {
46
46
  return (0, _core.css)({
47
- borderBottom: "2px solid ".concat("var(--ds-border-neutral, ".concat(_theme.head.borderColor({
47
+ borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_theme.head.borderColor({
48
48
  theme: theme
49
49
  }), ")"))
50
50
  });
@@ -68,9 +68,9 @@ var headCellStyles = (0, _core.css)([_constants3.cellStyles, {
68
68
  position: 'relative',
69
69
  textAlign: 'left',
70
70
  verticalAlign: 'top',
71
- color: "var(--ds-text-lowEmphasis, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
71
+ color: "var(--ds-text-subtlest, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
72
72
  '&:focus': {
73
- outline: "solid 2px ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")"))
73
+ outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
74
74
  }
75
75
  }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
76
76
 
@@ -154,7 +154,7 @@ exports.getArrowStyles = getArrowStyles;
154
154
  var onClickStyles = (0, _core.css)({
155
155
  '&:hover': {
156
156
  cursor: 'pointer',
157
- backgroundColor: "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30A, ")")
157
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
158
158
  }
159
159
  });
160
160
  var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
package/dist/cjs/styled/TableRow.js CHANGED
@@ -20,19 +20,19 @@ var _DynamicTable = require("./DynamicTable");
20
20
  var _excluded = ["isHighlighted", "children", "style"];
21
21
  var rowStyles = (0, _core.css)({
22
22
  '&:focus': {
23
- outline: "2px solid ".concat("var(--ds-border-focus, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
23
+ outline: "2px solid ".concat("var(--ds-border-focused, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
24
24
  outlineOffset: "-2px"
25
25
  }
26
26
  });
27
27
  var rowBackgroundStyles = (0, _core.css)({
28
28
  '&:hover': {
29
- backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
29
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
30
30
  }
31
31
  });
32
32
  var rowHighlightedBackgroundStyles = (0, _core.css)({
33
- backgroundColor: "var(--ds-background-selected-resting, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
33
+ backgroundColor: "var(--ds-background-brand, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
34
34
  '&:hover': {
35
- backgroundColor: "var(--ds-background-selected-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
35
+ backgroundColor: "var(--ds-background-brand-hovered, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
36
36
  }
37
37
  });
38
38
  var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
package/dist/cjs/styled/rankable/TableRow.js CHANGED
@@ -23,21 +23,21 @@ var _excluded = ["isRanking", "isRankingItem"];
23
23
  var rankingStyles = (0, _core.css)({
24
24
  display: 'block'
25
25
  });
26
- var elevationStyle = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")");
26
+ var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")");
27
27
  /**
28
28
  * TODO: Pass the props here to get particular theme for the table
29
29
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
30
30
  */
31
31
 
32
32
  var rankingItemStyles = (0, _core.css)({
33
- backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")"),
33
+ backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
34
34
  boxShadow: elevationStyle,
35
35
  borderRadius: '2px'
36
36
  });
37
37
  var draggableStyles = (0, _core.css)({
38
38
  '&:focus': {
39
39
  outlineStyle: 'solid',
40
- outlineColor: "var(--ds-border-focus, ".concat(_colors.B100, ")")
40
+ outlineColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
41
41
  },
42
42
  outlineWidth: '2px'
43
43
  });
package/dist/cjs/theme.js CHANGED
@@ -24,46 +24,46 @@ var MSThemeColors = {
24
24
  exports.MSThemeColors = MSThemeColors;
25
25
  var arrow = {
26
26
  defaultColor: (0, _components.themed)({
27
- light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N40, ")"),
28
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN40, ")")
27
+ light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
28
+ dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
29
29
  }),
30
30
  selectedColor: (0, _components.themed)({
31
- light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
32
- dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
31
+ light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
32
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
33
33
  }),
34
34
  hoverColor: (0, _components.themed)({
35
- light: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.N60, ")"),
36
- dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.DN60, ")")
35
+ light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
36
+ dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
37
37
  })
38
38
  };
39
39
  exports.arrow = arrow;
40
40
  var row = {
41
41
  focusOutline: (0, _components.themed)({
42
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
43
- dark: "var(--ds-border-focus, ".concat(colors.B100, ")")
42
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
43
+ dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
44
44
  }),
45
45
  highlightedBackground: (0, _components.themed)({
46
- light: "var(--ds-background-selected-resting, ".concat(colors.B50, ")"),
47
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN50, ")")
46
+ light: "var(--ds-background-brand, ".concat(colors.B50, ")"),
47
+ dark: "var(--ds-background-brand, ".concat(colors.DN50, ")")
48
48
  }),
49
49
  hoverBackground: (0, _components.themed)({
50
- light: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.N10, ")"),
51
- dark: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.DN40, ")")
50
+ light: "var(--ds-background-input, ".concat(colors.N10, ")"),
51
+ dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
52
52
  }),
53
53
  hoverHighlightedBackground: (0, _components.themed)({
54
- light: "var(--ds-background-selected-hover, ".concat(colors.B75, ")"),
55
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN60, ")")
54
+ light: "var(--ds-background-brand-hovered, ".concat(colors.B75, ")"),
55
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN60, ")")
56
56
  })
57
57
  };
58
58
  exports.row = row;
59
59
  var head = {
60
60
  borderColor: (0, _components.themed)({
61
- light: "var(--ds-border-neutral, ".concat(colors.N40, ")"),
62
- dark: "var(--ds-border-neutral, ".concat(colors.DN50, ")")
61
+ light: "var(--ds-border, ".concat(colors.N40, ")"),
62
+ dark: "var(--ds-border, ".concat(colors.DN50, ")")
63
63
  }),
64
64
  textColor: (0, _components.themed)({
65
- light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
66
- dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
65
+ light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
66
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
67
67
  })
68
68
  };
69
69
  exports.head = head;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dynamic-table",
3
- "version": "14.4.4",
3
+ "version": "14.5.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/Body.js CHANGED
@@ -18,7 +18,7 @@ class Body extends React.Component {
18
18
  isFixedSize: isFixedSize,
19
19
  key: row.key || rowIndex,
20
20
  row: row,
21
- isHighlighted: !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
21
+ isHighlighted: row.isHighlighted || !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
22
22
  testId: testId
23
23
  })));
24
24
  }
package/dist/es2019/components/Stateless.js CHANGED
@@ -13,7 +13,7 @@ import ManagedPagination from './managed-pagination';
13
13
  import RankableTableBody from './rankable/Body';
14
14
  import TableHead from './TableHead';
15
15
  const packageName = "@atlaskit/dynamic-table";
16
- const packageVersion = "14.4.4";
16
+ const packageVersion = "14.5.0";
17
17
 
18
18
  function toggleSortOrder(currentSortOrder) {
19
19
  switch (currentSortOrder) {
package/dist/es2019/styled/TableHead.js CHANGED
@@ -16,7 +16,7 @@ const rankingStyles = css({
16
16
  });
17
17
 
18
18
  const getHeadStyles = theme => css({
19
- borderBottom: `2px solid ${`var(--ds-border-neutral, ${head.borderColor({
19
+ borderBottom: `2px solid ${`var(--ds-border, ${head.borderColor({
20
20
  theme
21
21
  })})`}`
22
22
  });
@@ -38,9 +38,9 @@ const headCellStyles = css([cellStyles, {
38
38
  position: 'relative',
39
39
  textAlign: 'left',
40
40
  verticalAlign: 'top',
41
- color: `var(--ds-text-lowEmphasis, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
41
+ color: `var(--ds-text-subtlest, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
42
42
  '&:focus': {
43
- outline: `solid 2px ${`var(--ds-border-focus, ${B100})`}`
43
+ outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
44
44
  }
45
45
  }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
46
46
 
@@ -128,7 +128,7 @@ export const getArrowStyles = (isSortable, sortOrder, theme) => {
128
128
  const onClickStyles = css({
129
129
  '&:hover': {
130
130
  cursor: 'pointer',
131
- backgroundColor: `var(--ds-background-subtleNeutral-hover, ${N30A})`
131
+ backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
132
132
  }
133
133
  });
134
134
  export const HeadCell = /*#__PURE__*/forwardRef(({
package/dist/es2019/styled/TableRow.js CHANGED
@@ -6,19 +6,19 @@ import { css, jsx } from '@emotion/core';
6
6
  import { tableRowCSSVars as cssVars } from './DynamicTable';
7
7
  const rowStyles = css({
8
8
  '&:focus': {
9
- outline: `2px solid ${`var(--ds-border-focus, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
9
+ outline: `2px solid ${`var(--ds-border-focused, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
10
10
  outlineOffset: `-2px`
11
11
  }
12
12
  });
13
13
  const rowBackgroundStyles = css({
14
14
  '&:hover': {
15
- backgroundColor: `var(--ds-background-transparentNeutral-hover, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`
15
+ backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`
16
16
  }
17
17
  });
18
18
  const rowHighlightedBackgroundStyles = css({
19
- backgroundColor: `var(--ds-background-selected-resting, ${`var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`})`,
19
+ backgroundColor: `var(--ds-background-brand, ${`var(${cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND})`})`,
20
20
  '&:hover': {
21
- backgroundColor: `var(--ds-background-selected-hover, ${`var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`})`
21
+ backgroundColor: `var(--ds-background-brand-hovered, ${`var(${cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND})`})`
22
22
  }
23
23
  });
24
24
  export const TableBodyRow = /*#__PURE__*/forwardRef(({
package/dist/es2019/styled/rankable/TableRow.js CHANGED
@@ -8,21 +8,21 @@ import { TableBodyRow } from '../TableRow';
8
8
  const rankingStyles = css({
9
9
  display: 'block'
10
10
  });
11
- const elevationStyle = `var(--ds-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`;
11
+ const elevationStyle = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`})`;
12
12
  /**
13
13
  * TODO: Pass the props here to get particular theme for the table
14
14
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
15
15
  */
16
16
 
17
17
  const rankingItemStyles = css({
18
- backgroundColor: `var(--ds-background-subtleNeutral-resting, ${N20})`,
18
+ backgroundColor: `var(--ds-background-neutral, ${N20})`,
19
19
  boxShadow: elevationStyle,
20
20
  borderRadius: '2px'
21
21
  });
22
22
  const draggableStyles = css({
23
23
  '&:focus': {
24
24
  outlineStyle: 'solid',
25
- outlineColor: `var(--ds-border-focus, ${B100})`
25
+ outlineColor: `var(--ds-border-focused, ${B100})`
26
26
  },
27
27
  outlineWidth: '2px'
28
28
  });
package/dist/es2019/theme.js CHANGED
@@ -8,43 +8,43 @@ export const MSThemeColors = {
8
8
  };
9
9
  export const arrow = {
10
10
  defaultColor: themed({
11
- light: `var(--ds-background-subtleNeutral-resting, ${colors.N40})`,
12
- dark: `var(--ds-background-subtleNeutral-resting, ${colors.DN40})`
11
+ light: `var(--ds-background-neutral, ${colors.N40})`,
12
+ dark: `var(--ds-background-neutral, ${colors.DN40})`
13
13
  }),
14
14
  selectedColor: themed({
15
- light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
16
- dark: `var(--ds-text-lowEmphasis, ${colors.DN300})`
15
+ light: `var(--ds-text-subtlest, ${colors.N300})`,
16
+ dark: `var(--ds-text-subtlest, ${colors.DN300})`
17
17
  }),
18
18
  hoverColor: themed({
19
- light: `var(--ds-background-subtleNeutral-pressed, ${colors.N60})`,
20
- dark: `var(--ds-background-subtleNeutral-pressed, ${colors.DN60})`
19
+ light: `var(--ds-background-neutral-pressed, ${colors.N60})`,
20
+ dark: `var(--ds-background-neutral-pressed, ${colors.DN60})`
21
21
  })
22
22
  };
23
23
  export const row = {
24
24
  focusOutline: themed({
25
- light: `var(--ds-border-focus, ${colors.B100})`,
26
- dark: `var(--ds-border-focus, ${colors.B100})`
25
+ light: `var(--ds-border-focused, ${colors.B100})`,
26
+ dark: `var(--ds-border-focused, ${colors.B100})`
27
27
  }),
28
28
  highlightedBackground: themed({
29
- light: `var(--ds-background-selected-resting, ${colors.B50})`,
30
- dark: `var(--ds-background-selected-resting, ${colors.DN50})`
29
+ light: `var(--ds-background-brand, ${colors.B50})`,
30
+ dark: `var(--ds-background-brand, ${colors.DN50})`
31
31
  }),
32
32
  hoverBackground: themed({
33
- light: `var(--ds-background-subtleBorderedNeutral-resting, ${colors.N10})`,
34
- dark: `var(--ds-background-subtleBorderedNeutral-resting, ${colors.DN40})`
33
+ light: `var(--ds-background-input, ${colors.N10})`,
34
+ dark: `var(--ds-background-input, ${colors.DN40})`
35
35
  }),
36
36
  hoverHighlightedBackground: themed({
37
- light: `var(--ds-background-selected-hover, ${colors.B75})`,
38
- dark: `var(--ds-background-selected-hover, ${colors.DN60})`
37
+ light: `var(--ds-background-brand-hovered, ${colors.B75})`,
38
+ dark: `var(--ds-background-brand-hovered, ${colors.DN60})`
39
39
  })
40
40
  };
41
41
  export const head = {
42
42
  borderColor: themed({
43
- light: `var(--ds-border-neutral, ${colors.N40})`,
44
- dark: `var(--ds-border-neutral, ${colors.DN50})`
43
+ light: `var(--ds-border, ${colors.N40})`,
44
+ dark: `var(--ds-border, ${colors.DN50})`
45
45
  }),
46
46
  textColor: themed({
47
- light: `var(--ds-text-lowEmphasis, ${colors.N300})`,
48
- dark: `var(--ds-text-lowEmphasis, ${colors.DN300})`
47
+ light: `var(--ds-text-subtlest, ${colors.N300})`,
48
+ dark: `var(--ds-text-subtlest, ${colors.DN300})`
49
49
  })
50
50
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dynamic-table",
3
- "version": "14.4.4",
3
+ "version": "14.5.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/Body.js CHANGED
@@ -40,7 +40,7 @@ var Body = /*#__PURE__*/function (_React$Component) {
40
40
  isFixedSize: isFixedSize,
41
41
  key: row.key || rowIndex,
42
42
  row: row,
43
- isHighlighted: !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
43
+ isHighlighted: row.isHighlighted || !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
44
44
  testId: testId
45
45
  });
46
46
  }));
package/dist/esm/components/Stateless.js CHANGED
@@ -24,7 +24,7 @@ import ManagedPagination from './managed-pagination';
24
24
  import RankableTableBody from './rankable/Body';
25
25
  import TableHead from './TableHead';
26
26
  var packageName = "@atlaskit/dynamic-table";
27
- var packageVersion = "14.4.4";
27
+ var packageVersion = "14.5.0";
28
28
 
29
29
  function toggleSortOrder(currentSortOrder) {
30
30
  switch (currentSortOrder) {
package/dist/esm/styled/TableHead.js CHANGED
@@ -25,7 +25,7 @@ var rankingStyles = css({
25
25
 
26
26
  var getHeadStyles = function getHeadStyles(theme) {
27
27
  return css({
28
- borderBottom: "2px solid ".concat("var(--ds-border-neutral, ".concat(head.borderColor({
28
+ borderBottom: "2px solid ".concat("var(--ds-border, ".concat(head.borderColor({
29
29
  theme: theme
30
30
  }), ")"))
31
31
  });
@@ -48,9 +48,9 @@ var headCellStyles = css([cellStyles, {
48
48
  position: 'relative',
49
49
  textAlign: 'left',
50
50
  verticalAlign: 'top',
51
- color: "var(--ds-text-lowEmphasis, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
51
+ color: "var(--ds-text-subtlest, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
52
52
  '&:focus': {
53
- outline: "solid 2px ".concat("var(--ds-border-focus, ".concat(B100, ")"))
53
+ outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
54
54
  }
55
55
  }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
56
56
 
@@ -132,7 +132,7 @@ export var getArrowStyles = function getArrowStyles(isSortable, sortOrder, theme
132
132
  var onClickStyles = css({
133
133
  '&:hover': {
134
134
  cursor: 'pointer',
135
- backgroundColor: "var(--ds-background-subtleNeutral-hover, ".concat(N30A, ")")
135
+ backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
136
136
  }
137
137
  });
138
138
  export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
package/dist/esm/styled/TableRow.js CHANGED
@@ -8,19 +8,19 @@ import { css, jsx } from '@emotion/core';
8
8
  import { tableRowCSSVars as cssVars } from './DynamicTable';
9
9
  var rowStyles = css({
10
10
  '&:focus': {
11
- outline: "2px solid ".concat("var(--ds-border-focus, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
11
+ outline: "2px solid ".concat("var(--ds-border-focused, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
12
12
  outlineOffset: "-2px"
13
13
  }
14
14
  });
15
15
  var rowBackgroundStyles = css({
16
16
  '&:hover': {
17
- backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
17
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
18
18
  }
19
19
  });
20
20
  var rowHighlightedBackgroundStyles = css({
21
- backgroundColor: "var(--ds-background-selected-resting, ".concat("var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
21
+ backgroundColor: "var(--ds-background-brand, ".concat("var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
22
22
  '&:hover': {
23
- backgroundColor: "var(--ds-background-selected-hover, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
23
+ backgroundColor: "var(--ds-background-brand-hovered, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
24
24
  }
25
25
  });
26
26
  export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
package/dist/esm/styled/rankable/TableRow.js CHANGED
@@ -10,21 +10,21 @@ import { TableBodyRow } from '../TableRow';
10
10
  var rankingStyles = css({
11
11
  display: 'block'
12
12
  });
13
- var elevationStyle = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")");
13
+ var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")");
14
14
  /**
15
15
  * TODO: Pass the props here to get particular theme for the table
16
16
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
17
17
  */
18
18
 
19
19
  var rankingItemStyles = css({
20
- backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")"),
20
+ backgroundColor: "var(--ds-background-neutral, ".concat(N20, ")"),
21
21
  boxShadow: elevationStyle,
22
22
  borderRadius: '2px'
23
23
  });
24
24
  var draggableStyles = css({
25
25
  '&:focus': {
26
26
  outlineStyle: 'solid',
27
- outlineColor: "var(--ds-border-focus, ".concat(B100, ")")
27
+ outlineColor: "var(--ds-border-focused, ".concat(B100, ")")
28
28
  },
29
29
  outlineWidth: '2px'
30
30
  });
package/dist/esm/theme.js CHANGED
@@ -8,43 +8,43 @@ export var MSThemeColors = {
8
8
  };
9
9
  export var arrow = {
10
10
  defaultColor: themed({
11
- light: "var(--ds-background-subtleNeutral-resting, ".concat(colors.N40, ")"),
12
- dark: "var(--ds-background-subtleNeutral-resting, ".concat(colors.DN40, ")")
11
+ light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
12
+ dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
13
13
  }),
14
14
  selectedColor: themed({
15
- light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
16
- dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
15
+ light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
16
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
17
17
  }),
18
18
  hoverColor: themed({
19
- light: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.N60, ")"),
20
- dark: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.DN60, ")")
19
+ light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
20
+ dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
21
21
  })
22
22
  };
23
23
  export var row = {
24
24
  focusOutline: themed({
25
- light: "var(--ds-border-focus, ".concat(colors.B100, ")"),
26
- dark: "var(--ds-border-focus, ".concat(colors.B100, ")")
25
+ light: "var(--ds-border-focused, ".concat(colors.B100, ")"),
26
+ dark: "var(--ds-border-focused, ".concat(colors.B100, ")")
27
27
  }),
28
28
  highlightedBackground: themed({
29
- light: "var(--ds-background-selected-resting, ".concat(colors.B50, ")"),
30
- dark: "var(--ds-background-selected-resting, ".concat(colors.DN50, ")")
29
+ light: "var(--ds-background-brand, ".concat(colors.B50, ")"),
30
+ dark: "var(--ds-background-brand, ".concat(colors.DN50, ")")
31
31
  }),
32
32
  hoverBackground: themed({
33
- light: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.N10, ")"),
34
- dark: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(colors.DN40, ")")
33
+ light: "var(--ds-background-input, ".concat(colors.N10, ")"),
34
+ dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
35
35
  }),
36
36
  hoverHighlightedBackground: themed({
37
- light: "var(--ds-background-selected-hover, ".concat(colors.B75, ")"),
38
- dark: "var(--ds-background-selected-hover, ".concat(colors.DN60, ")")
37
+ light: "var(--ds-background-brand-hovered, ".concat(colors.B75, ")"),
38
+ dark: "var(--ds-background-brand-hovered, ".concat(colors.DN60, ")")
39
39
  })
40
40
  };
41
41
  export var head = {
42
42
  borderColor: themed({
43
- light: "var(--ds-border-neutral, ".concat(colors.N40, ")"),
44
- dark: "var(--ds-border-neutral, ".concat(colors.DN50, ")")
43
+ light: "var(--ds-border, ".concat(colors.N40, ")"),
44
+ dark: "var(--ds-border, ".concat(colors.DN50, ")")
45
45
  }),
46
46
  textColor: themed({
47
- light: "var(--ds-text-lowEmphasis, ".concat(colors.N300, ")"),
48
- dark: "var(--ds-text-lowEmphasis, ".concat(colors.DN300, ")")
47
+ light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
48
+ dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
49
49
  })
50
50
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/dynamic-table",
3
- "version": "14.4.4",
3
+ "version": "14.5.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/theme.d.ts CHANGED
@@ -5,17 +5,17 @@ export declare const MSThemeColors: {
5
5
  SelectedText: string;
6
6
  };
7
7
  export declare const arrow: {
8
- defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-resting)">;
9
- selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
10
- hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-pressed)">;
8
+ defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
9
+ selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
10
+ hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-pressed)">;
11
11
  };
12
12
  export declare const row: {
13
- focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focus)">;
14
- highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-resting)">;
15
- hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleBorderedNeutral-resting)">;
16
- hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-hover)">;
13
+ focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
14
+ highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand)">;
15
+ hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-input)">;
16
+ hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand-hovered)">;
17
17
  };
18
18
  export declare const head: {
19
- borderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border-neutral)">;
20
- textColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
19
+ borderColor: import("@atlaskit/theme").ThemedValue<"var(--ds-border)">;
20
+ textColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
21
21
  };
package/dist/types/types.d.ts CHANGED
@@ -292,6 +292,10 @@ export interface RowType extends React.ComponentPropsWithoutRef<'tr'> {
292
292
  * A key event handler to support interaction of a row.
293
293
  */
294
294
  onKeyPress?: React.KeyboardEventHandler;
295
+ /**
296
+ * Highlights the row. Should be used to draw attention to a row; not to indicate selection.
297
+ */
298
+ isHighlighted?: boolean;
295
299
  /**
296
300
  * Hook for automated testing.
297
301
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dynamic-table",
3
- "version": "14.4.4",
3
+ "version": "14.5.0",
4
4
  "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/pagination": "^14.0.0",
29
29
  "@atlaskit/spinner": "^15.0.0",
30
30
  "@atlaskit/theme": "^12.1.0",
31
- "@atlaskit/tokens": "^0.5.0",
31
+ "@atlaskit/tokens": "^0.6.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/core": "^10.0.9",
34
34
  "react-beautiful-dnd": "^12.1.1"