@atlaskit/dynamic-table 14.3.2 → 14.4.0

package/dist/esm/styled/LoadingContainer.js

@@ -1,10 +1,42 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled from 'styled-components';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var ContentsContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  opacity: ", ";\n"])), function (p) {
-  return p.contentsOpacity;
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
+var containerStyles = css({
+  position: 'relative'
+});
+export var Container = function Container(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: containerStyles
+  }, children);
+};
+var contentsContainerStyles = css({
+  pointerEvents: 'none',
+  opacity: "var(".concat(CSS_VAR_CONTENTS_OPACITY, ")")
+});
+export var ContentsContainer = function ContentsContainer(_ref2) {
+  var contentsOpacity = _ref2.contentsOpacity,
+      children = _ref2.children;
+  return jsx("div", {
+    style: _defineProperty({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
+    css: [contentsContainerStyles]
+  }, children);
+};
+var spinnerContainerStyles = css({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
 });
-export var SpinnerContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+export var SpinnerContainer = function SpinnerContainer(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: spinnerContainerStyles
+  }, children);
+};

package/dist/esm/styled/LoadingContainerAdvanced.js

@@ -1,9 +1,43 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
 
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled from 'styled-components';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n  position: relative;\n"])), gridSize() * 3);
-export var SpinnerBackdrop = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-export var SpinnerContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  top: 0;\n"])));
+var containerStyles = css({
+  marginBottom: "".concat(gridSize() * 3, "px"),
+  position: 'relative'
+});
+export var Container = function Container(props) {
+  return jsx("div", _extends({
+    css: containerStyles
+  }, props));
+};
+var spinnerBackdropStyles = css({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: spinnerBackdropStyles
+  }, children);
+};
+var spinnerContainerStyles = css({
+  position: 'relative',
+  top: 0
+});
+export var SpinnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: spinnerContainerStyles,
+    ref: ref
+  }, children);
+});

package/dist/esm/styled/TableCell.js

@@ -1,9 +1,23 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject;
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+export var TableBodyCell = function TableBodyCell(_ref) {
+  var width = _ref.width,
+      isFixedSize = _ref.isFixedSize,
+      shouldTruncate = _ref.shouldTruncate,
+      innerRef = _ref.innerRef,
+      props = _objectWithoutProperties(_ref, ["width", "isFixedSize", "shouldTruncate", "innerRef"]);
 
-import styled from 'styled-components';
-import { cellStyle, truncateStyle } from './constants';
-export var TableBodyCell = styled.td(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " ", ";\n"])), function (props) {
-  return truncateStyle(props);
-}, cellStyle);
+  return jsx("td", _extends({
+    style: getTruncationStyleVars({
+      width: width
+    }),
+    css: [truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, cellStyles] // HOC withDimensions complains about the types but it is working fine
+    // @ts-ignore
+    ,
+    ref: innerRef
+  }, props));
+};

package/dist/esm/styled/TableHead.js

