@atlaskit/dynamic-table 14.3.2 → 14.4.3

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/dynamic-table
 
+## 14.4.3
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 14.4.2
+
+### Patch Changes
+
+- [`78a7ffa81f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78a7ffa81f8) - Fixes a bug that meant an undefined width would still be stringifed and applied to the inline styles of table cells.
+
+## 14.4.1
+
+### Patch Changes
+
+- [`1601e51ab32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1601e51ab32) - Fixes for internal types.
+
+## 14.4.0
+
+### Minor Changes
+
+- [`dc35866892f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc35866892f) - [ux] Instrumented dynamic-table with the new theming package, @atlaskit/tokens.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- [`ca00a7783a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca00a7783a9) - Removes `styled-components` as a peer dependency in favour of a direct dependency on `emotion`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.3.2
 
 ### Patch Changes

package/README.md

@@ -1,4 +1,4 @@
-# Dynamic-table
+# Dynamic table
 
 Table component with pagination and sorting functionality.
 
@@ -10,4 +10,4 @@ yarn add @atlaskit/dynamic-table
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/dynamic-table).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/dynamic-table/usage).

package/dist/cjs/components/LoadingContainerAdvanced.js

@@ -102,7 +102,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
       return safeFindDOMNode((0, _assertThisInitialized2.default)(_this));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSpinnerNode", function () {
-      return safeFindDOMNode(_this.spinner);
+      return safeFindDOMNode(_this.spinnerRef);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasTargetNode", function (nextProps) {
       return !!_this.getTargetNode(nextProps);
@@ -242,8 +242,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
           _this2.children = el;
         }
       }), isLoading && /*#__PURE__*/_react.default.createElement(_LoadingContainerAdvanced.SpinnerBackdrop, null, /*#__PURE__*/_react.default.createElement(_LoadingContainerAdvanced.SpinnerContainer, {
-        innerRef: function innerRef(el) {
-          _this2.spinner = el;
+        ref: function ref(el) {
+          return _this2.spinnerRef = el;
         }
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: spinnerSize,

package/dist/cjs/components/Stateful.js

@@ -31,6 +31,32 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**
+ * __Dynamic Table__
+ *
+ * A table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/dynamic-table)
+ * - [Code](https://bitbucket.org/atlassian/atlassian-frontend/packages/design-system/dynamic-table)
+ *
+ * @example
+ * ```jsx
+ * import DynamicTable from '@atlaskit/dynamic-table';
+ *
+ * export default function TableUncontrolled() {
+ *  return (
+ *   <DynamicTable
+ *    head={head}
+ *    rows={rows}
+ *    rowsPerPage={10}
+ *    defaultPage={1}
+ *    loadingSpinnerSize="large"
+ *    isLoading={false}
+ *   />
+ *  );
+ * }
+ * ```
+ */
 var DynamicTable = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DynamicTable, _React$Component);
 

package/dist/cjs/components/Stateless.js

@@ -41,7 +41,7 @@ var _LoadingContainer = _interopRequireDefault(require("./LoadingContainer"));
 
 var _LoadingContainerAdvanced = _interopRequireDefault(require("./LoadingContainerAdvanced"));
 
-var _managedPagination = _interopRequireDefault(require("./managedPagination"));
+var _managedPagination = _interopRequireDefault(require("./managed-pagination"));
 
 var _Body2 = _interopRequireDefault(require("./rankable/Body"));
 
@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.3.2";
+var packageVersion = "14.4.3";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/cjs/components/TableHeadCell.js

@@ -11,58 +11,28 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _TableHead = require("../styled/TableHead");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var TableHeadCell = function TableHeadCell(_ref) {
+  var content = _ref.content,
+      inlineStyles = _ref.inlineStyles,
+      testId = _ref.testId,
+      isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      isSortable = _ref.isSortable,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"]);
+  return /*#__PURE__*/_react.default.createElement(_TableHead.HeadCell, (0, _extends2.default)({
+    style: inlineStyles,
+    "data-testid": testId && "".concat(testId, "--head--cell"),
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
+
+  }, rest, {
+    tabIndex: isSortable ? 0 : undefined,
+    isSortable: isSortable
+  }), /*#__PURE__*/_react.default.createElement("span", null, content));
+};
 
-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; } }
-
-var TableHeadCell = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(TableHeadCell, _React$Component);
-
-  var _super = _createSuper(TableHeadCell);
-
-  function TableHeadCell() {
-    (0, _classCallCheck2.default)(this, TableHeadCell);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(TableHeadCell, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          content = _this$props.content,
-          inlineStyles = _this$props.inlineStyles,
-          testId = _this$props.testId,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, ["content", "inlineStyles", "testId"]);
-      return /*#__PURE__*/_react.default.createElement(_TableHead.HeadCell, (0, _extends2.default)({
-        style: inlineStyles,
-        "data-testid": testId && "".concat(testId, "--head--cell")
-      }, rest, {
-        tabIndex: rest.isSortable ? 0 : undefined
-      }), /*#__PURE__*/_react.default.createElement("span", null, content));
-    }
-  }]);
-  return TableHeadCell;
-}(_react.default.Component);
-
-(0, _defineProperty2.default)(TableHeadCell, "defaultProps", {
-  innerRef: function innerRef() {},
-  inlineStyles: {}
-});
 var _default = TableHeadCell;
 exports.default = _default;

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

