@atlaskit/dynamic-table 14.3.2 → 14.4.0

package/dist/cjs/styled/TableHead.js

@@ -2,47 +2,183 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeadCell = exports.Head = void 0;
+exports.HeadCell = exports.getArrowStyles = exports.Head = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _theme = require("../theme");
+var _components = require("@atlaskit/theme/components");
 
-var _constants = require("./constants");
+var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _tokens = require("@atlaskit/tokens");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _constants2 = require("../internal/constants");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _theme = require("../theme");
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n"])));
+var _constants3 = require("./constants");
 
-var Head = _styledComponents.default.thead(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 2px solid ", ";\n  ", ";\n"])), _theme.head.borderColor, function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
+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; }
 
-exports.Head = Head;
+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) { (0, _defineProperty2.default)(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; }
 
-var HeadCell = _styledComponents.default.th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _constants.onClickStyle)({
-    onClick: Boolean(onClick)
+var gridSize = (0, _constants.gridSize)();
+var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
+var rankingStyles = (0, _core.css)({
+  display: 'block'
+});
+
+var getHeadStyles = function getHeadStyles(theme) {
+  return (0, _core.css)({
+    borderBottom: "2px solid ".concat((0, _tokens.token)('color.border.neutral', _theme.head.borderColor({
+      theme: theme
+    })))
   });
-}, function (p) {
-  return (0, _constants.truncateStyle)(p);
-}, function (p) {
-  return (0, _constants.arrowsStyle)(p);
-}, _constants.cellStyle, _theme.head.textColor, _colors.B100);
+};
 
+var Head = function Head(_ref) {
+  var isRanking = _ref.isRanking,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking"]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("thead", (0, _extends2.default)({
+    css: [getHeadStyles(theme), isRanking && rankingStyles]
+  }, props));
+};
+
+exports.Head = Head;
+var headCellStyles = (0, _core.css)([_constants3.cellStyles, {
+  border: 'none',
+  boxSizing: 'border-box',
+  fontSize: '12px',
+  fontWeight: 600,
+  position: 'relative',
+  textAlign: 'left',
+  verticalAlign: 'top',
+  color: (0, _tokens.token)('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  '&:focus': {
+    outline: "solid 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
+  }
+}]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
+
+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(_theme.MSThemeColors.Background)
+    }
+  };
+  return (0, _core.css)({
+    '& > span': {
+      position: 'relative',
+      '&::before': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderBottom: "3px solid ".concat(sortOrder === _constants2.ASC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: '8px',
+        content: '""'
+      }),
+      '&::after': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderTop: "3px solid ".concat(sortOrder === _constants2.DESC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: 0,
+        content: '""'
+      })
+    },
+    '&:hover > span': {
+      '&::before': {
+        borderBottom: "3px solid\n          ".concat(sortOrder === _constants2.ASC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.hoverColor({
+          theme: theme
+        }))
+      },
+      '&::after': {
+        borderTop: "3px solid\n          ".concat(sortOrder === _constants2.DESC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.hoverColor({
+          theme: theme
+        }))
+      }
+    },
+    '@media (forced-colors: active)': {
+      '& > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        }
+      },
+      '&:hover > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        }
+      }
+    }
+  });
+};
+
+exports.getArrowStyles = getArrowStyles;
+var onClickStyles = (0, _core.css)({
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30A)
+  }
+});
+var HeadCell = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(_ref2, ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"]);
+  var theme = (0, _components.useGlobalTheme)();
+
+  var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && (0, _constants3.getTruncationStyleVars)({
+    width: width
+  })), {}, (0, _defineProperty2.default)({}, CSS_VAR_TEXT_COLOR, _theme.head.textColor({
+    theme: theme
+  })));
+
+  return (0, _core.jsx)("th", (0, _extends2.default)({
+    style: mergedStyles,
+    css: [headCellStyles, onClick && onClickStyles, _constants3.truncationWidthStyles, isFixedSize && shouldTruncate && _constants3.fixedSizeTruncateStyles, isFixedSize && _constants3.overflowTruncateStyles, getArrowStyles(isSortable, sortOrder, theme)],
+    onClick: onClick,
+    ref: ref
+  }, rest), children);
+});
 exports.HeadCell = HeadCell;

package/dist/cjs/styled/TableRow.js

@@ -2,33 +2,51 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableBodyRow = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _theme = require("../theme");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _react = require("react");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _core = require("@emotion/core");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _tokens = require("@atlaskit/tokens");
 
-var outlineWidth = '2px';
-
-var TableBodyRow = _styledComponents.default.tr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      background-color: ", ";\n    "])), _theme.row.highlightedBackground);
-}, function (_ref2) {
-  var isHighlighted = _ref2.isHighlighted;
-  return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n      "])), isHighlighted ? _theme.row.hoverHighlightedBackground : _theme.row.hoverBackground);
-}, outlineWidth, _theme.row.focusOutline, outlineWidth);
+var _DynamicTable = require("./DynamicTable");
 
