@atlaskit/dynamic-table 14.10.0 → 14.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dynamic-table
 
+## 14.11.0
+
+### Minor Changes
+
+- [`ec1f82f8027`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec1f82f8027) - Move away from findDOMNode API to refs
+
 ## 14.10.0
 
 ### Minor Changes

package/dist/cjs/components/body.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -30,9 +31,11 @@ var Body = /*#__PURE__*/function (_React$Component) {
         head = _this$props.head,
         isFixedSize = _this$props.isFixedSize,
         highlightedRowIndex = _this$props.highlightedRowIndex,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        forwardedRef = _this$props.forwardedRef;
       return /*#__PURE__*/_react.default.createElement("tbody", {
-        "data-testid": testId && "".concat(testId, "--body")
+        "data-testid": testId && "".concat(testId, "--body"),
+        ref: forwardedRef
       }, pageRows.map(function (row, rowIndex) {
         return /*#__PURE__*/_react.default.createElement(_tableRow.default, {
           head: head,
@@ -47,5 +50,9 @@ var Body = /*#__PURE__*/function (_React$Component) {
   }]);
   return Body;
 }(_react.default.Component);
-var _default = (0, _withSortedPageRows.default)(Body);
+var _default = (0, _withSortedPageRows.default)( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(Body, (0, _extends2.default)({}, props, {
+    forwardedRef: ref
+  }));
+}));
 exports.default = _default;

package/dist/cjs/components/loading-container-advanced.js

@@ -14,23 +14,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _constants = require("../internal/constants");
 var _loadingContainerAdvanced = require("../styled/loading-container-advanced");
 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; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-// there is a bug with findDOMNode and Suspense in React < 16.9: https://github.com/facebook/react/issues/14188
-var safeFindDOMNode = function safeFindDOMNode(component) {
-  try {
-    // DSP-10519 TODO: ReactDOM.findDOMNode is deprecated in React18, consider using alternative solution
-    // https://react.dev/reference/react-dom/findDOMNode#alternatives
-    // eslint-disable-next-line react/no-find-dom-node
-    return (0, _reactDom.findDOMNode)(component);
-  } catch (e) {
-    return null;
-  }
-};
 var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(LoadingContainerAdvanced, _React$Component);
   var _super = _createSuper(LoadingContainerAdvanced);
@@ -41,6 +29,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "spinnerRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
       if (_this.props.isLoading && _this.hasTargetNode()) {
         _this.attachListeners();
@@ -69,18 +59,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTargetNode", function () {
       var nextProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
       var targetRef = nextProps.targetRef;
-      // targetRef prop may be defined but it is not guaranteed it returns an element
-      var targetElement = targetRef ? targetRef() : _this.children;
-      // @ts-ignore - targetElement is not assignable to type 'ReactInstance'
-      var targetNode = safeFindDOMNode(targetElement);
-      return targetNode;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getThisNode", function () {
-      return safeFindDOMNode((0, _assertThisInitialized2.default)(_this));
-    });
-    // @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSpinnerNode", function () {
-      return safeFindDOMNode(_this.spinnerRef);
+      var target = targetRef === null || targetRef === void 0 ? void 0 : targetRef();
+      return target || _this.containerRef.current;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasTargetNode", function (nextProps) {
       return !!_this.getTargetNode(nextProps);
