@atlaskit/dynamic-table 14.12.0 → 14.13.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/dynamic-table
 
+## 14.13.0
+
+### Minor Changes
+
+- [#66438](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66438) [`334df1af360b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/334df1af360b) - [ux] `react-beautiful-dnd` is now lazy loaded for rankable tables. It will no longer be loaded for non-rankable tables.
+
+  Tests relying on ranking being synchronously available may need to be modified.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.12.1
+
+### Patch Changes
+
+- [#66234](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66234) [`eca303e7af0a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eca303e7af0a) - Changed :focus selector with :focus-visible
+
 ## 14.12.0
 
 ### Minor Changes

package/dist/cjs/components/error-boundary.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+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 _react = _interopRequireDefault(require("react"));
+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); }; }
+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 ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ErrorBoundary, _React$Component);
+  var _super = _createSuper(ErrorBoundary);
+  function ErrorBoundary(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ErrorBoundary);
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(ErrorBoundary, [{
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return this.props.fallback;
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+  return ErrorBoundary;
+}(_react.default.Component);

package/dist/cjs/components/stateless.js

@@ -1,10 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DynamicTableWithoutAnalytics = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -13,7 +16,7 @@ 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 _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _constants = require("../internal/constants");
@@ -21,15 +24,18 @@ var _helpers = require("../internal/helpers");
 var _dynamicTable = require("../styled/dynamic-table");
 var _emptyBody = require("../styled/empty-body");
 var _body = _interopRequireDefault(require("./body"));
+var _errorBoundary = require("./error-boundary");
 var _loadingContainer = _interopRequireDefault(require("./loading-container"));
 var _loadingContainerAdvanced = _interopRequireDefault(require("./loading-container-advanced"));
 var _managedPagination = _interopRequireDefault(require("./managed-pagination"));
-var _body2 = _interopRequireDefault(require("./rankable/body"));
 var _tableHead = _interopRequireDefault(require("./table-head"));
+var _excluded = ["isRankable", "isRanking", "onRankStart", "onRankEnd", "isRankingDisabled"];
+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; }
 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); }; }
 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.12.0";
+var packageVersion = "14.13.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -207,7 +213,6 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
       var rowsExist = !!rowsLength;
       var spinnerSize = this.getSpinnerSize();
       var emptyBody = this.renderEmptyBody();
-      var canRank = isRankable && !sortKey;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.default, {
         isLoading: isLoading && rowsExist,
         spinnerSize: spinnerSize,
@@ -228,12 +233,13 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
         isRanking: this.state.isRanking,
         isRankable: isRankable,
         testId: testId
-      }), rowsExist && (canRank ? /*#__PURE__*/_react.default.createElement(_body2.default, (0, _extends2.default)({}, bodyProps, {
+      }), rowsExist && /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, bodyProps, {
+        isRankable: this.props.isRankable,
         isRanking: this.state.isRanking,
         onRankStart: this.onRankStartHandler,
         onRankEnd: this.onRankEndHandler,
         isRankingDisabled: isRankingDisabled || isLoading || false
-      })) : /*#__PURE__*/_react.default.createElement(_body.default, bodyProps)))), totalPages <= 1 ? null :
+      })))), totalPages <= 1 ? null :
       /*#__PURE__*/
       // only show pagination if there's MORE than 1 page
       _react.default.createElement(_dynamicTable.PaginationWrapper, null, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
@@ -269,6 +275,50 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
     pageLabel: 'Page'
   }
 });
