@atlaskit/dynamic-table 14.8.13 → 14.8.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dynamic-table
 
+## 14.8.15
+
+### Patch Changes
+
+- [`e2f0271eaf9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2f0271eaf9) - This changeset exists because a PR touches these packages in a way that doesn't require a release
+
+## 14.8.14
+
+### Patch Changes
+
+- [`df9b2633fe4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df9b2633fe4) - [ux] Adds `aria-sort` to sortable headers when being used to sort.
+
 ## 14.8.13
 
 ### Patch Changes

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

@@ -19,7 +19,7 @@ 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; } }
+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 {
@@ -115,7 +115,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
       }
     });
     return _this;
-  }
+  } // @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
   (0, _createClass2.default)(LoadingContainerAdvanced, [{
     key: "attachListeners",
     value: function attachListeners() {

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

@@ -20,7 +20,7 @@ var _withDimensions = _interopRequireDefault(require("../../hoc/with-dimensions"
 var _helpers = require("../../internal/helpers");
 var _tableRow = require("../../styled/rankable/table-row");
 var _tableCell = _interopRequireDefault(require("./table-cell"));
-var _excluded = ["cells", "key"];
+var _excluded = ["cells", "key", "isHighlighted"];
 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); }; }
@@ -61,6 +61,7 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
         testId = _this$props.testId;
       var cells = row.cells,
         key = row.key,
+        isRowHighlighted = row.isHighlighted,
         restRowProps = (0, _objectWithoutProperties2.default)(row, _excluded);
       var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
       if (typeof key !== 'string' && !isRankingDisabled) {
@@ -74,10 +75,10 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_tableRow.RankableTableBodyRow, (0, _extends2.default)({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
           ref: _this2.innerRef(provided.innerRef),
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
-          isHighlighted: isHighlighted,
+          isHighlighted: isHighlighted || isRowHighlighted,
           isRanking: isRanking,
           isRankingItem: snapshot.isDragging,
-          "data-testid": testId && "".concat(testId, "--rankable--table--body--row")
+          testId: testId && "".concat(testId, "--rankable--table--body--row")
         }), cells.map(function (cell, cellIndex) {
           var headCell = (head || {
             cells: []

package/dist/cjs/components/stateful.js

@@ -60,7 +60,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
       sortOrder: _this.props.defaultSortOrder,
       rows: _this.props.rows
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSetPage", function (page, analyticsEvent) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSetPageHandler", function (page, analyticsEvent) {
       var onSetPage = _this.props.onSetPage;
       if (onSetPage) {
         onSetPage(page, analyticsEvent);
@@ -69,7 +69,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSort", function (_ref, analyticsEvent) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSortHandler", function (_ref, analyticsEvent) {
       var key = _ref.key,
         item = _ref.item,
         sortOrder = _ref.sortOrder;
@@ -86,26 +86,26 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEndIfExists", function (params) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEndIfExistsHandler", function (params) {
       if (_this.props.onRankEnd) {
         _this.props.onRankEnd(params);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEnd", function (params) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEndHandler", function (params) {
       var destination = params.destination;
       var _this$state = _this.state,
         rows = _this$state.rows,
         page = _this$state.page;
       var rowsPerPage = _this.props.rowsPerPage;
       if (!destination || !rows) {
-        _this.onRankEndIfExists(params);
+        _this.onRankEndIfExistsHandler(params);
         return;
       }
       var reordered = (0, _helpers.reorderRows)(params, rows, page, rowsPerPage);
       _this.setState({
         rows: reordered
       });
-      _this.onRankEndIfExists(params);
+      _this.onRankEndIfExistsHandler(params);
     });
     return _this;
   }
@@ -155,8 +155,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         loadingSpinnerSize: loadingSpinnerSize,
         isLoading: isLoading,
         isFixedSize: isFixedSize,
-        onSetPage: this.onSetPage,
-        onSort: this.onSort,
+        onSetPage: this.onSetPageHandler,
+        onSort: this.onSortHandler,
         page: page,
         rows: rows,
         rowsPerPage: rowsPerPage,
@@ -164,7 +164,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         sortOrder: sortOrder,
         isRankable: isRankable,
         isRankingDisabled: isRankingDisabled,
-        onRankEnd: this.onRankEnd,
+        onRankEnd: this.onRankEndHandler,
         onRankStart: onRankStart,
         onPageRowsUpdate: onPageRowsUpdate,
         testId: testId,

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.8.13";
+var packageVersion = "14.8.15";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -53,7 +53,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isRanking: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSort", function (item) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSortHandler", function (item) {
       return function () {
         var _this$props = _this.props,
           sortKey = _this$props.sortKey,
@@ -82,13 +82,13 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         }
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSetPage", function (page, event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSetPageHandler", function (page, event) {
       var onSetPage = _this.props.onSetPage;
       if (onSetPage) {
         onSetPage(page, event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankStart", function (params) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankStartHandler", function (params) {
       _this.setState({
         isRanking: true
       });
@@ -96,7 +96,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         _this.props.onRankStart(params);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEnd", function (params) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRankEndHandler", function (params) {
       _this.setState({
         isRanking: false
       });
@@ -218,12 +218,12 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         testId: testId
       }, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
         isFixedSize: isFixedSize,
-        "data-testid": testId && "".concat(testId, "--table"),
         "aria-label": label,
-        hasDataRow: rowsExist
+        hasDataRow: rowsExist,
+        testId: testId
       }, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
         head: head,
-        onSort: this.onSort,
+        onSort: this.onSortHandler,
         sortKey: sortKey,
         sortOrder: sortOrder,
         isRanking: this.state.isRanking,
@@ -231,15 +231,15 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         testId: testId
       }), rowsExist && (canRank ? /*#__PURE__*/_react.default.createElement(_body2.default, (0, _extends2.default)({}, bodyProps, {
         isRanking: this.state.isRanking,
-        onRankStart: this.onRankStart,
-        onRankEnd: this.onRankEnd,
+        onRankStart: this.onRankStartHandler,
+        onRankEnd: this.onRankEndHandler,
         isRankingDisabled: isRankingDisabled || isLoading || false
       })) : /*#__PURE__*/_react.default.createElement(_body.default, bodyProps)))), 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, {
         value: getPageNumber,
-        onChange: this.onSetPage,
+        onChange: this.onSetPageHandler,
         total: totalPages,
         i18n: paginationi18n,
         testId: testId

package/dist/cjs/components/table-head-cell.js

@@ -20,7 +20,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell, (0, _extends2.default)({
     style: inlineStyles,
-    "data-testid": testId && "".concat(testId, "--head--cell"),
+    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
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest, {

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

@@ -20,7 +20,7 @@ var _tableHead = require("../styled/table-head");
 var _tableHeadCell = _interopRequireDefault(require("./rankable/table-head-cell"));
 var _tableHeadCell2 = _interopRequireDefault(require("./table-head-cell"));
 var _excluded = ["cells"],
-  _excluded2 = ["isSortable", "key"];
+  _excluded2 = ["colSpan", "content", "isSortable", "key", "shouldTruncate", "testId", "width"];
 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 TableHead = /*#__PURE__*/function (_React$Component) {
@@ -67,16 +67,28 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var HeadCellComponent = isRankable ? _tableHeadCell.default : _tableHeadCell2.default;
+
+      // TODO: Remove `rest` props and use only what is explicitly in the API.
+      // Some tests use this to pass in onClick and other stuff within the `head`
+      // variable here, but considering it's not in the API, it should probably
+      // be removed.
       var cells = head.cells,
         rest = (0, _objectWithoutProperties2.default)(head, _excluded);
       return /*#__PURE__*/_react.default.createElement(_tableHead.Head, (0, _extends2.default)({}, rest, {
         isRanking: isRanking,
-        "data-testid": testId && "".concat(testId, "--head")
+        testId: testId && "".concat(testId, "--head")
       }), /*#__PURE__*/_react.default.createElement("tr", null, cells.map(function (cell, index) {
-        var isSortable = cell.isSortable,
+        var colSpan = cell.colSpan,
+          content = cell.content,
+          isSortable = cell.isSortable,
           key = cell.key,
+          shouldTruncate = cell.shouldTruncate,
+          cellTestId = cell.testId,
+          width = cell.width,
           restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);
         return /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
+          colSpan: colSpan,
+          content: content,
           isFixedSize: isFixedSize,
           isSortable: !!isSortable,
           isRanking: isRanking,
@@ -85,8 +97,10 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           onKeyDown: function onKeyDown(e) {
             return _this2.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined;
           },
-          testId: testId,
-          sortOrder: key === sortKey ? sortOrder : undefined
+          testId: cellTestId || testId,
+          shouldTruncate: shouldTruncate,
+          sortOrder: key === sortKey ? sortOrder : undefined,
+          width: width
         }, restCellProps));
       })));
     }

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

@@ -25,7 +25,7 @@ var Row = function Row(_ref) {
   }, isHighlighted ? {
     'data-ts--dynamic-table--table-row--highlighted': true
   } : null, {
-    "data-testid": testId && "".concat(testId, "--row-").concat(restRowProps.key)
+    testId: testId && "".concat(testId, "--row-").concat(restRowProps.key)
   }), cells.map(function (cell, cellIndex) {
     var content = cell.content,
       restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);

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

@@ -12,7 +12,10 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _theme = require("../theme");
-var _excluded = ["isFixedSize", "hasDataRow", "children"];
+var _excluded = ["isFixedSize", "hasDataRow", "children", "testId"];
+/* eslint-disable @repo/internal/react/require-jsdoc */
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var gridSize = (0, _constants.gridSize)();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
@@ -39,12 +42,15 @@ var Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isFixedSize = _ref.isFixedSize,
     hasDataRow = _ref.hasDataRow,
     children = _ref.children,
+    testId = _ref.testId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("table", (0, _extends2.default)({
     style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, _theme.row.hoverBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, _theme.row.highlightedBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, _theme.row.hoverHighlightedBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, _theme.row.focusOutline), _ref2),
     css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
     ref: ref
-  }, rest), children);
+  }, rest, {
+    "data-testid": testId && "".concat(testId, "--table")
+  }), children);
 });
 exports.Table = Table;
 var captionStyles = (0, _react2.css)({

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

@@ -9,13 +9,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _excluded = ["testId"];
+var _excluded = ["children", "testId"];
+/* eslint-disable @repo/internal/react/require-jsdoc */
+/** @jsx jsx */
 var containerStyles = (0, _react2.css)({
   marginBottom: "var(--ds-space-300, 24px)",
   position: 'relative'
 });
 var Container = function Container(props) {
-  var testId = props.testId,
+  var children = props.children,
+    testId = props.testId,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -23,7 +26,7 @@ var Container = function Container(props) {
       css: containerStyles
     }, rest, {
       "data-testid": testId
-    }))
+    }), children)
   );
 };
 exports.Container = Container;

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("@emotion/react");
 var _tableCell = require("../table-cell");
 var _excluded = ["isRanking", "innerRef"];