@@ -135,10 +115,11 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "updateSpinnerPosition",
     value: function updateSpinnerPosition() {
+      var _this$spinnerRef, _this$containerRef;
       var viewportHeight = window.innerHeight;
       var targetNode = this.getTargetNode();
-      var spinnerNode = this.getSpinnerNode();
-      if (!targetNode || !spinnerNode) {
+      var spinnerNode = (_this$spinnerRef = this.spinnerRef) === null || _this$spinnerRef === void 0 ? void 0 : _this$spinnerRef.current;
+      if (!targetNode || typeof targetNode.getBoundingClientRect !== 'function' || !spinnerNode) {
         return;
       }
       var targetRect = targetNode.getBoundingClientRect();
@@ -182,9 +163,9 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
       // 1) the element is fully visible
       // 2) the element is too small for the spinner to follow
       // 3) the spinner might still be visible while the element isn't
-      var thisNode = this.getThisNode();
-      if (thisNode && typeof thisNode.getBoundingClientRect === 'function') {
-        var thisTop = thisNode.getBoundingClientRect().top;
+      var containerNode = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.current;
+      if (containerNode && typeof containerNode.getBoundingClientRect === 'function') {
+        var thisTop = containerNode.getBoundingClientRect().top;
         var _y3 = (top - thisTop) / 2;
         this.translateSpinner(spinnerNode, _y3, false);
       }
@@ -192,24 +173,18 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props2 = this.props,
         children = _this$props2.children,
         isLoading = _this$props2.isLoading,
         spinnerSize = _this$props2.spinnerSize,
         testId = _this$props2.testId;
       return /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.Container, {
-        testId: testId && "".concat(testId, "--loading--container--advanced")
-      }, /*#__PURE__*/_react.default.cloneElement(children, {
-        ref: function ref(el) {
-          _this2.children = el;
-        }
-      }), isLoading && /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.SpinnerBackdrop, {
+        testId: testId && "".concat(testId, "--loading--container--advanced"),
+        ref: this.containerRef
+      }, children, isLoading && /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.SpinnerBackdrop, {
         testId: testId
       }, /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.SpinnerContainer, {
-        ref: function ref(el) {
-          return _this2.spinnerRef = el;
-        }
+        ref: this.spinnerRef
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: spinnerSize,
         testId: testId && "".concat(testId, "--loadingSpinner")

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

@@ -84,7 +84,8 @@ var RankableBody = /*#__PURE__*/function (_React$Component) {
         isFixedSize = _this$props2.isFixedSize,
         isRanking = _this$props2.isRanking,
         isRankingDisabled = _this$props2.isRankingDisabled,
-        testId = _this$props2.testId;
+        testId = _this$props2.testId,
+        forwardedRef = _this$props2.forwardedRef;
       return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.DragDropContext, {
         onBeforeDragStart: this.onBeforeDragStart,
         onDragEnd: this.onDragEnd
@@ -94,7 +95,14 @@ var RankableBody = /*#__PURE__*/function (_React$Component) {
       }, function (provided) {
         return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({
           "data-testid": testId,
-          ref: provided.innerRef
+          ref: function ref(_ref) {
+            if (provided && typeof provided.innerRef === 'function') {
+              provided.innerRef(_ref);
+            }
+            if (forwardedRef) {
+              forwardedRef.current = _ref;
+            }
+          }
         }, provided.droppableProps), pageRows.map(function (row, rowIndex) {
           return /*#__PURE__*/_react.default.createElement(_tableRow.default, {
             head: head,
@@ -114,5 +122,9 @@ var RankableBody = /*#__PURE__*/function (_React$Component) {
   return RankableBody;
 }(_react.default.Component);
 exports.RankableBody = RankableBody;
-var _default = (0, _withSortedPageRows.default)(RankableBody);
+var _default = (0, _withSortedPageRows.default)( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(RankableBody, (0, _extends2.default)({}, props, {
+    forwardedRef: ref
+  }));
+}));
 exports.default = _default;

package/dist/cjs/components/stateless.js

@@ -29,7 +29,7 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
 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.10.0";
+var packageVersion = "14.11.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -50,6 +50,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableBody", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isRanking: false
     });
@@ -200,9 +201,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         isFixedSize: isFixedSize || false,
         onPageRowsUpdate: onPageRowsUpdate,
         isTotalPagesControlledExternally: isTotalPagesControlledExternally,
-        ref: function ref(el) {
-          _this2.tableBody = el;
-        },
+        ref: this.tableBody,
         testId: testId
       };
       var rowsExist = !!rowsLength;
@@ -213,7 +212,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         isLoading: isLoading && rowsExist,
         spinnerSize: spinnerSize,
         targetRef: function targetRef() {
-          return _this2.tableBody;
+          return _this2.tableBody.current;
         },
         testId: testId
       }, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {

package/dist/cjs/hoc/with-sorted-page-rows.js

@@ -18,7 +18,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
 var _constants = require("../internal/constants");
 var _helpers = require("../internal/helpers");
-var _excluded = ["rows", "head", "sortKey", "sortOrder", "rowsPerPage", "page"];
+var _excluded = ["rows", "head", "sortKey", "sortOrder", "rowsPerPage", "page", "forwardedRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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); }; }
@@ -94,7 +94,7 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
 };
 // get one page of data in table, sorting all rows previously
 function withSortedPageRows(WrappedComponent) {
-  return /*#__PURE__*/function (_React$Component) {
+  var WithSortedPageRows = /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(WithSortedPageRows, _React$Component);
     var _super = _createSuper(WithSortedPageRows);
     function WithSortedPageRows() {
@@ -131,13 +131,16 @@ function withSortedPageRows(WrappedComponent) {
           sortOrder = _this$props.sortOrder,
           rowsPerPage = _this$props.rowsPerPage,
           page = _this$props.page,
+          forwardedRef = _this$props.forwardedRef,
           restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         return /*#__PURE__*/_react.default.createElement(WrappedComponent
         //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
         , (0, _extends2.default)({
           pageRows: this.state.pageRows,
           head: head
-        }, restProps));
+        }, restProps, {
+          ref: forwardedRef
+        }));
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -166,4 +169,9 @@ function withSortedPageRows(WrappedComponent) {
     }]);
     return WithSortedPageRows;
   }(_react.default.Component);
+  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+    return /*#__PURE__*/_react.default.createElement(WithSortedPageRows, (0, _extends2.default)({}, props, {
+      forwardedRef: ref
+    }));
+  });
 }

package/dist/cjs/styled/constants.js

@@ -31,11 +31,9 @@ var cellStyles = (0, _react.css)({
   border: 'none',
   textAlign: 'left',
   '&:first-of-type': {
-    // TODO Delete this comment after verifying spacing token -> previous value `0`
     paddingLeft: "var(--ds-space-0, 0px)"
   },
   '&:last-child': {
-    // TODO Delete this comment after verifying spacing token -> previous value `0`
     paddingRight: "var(--ds-space-0, 0px)"
   }
 });

package/dist/cjs/styled/loading-container-advanced.js

@@ -16,7 +16,7 @@ var containerStyles = (0, _react2.css)({
   marginBottom: "var(--ds-space-300, 24px)",
   position: 'relative'
 });
-var Container = function Container(props) {
+var Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     testId = props.testId,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -25,10 +25,11 @@ var Container = function Container(props) {
     (0, _react2.jsx)("div", (0, _extends2.default)({
       css: containerStyles
     }, rest, {
-      "data-testid": testId
+      "data-testid": testId,
+      ref: ref
     }), children)
   );
-};
+});
 exports.Container = Container;
 var spinnerBackdropStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/version.json

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