+var RankableTableBody = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: '@atlaskit-internal_dynamic-table' */'./rankable/body'));
+  });
+});
+var TableBody = /*#__PURE__*/(0, _react.forwardRef)(function TableBody(_ref, ref) {
+  var _ref$isRankable = _ref.isRankable,
+    isRankable = _ref$isRankable === void 0 ? false : _ref$isRankable,
+    isRanking = _ref.isRanking,
+    onRankStart = _ref.onRankStart,
+    onRankEnd = _ref.onRankEnd,
+    isRankingDisabled = _ref.isRankingDisabled,
+    bodyProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var canRank = isRankable && !bodyProps.sortKey;
+
+  /**
+   * React 16 does not support SSR for lazy components,
+   * so we avoid rendering the `Suspense` on the server.
+   */
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    canRenderRankable = _useState2[0],
+    setCanRenderRankable = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (canRank) {
+      setCanRenderRankable(true);
+    }
+  }, [canRank]);
+  var nonRankableBody = /*#__PURE__*/_react.default.createElement(_body.default, (0, _extends2.default)({
+    ref: ref
+  }, bodyProps));
+  return canRank && canRenderRankable ? /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/_react.default.createElement(RankableTableBody, (0, _extends2.default)({
+    ref: ref
+  }, bodyProps, {
+    isRanking: isRanking,
+    onRankStart: onRankStart,
+    onRankEnd: onRankEnd,
+    isRankingDisabled: isRankingDisabled
+  })))) : nonRankableBody;
+});
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'dynamicTable',

package/dist/cjs/styled/rankable/table-row.js

@@ -23,7 +23,7 @@ var rankingItemStyles = (0, _react2.css)({
 });
 var draggableStyles = (0, _react2.css)({
   outlineWidth: "var(--ds-border-width, 2px)",
-  '&:focus': {
+  '&:focus-visible': {
     outlineColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
     outlineStyle: 'solid'
   }

package/dist/cjs/styled/table-head.js

@@ -47,7 +47,7 @@ var headCellStyles = (0, _react2.css)([_constants2.cellStyles, {
   fontWeight: 600,
   textAlign: 'left',
   verticalAlign: 'top',
-  '&:focus': {
+  '&:focus-visible': {
     outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
   }
 }]);

package/dist/cjs/styled/table-row.js

@@ -14,7 +14,7 @@ var _excluded = ["isHighlighted", "children", "style", "testId"];
 /** @jsx jsx */
 var rowStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  '&:focus': {
+  '&:focus-visible': {
     outline: "2px solid ".concat("var(--ds-border-focused, ".concat("var(".concat(_dynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
     outlineOffset: "-2px"
   }

package/dist/es2019/components/error-boundary.js

@@ -0,0 +1,22 @@
+import React from 'react';
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}

package/dist/es2019/components/stateless.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { forwardRef, lazy, Suspense, useEffect, useState } from 'react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { ASC, DESC, LARGE, SMALL } from '../internal/constants';
@@ -8,13 +8,13 @@ import { assertIsSortable, getPageRows, validateSortKey } from '../internal/help
 import { Caption, PaginationWrapper, Table } from '../styled/dynamic-table';
 import { EmptyViewContainer, EmptyViewWithFixedHeight } from '../styled/empty-body';
 import Body from './body';
+import { ErrorBoundary } from './error-boundary';
 import LoadingContainer from './loading-container';
 import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
-import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.12.0";
+const packageVersion = "14.13.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -183,7 +183,6 @@ class DynamicTable extends React.Component {
     const rowsExist = !!rowsLength;
     const spinnerSize = this.getSpinnerSize();
     const emptyBody = this.renderEmptyBody();
-    const canRank = isRankable && !sortKey;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingContainerAdvanced, {
       isLoading: isLoading && rowsExist,
       spinnerSize: spinnerSize,
@@ -202,12 +201,13 @@ class DynamicTable extends React.Component {
       isRanking: this.state.isRanking,
       isRankable: isRankable,
       testId: testId
-    }), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
+    }), rowsExist && /*#__PURE__*/React.createElement(TableBody, _extends({}, bodyProps, {
+      isRankable: this.props.isRankable,
       isRanking: this.state.isRanking,
       onRankStart: this.onRankStartHandler,
       onRankEnd: this.onRankEndHandler,
       isRankingDisabled: isRankingDisabled || isLoading || false
-    })) : /*#__PURE__*/React.createElement(Body, bodyProps)))), totalPages <= 1 ? null :
+    })))), totalPages <= 1 ? null :
     /*#__PURE__*/
     // only show pagination if there's MORE than 1 page
     React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
