@atlaskit/dynamic-table 14.2.3 → 14.4.0

package/dist/cjs/styled/constants.js

@@ -5,130 +5,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cellStyle = exports.arrowsStyle = exports.onClickStyle = exports.truncateStyle = void 0;
+exports.cellStyles = exports.getTruncationStyleVars = exports.overflowTruncateStyles = exports.fixedSizeTruncateStyles = exports.truncationWidthStyles = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _styledComponents = require("styled-components");
-
-var _colors = require("@atlaskit/theme/colors");
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _math = require("@atlaskit/theme/math");
-
-var _constants2 = require("../internal/constants");
-
-var _theme = require("../theme");
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  padding: ", "px ", "px;\n  text-align: left;\n\n  &:first-child {\n    padding-left: 0;\n  }\n  &:last-child {\n    padding-right: 0;\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n    & > span {\n      position: relative;\n      &::before {\n        ", ";\n        border-bottom: 3px solid\n          ", ";\n        bottom: 8px;\n        content: ' ';\n      }\n      &::after {\n        ", ";\n        border-top: 3px solid\n          ", ";\n        bottom: 0;\n        content: ' ';\n      }\n    }\n\n    &:hover > span {\n      &::before {\n        border-bottom: 3px solid\n          ", ";\n      }\n      &::after {\n        border-top: 3px solid\n          ", ";\n      }\n    }\n  "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n    border: 3px solid transparent;\n    display: block;\n    height: 0;\n    position: absolute;\n    right: -", "px;\n    width: 0;\n  "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n    &:hover {\n      cursor: pointer;\n      background-color: ", ";\n    }\n  "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        overflow: hidden;\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        width: ", "%;\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", ";\n  ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var truncateStyle = function truncateStyle(_ref) {
-  var width = _ref.width,
-      isFixedSize = _ref.isFixedSize,
-      shouldTruncate = _ref.shouldTruncate;
-  return (0, _styledComponents.css)(_templateObject(), width ? (0, _styledComponents.css)(_templateObject2(), width) : '', isFixedSize ? (0, _styledComponents.css)(_templateObject3()) : '', isFixedSize && shouldTruncate ? (0, _styledComponents.css)(_templateObject4()) : '');
-};
-
-exports.truncateStyle = truncateStyle;
+var CSS_VAR_WIDTH = '--local-dynamic-table-width';
+var gridSize = (0, _constants.gridSize)();
+var truncationWidthStyles = (0, _core.css)({
+  width: "var(".concat(CSS_VAR_WIDTH, ")")
+});
+exports.truncationWidthStyles = truncationWidthStyles;
+var fixedSizeTruncateStyles = (0, _core.css)({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+exports.fixedSizeTruncateStyles = fixedSizeTruncateStyles;
+var overflowTruncateStyles = (0, _core.css)({
+  overflow: 'hidden'
+});
+exports.overflowTruncateStyles = overflowTruncateStyles;
 
-var onClickStyle = function onClickStyle(_ref2) {
-  var onClick = _ref2.onClick;
-  return onClick && (0, _styledComponents.css)(_templateObject5(), _colors.N30A);
+var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
+  var width = _ref.width;
+  return (0, _defineProperty2.default)({}, CSS_VAR_WIDTH, "".concat(width, "%"));
 };
 
-exports.onClickStyle = onClickStyle;
-
-var arrowsStyle = function arrowsStyle(props) {
-  var isSortable = props.isSortable,
-      sortOrder = props.sortOrder;
-
-  if (!isSortable) {
-    return '';
+exports.getTruncationStyleVars = getTruncationStyleVars;
+var cellStyles = (0, _core.css)({
+  border: 'none',
+  padding: "".concat(gridSize / 2, "px ").concat(gridSize, "px"),
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-
-  var pseudoBase = (0, _styledComponents.css)(_templateObject6(), _constants.gridSize);
-  return (0, _styledComponents.css)(_templateObject7(), pseudoBase, sortOrder === _constants2.ASC ? _theme.arrow.selectedColor(props) : _theme.arrow.defaultColor(props), pseudoBase, sortOrder === _constants2.DESC ? _theme.arrow.selectedColor(props) : _theme.arrow.defaultColor(props), sortOrder === _constants2.ASC ? _theme.arrow.selectedColor(props) : _theme.arrow.hoverColor(props), sortOrder === _constants2.DESC ? _theme.arrow.selectedColor(props) : _theme.arrow.hoverColor(props));
-};
-
-exports.arrowsStyle = arrowsStyle;
-var cellStyle = (0, _styledComponents.css)(_templateObject8(), (0, _math.divide)(_constants.gridSize, 2), _constants.gridSize);
-exports.cellStyle = cellStyle;
+});
+exports.cellStyles = cellStyles;

package/dist/cjs/styled/rankable/RowPlaceholder.js

@@ -7,20 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RowPlaceholderCell = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+/** @jsx jsx */
+var rowPlaceholderStyles = (0, _core.css)({
+  padding: 0
+});
 
-var RowPlaceholderCell = _styledComponents.default.td(_templateObject());
+var RowPlaceholderCell = function RowPlaceholderCell(props) {
+  return (0, _core.jsx)("td", (0, _extends2.default)({
+    css: rowPlaceholderStyles
+  }, props));
+};
 
 exports.RowPlaceholderCell = RowPlaceholderCell;

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,35 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RankableTableBodyCell = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _TableCell = require("../TableCell");
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"]);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-  return data;
-}
+var _core = require("@emotion/core");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n"]);
+var _TableCell = require("../TableCell");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+/** @jsx jsx */
+var rankingStyles = (0, _core.css)({
+  boxSizing: 'border-box'
+});
 
-  return data;
-}
+var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
+  var isRanking = _ref.isRanking,
+      innerRef = _ref.innerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "innerRef"]);
+  return (0, _core.jsx)(_TableCell.TableBodyCell, (0, _extends2.default)({
+    css: isRanking && rankingStyles
+  }, props, {
+    innerRef: innerRef
+  }));
+};
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject());
-var RankableTableBodyCell = (0, _styledComponents.default)(_TableCell.TableBodyCell)(_templateObject2(), function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
-});
 exports.RankableTableBodyCell = RankableTableBodyCell;

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,69 +7,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RankableTableBodyRow = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _elevation = require("@atlaskit/theme/elevation");
-
-var _TableRow = require("../TableRow");
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", " &:focus {\n    outline-style: solid;\n    outline-color: ", ";\n    outline-width: 2px;\n  }\n"]);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-  return data;
-}
+var _react = require("react");
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  ", " border-radius: 2px;\n"]);
+var _core = require("@emotion/core");
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n"]);
+var _colors = require("@atlaskit/theme/colors");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _tokens = require("@atlaskit/tokens");
 