package/dist/es2019/components/body.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import withSortedPageRows from '../hoc/with-sorted-page-rows';
 import TableRow from './table-row';
@@ -8,10 +9,12 @@ class Body extends React.Component {
       head,
       isFixedSize,
       highlightedRowIndex,
-      testId
+      testId,
+      forwardedRef
     } = this.props;
     return /*#__PURE__*/React.createElement("tbody", {
-      "data-testid": testId && `${testId}--body`
+      "data-testid": testId && `${testId}--body`,
+      ref: forwardedRef
     }, pageRows.map((row, rowIndex) => /*#__PURE__*/React.createElement(TableRow, {
       head: head,
       isFixedSize: isFixedSize,
@@ -22,4 +25,8 @@ class Body extends React.Component {
     })));
   }
 }
-export default withSortedPageRows(Body);
+export default withSortedPageRows( /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(Body, _extends({}, props, {
+    forwardedRef: ref
+  }));
+}));

package/dist/es2019/components/loading-container-advanced.js

@@ -1,24 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import Spinner from '@atlaskit/spinner';
 import { LARGE, LOADING_CONTENTS_OPACITY } from '../internal/constants';
 import { Container, SpinnerBackdrop, SpinnerContainer } from '../styled/loading-container-advanced';
-// there is a bug with findDOMNode and Suspense in React < 16.9: https://github.com/facebook/react/issues/14188
-const safeFindDOMNode = component => {
-  try {
-    // DSP-10519 TODO: ReactDOM.findDOMNode is deprecated in React18, consider using alternative solution
-    // https://react.dev/reference/react-dom/findDOMNode#alternatives
-    // eslint-disable-next-line react/no-find-dom-node
-    return findDOMNode(component);
-  } catch (e) {
-    return null;
-  }
-};
 export default class LoadingContainerAdvanced extends React.Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "spinnerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "componentDidMount", () => {
       if (this.props.isLoading && this.hasTargetNode()) {
         this.attachListeners();
@@ -48,15 +38,9 @@ export default class LoadingContainerAdvanced extends React.Component {
       const {
         targetRef
       } = nextProps;
-      // targetRef prop may be defined but it is not guaranteed it returns an element
-      const targetElement = targetRef ? targetRef() : this.children;
-      // @ts-ignore - targetElement is not assignable to type 'ReactInstance'
-      const targetNode = safeFindDOMNode(targetElement);
-      return targetNode;
+      const target = targetRef === null || targetRef === void 0 ? void 0 : targetRef();
+      return target || this.containerRef.current;
     });