@@ -241,6 +241,43 @@ _defineProperty(DynamicTable, "defaultProps", {
     pageLabel: 'Page'
   }
 });
+const RankableTableBody = /*#__PURE__*/lazy(() => import( /* webpackChunkName: '@atlaskit-internal_dynamic-table' */'./rankable/body'));
+const TableBody = /*#__PURE__*/forwardRef(function TableBody({
+  isRankable = false,
+  isRanking,
+  onRankStart,
+  onRankEnd,
+  isRankingDisabled,
+  ...bodyProps
+}, ref) {
+  const canRank = isRankable && !bodyProps.sortKey;
+
+  /**
+   * React 16 does not support SSR for lazy components,
+   * so we avoid rendering the `Suspense` on the server.
+   */
+  const [canRenderRankable, setCanRenderRankable] = useState(false);
+  useEffect(() => {
+    if (canRank) {
+      setCanRenderRankable(true);
+    }
+  }, [canRank]);
+  const nonRankableBody = /*#__PURE__*/React.createElement(Body, _extends({
+    ref: ref
+  }, bodyProps));
+  return canRank && canRenderRankable ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/React.createElement(RankableTableBody, _extends({
+    ref: ref
+  }, bodyProps, {
+    isRanking: isRanking,
+    onRankStart: onRankStart,
+    onRankEnd: onRankEnd,
+    isRankingDisabled: isRankingDisabled
+  })))) : nonRankableBody;
+});
 export { DynamicTable as DynamicTableWithoutAnalytics };
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/styled/rankable/table-row.js

@@ -14,7 +14,7 @@ const rankingItemStyles = css({
 });
 const draggableStyles = css({
   outlineWidth: "var(--ds-border-width, 2px)",
-  '&:focus': {
+  '&:focus-visible': {
     outlineColor: `var(--ds-border-focused, ${B100})`,
     outlineStyle: 'solid'
   }

package/dist/es2019/styled/table-head.js

@@ -35,7 +35,7 @@ const headCellStyles = css([cellStyles, {
   fontWeight: 600,
   textAlign: 'left',
   verticalAlign: 'top',
-  '&:focus': {
+  '&:focus-visible': {
     outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
   }
 }]);

package/dist/es2019/styled/table-row.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { tableRowCSSVars as cssVars } from './dynamic-table';
 const rowStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  '&:focus': {
+  '&:focus-visible': {
     outline: `2px solid ${`var(--ds-border-focused, ${`var(${cssVars.CSS_VAR_HOVER_BACKGROUND})`})`}`,
     outlineOffset: `-2px`
   }

package/dist/esm/components/error-boundary.js

@@ -0,0 +1,40 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+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; } }
+import React from 'react';
+export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+  var _super = _createSuper(ErrorBoundary);
+  function ErrorBoundary(props) {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    _this = _super.call(this, props);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  _createClass(ErrorBoundary, [{
+    key: "render",
+    value: function render() {
+      if (this.state.hasError) {
+        // You can render any custom fallback UI
+        return this.props.fallback;
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+  return ErrorBoundary;
+}(React.Component);

package/dist/esm/components/stateless.js

@@ -1,3 +1,5 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,9 +8,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["isRankable", "isRanking", "onRankStart", "onRankEnd", "isRankingDisabled"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 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; } }
-import React from 'react';
+import React, { forwardRef, lazy, Suspense, useEffect, useState } from 'react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { ASC, DESC, LARGE, SMALL } from '../internal/constants';
@@ -16,13 +19,13 @@ import { assertIsSortable, getPageRows, validateSortKey } from '../internal/help
 import { Caption, PaginationWrapper, Table } from '../styled/dynamic-table';
 import { EmptyViewContainer, EmptyViewWithFixedHeight } from '../styled/empty-body';
 import Body from './body';
+import { ErrorBoundary } from './error-boundary';
 import LoadingContainer from './loading-container';
 import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
-import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.12.0";
+var packageVersion = "14.13.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -200,7 +203,6 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
       var rowsExist = !!rowsLength;
       var spinnerSize = this.getSpinnerSize();
       var emptyBody = this.renderEmptyBody();
-      var canRank = isRankable && !sortKey;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingContainerAdvanced, {
         isLoading: isLoading && rowsExist,
         spinnerSize: spinnerSize,
@@ -221,12 +223,13 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         isRanking: this.state.isRanking,
         isRankable: isRankable,
         testId: testId
-      }), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
+      }), rowsExist && /*#__PURE__*/React.createElement(TableBody, _extends({}, bodyProps, {
+        isRankable: this.props.isRankable,
         isRanking: this.state.isRanking,
         onRankStart: this.onRankStartHandler,
         onRankEnd: this.onRankEndHandler,
         isRankingDisabled: isRankingDisabled || isLoading || false
-      })) : /*#__PURE__*/React.createElement(Body, bodyProps)))), totalPages <= 1 ? null :
+      })))), totalPages <= 1 ? null :
       /*#__PURE__*/
       // only show pagination if there's MORE than 1 page
       React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
