@atlaskit/dynamic-table 14.13.1 → 14.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/dynamic-table
 
+## 14.14.0
+
+### Minor Changes
+
+- [#68812](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68812) [`91d4a48c1430`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91d4a48c1430) - Support better loading state for assistive tech
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.13.1
 
 ### Patch Changes

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

@@ -177,7 +177,8 @@ var LoadingContainerAdvanced = exports.default = /*#__PURE__*/function (_React$C
         children = _this$props2.children,
         isLoading = _this$props2.isLoading,
         spinnerSize = _this$props2.spinnerSize,
-        testId = _this$props2.testId;
+        testId = _this$props2.testId,
+        loadingLabel = _this$props2.loadingLabel;
       return /*#__PURE__*/_react.default.createElement(_loadingContainerAdvanced.Container, {
         testId: testId && "".concat(testId, "--loading--container--advanced"),
         ref: this.containerRef
@@ -187,7 +188,8 @@ var LoadingContainerAdvanced = exports.default = /*#__PURE__*/function (_React$C
         ref: this.spinnerRef
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: spinnerSize,
-        testId: testId && "".concat(testId, "--loadingSpinner")
+        testId: testId && "".concat(testId, "--loadingSpinner"),
+        label: loadingLabel
       }))));
     }
   }]);
@@ -196,5 +198,6 @@ var LoadingContainerAdvanced = exports.default = /*#__PURE__*/function (_React$C
 (0, _defineProperty2.default)(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: _constants.LARGE,
-  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(_constants.LOADING_CONTENTS_OPACITY), ")")
+  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(_constants.LOADING_CONTENTS_OPACITY), ")"),
+  loadingLabel: 'Loading table'
 });

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

@@ -32,7 +32,8 @@ var LoadingContainer = exports.default = /*#__PURE__*/function (_React$Component
         isLoading = _this$props.isLoading,
         spinnerSize = _this$props.spinnerSize,
         contentsOpacity = _this$props.contentsOpacity,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        loadingLabel = _this$props.loadingLabel;
       return /*#__PURE__*/_react.default.createElement(_loadingContainer.Container, {
         testId: testId
       }, !isLoading ? children : /*#__PURE__*/_react.default.createElement(_loadingContainer.ContentsContainer, {
@@ -42,7 +43,8 @@ var LoadingContainer = exports.default = /*#__PURE__*/function (_React$Component
         testId: testId
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: spinnerSize,
-        testId: testId && "".concat(testId, "--loadingSpinner")
+        testId: testId && "".concat(testId, "--loadingSpinner"),
+        label: loadingLabel
       })));
     }
   }]);
@@ -51,5 +53,6 @@ var LoadingContainer = exports.default = /*#__PURE__*/function (_React$Component
 (0, _defineProperty2.default)(LoadingContainer, "defaultProps", {
   isLoading: true,
   spinnerSize: _constants.LARGE,
-  contentsOpacity: _constants.LOADING_CONTENTS_OPACITY
+  contentsOpacity: _constants.LOADING_CONTENTS_OPACITY,
+  loadingLabel: 'Loading table'
 });

package/dist/cjs/components/managed-pagination.js

@@ -40,7 +40,8 @@ var ManagedPagination = exports.default = /*#__PURE__*/function (_React$Componen
         _this$props$value = _this$props.value,
         value = _this$props$value === void 0 ? 1 : _this$props$value,
         i18n = _this$props.i18n,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        isDisabled = _this$props.isDisabled;
       var pages = (0, _toConsumableArray2.default)(Array(total)).map(function (_, index) {
         return index + 1;
       });
@@ -49,6 +50,7 @@ var ManagedPagination = exports.default = /*#__PURE__*/function (_React$Componen
       var selectedIndex = value - 1;
       return /*#__PURE__*/_react.default.createElement(_pagination.default, {
         selectedIndex: selectedIndex,
+        isDisabled: isDisabled,
         label: i18n === null || i18n === void 0 ? void 0 : i18n.label,
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,

package/dist/cjs/components/stateful.js

@@ -137,6 +137,7 @@ var DynamicTable = exports.default = /*#__PURE__*/function (_React$Component) {
         highlightedRowIndex = _this$props.highlightedRowIndex,
         loadingSpinnerSize = _this$props.loadingSpinnerSize,
         isLoading = _this$props.isLoading,
+        loadingLabel = _this$props.loadingLabel,
         isFixedSize = _this$props.isFixedSize,
         isRankable = _this$props.isRankable,
         isRankingDisabled = _this$props.isRankingDisabled,
@@ -154,6 +155,7 @@ var DynamicTable = exports.default = /*#__PURE__*/function (_React$Component) {
         highlightedRowIndex: highlightedRowIndex,
         loadingSpinnerSize: loadingSpinnerSize,
         isLoading: isLoading,
+        loadingLabel: loadingLabel,
         isFixedSize: isFixedSize,
         onSetPage: this.onSetPageHandler,
         onSort: this.onSortHandler,

package/dist/cjs/components/stateless.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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.13.1";
+var packageVersion = "14.14.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:
@@ -169,6 +169,7 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
         sortKey = _this$props4.sortKey,
         sortOrder = _this$props4.sortOrder,
         isLoading = _this$props4.isLoading,
+        loadingLabel = _this$props4.loadingLabel,
         isRankable = _this$props4.isRankable,
         isRankingDisabled = _this$props4.isRankingDisabled,
         paginationi18n = _this$props4.paginationi18n,
@@ -219,12 +220,14 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
         targetRef: function targetRef() {
           return _this2.tableBody.current;
         },
-        testId: testId
+        testId: testId,
+        loadingLabel: loadingLabel
       }, /*#__PURE__*/_react.default.createElement(_dynamicTable.Table, {
         isFixedSize: isFixedSize,
         "aria-label": label,
         hasDataRow: rowsExist,
-        testId: testId
+        testId: testId,
+        isLoading: isLoading
       }, !!caption && /*#__PURE__*/_react.default.createElement(_dynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_tableHead.default, {
         head: head,
         onSort: this.onSortHandler,
@@ -242,16 +245,20 @@ var DynamicTable = exports.DynamicTableWithoutAnalytics = /*#__PURE__*/function
       })))), 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, {
+      _react.default.createElement(_dynamicTable.PaginationWrapper, {
+        testId: testId
+      }, /*#__PURE__*/_react.default.createElement(_managedPagination.default, {
         value: getPageNumber,
         onChange: this.onSetPageHandler,
         total: totalPages,
         i18n: paginationi18n,
+        isDisabled: isLoading,
         testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_loadingContainer.default, {
         isLoading: isLoading,
         spinnerSize: _constants.LARGE,
-        testId: testId
+        testId: testId,
+        loadingLabel: loadingLabel
       }, emptyBody));
     }
   }]);

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

@@ -12,7 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _theme = require("../theme");
-var _excluded = ["isFixedSize", "hasDataRow", "children", "testId"];
+var _excluded = ["isFixedSize", "hasDataRow", "children", "testId", "isLoading"];
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -34,7 +34,7 @@ var tableStyles = (0, _react2.css)({
   borderSpacing: '0px'
 });
 var bodyBorder = (0, _react2.css)({
-  borderBottom: "2px solid ".concat(_theme.tableBorder.borderColor)
+  borderBlockEnd: "2px solid ".concat(_theme.tableBorder.borderColor)
 });
 var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref2;
@@ -42,8 +42,10 @@ var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     hasDataRow = _ref.hasDataRow,
     children = _ref.children,
     testId = _ref.testId,
+    isLoading = _ref.isLoading,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("table", (0, _extends2.default)({
+    inert: isLoading ? '' : undefined,
     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
@@ -52,19 +54,14 @@ var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   }), children);
 });
 var captionStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginTop: "".concat(gridSize * 3.5, "px"),
-  marginBottom: "var(--ds-space-100, 8px)",
   fontSize: '1.42857143em',
   fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
+  fontWeight: 'var(--ds-font-weight-medium)',
   letterSpacing: '-0.008em',
   lineHeight: 1.2,
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginBlockStart: "".concat(gridSize * 3.5, "px"),
   textAlign: 'left',
-  /* there is a bug in Safari: if element which creates a new stacking context
-    is a child of a table, table caption re-renders in bad wrong position
-    https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
-  */
   willChange: 'transform'
 });
 var Caption = exports.Caption = function Caption(_ref3) {
@@ -78,8 +75,10 @@ var paginationWrapperStyles = (0, _react2.css)({
   justifyContent: 'center'
 });
 var PaginationWrapper = exports.PaginationWrapper = function PaginationWrapper(_ref4) {
-  var children = _ref4.children;
+  var children = _ref4.children,
+    testId = _ref4.testId;
   return (0, _react2.jsx)("div", {
-    css: paginationWrapperStyles
+    css: paginationWrapperStyles,
+    "data-testid": testId && "".concat(testId, "--pagination--container")
   }, children);
 };

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

@@ -152,7 +152,8 @@ export default class LoadingContainerAdvanced extends React.Component {
       children,
       isLoading,
       spinnerSize,
-      testId
+      testId,
+      loadingLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       testId: testId && `${testId}--loading--container--advanced`,
@@ -163,12 +164,14 @@ export default class LoadingContainerAdvanced extends React.Component {
       ref: this.spinnerRef
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: spinnerSize,
-      testId: testId && `${testId}--loadingSpinner`
+      testId: testId && `${testId}--loadingSpinner`,
+      label: loadingLabel
     }))));
   }
 }
 _defineProperty(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: `var(--ds-opacity-loading, ${`${LOADING_CONTENTS_OPACITY}`})`
+  contentsOpacity: `var(--ds-opacity-loading, ${`${LOADING_CONTENTS_OPACITY}`})`,
+  loadingLabel: 'Loading table'
 });

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

@@ -10,7 +10,8 @@ export default class LoadingContainer extends React.Component {
       isLoading,
       spinnerSize,
       contentsOpacity,
-      testId
+      testId,
+      loadingLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       testId: testId
@@ -21,12 +22,14 @@ export default class LoadingContainer extends React.Component {
       testId: testId
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: spinnerSize,
-      testId: testId && `${testId}--loadingSpinner`
+      testId: testId && `${testId}--loadingSpinner`,
+      label: loadingLabel
     })));
   }
 }
 _defineProperty(LoadingContainer, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: LOADING_CONTENTS_OPACITY
+  contentsOpacity: LOADING_CONTENTS_OPACITY,
+  loadingLabel: 'Loading table'
 });

package/dist/es2019/components/managed-pagination.js

@@ -13,7 +13,8 @@ export default class ManagedPagination extends React.Component {
       total,
       value = 1,
       i18n,
-      testId
+      testId,
+      isDisabled
     } = this.props;
     const pages = [...Array(total)].map((_, index) => index + 1);
     // Pagination accepts array now thus selectedIndex starts with 0
@@ -21,6 +22,7 @@ export default class ManagedPagination extends React.Component {
     const selectedIndex = value - 1;
     return /*#__PURE__*/React.createElement(Pagination, {
       selectedIndex: selectedIndex,
+      isDisabled: isDisabled,
       label: i18n === null || i18n === void 0 ? void 0 : i18n.label,
       nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
       previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,

package/dist/es2019/components/stateful.js

@@ -121,6 +121,7 @@ export default class DynamicTable extends React.Component {
       highlightedRowIndex,
       loadingSpinnerSize,
       isLoading,
+      loadingLabel,
       isFixedSize,
       isRankable,
       isRankingDisabled,
@@ -139,6 +140,7 @@ export default class DynamicTable extends React.Component {
       highlightedRowIndex: highlightedRowIndex,
       loadingSpinnerSize: loadingSpinnerSize,
       isLoading: isLoading,
+      loadingLabel: loadingLabel,
       isFixedSize: isFixedSize,
       onSetPage: this.onSetPageHandler,
       onSort: this.onSortHandler,

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.13.1";
+const packageVersion = "14.14.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -138,6 +138,7 @@ class DynamicTable extends React.Component {
       sortKey,
       sortOrder,
       isLoading,
+      loadingLabel,
       isRankable,
       isRankingDisabled,
       paginationi18n,
@@ -187,12 +188,14 @@ class DynamicTable extends React.Component {
       isLoading: isLoading && rowsExist,
       spinnerSize: spinnerSize,
       targetRef: () => this.tableBody.current,
-      testId: testId
+      testId: testId,
+      loadingLabel: loadingLabel
     }, /*#__PURE__*/React.createElement(Table, {
       isFixedSize: isFixedSize,
       "aria-label": label,
       hasDataRow: rowsExist,
-      testId: testId
+      testId: testId,
+      isLoading: isLoading
     }, !!caption && /*#__PURE__*/React.createElement(Caption, null, caption), head && /*#__PURE__*/React.createElement(TableHead, {
       head: head,
       onSort: this.onSortHandler,
@@ -210,16 +213,20 @@ class DynamicTable extends React.Component {
     })))), totalPages <= 1 ? null :
     /*#__PURE__*/
     // only show pagination if there's MORE than 1 page
-    React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
+    React.createElement(PaginationWrapper, {
+      testId: testId
+    }, /*#__PURE__*/React.createElement(ManagedPagination, {
       value: getPageNumber,
       onChange: this.onSetPageHandler,
       total: totalPages,
       i18n: paginationi18n,
+      isDisabled: isLoading,
       testId: testId
     })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
       isLoading: isLoading,
       spinnerSize: LARGE,
-      testId: testId
+      testId: testId,
+      loadingLabel: loadingLabel
     }, emptyBody));
   }
 }

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

@@ -25,16 +25,18 @@ const tableStyles = css({
   borderSpacing: '0px'
 });
 const bodyBorder = css({
-  borderBottom: `2px solid ${tableBorder.borderColor}`
+  borderBlockEnd: `2px solid ${tableBorder.borderColor}`
 });
 export const Table = /*#__PURE__*/forwardRef(({
   isFixedSize,
   hasDataRow,
   children,
   testId,
+  isLoading,
   ...rest
 }, ref) => {
   return jsx("table", _extends({
+    inert: isLoading ? '' : undefined,
     style: {
       [tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND]: row.hoverBackground,
       [tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND]: row.highlightedBackground,
@@ -48,19 +50,14 @@ export const Table = /*#__PURE__*/forwardRef(({
   }), children);
 });
 const captionStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginTop: `${gridSize * 3.5}px`,
-  marginBottom: "var(--ds-space-100, 8px)",
   fontSize: '1.42857143em',
   fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
+  fontWeight: 'var(--ds-font-weight-medium)',
   letterSpacing: '-0.008em',
   lineHeight: 1.2,
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginBlockStart: `${gridSize * 3.5}px`,
   textAlign: 'left',
-  /* there is a bug in Safari: if element which creates a new stacking context
-    is a child of a table, table caption re-renders in bad wrong position
-    https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
-  */
   willChange: 'transform'
 });
 export const Caption = ({
@@ -73,7 +70,9 @@ const paginationWrapperStyles = css({
   justifyContent: 'center'
 });
 export const PaginationWrapper = ({
-  children
+  children,
+  testId
 }) => jsx("div", {
-  css: paginationWrapperStyles
+  css: paginationWrapperStyles,
+  "data-testid": testId && `${testId}--pagination--container`
 }, children);

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

@@ -171,7 +171,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
         children = _this$props2.children,
         isLoading = _this$props2.isLoading,
         spinnerSize = _this$props2.spinnerSize,
-        testId = _this$props2.testId;
+        testId = _this$props2.testId,
+        loadingLabel = _this$props2.loadingLabel;
       return /*#__PURE__*/React.createElement(Container, {
         testId: testId && "".concat(testId, "--loading--container--advanced"),
         ref: this.containerRef
@@ -181,7 +182,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
         ref: this.spinnerRef
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: spinnerSize,
-        testId: testId && "".concat(testId, "--loadingSpinner")
+        testId: testId && "".concat(testId, "--loadingSpinner"),
+        label: loadingLabel
       }))));
     }
   }]);
@@ -190,6 +192,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
 _defineProperty(LoadingContainerAdvanced, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(LOADING_CONTENTS_OPACITY), ")")
+  contentsOpacity: "var(--ds-opacity-loading, ".concat("".concat(LOADING_CONTENTS_OPACITY), ")"),
+  loadingLabel: 'Loading table'
 });
 export { LoadingContainerAdvanced as default };

package/dist/esm/components/loading-container.js

@@ -25,7 +25,8 @@ var LoadingContainer = /*#__PURE__*/function (_React$Component) {
         isLoading = _this$props.isLoading,
         spinnerSize = _this$props.spinnerSize,
         contentsOpacity = _this$props.contentsOpacity,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        loadingLabel = _this$props.loadingLabel;
       return /*#__PURE__*/React.createElement(Container, {
         testId: testId
       }, !isLoading ? children : /*#__PURE__*/React.createElement(ContentsContainer, {
@@ -35,7 +36,8 @@ var LoadingContainer = /*#__PURE__*/function (_React$Component) {
         testId: testId
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: spinnerSize,
-        testId: testId && "".concat(testId, "--loadingSpinner")
+        testId: testId && "".concat(testId, "--loadingSpinner"),
+        label: loadingLabel
       })));
     }
   }]);