-    _defineProperty(this, "getThisNode", () => safeFindDOMNode(this));
-    // @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
-    _defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinnerRef));
     _defineProperty(this, "hasTargetNode", nextProps => !!this.getTargetNode(nextProps));
     _defineProperty(this, "isVerticallyVisible", (elementRect, viewportHeight) => {
       const {
@@ -106,10 +90,11 @@ export default class LoadingContainerAdvanced extends React.Component {
     window.removeEventListener('resize', this.handleResize);
   }
   updateSpinnerPosition() {
+    var _this$spinnerRef, _this$containerRef;
     const viewportHeight = window.innerHeight;
     const targetNode = this.getTargetNode();
-    const spinnerNode = this.getSpinnerNode();
-    if (!targetNode || !spinnerNode) {
+    const spinnerNode = (_this$spinnerRef = this.spinnerRef) === null || _this$spinnerRef === void 0 ? void 0 : _this$spinnerRef.current;
+    if (!targetNode || typeof targetNode.getBoundingClientRect !== 'function' || !spinnerNode) {
       return;
     }
     const targetRect = targetNode.getBoundingClientRect();
@@ -155,9 +140,9 @@ export default class LoadingContainerAdvanced extends React.Component {
     // 1) the element is fully visible
     // 2) the element is too small for the spinner to follow
     // 3) the spinner might still be visible while the element isn't
-    const thisNode = this.getThisNode();
-    if (thisNode && typeof thisNode.getBoundingClientRect === 'function') {
-      const thisTop = thisNode.getBoundingClientRect().top;
+    const containerNode = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.current;
+    if (containerNode && typeof containerNode.getBoundingClientRect === 'function') {
+      const thisTop = containerNode.getBoundingClientRect().top;
       const y = (top - thisTop) / 2;
       this.translateSpinner(spinnerNode, y, false);
     }
@@ -170,15 +155,12 @@ export default class LoadingContainerAdvanced extends React.Component {
       testId
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
-      testId: testId && `${testId}--loading--container--advanced`
-    }, /*#__PURE__*/React.cloneElement(children, {
-      ref: el => {
-        this.children = el;
-      }
-    }), isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, {
+      testId: testId && `${testId}--loading--container--advanced`,
+      ref: this.containerRef
+    }, children, isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, {
       testId: testId
     }, /*#__PURE__*/React.createElement(SpinnerContainer, {
-      ref: el => this.spinnerRef = el
+      ref: this.spinnerRef
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: spinnerSize,
       testId: testId && `${testId}--loadingSpinner`

package/dist/es2019/components/rankable/body.js

@@ -74,7 +74,8 @@ export class RankableBody extends React.Component {
       isFixedSize,
       isRanking,
       isRankingDisabled,
-      testId
+      testId,
+      forwardedRef
     } = this.props;
     return /*#__PURE__*/React.createElement(DragDropContext, {
       onBeforeDragStart: this.onBeforeDragStart,
@@ -84,7 +85,14 @@ export class RankableBody extends React.Component {
       isDropDisabled: isRankingDisabled
     }, provided => /*#__PURE__*/React.createElement("tbody", _extends({
       "data-testid": testId,
-      ref: provided.innerRef
+      ref: ref => {
+        if (provided && typeof provided.innerRef === 'function') {
+          provided.innerRef(ref);
+        }
+        if (forwardedRef) {
+          forwardedRef.current = ref;
+        }
+      }
     }, provided.droppableProps), pageRows.map((row, rowIndex) => /*#__PURE__*/React.createElement(TableRow, {
       head: head,
       isRanking: isRanking,
@@ -98,4 +106,8 @@ export class RankableBody extends React.Component {
     })), provided.placeholder)));
   }
 }
-export default withSortedPageRows(RankableBody);
+export default withSortedPageRows( /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(RankableBody, _extends({}, props, {
+    forwardedRef: ref
+  }));
+}));

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.10.0";
+const packageVersion = "14.11.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -28,6 +28,7 @@ function toggleSortOrder(currentSortOrder) {
 class DynamicTable extends React.Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "tableBody", /*#__PURE__*/React.createRef());
     _defineProperty(this, "state", {
       isRanking: false
     });
@@ -176,9 +177,7 @@ class DynamicTable extends React.Component {
       isFixedSize: isFixedSize || false,
       onPageRowsUpdate,
       isTotalPagesControlledExternally,
-      ref: el => {
-        this.tableBody = el;
-      },
+      ref: this.tableBody,
       testId
     };
     const rowsExist = !!rowsLength;
@@ -188,7 +187,7 @@ class DynamicTable extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingContainerAdvanced, {
       isLoading: isLoading && rowsExist,
       spinnerSize: spinnerSize,
-      targetRef: () => this.tableBody,
+      targetRef: () => this.tableBody.current,
       testId: testId
     }, /*#__PURE__*/React.createElement(Table, {
       isFixedSize: isFixedSize,

package/dist/es2019/hoc/with-sorted-page-rows.js

@@ -74,7 +74,7 @@ const getSortedRows = (head, rows, sortKey, sortOrder) => {
 };
 // get one page of data in table, sorting all rows previously
 export default function withSortedPageRows(WrappedComponent) {
-  return class WithSortedPageRows extends React.Component {
+  class WithSortedPageRows extends React.Component {
     constructor(...args) {
       super(...args);
       _defineProperty(this, "state", {
@@ -122,7 +122,7 @@ export default function withSortedPageRows(WrappedComponent) {
         sortOrder,
         rowsPerPage,
         page,
-        // @ts-ignore - Rest types may only be created from object types
+        forwardedRef,
         ...restProps
       } = this.props;
       return /*#__PURE__*/React.createElement(WrappedComponent
@@ -130,7 +130,14 @@ export default function withSortedPageRows(WrappedComponent) {
       , _extends({
         pageRows: this.state.pageRows,
         head: head
-      }, restProps));
+      }, restProps, {
+        ref: forwardedRef
+      }));
     }
-  };
+  }
+  return /*#__PURE__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(WithSortedPageRows, _extends({}, props, {
+      forwardedRef: ref
+    }));
+  });
 }

package/dist/es2019/styled/constants.js

@@ -20,11 +20,9 @@ export const cellStyles = css({
   border: 'none',
   textAlign: 'left',
   '&:first-of-type': {
-    // TODO Delete this comment after verifying spacing token -> previous value `0`
     paddingLeft: "var(--ds-space-0, 0px)"
   },
   '&:last-child': {
-    // TODO Delete this comment after verifying spacing token -> previous value `0`
     paddingRight: "var(--ds-space-0, 0px)"
   }
 });

package/dist/es2019/styled/loading-container-advanced.js

@@ -7,7 +7,7 @@ const containerStyles = css({
   marginBottom: "var(--ds-space-300, 24px)",
   position: 'relative'
 });
-export const Container = props => {
+export const Container = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     testId,
@@ -18,10 +18,11 @@ export const Container = props => {
     jsx("div", _extends({
       css: containerStyles
     }, rest, {
-      "data-testid": testId
+      "data-testid": testId,
+      ref: ref
     }), children)
   );
-};
+});
 const spinnerBackdropStyles = css({
   display: 'flex',
   position: 'absolute',

package/dist/es2019/version.json

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

package/dist/esm/components/body.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -23,9 +24,11 @@ var Body = /*#__PURE__*/function (_React$Component) {
         head = _this$props.head,
         isFixedSize = _this$props.isFixedSize,
         highlightedRowIndex = _this$props.highlightedRowIndex,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        forwardedRef = _this$props.forwardedRef;
       return /*#__PURE__*/React.createElement("tbody", {
-        "data-testid": testId && "".concat(testId, "--body")
+        "data-testid": testId && "".concat(testId, "--body"),
+        ref: forwardedRef
       }, pageRows.map(function (row, rowIndex) {
         return /*#__PURE__*/React.createElement(TableRow, {
           head: head,
@@ -40,4 +43,8 @@ var Body = /*#__PURE__*/function (_React$Component) {
   }]);
   return Body;
 }(React.Component);
-export default withSortedPageRows(Body);
+export default withSortedPageRows( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Body, _extends({}, props, {
+    forwardedRef: ref
+  }));
+}));