@@ -262,6 +265,48 @@ _defineProperty(DynamicTable, "defaultProps", {
     pageLabel: 'Page'
   }
 });
+var RankableTableBody = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: '@atlaskit-internal_dynamic-table' */'./rankable/body');
+});
+var TableBody = /*#__PURE__*/forwardRef(function TableBody(_ref, ref) {
+  var _ref$isRankable = _ref.isRankable,
+    isRankable = _ref$isRankable === void 0 ? false : _ref$isRankable,
+    isRanking = _ref.isRanking,
+    onRankStart = _ref.onRankStart,
+    onRankEnd = _ref.onRankEnd,
+    isRankingDisabled = _ref.isRankingDisabled,
+    bodyProps = _objectWithoutProperties(_ref, _excluded);
+  var canRank = isRankable && !bodyProps.sortKey;
+
+  /**
+   * React 16 does not support SSR for lazy components,
+   * so we avoid rendering the `Suspense` on the server.
+   */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    canRenderRankable = _useState2[0],
+    setCanRenderRankable = _useState2[1];
+  useEffect(function () {
+    if (canRank) {
+      setCanRenderRankable(true);
+    }
+  }, [canRank]);
+  var nonRankableBody = /*#__PURE__*/React.createElement(Body, _extends({
+    ref: ref
+  }, bodyProps));
+  return canRank && canRenderRankable ? /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: nonRankableBody
+  }, /*#__PURE__*/React.createElement(RankableTableBody, _extends({
+    ref: ref
+  }, bodyProps, {
+    isRanking: isRanking,
+    onRankStart: onRankStart,
+    onRankEnd: onRankEnd,
+    isRankingDisabled: isRankingDisabled
+  })))) : nonRankableBody;
+});
 export { DynamicTable as DynamicTableWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/styled/rankable/table-row.js

@@ -16,7 +16,7 @@ var rankingItemStyles = css({
 });
 var draggableStyles = css({
   outlineWidth: "var(--ds-border-width, 2px)",
-  '&:focus': {
+  '&:focus-visible': {
     outlineColor: "var(--ds-border-focused, ".concat(B100, ")"),
     outlineStyle: 'solid'
   }

package/dist/esm/styled/table-head.js

@@ -40,7 +40,7 @@ var headCellStyles = css([cellStyles, {
   fontWeight: 600,
   textAlign: 'left',
   verticalAlign: 'top',
-  '&:focus': {
+  '&:focus-visible': {
     outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
   }
 }]);

package/dist/esm/styled/table-row.js

@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { tableRowCSSVars as cssVars } from './dynamic-table';
 var rowStyles = css({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  '&:focus': {
+  '&:focus-visible': {
     outline: "2px solid ".concat("var(--ds-border-focused, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
     outlineOffset: "-2px"
   }

package/dist/types/components/error-boundary.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback: ReactNode;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+};
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    render(): React.ReactNode;
+}
+export {};

package/dist/types-ts4.5/components/error-boundary.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback: ReactNode;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+};
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    render(): React.ReactNode;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.12.0",
+  "version": "14.13.0",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/pagination": "^14.4.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-beautiful-dnd": "^12.1.1"