@atlaskit/dynamic-table 14.2.3 → 14.4.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @atlaskit/dynamic-table
 
+## 14.4.0
+
+### Minor Changes
+
+- [`dc35866892f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc35866892f) - [ux] Instrumented dynamic-table with the new theming package, @atlaskit/tokens.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- [`ca00a7783a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca00a7783a9) - Removes `styled-components` as a peer dependency in favour of a direct dependency on `emotion`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.3.2
+
+### Patch Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Internal changes to remove `@atlaskit/theme/math` usage.
+- Updated dependencies
+
+## 14.3.1
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
+## 14.3.0
+
+### Minor Changes
+
+- [`7da3e890032`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7da3e890032) - [ux] `highlightedRowIndex` now can be a list of numbers (`number[]`), as well as `number`. Also highlighted rows now have B50/B75 colour.
+- [`aa66648082f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aa66648082f) - Add support for aria attributes on the table
+
+### Patch Changes
+
+- [`bf041942c3a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf041942c3a) - Added styles to `HeadCell` to be visible when windows high contrast mode is turned on.
+
 ## 14.2.3
 
 ### Patch Changes

package/dist/cjs/components/Body.js

@@ -25,7 +25,7 @@ var _TableRow = _interopRequireDefault(require("./TableRow"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var Body = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Body, _React$Component);
@@ -54,7 +54,7 @@ var Body = /*#__PURE__*/function (_React$Component) {
           isFixedSize: isFixedSize,
           key: row.key || rowIndex,
           row: row,
-          isHighlighted: highlightedRowIndex === rowIndex,
+          isHighlighted: !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1),
           testId: testId
         });
       }));

package/dist/cjs/components/LoadingContainer.js

@@ -29,7 +29,7 @@ var _LoadingContainer = require("../styled/LoadingContainer");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var LoadingContainer = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(LoadingContainer, _React$Component);

package/dist/cjs/components/LoadingContainerAdvanced.js