+/** @jsx jsx */
+var rowStyles = (0, _core.css)({
+  '&:focus': {
+    outline: "2px solid ".concat((0, _tokens.token)('color.border.focus', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outlineOffset: "-2px"
+  }
+});
+var rowBackgroundStyles = (0, _core.css)({
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+  }
+});
+var rowHighlightedBackgroundStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+  }
+});
+var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var isHighlighted = _ref.isHighlighted,
+      children = _ref.children,
+      style = _ref.style,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["isHighlighted", "children", "style"]);
+  return (0, _core.jsx)("tr", (0, _extends2.default)({
+    style: style,
+    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
+  }, rest, {
+    ref: ref
+  }), children);
+});
 exports.TableBodyRow = TableBodyRow;

package/dist/cjs/styled/constants.js

@@ -5,50 +5,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cellStyle = exports.arrowsStyle = exports.onClickStyle = exports.truncateStyle = void 0;
+exports.cellStyles = exports.getTruncationStyleVars = exports.overflowTruncateStyles = exports.fixedSizeTruncateStyles = exports.truncationWidthStyles = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _styledComponents = require("styled-components");
-
-var _colors = require("@atlaskit/theme/colors");
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _constants2 = require("../internal/constants");
-
-var _theme = require("../theme");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-var truncateStyle = function truncateStyle(_ref) {
-  var width = _ref.width,
-      isFixedSize = _ref.isFixedSize,
-      shouldTruncate = _ref.shouldTruncate;
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", ";\n  ", ";\n"])), width ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        width: ", "%;\n      "])), width) : '', isFixedSize ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        overflow: hidden;\n      "]))) : '', isFixedSize && shouldTruncate ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "]))) : '');
-};
-
-exports.truncateStyle = truncateStyle;
+var CSS_VAR_WIDTH = '--local-dynamic-table-width';
+var gridSize = (0, _constants.gridSize)();
+var truncationWidthStyles = (0, _core.css)({
+  width: "var(".concat(CSS_VAR_WIDTH, ")")
+});
+exports.truncationWidthStyles = truncationWidthStyles;
+var fixedSizeTruncateStyles = (0, _core.css)({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+exports.fixedSizeTruncateStyles = fixedSizeTruncateStyles;
+var overflowTruncateStyles = (0, _core.css)({
+  overflow: 'hidden'
+});
+exports.overflowTruncateStyles = overflowTruncateStyles;
 
-var onClickStyle = function onClickStyle(_ref2) {
-  var onClick = _ref2.onClick;
-  return onClick && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    &:hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  "])), _colors.N30A);
+var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
+  var width = _ref.width;
+  return (0, _defineProperty2.default)({}, CSS_VAR_WIDTH, "".concat(width, "%"));
 };
 
-exports.onClickStyle = onClickStyle;
-
-var arrowsStyle = function arrowsStyle(props) {
-  var isSortable = props.isSortable,
-      sortOrder = props.sortOrder;
-
-  if (!isSortable) {
-    return '';
+exports.getTruncationStyleVars = getTruncationStyleVars;
+var cellStyles = (0, _core.css)({
+  border: 'none',
+  padding: "".concat(gridSize / 2, "px ").concat(gridSize, "px"),
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-
-  var pseudoBase = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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  "])), _constants.gridSize, _theme.MSThemeColors.Background);
-  return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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 === _constants2.ASC ? _theme.arrow.selectedColor(props) : _theme.arrow.defaultColor(props), pseudoBase, sortOrder === _constants2.DESC ? _theme.arrow.selectedColor(props) : _theme.arrow.defaultColor(props), sortOrder === _constants2.ASC ? _theme.arrow.selectedColor(props) : _theme.arrow.hoverColor(props), sortOrder === _constants2.DESC ? _theme.arrow.selectedColor(props) : _theme.arrow.hoverColor(props), sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text, sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text, sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text, sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text);
-};
-
-exports.arrowsStyle = arrowsStyle;
-var cellStyle = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() / 2, _constants.gridSize);
-exports.cellStyle = cellStyle;
+});
+exports.cellStyles = cellStyles;

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

@@ -7,12 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RowPlaceholderCell = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
-var _templateObject;
+/** @jsx jsx */
+var rowPlaceholderStyles = (0, _core.css)({
+  padding: 0
+});
 
-var RowPlaceholderCell = _styledComponents.default.td(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n"])));
+var RowPlaceholderCell = function RowPlaceholderCell(props) {
+  return (0, _core.jsx)("td", (0, _extends2.default)({
+    css: rowPlaceholderStyles
+  }, props));
+};
 
 exports.RowPlaceholderCell = RowPlaceholderCell;

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

@@ -2,28 +2,33 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RankableTableBodyCell = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _TableCell = require("../TableCell");
+var _core = require("@emotion/core");
 
-var _templateObject, _templateObject2;
+var _TableCell = require("../TableCell");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+/** @jsx jsx */
+var rankingStyles = (0, _core.css)({
+  boxSizing: 'border-box'
+});
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
+  var isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "innerRef"]);
+  return (0, _core.jsx)(_TableCell.TableBodyCell, (0, _extends2.default)({
+    css: isRanking && rankingStyles
+  }, props, {
+    innerRef: innerRef
+  }));
+};
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n"])));
-var RankableTableBodyCell = (0, _styledComponents.default)(_TableCell.TableBodyCell)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
 exports.RankableTableBodyCell = RankableTableBodyCell;

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