@@ -44,6 +46,7 @@ var LoadingContainer = /*#__PURE__*/function (_React$Component) {
 _defineProperty(LoadingContainer, "defaultProps", {
   isLoading: true,
   spinnerSize: LARGE,
-  contentsOpacity: LOADING_CONTENTS_OPACITY
+  contentsOpacity: LOADING_CONTENTS_OPACITY,
+  loadingLabel: 'Loading table'
 });
 export { LoadingContainer as default };

package/dist/esm/components/managed-pagination.js

@@ -33,7 +33,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
         _this$props$value = _this$props.value,
         value = _this$props$value === void 0 ? 1 : _this$props$value,
         i18n = _this$props.i18n,
-        testId = _this$props.testId;
+        testId = _this$props.testId,
+        isDisabled = _this$props.isDisabled;
       var pages = _toConsumableArray(Array(total)).map(function (_, index) {
         return index + 1;
       });
@@ -42,6 +43,7 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
       var selectedIndex = value - 1;
       return /*#__PURE__*/React.createElement(Pagination, {
         selectedIndex: selectedIndex,
+        isDisabled: isDisabled,
         label: i18n === null || i18n === void 0 ? void 0 : i18n.label,
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,

package/dist/esm/components/stateful.js

@@ -130,6 +130,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         highlightedRowIndex = _this$props.highlightedRowIndex,
         loadingSpinnerSize = _this$props.loadingSpinnerSize,
         isLoading = _this$props.isLoading,
+        loadingLabel = _this$props.loadingLabel,
         isFixedSize = _this$props.isFixedSize,
         isRankable = _this$props.isRankable,
         isRankingDisabled = _this$props.isRankingDisabled,
@@ -147,6 +148,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         highlightedRowIndex: highlightedRowIndex,
         loadingSpinnerSize: loadingSpinnerSize,
         isLoading: isLoading,
+        loadingLabel: loadingLabel,
         isFixedSize: isFixedSize,
         onSetPage: this.onSetPageHandler,
         onSort: this.onSortHandler,

package/dist/esm/components/stateless.js

@@ -25,7 +25,7 @@ import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.13.1";
+var packageVersion = "14.14.0";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:
@@ -159,6 +159,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         sortKey = _this$props4.sortKey,
         sortOrder = _this$props4.sortOrder,
         isLoading = _this$props4.isLoading,
+        loadingLabel = _this$props4.loadingLabel,
         isRankable = _this$props4.isRankable,
         isRankingDisabled = _this$props4.isRankingDisabled,
         paginationi18n = _this$props4.paginationi18n,
@@ -209,12 +210,14 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         targetRef: function targetRef() {
           return _this2.tableBody.current;
         },
-        testId: testId
+        testId: testId,
+        loadingLabel: loadingLabel
       }, /*#__PURE__*/React.createElement(Table, {
         isFixedSize: isFixedSize,
         "aria-label": label,
         hasDataRow: rowsExist,
-        testId: testId
+        testId: testId,
+        isLoading: isLoading
       }, !!caption && /*#__PURE__*/React.createElement(Caption, null, caption), head && /*#__PURE__*/React.createElement(TableHead, {
         head: head,
         onSort: this.onSortHandler,
@@ -232,16 +235,20 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
       })))), totalPages <= 1 ? null :
       /*#__PURE__*/
       // only show pagination if there's MORE than 1 page
-      React.createElement(PaginationWrapper, null, /*#__PURE__*/React.createElement(ManagedPagination, {
+      React.createElement(PaginationWrapper, {
+        testId: testId
+      }, /*#__PURE__*/React.createElement(ManagedPagination, {
         value: getPageNumber,
         onChange: this.onSetPageHandler,
         total: totalPages,
         i18n: paginationi18n,
+        isDisabled: isLoading,
         testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
         isLoading: isLoading,
         spinnerSize: LARGE,
-        testId: testId
+        testId: testId,
+        loadingLabel: loadingLabel
       }, emptyBody));
     }
   }]);

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isFixedSize", "hasDataRow", "children", "testId"];
+var _excluded = ["isFixedSize", "hasDataRow", "children", "testId", "isLoading"];
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
 import { forwardRef } from 'react';