@@ -51,8 +51,8 @@ var RankableTableCell = /*#__PURE__*/function (_React$Component) {
           head = _this$props.head,
           isFixedSize = _this$props.isFixedSize,
           isRanking = _this$props.isRanking,
-          innerRef = _this$props.innerRef,
-          refWidth = _this$props.refWidth;
+          refWidth = _this$props.refWidth,
+          innerRef = _this$props.innerRef;
       var content = cell.content,
           restCellProps = (0, _objectWithoutProperties2.default)(cell, ["content"]);
 
@@ -67,10 +67,10 @@ var RankableTableCell = /*#__PURE__*/function (_React$Component) {
         width: width,
         isRanking: isRanking,
         style: inlineStyles,
-        innerRef: innerRef,
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
-        }
+        },
+        innerRef: innerRef
       }), content);
     }
   }]);

package/dist/cjs/components/rankable/TableHeadCell.js

@@ -50,12 +50,10 @@ var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
           isRanking = _this$props.isRanking,
           refHeight = _this$props.refHeight,
           refWidth = _this$props.refWidth,
-          innerRef = _this$props.innerRef,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props, ["isRanking", "refHeight", "refWidth", "innerRef"]);
+          restProps = (0, _objectWithoutProperties2.default)(_this$props, ["isRanking", "refHeight", "refWidth"]);
       var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
       return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, (0, _extends2.default)({
-        inlineStyles: inlineStyles,
-        innerRef: innerRef
+        inlineStyles: inlineStyles
       }, restProps));
     }
   }]);

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