@@ -35,7 +35,7 @@ var _LoadingContainerAdvanced = require("../styled/LoadingContainerAdvanced");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 // there is a bug with findDOMNode and Suspense in React < 16.9: https://github.com/facebook/react/issues/14188
 var safeFindDOMNode = function safeFindDOMNode(component) {
@@ -102,7 +102,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
       return safeFindDOMNode((0, _assertThisInitialized2.default)(_this));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSpinnerNode", function () {
-      return safeFindDOMNode(_this.spinner);
+      return safeFindDOMNode(_this.spinnerRef);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasTargetNode", function (nextProps) {
       return !!_this.getTargetNode(nextProps);
@@ -242,8 +242,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
           _this2.children = el;
         }
       }), isLoading && /*#__PURE__*/_react.default.createElement(_LoadingContainerAdvanced.SpinnerBackdrop, null, /*#__PURE__*/_react.default.createElement(_LoadingContainerAdvanced.SpinnerContainer, {
-        innerRef: function innerRef(el) {
-          _this2.spinner = el;
+        ref: function ref(el) {
+          return _this2.spinnerRef = el;
         }
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: spinnerSize,

package/dist/cjs/components/Stateful.js

@@ -29,7 +29,7 @@ var _Stateless = _interopRequireDefault(require("./Stateless"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var DynamicTable = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DynamicTable, _React$Component);
@@ -146,7 +146,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
           paginationi18n = _this$props.paginationi18n,
           onRankStart = _this$props.onRankStart,
           onPageRowsUpdate = _this$props.onPageRowsUpdate,
-          testId = _this$props.testId;
+          testId = _this$props.testId,
+          label = _this$props.label;
       return /*#__PURE__*/_react.default.createElement(_Stateless.default, {
         paginationi18n: paginationi18n,
         caption: caption,
@@ -168,7 +169,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         onRankEnd: this.onRankEnd,
         onRankStart: onRankStart,
         onPageRowsUpdate: onPageRowsUpdate,
-        testId: testId
+        testId: testId,
+        label: label
       });
     }
   }]);

package/dist/cjs/components/Stateless.js

@@ -49,10 +49,10 @@ var _TableHead = _interopRequireDefault(require("./TableHead"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.2.3";
+var packageVersion = "14.4.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -208,7 +208,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
           paginationi18n = _this$props4.paginationi18n,
           onPageRowsUpdate = _this$props4.onPageRowsUpdate,
           testId = _this$props4.testId,
-          passedDownTotalRows = _this$props4.totalRows;
+          passedDownTotalRows = _this$props4.totalRows,
+          label = _this$props4.label;
       var rowsLength = rows && rows.length;
       var totalPages; // set a flag to denote the dynamic table might get only one page of data
       // for paginated data
@@ -257,7 +258,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         testId: testId
       }, /*#__PURE__*/_react.default.createElement(_DynamicTable.Table, {
         isFixedSize: isFixedSize,
-        "data-testid": testId && "".concat(testId, "--table")
+        "data-testid": testId && "".concat(testId, "--table"),
+        "aria-label": label
       }, !!caption && /*#__PURE__*/_react.default.createElement(_DynamicTable.Caption, null, caption), head && /*#__PURE__*/_react.default.createElement(_TableHead.default, {
         head: head,
         onSort: this.onSort,

package/dist/cjs/components/TableHead.js

@@ -37,7 +37,7 @@ var _TableHeadCell2 = _interopRequireDefault(require("./TableHeadCell"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var TableHead = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableHead, _React$Component);

package/dist/cjs/components/TableHeadCell.js

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

package/dist/cjs/components/TableRow.js

@@ -26,7 +26,10 @@ var Row = function Row(_ref) {
   var cells = row.cells,
       restRowProps = (0, _objectWithoutProperties2.default)(row, ["cells"]);
   return /*#__PURE__*/_react.default.createElement(_TableRow.TableBodyRow, (0, _extends2.default)({}, restRowProps, {
-    isHighlighted: isHighlighted,
+    isHighlighted: isHighlighted
+  }, isHighlighted ? {
+    'data-ts--dynamic-table--table-row--highlighted': true
+  } : null, {
     "data-testid": testId && "".concat(testId, "--row-").concat(restRowProps.key)
   }), cells.map(function (cell, cellIndex) {
     var content = cell.content,

package/dist/cjs/components/managedPagination.js

@@ -29,7 +29,7 @@ var _pagination = _interopRequireDefault(require("@atlaskit/pagination"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var ManagedPagination = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ManagedPagination, _React$Component);

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

@@ -33,7 +33,7 @@ var _TableRow = _interopRequireDefault(require("./TableRow"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 // computes destination of ranking
 // - if drag was cancelled returns undefined
@@ -130,7 +130,7 @@ var RankableBody = /*#__PURE__*/function (_React$Component) {
             rowIndex: rowIndex,
             row: row,
             isRankingDisabled: isRankingDisabled,
-            isHighlighted: highlightedRowIndex === rowIndex
+            isHighlighted: !!highlightedRowIndex && (typeof highlightedRowIndex === 'number' ? highlightedRowIndex === rowIndex : highlightedRowIndex.indexOf(rowIndex) > -1)
           });
         }), provided.placeholder);
       }));

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

@@ -31,7 +31,7 @@ var _TableCell = require("../../styled/rankable/TableCell");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var RankableTableCell = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(RankableTableCell, _React$Component);
@@ -51,8 +51,8 @@ var RankableTableCell = /*#__PURE__*/function (_React$Component) {
           head = _this$props.head,
           isFixedSize = _this$props.isFixedSize,
           isRanking = _this$props.isRanking,
-          innerRef = _this$props.innerRef,
-          refWidth = _this$props.refWidth;
+          refWidth = _this$props.refWidth,
+          innerRef = _this$props.innerRef;
       var content = cell.content,
           restCellProps = (0, _objectWithoutProperties2.default)(cell, ["content"]);
 
@@ -67,10 +67,10 @@ var RankableTableCell = /*#__PURE__*/function (_React$Component) {
         width: width,
         isRanking: isRanking,
         style: inlineStyles,
-        innerRef: innerRef,
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
-        }
+        },
+        innerRef: innerRef
       }), content);
     }
   }]);

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

@@ -31,7 +31,7 @@ var _TableHeadCell = _interopRequireDefault(require("../TableHeadCell"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(RankableTableHeadCell, _React$Component);
@@ -50,12 +50,10 @@ var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
           isRanking = _this$props.isRanking,
           refHeight = _this$props.refHeight,
           refWidth = _this$props.refWidth,
-          innerRef = _this$props.innerRef,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props, ["isRanking", "refHeight", "refWidth", "innerRef"]);
+          restProps = (0, _objectWithoutProperties2.default)(_this$props, ["isRanking", "refHeight", "refWidth"]);
       var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
       return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, (0, _extends2.default)({
-        inlineStyles: inlineStyles,
-        innerRef: innerRef
+        inlineStyles: inlineStyles
       }, restProps));
     }
   }]);

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