+/** @jsx jsx */
 var rankingStyles = (0, _react.css)({
   boxSizing: 'border-box'
 });

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

@@ -11,7 +11,8 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _tableRow = require("../table-row");
-var _excluded = ["isRanking", "isRankingItem"];
+var _excluded = ["isRanking", "isRankingItem", "testId"];
+/** @jsx jsx */
 var rankingStyles = (0, _react2.css)({
   display: 'block'
 });
@@ -32,10 +33,12 @@ var draggableStyles = (0, _react2.css)({
 var RankableTableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isRanking = _ref.isRanking,
     isRankingItem = _ref.isRankingItem,
+    testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)(_tableRow.TableBodyRow, (0, _extends2.default)({
     css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
-    ref: ref
+    ref: ref,
+    testId: testId
   }, props));
 });
 exports.RankableTableBodyRow = RankableTableBodyRow;

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("@emotion/react");
 var _constants = require("./constants");
 var _excluded = ["width", "isFixedSize", "shouldTruncate", "innerRef"];
+/** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var TableBodyCell = function TableBodyCell(_ref) {
   var width = _ref.width,

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

@@ -15,8 +15,11 @@ var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../internal/constants");
 var _theme = require("../theme");
 var _constants3 = require("./constants");
-var _excluded = ["isRanking"],
-  _excluded2 = ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"];
+var _excluded = ["isRanking", "testId"],
+  _excluded2 = ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style", "testId"];
+/* eslint-disable @repo/internal/react/require-jsdoc */
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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; }
 var gridSize = (0, _constants.gridSize)();