@@ -1,23 +1,162 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled, { css } from 'styled-components';
-import { B100 } from '@atlaskit/theme/colors';
-import { head } from '../theme';
-import { arrowsStyle, cellStyle, onClickStyle, truncateStyle } from './constants';
-var rankingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n"])));
-export var Head = styled.thead(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-bottom: 2px solid ", ";\n  ", ";\n"])), head.borderColor, function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N30A } from '@atlaskit/theme/colors';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { ASC, DESC } from '../internal/constants';
+import { arrow, head, MSThemeColors } from '../theme';
+import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+var gridSize = getGridSize();
+var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
+var rankingStyles = css({
+  display: 'block'
 });
-export var HeadCell = styled.th(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", " \n  ", " \n  ", " \n  border: none;\n  color: ", ";\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n  &:focus {\n    outline: solid 2px ", ";\n  }\n"])), function (_ref2) {
-  var onClick = _ref2.onClick;
-  return onClickStyle({
-    onClick: Boolean(onClick)
+
+var getHeadStyles = function getHeadStyles(theme) {
+  return css({
+    borderBottom: "2px solid ".concat(token('color.border.neutral', head.borderColor({
+      theme: theme
+    })))
   });
-}, function (p) {
-  return truncateStyle(p);
-}, function (p) {
-  return arrowsStyle(p);
-}, cellStyle, head.textColor, B100);
+};
+
+export var Head = function Head(_ref) {
+  var isRanking = _ref.isRanking,
+      props = _objectWithoutProperties(_ref, ["isRanking"]);
+
+  var theme = useGlobalTheme();
+  return jsx("thead", _extends({
+    css: [getHeadStyles(theme), isRanking && rankingStyles]
+  }, props));
+};
+var headCellStyles = css([cellStyles, {
+  border: 'none',
+  boxSizing: 'border-box',
+  fontSize: '12px',
+  fontWeight: 600,
+  position: 'relative',
+  textAlign: 'left',
+  verticalAlign: 'top',
+  color: token('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  '&:focus': {
+    outline: "solid 2px ".concat(token('color.border.focus', B100))
+  }
+}]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
+
+export var getArrowStyles = function getArrowStyles(isSortable, sortOrder, theme) {
+  if (!isSortable) {
+    return '';
+  }
+
+  var pseudoBaseStyles = {
+    border: '3px solid transparent',
+    display: 'block',
+    height: 0,
+    right: "-".concat(gridSize, "px"),
+    width: 0,
+    '@media (forced-colors: active)': {
+      border: "3px solid ".concat(MSThemeColors.Background)
+    }
+  };
+  return css({
+    '& > span': {
+      position: 'relative',
+      '&::before': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderBottom: "3px solid ".concat(sortOrder === ASC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: '8px',
+        content: '""'
+      }),
+      '&::after': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderTop: "3px solid ".concat(sortOrder === DESC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: 0,
+        content: '""'
+      })
+    },
+    '&:hover > span': {
+      '&::before': {
+        borderBottom: "3px solid\n          ".concat(sortOrder === ASC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.hoverColor({
+          theme: theme
+        }))
+      },
+      '&::after': {
+        borderTop: "3px solid\n          ".concat(sortOrder === DESC ? arrow.selectedColor({
+          theme: theme
+        }) : arrow.hoverColor({
+          theme: theme
+        }))
+      }
+    },
+    '@media (forced-colors: active)': {
+      '& > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        }
+      },
+      '&:hover > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text)
+        }
+      }
+    }
+  });
+};
+var onClickStyles = css({
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: token('color.background.subtleNeutral.hover', N30A)
+  }
+});
+export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var width = _ref2.width,
+      children = _ref2.children,
+      isSortable = _ref2.isSortable,
+      sortOrder = _ref2.sortOrder,
+      isFixedSize = _ref2.isFixedSize,
+      shouldTruncate = _ref2.shouldTruncate,
+      onClick = _ref2.onClick,
+      style = _ref2.style,
+      rest = _objectWithoutProperties(_ref2, ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"]);
+
+  var theme = useGlobalTheme();
+
+  var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && getTruncationStyleVars({
+    width: width
+  })), {}, _defineProperty({}, CSS_VAR_TEXT_COLOR, head.textColor({
+    theme: theme
+  })));
+
+  return jsx("th", _extends({
+    style: mergedStyles,
+    css: [headCellStyles, onClick && onClickStyles, truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, getArrowStyles(isSortable, sortOrder, theme)],
+    onClick: onClick,
+    ref: ref
+  }, rest), children);
+});

package/dist/esm/styled/TableRow.js

@@ -1,14 +1,38 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { tableRowCSSVars as cssVars } from './DynamicTable';
+var rowStyles = css({
+  '&:focus': {
+    outline: "2px solid ".concat(token('color.border.focus', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outlineOffset: "-2px"
+  }
+});
+var rowBackgroundStyles = css({
+  '&:hover': {
+    backgroundColor: token('color.background.transparentNeutral.hover', "var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+  }
+});
+var rowHighlightedBackgroundStyles = css({
+  backgroundColor: token('color.background.selected.resting', "var(".concat(cssVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', "var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+  }
+});
+export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var isHighlighted = _ref.isHighlighted,
+      children = _ref.children,
+      style = _ref.style,
+      rest = _objectWithoutProperties(_ref, ["isHighlighted", "children", "style"]);
 
-import styled, { css } from 'styled-components';
-import { row } from '../theme';
-var outlineWidth = '2px';
-export var TableBodyRow = styled.tr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n"])), function (_ref) {
-  var isHighlighted = _ref.isHighlighted;
-  return isHighlighted && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), row.highlightedBackground);
-}, function (_ref2) {
-  var isHighlighted = _ref2.isHighlighted;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), isHighlighted ? row.hoverHighlightedBackground : row.hoverBackground);
-}, outlineWidth, row.focusOutline, outlineWidth);
+  return jsx("tr", _extends({
+    style: style,
+    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
+  }, rest, {
+    ref: ref
+  }), children);
+});

package/dist/esm/styled/constants.js

@@ -1,31 +1,30 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-import { css } from 'styled-components';
-import { N30A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { ASC, DESC } from '../internal/constants';
-import { arrow, MSThemeColors } from '../theme';
-export var truncateStyle = function truncateStyle(_ref) {
-  var width = _ref.width,
-      isFixedSize = _ref.isFixedSize,
-      shouldTruncate = _ref.shouldTruncate;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " ", ";\n  ", ";\n"])), width ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: ", "%;\n      "])), width) : '', isFixedSize ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: hidden;\n      "]))) : '', isFixedSize && shouldTruncate ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "]))) : '');
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { css } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var CSS_VAR_WIDTH = '--local-dynamic-table-width';
+var gridSize = getGridSize();
+export var truncationWidthStyles = css({
+  width: "var(".concat(CSS_VAR_WIDTH, ")")
+});
+export var fixedSizeTruncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export var overflowTruncateStyles = css({
+  overflow: 'hidden'
+});
+export var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
+  var width = _ref.width;
+  return _defineProperty({}, CSS_VAR_WIDTH, "".concat(width, "%"));
 };
-export var onClickStyle = function onClickStyle(_ref2) {
-  var onClick = _ref2.onClick;
-  return onClick && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    &:hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  "])), N30A);
-};
-export var arrowsStyle = function arrowsStyle(props) {
-  var isSortable = props.isSortable,
-      sortOrder = props.sortOrder;
-
-  if (!isSortable) {
-    return '';
+export var cellStyles = css({
+  border: 'none',
+  padding: "".concat(gridSize / 2, "px ").concat(gridSize, "px"),
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-
-  var pseudoBase = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n\n    @media (forced-colors: active) {\n      border: 3px solid ", ";\n    }\n  "])), gridSize, MSThemeColors.Background);
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    & > span {\n      position: relative;\n      &::before {\n        ", ";\n        border-bottom: 3px solid\n          ", ";\n        bottom: 8px;\n        content: ' ';\n      }\n      &::after {\n        ", ";\n        border-top: 3px solid\n          ", ";\n        bottom: 0;\n        content: ' ';\n      }\n    }\n\n    &:hover > span {\n      &::before {\n        border-bottom: 3px solid\n          ", ";\n      }\n      &::after {\n        border-top: 3px solid\n          ", ";\n      }\n    }\n\n    @media (forced-colors: active) {\n      & > span {\n        &::before {\n          border-bottom: 3px solid\n            ", ";\n        }\n        &::after {\n          border-top: 3px solid\n            ", ";\n        }\n      }\n\n      &:hover > span {\n        &::before {\n          border-bottom: 3px solid\n            ", ";\n        }\n        &::after {\n          border-top: 3px solid\n            ", ";\n        }\n      }\n    }\n  "])), pseudoBase, sortOrder === ASC ? arrow.selectedColor(props) : arrow.defaultColor(props), pseudoBase, sortOrder === DESC ? arrow.selectedColor(props) : arrow.defaultColor(props), sortOrder === ASC ? arrow.selectedColor(props) : arrow.hoverColor(props), sortOrder === DESC ? arrow.selectedColor(props) : arrow.hoverColor(props), sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text, sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text, sortOrder === ASC ? MSThemeColors.SelectedBackground : MSThemeColors.Text, sortOrder === DESC ? MSThemeColors.SelectedBackground : MSThemeColors.Text);
-};
-export var cellStyle = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border: none;\n  padding: ", "px ", "px;\n  text-align: left;\n\n  &:first-child {\n    padding-left: 0;\n  }\n  &:last-child {\n    padding-right: 0;\n  }\n"])), gridSize() / 2, gridSize);
+});

package/dist/esm/styled/rankable/RowPlaceholder.js

@@ -1,6 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
 
-var _templateObject;
-
-import styled from 'styled-components';
-export var RowPlaceholderCell = styled.td(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n"])));
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+var rowPlaceholderStyles = css({
+  padding: 0
+});
+export var RowPlaceholderCell = function RowPlaceholderCell(props) {
+  return jsx("td", _extends({
+    css: rowPlaceholderStyles
+  }, props));
+};

package/dist/esm/styled/rankable/TableCell.js

@@ -1,11 +1,20 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2;
-
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { TableBodyCell } from '../TableCell';
-var rankingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n"])));
-export var RankableTableBodyCell = styled(TableBodyCell)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
+var rankingStyles = css({
+  boxSizing: 'border-box'
+});
+export var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
+  var isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      props = _objectWithoutProperties(_ref, ["isRanking", "innerRef"]);
+
+  return jsx(TableBodyCell, _extends({
+    css: isRanking && rankingStyles
+  }, props, {
+    innerRef: innerRef
+  }));
+};

package/dist/esm/styled/rankable/TableRow.js

@@ -1,23 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-import styled, { css } from 'styled-components';
-import { B100, N20 } from '@atlaskit/theme/colors';
-import { e500 } from '@atlaskit/theme/elevation';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { TableBodyRow } from '../TableRow';
-var rankingStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n"])));
+var rankingStyles = css({
+  display: 'block'
+});
+var elevationStyle = token('shadow.overlay', "0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A));
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
-var rankingItemStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ", " border-radius: 2px;\n"])), N20, e500());
-
-var draggableStyles = function draggableStyles(_ref) {
+var rankingItemStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+var draggableStyles = css({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: token('color.border.focus', B100)
+  },
+  outlineWidth: '2px'
+});
+export var RankableTableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isRanking = _ref.isRanking,
-      isRankingItem = _ref.isRankingItem;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " ", " &:focus {\n    outline-style: solid;\n    outline-color: ", ";\n    outline-width: 2px;\n  }\n"])), isRanking && rankingStyles, isRankingItem && rankingItemStyles, B100);
-};
+      isRankingItem = _ref.isRankingItem,
+      props = _objectWithoutProperties(_ref, ["isRanking", "isRankingItem"]);
 