-  return data;
-}
+var _TableRow = require("../TableRow");
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject());
+/** @jsx jsx */
+var rankingStyles = (0, _core.css)({
+  display: 'block'
+});
+var elevationStyle = (0, _tokens.token)('shadow.overlay', "0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A));
 /**
  * TODO: Pass the props here to get particular theme for the table
  * Skipping it for now as it may impact migration as util-shared-styles does not support this feature
  */
 
-var rankingItemStyles = (0, _styledComponents.css)(_templateObject2(), _colors.N20, (0, _elevation.e500)());
-
-var draggableStyles = function draggableStyles(_ref) {
+var rankingItemStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+var draggableStyles = (0, _core.css)({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+  },
+  outlineWidth: '2px'
+});
+var RankableTableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isRanking = _ref.isRanking,
-      isRankingItem = _ref.isRankingItem;
-  return (0, _styledComponents.css)(_templateObject3(), isRanking && rankingStyles, isRankingItem && rankingItemStyles, _colors.B100);
-};
-
-var RankableTableBodyRow = (0, _styledComponents.default)(_TableRow.TableBodyRow)(_templateObject4(), draggableStyles);
+      isRankingItem = _ref.isRankingItem,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "isRankingItem"]);
+  return (0, _core.jsx)(_TableRow.TableBodyRow, (0, _extends2.default)({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});
 exports.RankableTableBodyRow = RankableTableBodyRow;

package/dist/cjs/theme.js

@@ -1,58 +1,71 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.head = exports.row = exports.arrow = void 0;
+exports.head = exports.row = exports.arrow = exports.MSThemeColors = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var MSThemeColors = {
+  Background: 'Canvas',
+  Text: 'CanvasText',
+  SelectedBackground: 'Highlight',
+  SelectedText: 'HighlightText'
+};
+exports.MSThemeColors = MSThemeColors;
 var arrow = {
   defaultColor: (0, _components.themed)({
-    light: colors.N40,
-    dark: colors.DN40
+    light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N40),
+    dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN40)
   }),
   selectedColor: (0, _components.themed)({
-    light: colors.N300,
-    dark: colors.DN300
+    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
+    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
   }),
   hoverColor: (0, _components.themed)({
-    light: colors.N60,
-    dark: colors.DN60
+    light: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.N60),
+    dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.DN60)
   })
 };
 exports.arrow = arrow;
 var row = {
   focusOutline: (0, _components.themed)({
-    light: colors.B100,
-    dark: colors.B100
+    light: (0, _tokens.token)('color.border.focus', colors.B100),
+    dark: (0, _tokens.token)('color.border.focus', colors.B100)
   }),
   highlightedBackground: (0, _components.themed)({
-    light: colors.N20,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.background.selected.resting', colors.B50),
+    dark: (0, _tokens.token)('color.background.selected.resting', colors.DN50)
   }),
   hoverBackground: (0, _components.themed)({
-    light: colors.N10,
-    dark: colors.DN40
+    light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.N10),
+    dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', colors.DN40)
   }),
   hoverHighlightedBackground: (0, _components.themed)({
-    light: colors.N30,
-    dark: colors.DN60
+    light: (0, _tokens.token)('color.background.selected.hover', colors.B75),
+    dark: (0, _tokens.token)('color.background.selected.hover', colors.DN60)
   })
 };
 exports.row = row;
 var head = {
   borderColor: (0, _components.themed)({
-    light: colors.N40,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.border.neutral', colors.N40),
+    dark: (0, _tokens.token)('color.border.neutral', colors.DN50)
   }),
   textColor: (0, _components.themed)({
-    light: colors.N300,
-    dark: colors.DN300
+    light: (0, _tokens.token)('color.text.lowEmphasis', colors.N300),
+    dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN300)
   })
 };
 exports.head = head;