@@ -37,13 +37,13 @@ var _TableRow = require("../../styled/rankable/TableRow");
 
 var _TableCell = _interopRequireDefault(require("./TableCell"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 var RankableTableRow = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(RankableTableRow, _React$Component);
@@ -64,7 +64,7 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       return function (ref) {
         innerRefFn(ref);
 
-        if (_this.props.innerRef) {
+        if (typeof _this.props.innerRef === 'function') {
           _this.props.innerRef(ref);
         }
       };
@@ -97,12 +97,12 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_reactBeautifulDnd.Draggable, {
-        draggableId: key || "".concat(rowIndex),
+        draggableId: key || rowIndex.toString(),
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
         return /*#__PURE__*/_react.default.createElement(_TableRow.RankableTableBodyRow, (0, _extends2.default)({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
-          innerRef: _this2.innerRef(provided.innerRef),
+          ref: _this2.innerRef(provided.innerRef),
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
           isHighlighted: isHighlighted,
           isRanking: isRanking,

package/dist/cjs/hoc/withDimensions.js

@@ -27,13 +27,11 @@ var _react = _interopRequireDefault(require("react"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 // Compute height and width of wrapped component before ranking
 function withDimensions(WrappedComponent) {
-  var _temp;
-
-  return _temp = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(WithDimensions, _React$Component);
 
     var _super = _createSuper(WithDimensions);
@@ -103,5 +101,5 @@ function withDimensions(WrappedComponent) {
       }
     }]);
     return WithDimensions;
-  }(_react.default.Component), _temp;
+  }(_react.default.Component);
 }

package/dist/cjs/hoc/withSortedPageRows.js

@@ -33,13 +33,13 @@ var _constants = require("../internal/constants");
 
 var _helpers = require("../internal/helpers");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], 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; } }
 
 // sort all rows based on sort key and order
 var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
@@ -122,9 +122,7 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
 
 // get one page of data in table, sorting all rows previously
 function withSortedPageRows(WrappedComponent) {
-  var _temp;
-
-  return _temp = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     (0, _inherits2.default)(WithSortedPageRows, _React$Component);
 
     var _super = _createSuper(WithSortedPageRows);
@@ -202,5 +200,5 @@ function withSortedPageRows(WrappedComponent) {
       }
     }]);
     return WithSortedPageRows;
-  }(_react.default.Component), _temp;
+  }(_react.default.Component);
 }

package/dist/cjs/styled/DynamicTable.js

@@ -1,73 +1,103 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaginationWrapper = exports.Caption = exports.Table = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _math = require("@atlaskit/theme/math");
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
+exports.PaginationWrapper = exports.Caption = exports.Table = exports.tableRowCSSVars = void 0;
 
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 1.42857143em;\n  /* there is a bug in Safari: if element which creates a new stacking context\n     is a child of a table, table caption re-renders in bad wrong position\n     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom\n  */\n  will-change: transform;\n  font-style: inherit;\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  line-height: 1.2;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  text-align: left;\n"]);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-  return data;
-}
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n      table-layout: fixed;\n    "]);
+var _react = require("react");
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _core = require("@emotion/core");
 
-  return data;
-}
+var _components = require("@atlaskit/theme/components");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-collapse: collapse;\n  width: 100%;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _constants = require("@atlaskit/theme/constants");
 
-var Table = _styledComponents.default.table(_templateObject(), function (_ref) {
-  var isFixedSize = _ref.isFixedSize;
-  return isFixedSize && (0, _styledComponents.css)(_templateObject2());
+var _theme = require("../theme");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+// CSS vars for table row
+// these are declared here to avoid being re-declared in each table row
+var tableRowCSSVars = {
+  CSS_VAR_HOVER_BACKGROUND: '--local-dynamic-table-hover-bg',
+  CSS_VAR_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-highlighted-bg',
+  CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-hover-highlighted-bg',
+  CSS_VAR_ROW_FOCUS_OUTLINE: '--local-dynamic-table-row-focus-outline'
+};
+exports.tableRowCSSVars = tableRowCSSVars;
+var fixedSizeTableStyles = (0, _core.css)({
+  tableLayout: 'fixed'
+});
+var tableStyles = (0, _core.css)({
+  borderCollapse: 'collapse',
+  width: '100%'
+});
+var Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref2;
+
+  var isFixedSize = _ref.isFixedSize,
+      children = _ref.children,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["isFixedSize", "children"]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("table", (0, _extends2.default)({
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, _theme.row.hoverBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, _theme.row.highlightedBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, _theme.row.hoverHighlightedBackground({
+      theme: theme
+    })), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, _theme.row.focusOutline({
+      theme: theme
+    })), _ref2),
+    css: [tableStyles, isFixedSize && fixedSizeTableStyles],
+    ref: ref
+  }, rest), children);
 });
-
 exports.Table = Table;
+var captionStyles = (0, _core.css)({
+  fontSize: '1.42857143em',
+
+  /* there is a bug in Safari: if element which creates a new stacking context
+     is a child of a table, table caption re-renders in bad wrong position
+     https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
+  */
+  willChange: 'transform',
+  fontStyle: 'inherit',
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: 1.2,
+  marginBottom: "".concat(gridSize, "px"),
+  marginTop: "".concat(gridSize * 3.5, "px"),
+  textAlign: 'left'
+});
 
-var Caption = _styledComponents.default.caption(_templateObject3(), _constants.gridSize, (0, _math.multiply)(_constants.gridSize, 3.5));
+var Caption = function Caption(_ref3) {
+  var children = _ref3.children;
+  return (0, _core.jsx)("caption", {
+    css: captionStyles
+  }, children);
+};
 
 exports.Caption = Caption;
+var paginationWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  justifyContent: 'center'
+});
 
-var PaginationWrapper = _styledComponents.default.div(_templateObject4());
+var PaginationWrapper = function PaginationWrapper(_ref4) {
+  var children = _ref4.children;
+  return (0, _core.jsx)("div", {
+    css: paginationWrapperStyles
+  }, children);
+};
 
 exports.PaginationWrapper = PaginationWrapper;