@@ -28,7 +28,7 @@ var tableStyles = css({
   borderSpacing: '0px'
 });
 var bodyBorder = css({
-  borderBottom: "2px solid ".concat(tableBorder.borderColor)
+  borderBlockEnd: "2px solid ".concat(tableBorder.borderColor)
 });
 export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref2;
@@ -36,8 +36,10 @@ export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hasDataRow = _ref.hasDataRow,
     children = _ref.children,
     testId = _ref.testId,
+    isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("table", _extends({
+    inert: isLoading ? '' : undefined,
     style: (_ref2 = {}, _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, row.hoverBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, row.highlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, row.hoverHighlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, row.focusOutline), _ref2),
     css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
     ref: ref
@@ -46,19 +48,14 @@ export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), children);
 });
 var captionStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginTop: "".concat(gridSize * 3.5, "px"),
-  marginBottom: "var(--ds-space-100, 8px)",
   fontSize: '1.42857143em',
   fontStyle: 'inherit',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
+  fontWeight: 'var(--ds-font-weight-medium)',
   letterSpacing: '-0.008em',
   lineHeight: 1.2,
+  marginBlockEnd: "var(--ds-space-100, 8px)",
+  marginBlockStart: "".concat(gridSize * 3.5, "px"),
   textAlign: 'left',