@@ -29,9 +32,11 @@ var headStyles = (0, _react2.css)({
 });
 var Head = function Head(_ref) {
   var isRanking = _ref.isRanking,
+    testId = _ref.testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("thead", (0, _extends2.default)({
-    css: [headStyles, isRanking && rankingStyles]
+    css: [headStyles, isRanking && rankingStyles],
+    "data-testid": testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
@@ -128,17 +133,27 @@ var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     shouldTruncate = _ref2.shouldTruncate,
     onClick = _ref2.onClick,
     style = _ref2.style,
+    testId = _ref2.testId,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && (0, _constants3.getTruncationStyleVars)({
     width: width
   })), {}, (0, _defineProperty2.default)({}, CSS_VAR_TEXT_COLOR, _theme.head.textColor));
   var isASC = sortOrder === _constants2.ASC;
   var isDESC = sortOrder === _constants2.DESC;
+  var getFormattedSortOrder = function getFormattedSortOrder() {
+    if (isASC) {
+      return 'ascending';
+    } else if (isDESC) {
+      return 'descending';
+    }
+  };
   return (0, _react2.jsx)("th", (0, _extends2.default)({
+    "aria-sort": getFormattedSortOrder(),
     style: mergedStyles,
     css: [headCellStyles, onClick && onClickStyles, _constants3.truncationWidthStyles, isFixedSize && shouldTruncate && _constants3.fixedSizeTruncateStyles, isFixedSize && _constants3.overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
     onClick: onClick,
-    ref: ref
+    ref: ref,
+    "data-testid": testId
   }, rest), children);
 });
 exports.HeadCell = HeadCell;

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

@@ -10,7 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _dynamicTable = require("./dynamic-table");
-var _excluded = ["isHighlighted", "children", "style"];
+var _excluded = ["isHighlighted", "children", "style", "testId"];
+/** @jsx jsx */
 var rowStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   '&:focus': {
@@ -35,12 +36,14 @@ var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isHighlighted = _ref.isHighlighted,
     children = _ref.children,
     style = _ref.style,
+    testId = _ref.testId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("tr", (0, _extends2.default)({
     style: style,
     css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
   }, rest, {
-    ref: ref
+    ref: ref,
+    "data-testid": testId
   }), children);
 });
 exports.TableBodyRow = TableBodyRow;