@@ -64,7 +64,7 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       return function (ref) {
         innerRefFn(ref);
 
-        if (_this.props.innerRef) {
+        if (typeof _this.props.innerRef === 'function') {
           _this.props.innerRef(ref);
         }
       };
@@ -97,12 +97,12 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
-        draggableId: key || "".concat(rowIndex),
+        draggableId: key || rowIndex.toString(),
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
         return /*#__PURE__*/_react.default.createElement(_TableRow.RankableTableBodyRow, (0, _extends2.default)({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
-          innerRef: _this2.innerRef(provided.innerRef),
+          ref: _this2.innerRef(provided.innerRef),
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
           isHighlighted: isHighlighted,
           isRanking: isRanking,

package/dist/cjs/internal/constants.js

@@ -3,18 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LOADING_CONTENTS_OPACITY = exports.XLARGE = exports.LARGE = exports.MEDIUM = exports.SMALL = exports.DESC = exports.ASC = void 0;
+exports.LOADING_CONTENTS_OPACITY = exports.LARGE = exports.SMALL = exports.DESC = exports.ASC = void 0;
 var ASC = 'ASC';
 exports.ASC = ASC;
 var DESC = 'DESC';
 exports.DESC = DESC;
 var SMALL = 'small';
 exports.SMALL = SMALL;
-var MEDIUM = 'medium';
-exports.MEDIUM = MEDIUM;
 var LARGE = 'large';
 exports.LARGE = LARGE;
-var XLARGE = 'xlarge';
-exports.XLARGE = XLARGE;
 var LOADING_CONTENTS_OPACITY = 0.22;
 exports.LOADING_CONTENTS_OPACITY = LOADING_CONTENTS_OPACITY;

package/dist/cjs/styled/DynamicTable.js

@@ -2,36 +2,102 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaginationWrapper = exports.Caption = exports.Table = void 0;
+exports.PaginationWrapper = exports.Caption = exports.Table = exports.tableRowCSSVars = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _constants = require("@atlaskit/theme/constants");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _core = require("@emotion/core");
 
-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 _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/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 Table = _styledComponents.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n"])), function (_ref) {
-  var isFixedSize = _ref.isFixedSize;
-  return isFixedSize && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      table-layout: fixed;\n    "])));
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+// CSS vars for table row
+// these are declared here to avoid being re-declared in each table row
+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'
+};
+exports.tableRowCSSVars = tableRowCSSVars;
+var fixedSizeTableStyles = (0, _core.css)({
+  tableLayout: 'fixed'
 });
+var tableStyles = (0, _core.css)({
+  borderCollapse: 'collapse',
+  width: '100%'
+});
+var Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref2;
 
+  var isFixedSize = _ref.isFixedSize,
+      children = _ref.children,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["isFixedSize", "children"]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("table", (0, _extends2.default)({
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, _theme.row.hoverBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, _theme.row.highlightedBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, _theme.row.hoverHighlightedBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, _theme.row.focusOutline({
+      theme: theme
+    })), _ref2),
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    ref: ref
+  }, rest), children);
+});
 exports.Table = Table;
+var captionStyles = (0, _core.css)({
+  fontSize: '1.42857143em',
 
-var Caption = _styledComponents.default.caption(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.gridSize, (0, _constants.gridSize)() * 3.5);
+  /* 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'
+});
+
+var Caption = function Caption(_ref3) {
+  var children = _ref3.children;
+  return (0, _core.jsx)("caption", {
+    css: captionStyles
+  }, children);
+};
 
 exports.Caption = Caption;
+var paginationWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  justifyContent: 'center'
+});
 
-var PaginationWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"])));
+var PaginationWrapper = function PaginationWrapper(_ref4) {
+  var children = _ref4.children;
+  return (0, _core.jsx)("div", {
+    css: paginationWrapperStyles
+  }, children);
+};
 
 exports.PaginationWrapper = PaginationWrapper;

package/dist/cjs/styled/EmptyBody.js

@@ -1,24 +1,39 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmptyViewContainer = exports.EmptyViewWithFixedHeight = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2;
+/** @jsx jsx */
+var fixedHeightStyles = (0, _core.css)({
+  height: "".concat((0, _constants.gridSize)() * 18, "px")
+});
 
-var EmptyViewWithFixedHeight = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n"])), (0, _constants.gridSize)() * 18);
+var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: fixedHeightStyles
+  }, children);
+};
 
 exports.EmptyViewWithFixedHeight = EmptyViewWithFixedHeight;
+var emptyViewContainerStyles = (0, _core.css)({
+  margin: 'auto',
+  padding: '10px',
+  textAlign: 'center',
+  width: '50%'
+});
 