-  /* there is a bug in Safari: if element which creates a new stacking context
-    is a child of a table, table caption re-renders in bad wrong position
-    https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
-  */
   willChange: 'transform'
 });
 export var Caption = function Caption(_ref3) {
@@ -72,8 +69,10 @@ var paginationWrapperStyles = css({
   justifyContent: 'center'
 });
 export var PaginationWrapper = function PaginationWrapper(_ref4) {
-  var children = _ref4.children;
+  var children = _ref4.children,
+    testId = _ref4.testId;
   return jsx("div", {
-    css: paginationWrapperStyles
+    css: paginationWrapperStyles,
+    "data-testid": testId && "".concat(testId, "--pagination--container")
   }, children);
 };

package/dist/types/components/loading-container-advanced.d.ts

@@ -6,6 +6,7 @@ export interface LoadingContainerAdvancedProps {
     contentsOpacity: number | string;
     targetRef?: () => HTMLTableSectionElement | null;
     testId?: string;
+    loadingLabel?: string;
 }
 export default class LoadingContainerAdvanced extends React.Component<LoadingContainerAdvancedProps, {}> {
     spinnerRef: React.RefObject<HTMLDivElement>;
@@ -14,6 +15,7 @@ export default class LoadingContainerAdvanced extends React.Component<LoadingCon
         isLoading: boolean;
         spinnerSize: string;
         contentsOpacity: "var(--ds-opacity-loading)";
+        loadingLabel: string;
     };
     componentDidMount: () => void;
     UNSAFE_componentWillReceiveProps: (nextProps: LoadingContainerAdvancedProps) => void;

package/dist/types/components/loading-container.d.ts

@@ -6,12 +6,14 @@ interface LoadingContainerProps {
     spinnerSize?: SpinnerSizeType;
     contentsOpacity: number;
     testId?: string;
+    loadingLabel?: string;
 }
 export default class LoadingContainer extends React.Component<LoadingContainerProps> {
     static defaultProps: {
         isLoading: boolean;
         spinnerSize: string;
         contentsOpacity: number;
+        loadingLabel: string;
     };
     render(): JSX.Element;
 }

package/dist/types/components/managed-pagination.d.ts

@@ -7,6 +7,7 @@ interface ManagedPaginationProps {
     total: number;
     i18n?: I18nShape;
     testId?: string;
+    isDisabled?: boolean;
 }
 export default class ManagedPagination extends React.Component<ManagedPaginationProps> {
     onChange: (_event: any, newValue: any, analyticsEvent?: UIAnalyticsEvent) => void;

package/dist/types/components/stateless.d.ts

@@ -39,7 +39,7 @@ declare class DynamicTable extends React.Component<Props, State> {
     render(): JSX.Element;
 }
 export { DynamicTable as DynamicTableWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "totalRows" | "onPageRowsUpdate" | "sortKey" | "sortOrder" | "highlightedRowIndex" | "testId" | "label"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isLoading" | "isFixedSize" | "rowsPerPage" | "onSetPage" | "onSort" | "page" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "loadingLabel" | "totalRows" | "onPageRowsUpdate" | "sortKey" | "sortOrder" | "highlightedRowIndex" | "testId" | "label"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isLoading" | "isFixedSize" | "rowsPerPage" | "onSetPage" | "onSort" | "page" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n">> & Partial<Pick<{
     isLoading: boolean;
     isFixedSize: boolean;
     rowsPerPage: number;
@@ -56,5 +56,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, ke
         label: string;
         pageLabel: string;
     };
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "isLoading" | "isFixedSize" | "rowsPerPage" | "totalRows" | "onSetPage" | "onSort" | "onPageRowsUpdate" | "page" | "sortKey" | "sortOrder" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n" | "highlightedRowIndex" | "testId" | "label" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "isLoading" | "loadingLabel" | "isFixedSize" | "rowsPerPage" | "totalRows" | "onSetPage" | "onSort" | "onPageRowsUpdate" | "page" | "sortKey" | "sortOrder" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n" | "highlightedRowIndex" | "testId" | "label" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/styled/dynamic-table.d.ts

@@ -2,6 +2,7 @@
 import { FC, HTMLProps, ReactNode } from 'react';
 export type TableProps = HTMLProps<HTMLTableElement> & {
     isFixedSize?: boolean;
+    isLoading?: boolean;
     hasDataRow: boolean;
     testId?: string;
 };
@@ -11,10 +12,11 @@ export declare const tableRowCSSVars: {
     CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: string;
     CSS_VAR_ROW_FOCUS_OUTLINE: string;
 };
-export declare const Table: import("react").ForwardRefExoticComponent<Pick<TableProps, "headers" | "method" | "rows" | "isFixedSize" | "testId" | "label" | "cite" | "data" | "form" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "default" | "width" | "height" | "content" | "hasDataRow" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<Pick<TableProps, "headers" | "method" | "rows" | "isLoading" | "isFixedSize" | "testId" | "label" | "cite" | "data" | "form" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "default" | "width" | "height" | "content" | "hasDataRow" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Caption: FC<{
     children: ReactNode;
 }>;
 export declare const PaginationWrapper: FC<{
     children: ReactNode;
+    testId?: string;
 }>;

package/dist/types/types.d.ts

@@ -70,6 +70,10 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
      * Displays a loading spinner overlaid on top of the current page.
      */
     isLoading?: boolean;
+    /**
+     * Accessible name for loading states spinner. Can be used for internationalization. Default is "Loading table".
+     */
+    loadingLabel?: string;
     /**
      * Displays columns as their initial width regardless of the content that loads in.
      */
@@ -188,6 +192,10 @@ export interface StatefulProps extends WithAnalyticsEventsProps {
      * Displays a loading spinner overlaid on top of the current page.
      */
     isLoading?: boolean;
+    /**
+     * Accessible name for loading states spinner. Can be used for internationalization. Default is "Loading table".
+     */
+    loadingLabel?: string;
     /**
      * Displays columns as their initial width regardless of the content that loads in.
      */

package/dist/types-ts4.5/components/loading-container-advanced.d.ts

@@ -6,6 +6,7 @@ export interface LoadingContainerAdvancedProps {
     contentsOpacity: number | string;
     targetRef?: () => HTMLTableSectionElement | null;
     testId?: string;
+    loadingLabel?: string;
 }
 export default class LoadingContainerAdvanced extends React.Component<LoadingContainerAdvancedProps, {}> {
     spinnerRef: React.RefObject<HTMLDivElement>;
@@ -14,6 +15,7 @@ export default class LoadingContainerAdvanced extends React.Component<LoadingCon
         isLoading: boolean;
         spinnerSize: string;
         contentsOpacity: "var(--ds-opacity-loading)";
+        loadingLabel: string;
     };
     componentDidMount: () => void;
     UNSAFE_componentWillReceiveProps: (nextProps: LoadingContainerAdvancedProps) => void;

package/dist/types-ts4.5/components/loading-container.d.ts

@@ -6,12 +6,14 @@ interface LoadingContainerProps {
     spinnerSize?: SpinnerSizeType;
     contentsOpacity: number;
     testId?: string;
+    loadingLabel?: string;
 }
 export default class LoadingContainer extends React.Component<LoadingContainerProps> {
     static defaultProps: {
         isLoading: boolean;
         spinnerSize: string;
         contentsOpacity: number;
+        loadingLabel: string;
     };
     render(): JSX.Element;
 }

package/dist/types-ts4.5/components/managed-pagination.d.ts

@@ -7,6 +7,7 @@ interface ManagedPaginationProps {
     total: number;
     i18n?: I18nShape;
     testId?: string;
+    isDisabled?: boolean;
 }
 export default class ManagedPagination extends React.Component<ManagedPaginationProps> {
     onChange: (_event: any, newValue: any, analyticsEvent?: UIAnalyticsEvent) => void;

package/dist/types-ts4.5/components/stateless.d.ts

@@ -39,7 +39,7 @@ declare class DynamicTable extends React.Component<Props, State> {
     render(): JSX.Element;
 }
 export { DynamicTable as DynamicTableWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "totalRows" | "onPageRowsUpdate" | "sortKey" | "sortOrder" | "highlightedRowIndex" | "testId" | "label"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isLoading" | "isFixedSize" | "rowsPerPage" | "onSetPage" | "onSort" | "page" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "loadingLabel" | "totalRows" | "onPageRowsUpdate" | "sortKey" | "sortOrder" | "highlightedRowIndex" | "testId" | "label"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isLoading" | "isFixedSize" | "rowsPerPage" | "onSetPage" | "onSort" | "page" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n">> & Partial<Pick<{
     isLoading: boolean;
     isFixedSize: boolean;
     rowsPerPage: number;
@@ -56,5 +56,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, ke
         label: string;
         pageLabel: string;
     };
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "isLoading" | "isFixedSize" | "rowsPerPage" | "totalRows" | "onSetPage" | "onSort" | "onPageRowsUpdate" | "page" | "sortKey" | "sortOrder" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n" | "highlightedRowIndex" | "testId" | "label" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "head" | "caption" | "rows" | "emptyView" | "loadingSpinnerSize" | "isLoading" | "loadingLabel" | "isFixedSize" | "rowsPerPage" | "totalRows" | "onSetPage" | "onSort" | "onPageRowsUpdate" | "page" | "sortKey" | "sortOrder" | "isRankable" | "isRankingDisabled" | "onRankStart" | "onRankEnd" | "paginationi18n" | "highlightedRowIndex" | "testId" | "label" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/styled/dynamic-table.d.ts

@@ -2,6 +2,7 @@
 import { FC, HTMLProps, ReactNode } from 'react';
 export type TableProps = HTMLProps<HTMLTableElement> & {
     isFixedSize?: boolean;
+    isLoading?: boolean;
     hasDataRow: boolean;
     testId?: string;
 };
@@ -11,10 +12,11 @@ export declare const tableRowCSSVars: {
     CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: string;
     CSS_VAR_ROW_FOCUS_OUTLINE: string;
 };
-export declare const Table: import("react").ForwardRefExoticComponent<Pick<TableProps, "headers" | "method" | "rows" | "isFixedSize" | "testId" | "label" | "cite" | "data" | "form" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "default" | "width" | "height" | "content" | "hasDataRow" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<Pick<TableProps, "headers" | "method" | "rows" | "isLoading" | "isFixedSize" | "testId" | "label" | "cite" | "data" | "form" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "default" | "width" | "height" | "content" | "hasDataRow" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLTableElement>>;
 export declare const Caption: FC<{
     children: ReactNode;
 }>;
 export declare const PaginationWrapper: FC<{
     children: ReactNode;
+    testId?: string;
 }>;

package/dist/types-ts4.5/types.d.ts

@@ -70,6 +70,10 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
      * Displays a loading spinner overlaid on top of the current page.
      */
     isLoading?: boolean;
+    /**
+     * Accessible name for loading states spinner. Can be used for internationalization. Default is "Loading table".
+     */
+    loadingLabel?: string;
     /**
      * Displays columns as their initial width regardless of the content that loads in.
      */
@@ -188,6 +192,10 @@ export interface StatefulProps extends WithAnalyticsEventsProps {
      * Displays a loading spinner overlaid on top of the current page.
      */
     isLoading?: boolean;
+    /**
+     * Accessible name for loading states spinner. Can be used for internationalization. Default is "Loading table".
+     */
+    loadingLabel?: string;
     /**
      * Displays columns as their initial width regardless of the content that loads in.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.13.1",
+  "version": "14.14.0",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,10 +42,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/pagination": "^14.4.0",
+    "@atlaskit/pagination": "^14.5.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-beautiful-dnd": "^12.1.1"
@@ -57,6 +57,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -84,4 +85,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}