package/dist/cjs/version.json

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

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

@@ -92,7 +92,7 @@ export default class LoadingContainerAdvanced extends React.Component {
         targetNode.style.opacity = isLoading ? contentsOpacity.toString() : '';
       }
     });
-  }
+  } // @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
   attachListeners() {
     window.addEventListener('scroll', this.handleScroll);
     window.addEventListener('resize', this.handleResize);

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

@@ -31,6 +31,8 @@ export class RankableTableRow extends React.Component {
     const {
       cells,
       key,
+      isHighlighted: isRowHighlighted,
+      // TODO: Remove `rest` props and use only what is explicitly in the API.
       ...restRowProps
     } = row;
     const inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
@@ -47,10 +49,10 @@ export class RankableTableRow extends React.Component {
         ...provided.draggableProps.style,
         ...inlineStyles
       },
-      isHighlighted: isHighlighted,
+      isHighlighted: isHighlighted || isRowHighlighted,
       isRanking: isRanking,
       isRankingItem: snapshot.isDragging,
-      "data-testid": testId && `${testId}--rankable--table--body--row`
+      testId: testId && `${testId}--rankable--table--body--row`
     }), cells.map((cell, cellIndex) => {
       const headCell = (head || {
         cells: []

package/dist/es2019/components/stateful.js

@@ -38,7 +38,7 @@ export default class DynamicTable extends React.Component {
       sortOrder: this.props.defaultSortOrder,
       rows: this.props.rows
     });
-    _defineProperty(this, "onSetPage", (page, analyticsEvent) => {
+    _defineProperty(this, "onSetPageHandler", (page, analyticsEvent) => {
       const {
         onSetPage
       } = this.props;
@@ -49,7 +49,7 @@ export default class DynamicTable extends React.Component {
         });
       }
     });
-    _defineProperty(this, "onSort", ({
+    _defineProperty(this, "onSortHandler", ({
       key,
       item,
       sortOrder
@@ -69,12 +69,12 @@ export default class DynamicTable extends React.Component {
         });
       }
     });
-    _defineProperty(this, "onRankEndIfExists", params => {
+    _defineProperty(this, "onRankEndIfExistsHandler", params => {
       if (this.props.onRankEnd) {
         this.props.onRankEnd(params);
       }
     });
-    _defineProperty(this, "onRankEnd", params => {
+    _defineProperty(this, "onRankEndHandler", params => {
       const {
         destination
       } = params;
@@ -86,14 +86,14 @@ export default class DynamicTable extends React.Component {
         rowsPerPage
       } = this.props;
       if (!destination || !rows) {
-        this.onRankEndIfExists(params);
+        this.onRankEndIfExistsHandler(params);
         return;
       }
       const reordered = reorderRows(params, rows, page, rowsPerPage);
       this.setState({
         rows: reordered
       });
-      this.onRankEndIfExists(params);
+      this.onRankEndIfExistsHandler(params);
     });
   }
   UNSAFE_componentWillReceiveProps(newProps) {
@@ -140,8 +140,8 @@ export default class DynamicTable extends React.Component {
       loadingSpinnerSize: loadingSpinnerSize,
       isLoading: isLoading,
       isFixedSize: isFixedSize,
-      onSetPage: this.onSetPage,
-      onSort: this.onSort,
+      onSetPage: this.onSetPageHandler,
+      onSort: this.onSortHandler,
       page: page,
       rows: rows,
       rowsPerPage: rowsPerPage,
@@ -149,7 +149,7 @@ export default class DynamicTable extends React.Component {
       sortOrder: sortOrder,
       isRankable: isRankable,
       isRankingDisabled: isRankingDisabled,
-      onRankEnd: this.onRankEnd,
+      onRankEnd: this.onRankEndHandler,
       onRankStart: onRankStart,
       onPageRowsUpdate: onPageRowsUpdate,
       testId: testId,