-var EmptyViewContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: auto;\n  padding: 10px;\n  text-align: center;\n  width: 50%;\n"])));
+var EmptyViewContainer = function EmptyViewContainer(_ref2) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: emptyViewContainerStyles
+  }, children);
+};
 
 exports.EmptyViewContainer = EmptyViewContainer;

package/dist/cjs/styled/LoadingContainer.js

@@ -7,22 +7,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SpinnerContainer = exports.ContentsContainer = exports.Container = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
-var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
+var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
+var containerStyles = (0, _core.css)({
+  position: 'relative'
+});
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var Container = function Container(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: containerStyles
+  }, children);
+};
 
 exports.Container = Container;
-
-var ContentsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  opacity: ", ";\n"])), function (p) {
-  return p.contentsOpacity;
+var contentsContainerStyles = (0, _core.css)({
+  pointerEvents: 'none',
+  opacity: "var(".concat(CSS_VAR_CONTENTS_OPACITY, ")")
 });
 
+var ContentsContainer = function ContentsContainer(_ref2) {
+  var contentsOpacity = _ref2.contentsOpacity,
+      children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    style: (0, _defineProperty2.default)({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
+    css: [contentsContainerStyles]
+  }, children);
+};
+
 exports.ContentsContainer = ContentsContainer;
+var spinnerContainerStyles = (0, _core.css)({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 
-var SpinnerContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var SpinnerContainer = function SpinnerContainer(_ref4) {
+  var children = _ref4.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerContainerStyles
+  }, children);
+};
 
 exports.SpinnerContainer = SpinnerContainer;

package/dist/cjs/styled/LoadingContainerAdvanced.js

@@ -7,22 +7,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SpinnerContainer = exports.SpinnerBackdrop = exports.Container = 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 _react = require("react");
+
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
+var containerStyles = (0, _core.css)({
+  marginBottom: "".concat((0, _constants.gridSize)() * 3, "px"),
+  position: 'relative'
+});
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n  position: relative;\n"])), (0, _constants.gridSize)() * 3);
+var Container = function Container(props) {
+  return (0, _core.jsx)("div", (0, _extends2.default)({
+    css: containerStyles
+  }, props));
+};
 
 exports.Container = Container;
+var spinnerBackdropStyles = (0, _core.css)({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 
-var SpinnerBackdrop = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerBackdropStyles
+  }, children);
+};
 
 exports.SpinnerBackdrop = SpinnerBackdrop;
-
-var SpinnerContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  top: 0;\n"])));
-
+var spinnerContainerStyles = (0, _core.css)({
+  position: 'relative',
+  top: 0
+});
+var SpinnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerContainerStyles,
+    ref: ref
+  }, children);
+});
 exports.SpinnerContainer = SpinnerContainer;

package/dist/cjs/styled/TableCell.js

@@ -7,16 +7,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableBodyCell = 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _constants = require("./constants");
+var _core = require("@emotion/core");
 
-var _templateObject;
+var _constants = require("./constants");
 
-var TableBodyCell = _styledComponents.default.td(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", ";\n"])), function (props) {
-  return (0, _constants.truncateStyle)(props);
-}, _constants.cellStyle);
+/** @jsx jsx */
+var TableBodyCell = function TableBodyCell(_ref) {
+  var width = _ref.width,
+      isFixedSize = _ref.isFixedSize,
+      shouldTruncate = _ref.shouldTruncate,
+      innerRef = _ref.innerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["width", "isFixedSize", "shouldTruncate", "innerRef"]);
+  return (0, _core.jsx)("td", (0, _extends2.default)({
+    style: (0, _constants.getTruncationStyleVars)({
+      width: width
+    }),
+    css: [_constants.truncationWidthStyles, isFixedSize && shouldTruncate && _constants.fixedSizeTruncateStyles, isFixedSize && _constants.overflowTruncateStyles, _constants.cellStyles] // HOC withDimensions complains about the types but it is working fine
+    // @ts-ignore
+    ,
+    ref: innerRef
+  }, props));
+};
 
 exports.TableBodyCell = TableBodyCell;