@atlaskit/dynamic-table 14.3.1 → 14.4.2

package/dist/esm/styled/DynamicTable.js

@@ -1,13 +1,80 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { row } from '../theme';
+var gridSize = getGridSize();
+// CSS vars for table row
+// these are declared here to avoid being re-declared in each table row
+export var tableRowCSSVars = {
+  CSS_VAR_HOVER_BACKGROUND: '--local-dynamic-table-hover-bg',
+  CSS_VAR_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-highlighted-bg',
+  CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-hover-highlighted-bg',
+  CSS_VAR_ROW_FOCUS_OUTLINE: '--local-dynamic-table-row-focus-outline'
+};
+var fixedSizeTableStyles = css({
+  tableLayout: 'fixed'
+});
+var tableStyles = css({
+  borderCollapse: 'collapse',
+  width: '100%'
+});
+export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var isFixedSize = _ref.isFixedSize,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["isFixedSize", "children"]);
 
-import styled, { css } from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
-export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n"])), function (_ref) {
-  var isFixedSize = _ref.isFixedSize;
-  return isFixedSize && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      table-layout: fixed;\n    "])));
+  var theme = useGlobalTheme();
+  return jsx("table", _extends({
+    style: (_ref2 = {}, _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, row.hoverBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, row.highlightedBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, row.hoverHighlightedBackground({
+      theme: theme
+    })), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, row.focusOutline({
+      theme: theme
+    })), _ref2),
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    ref: ref
+  }, rest), children);
+});
+var captionStyles = css({
+  fontSize: '1.42857143em',
+
+  /* there is a bug in Safari: if element which creates a new stacking context
+     is a child of a table, table caption re-renders in bad wrong position
+     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
+  */
+  willChange: 'transform',
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: 1.2,
+  marginBottom: "".concat(gridSize, "px"),
+  marginTop: "".concat(gridSize * 3.5, "px"),
+  textAlign: 'left'
+});
+export var Caption = function Caption(_ref3) {
+  var children = _ref3.children;
+  return jsx("caption", {
+    css: captionStyles
+  }, children);
+};
+var paginationWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center'
 });
-export var Caption = styled.caption(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 1.42857143em;\n  /* there is a bug in Safari: if element which creates a new stacking context\n     is a child of a table, table caption re-renders in bad wrong position\n     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom\n  */\n  will-change: transform;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n"])), gridSize, multiply(gridSize, 3.5));
-export var PaginationWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"])));
+export var PaginationWrapper = function PaginationWrapper(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: paginationWrapperStyles
+  }, children);
+};

package/dist/esm/styled/EmptyBody.js

@@ -1,9 +1,24 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { gridSize } from '@atlaskit/theme/constants';
-import { multiply } from '@atlaskit/theme/math';
-export var EmptyViewWithFixedHeight = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n"])), multiply(gridSize, 18));
-export var EmptyViewContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: auto;\n  padding: 10px;\n  text-align: center;\n  width: 50%;\n"])));
+var fixedHeightStyles = css({
+  height: "".concat(gridSize() * 18, "px")
+});
+export var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: fixedHeightStyles
+  }, children);
+};
+var emptyViewContainerStyles = css({
+  margin: 'auto',
+  padding: '10px',
+  textAlign: 'center',
+  width: '50%'
+});
+export var EmptyViewContainer = function EmptyViewContainer(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: emptyViewContainerStyles
+  }, children);
+};

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,32 +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 { divide } from '@atlaskit/theme/math';
-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, typeof width !== 'undefined' ? "".concat(width, "%") : undefined);
 };
-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"])), divide(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
+  }));
+};