-export var RankableTableBodyRow = styled(TableBodyRow)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), draggableStyles);
+  return jsx(TableBodyRow, _extends({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});

package/dist/esm/theme.js

@@ -1,5 +1,6 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export var MSThemeColors = {
   Background: 'Canvas',
   Text: 'CanvasText',
@@ -8,43 +9,43 @@ export var MSThemeColors = {
 };
 export var arrow = {
   defaultColor: themed({
-    light: colors.N40,
-    dark: colors.DN40
+    light: token('color.background.subtleNeutral.resting', colors.N40),
+    dark: token('color.background.subtleNeutral.resting', colors.DN40)
   }),
   selectedColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   }),
   hoverColor: themed({
-    light: colors.N60,
-    dark: colors.DN60
+    light: token('color.background.subtleNeutral.pressed', colors.N60),
+    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
   })
 };
 export var row = {
   focusOutline: themed({
-    light: colors.B100,
-    dark: colors.B100
+    light: token('color.border.focus', colors.B100),
+    dark: token('color.border.focus', colors.B100)
   }),
   highlightedBackground: themed({
-    light: colors.B50,
-    dark: colors.DN50
+    light: token('color.background.selected.resting', colors.B50),
+    dark: token('color.background.selected.resting', colors.DN50)
   }),
   hoverBackground: themed({
-    light: colors.N10,
-    dark: colors.DN40
+    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
+    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
   }),
   hoverHighlightedBackground: themed({
-    light: colors.B75,
-    dark: colors.DN60
+    light: token('color.background.selected.hover', colors.B75),
+    dark: token('color.background.selected.hover', colors.DN60)
   })
 };
 export var head = {
   borderColor: themed({
-    light: colors.N40,
-    dark: colors.DN50
+    light: token('color.border.neutral', colors.N40),
+    dark: token('color.border.neutral', colors.DN50)
   }),
   textColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   })
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.3.2",
+	"version": "14.4.0",
 	"sideEffects": false
 }