package/dist/cjs/version.json

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

package/dist/es2019/components/Body.js

@@ -18,7 +18,7 @@ class Body extends 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/es2019/components/LoadingContainerAdvanced.js

@@ -61,7 +61,7 @@ export default class LoadingContainerAdvanced extends React.Component {
 
     _defineProperty(this, "getThisNode", () => safeFindDOMNode(this));
 
-    _defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinner));
+    _defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinnerRef));
 
     _defineProperty(this, "hasTargetNode", nextProps => !!this.getTargetNode(nextProps));
 
@@ -199,9 +199,7 @@ export default class LoadingContainerAdvanced extends React.Component {
         this.children = el;
       }
     }), isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, null, /*#__PURE__*/React.createElement(SpinnerContainer, {
-      innerRef: el => {
-        this.spinner = el;
-      }
+      ref: el => this.spinnerRef = el
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: spinnerSize,
       testId: testId && `${testId}--loadingSpinner`

package/dist/es2019/components/Stateful.js

@@ -112,7 +112,8 @@ export default class DynamicTable extends React.Component {
       paginationi18n,
       onRankStart,
       onPageRowsUpdate,
-      testId
+      testId,
+      label
     } = this.props;
     return /*#__PURE__*/React.createElement(DynamicTableStateless, {
       paginationi18n: paginationi18n,
@@ -135,7 +136,8 @@ export default class DynamicTable extends React.Component {
       onRankEnd: this.onRankEnd,
       onRankStart: onRankStart,
       onPageRowsUpdate: onPageRowsUpdate,
-      testId: testId
+      testId: testId,
+      label: label
     });
   }
 

package/dist/es2019/components/Stateless.js

@@ -13,7 +13,7 @@ import ManagedPagination from './managedPagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.2.3";
+const packageVersion = "14.4.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -162,7 +162,8 @@ class DynamicTable extends React.Component {
       paginationi18n,
       onPageRowsUpdate,
       testId,
-      totalRows: passedDownTotalRows
+      totalRows: passedDownTotalRows,
+      label
     } = this.props;
     const rowsLength = rows && rows.length;
     let totalPages; // set a flag to denote the dynamic table might get only one page of data
@@ -210,7 +211,8 @@ class DynamicTable extends React.Component {
       testId: testId
     }, /*#__PURE__*/React.createElement(Table, {
       isFixedSize: isFixedSize,
-      "data-testid": testId && `${testId}--table`
+      "data-testid": testId && `${testId}--table`,
+      "aria-label": label
     }, !!caption && /*#__PURE__*/React.createElement(Caption, null, caption), head && /*#__PURE__*/React.createElement(TableHead, {
       head: head,
       onSort: this.onSort,

package/dist/es2019/components/TableHeadCell.js

@@ -1,29 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { HeadCell } from '../styled/TableHead';
 
-class TableHeadCell extends React.Component {
-  render() {
-    const {
-      content,
-      inlineStyles,
-      testId,
-      ...rest
-    } = this.props;
-    return /*#__PURE__*/React.createElement(HeadCell, _extends({
-      style: inlineStyles,
-      "data-testid": testId && `${testId}--head--cell`
-    }, rest, {
-      tabIndex: rest.isSortable ? 0 : undefined
-    }), /*#__PURE__*/React.createElement("span", null, content));
-  }
+const TableHeadCell = ({
+  content,
+  inlineStyles,
+  testId,
+  isRanking,
+  innerRef,
+  isSortable,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+    style: inlineStyles,
+    "data-testid": testId && `${testId}--head--cell`,
+    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
 
-}
-
-_defineProperty(TableHeadCell, "defaultProps", {
-  innerRef: () => {},
-  inlineStyles: {}
-});
+  }, rest, {
+    tabIndex: isSortable ? 0 : undefined,
+    isSortable: isSortable
+  }), /*#__PURE__*/React.createElement("span", null, content));
+};
 
 export default TableHeadCell;

package/dist/es2019/components/TableRow.js

@@ -15,7 +15,10 @@ const Row = ({
     ...restRowProps
   } = row;
   return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, restRowProps, {
-    isHighlighted: isHighlighted,
+    isHighlighted: isHighlighted
+  }, isHighlighted ? {
+    'data-ts--dynamic-table--table-row--highlighted': true
+  } : null, {
     "data-testid": testId && `${testId}--row-${restRowProps.key}`
   }), cells.map((cell, cellIndex) => {
     const {

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

@@ -100,7 +100,7 @@ export class RankableBody extends 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/es2019/components/rankable/TableCell.js

@@ -10,8 +10,8 @@ export class RankableTableCell extends React.Component {
       head,
       isFixedSize,
       isRanking,
-      innerRef,
-      refWidth
+      refWidth,
+      innerRef
     } = this.props;
     const {
       content,
@@ -28,8 +28,8 @@ export class RankableTableCell extends React.Component {
       width: width,
       isRanking: isRanking,
       style: inlineStyles,
-      innerRef: innerRef,
-      onKeyDown: e => e.stopPropagation()
+      onKeyDown: e => e.stopPropagation(),
+      innerRef: innerRef
     }), content);
   }
 

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

@@ -10,13 +10,11 @@ class RankableTableHeadCell extends React.Component {
       isRanking,
       refHeight,
       refWidth,
-      innerRef,
       ...restProps
     } = this.props;
     const inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
     return /*#__PURE__*/React.createElement(HeadCell, _extends({
-      inlineStyles: inlineStyles,
-      innerRef: innerRef
+      inlineStyles: inlineStyles
     }, restProps));
   }