@@ -2,42 +2,54 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RankableTableBodyRow = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _elevation = require("@atlaskit/theme/elevation");
+var _react = require("react");
 
-var _TableRow = require("../TableRow");
+var _core = require("@emotion/core");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _colors = require("@atlaskit/theme/colors");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _tokens = require("@atlaskit/tokens");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _TableRow = require("../TableRow");
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n"])));
+/** @jsx jsx */
+var rankingStyles = (0, _core.css)({
+  display: 'block'
+});
+var elevationStyle = (0, _tokens.token)('shadow.overlay', "0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.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 = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  ", " border-radius: 2px;\n"])), _colors.N20, (0, _elevation.e500)());
-
-var draggableStyles = function draggableStyles(_ref) {
+var rankingItemStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+var draggableStyles = (0, _core.css)({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+  },
+  outlineWidth: '2px'
+});
+var RankableTableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isRanking = _ref.isRanking,
-      isRankingItem = _ref.isRankingItem;
-  return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", " &:focus {\n    outline-style: solid;\n    outline-color: ", ";\n    outline-width: 2px;\n  }\n"])), isRanking && rankingStyles, isRankingItem && rankingItemStyles, _colors.B100);
-};
-
-var RankableTableBodyRow = (0, _styledComponents.default)(_TableRow.TableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), draggableStyles);
+      isRankingItem = _ref.isRankingItem,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "isRankingItem"]);
+  return (0, _core.jsx)(_TableRow.TableBodyRow, (0, _extends2.default)({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});
 exports.RankableTableBodyRow = RankableTableBodyRow;

package/dist/cjs/theme.js

@@ -11,6 +11,8 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,46 +26,46 @@ var MSThemeColors = {
 exports.MSThemeColors = MSThemeColors;
 var arrow = {
   defaultColor: (0, _components.themed)({
-    light: colors.N40,
-    dark: colors.DN40
+    light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N40),
+    dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN40)
   }),
   selectedColor: (0, _components.themed)({
-    light: colors.N300,
-    dark: colors.DN300
+    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
+    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
   }),
   hoverColor: (0, _components.themed)({
-    light: colors.N60,
-    dark: colors.DN60
+    light: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.N60),
+    dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.DN60)
   })
 };
 exports.arrow = arrow;
 var row = {
   focusOutline: (0, _components.themed)({
-    light: colors.B100,
-    dark: colors.B100
+    light: (0, _tokens.token)('color.border.focus', colors.B100),
+    dark: (0, _tokens.token)('color.border.focus', colors.B100)
   }),
   highlightedBackground: (0, _components.themed)({
-    light: colors.B50,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.background.selected.resting', colors.B50),
+    dark: (0, _tokens.token)('color.background.selected.resting', colors.DN50)
   }),
   hoverBackground: (0, _components.themed)({
-    light: colors.N10,
-    dark: colors.DN40
+    light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.N10),
+    dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.DN40)
   }),
   hoverHighlightedBackground: (0, _components.themed)({
-    light: colors.B75,
-    dark: colors.DN60
+    light: (0, _tokens.token)('color.background.selected.hover', colors.B75),
+    dark: (0, _tokens.token)('color.background.selected.hover', colors.DN60)
   })
 };
 exports.row = row;
 var head = {
   borderColor: (0, _components.themed)({
-    light: colors.N40,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.border.neutral', colors.N40),
+    dark: (0, _tokens.token)('color.border.neutral', colors.DN50)
   }),
   textColor: (0, _components.themed)({
-    light: colors.N300,
-    dark: colors.DN300
+    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
+    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
   })
 };
 exports.head = head;

package/dist/cjs/version.json

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

package/dist/es2019/components/LoadingContainerAdvanced.js

@@ -61,7 +61,7 @@ export default class LoadingContainerAdvanced extends React.Component {
 
     _defineProperty(this, "getThisNode", () => safeFindDOMNode(this));
 
-    _defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinner));
+    _defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinnerRef));
 
     _defineProperty(this, "hasTargetNode", nextProps => !!this.getTargetNode(nextProps));
 
@@ -199,9 +199,7 @@ export default class LoadingContainerAdvanced extends React.Component {
         this.children = el;
       }
     }), isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, null, /*#__PURE__*/React.createElement(SpinnerContainer, {
-      innerRef: el => {
-        this.spinner = el;
-      }
+      ref: el => this.spinnerRef = el
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: spinnerSize,
       testId: testId && `${testId}--loadingSpinner`

package/dist/es2019/components/Stateless.js

@@ -13,7 +13,7 @@ import ManagedPagination from './managedPagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.3.2";
+const packageVersion = "14.4.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {