@atlaskit/dynamic-table 14.2.3 → 14.4.0

package/dist/es2019/styled/constants.js

@@ -1,90 +1,32 @@
-import { css } from 'styled-components';
-import { N30A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-import { divide } from '@atlaskit/theme/math';
-import { ASC, DESC } from '../internal/constants';
-import { arrow } from '../theme';
-export const truncateStyle = ({
-  width,
-  isFixedSize,
-  shouldTruncate
-}) => css`
-  ${width ? css`
-        width: ${width}%;
-      ` : ''} ${isFixedSize ? css`
-        overflow: hidden;
-      ` : ''};
-  ${isFixedSize && shouldTruncate ? css`
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      ` : ''};
-`;
-export const onClickStyle = ({
-  onClick
-}) => onClick && css`
-    &:hover {
-      cursor: pointer;
-      background-color: ${N30A};
-    }
-  `;
-export const arrowsStyle = props => {
-  const {
-    isSortable,
-    sortOrder
-  } = props;
-
-  if (!isSortable) {
-    return '';
-  }
-
-  const pseudoBase = css`
-    border: 3px solid transparent;
-    display: block;
-    height: 0;
-    position: absolute;
-    right: -${gridSize}px;
-    width: 0;
-  `;
-  return css`
-    & > span {
-      position: relative;
-      &::before {
-        ${pseudoBase};
-        border-bottom: 3px solid
-          ${sortOrder === ASC ? arrow.selectedColor(props) : arrow.defaultColor(props)};
-        bottom: 8px;
-        content: ' ';
-      }
-      &::after {
-        ${pseudoBase};
-        border-top: 3px solid
-          ${sortOrder === DESC ? arrow.selectedColor(props) : arrow.defaultColor(props)};
-        bottom: 0;
-        content: ' ';
-      }
-    }
-
-    &:hover > span {
-      &::before {
-        border-bottom: 3px solid
-          ${sortOrder === ASC ? arrow.selectedColor(props) : arrow.hoverColor(props)};
-      }
-      &::after {
-        border-top: 3px solid
-          ${sortOrder === DESC ? arrow.selectedColor(props) : arrow.hoverColor(props)};
-      }
-    }
-  `;
+import { css } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const CSS_VAR_WIDTH = '--local-dynamic-table-width';
+const gridSize = getGridSize();
+export const truncationWidthStyles = css({
+  width: `var(${CSS_VAR_WIDTH})`
+});
+export const fixedSizeTruncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export const overflowTruncateStyles = css({
+  overflow: 'hidden'
+});
+export const getTruncationStyleVars = ({
+  width
+}) => {
+  return {
+    [CSS_VAR_WIDTH]: `${width}%`
+  };
 };
-export const cellStyle = css`
-  border: none;
-  padding: ${divide(gridSize, 2)}px ${gridSize}px;
-  text-align: left;
-
-  &:first-child {
-    padding-left: 0;
-  }
-  &:last-child {
-    padding-right: 0;
+export const cellStyles = css({
+  border: 'none',
+  padding: `${gridSize / 2}px ${gridSize}px`,
+  textAlign: 'left',
+  '&:first-of-type': {
+    paddingLeft: 0
+  },
+  '&:last-child': {
+    paddingRight: 0
   }
-`;
+});

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

@@ -1,4 +1,10 @@
-import styled from 'styled-components';
-export const RowPlaceholderCell = styled.td`
-  padding: 0;
-`;
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const rowPlaceholderStyles = css({
+  padding: 0
+});
+export const RowPlaceholderCell = props => jsx("td", _extends({
+  css: rowPlaceholderStyles
+}, props));

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

@@ -1,10 +1,17 @@
-import styled, { css } from 'styled-components';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 import { TableBodyCell } from '../TableCell';
-const rankingStyles = css`
-  box-sizing: border-box;
-`;
-export const RankableTableBodyCell = styled(TableBodyCell)`
-  ${({
-  isRanking
-}) => isRanking && rankingStyles};
-`;
+const rankingStyles = css({
+  boxSizing: 'border-box'
+});
+export const RankableTableBodyCell = ({
+  isRanking,
+  innerRef,
+  ...props
+}) => jsx(TableBodyCell, _extends({
+  css: isRanking && rankingStyles
+}, props, {
+  innerRef: innerRef
+}));

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

@@ -1,31 +1,39 @@
-import styled, { css } from 'styled-components';
-import { B100, N20 } from '@atlaskit/theme/colors';
-import { e500 } from '@atlaskit/theme/elevation';
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { TableBodyRow } from '../TableRow';
-const rankingStyles = css`
-  display: block;
-`;
+const rankingStyles = css({
+  display: 'block'
+});
+const elevationStyle = token('shadow.overlay', `0 20px 32px -8px ${N50A}, 0 0 1px ${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
  */
 
-const rankingItemStyles = css`
-  background-color: ${N20};
-  ${e500()} border-radius: 2px;
-`;
-
-const draggableStyles = ({
+const rankingItemStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N20),
+  boxShadow: elevationStyle,
+  borderRadius: '2px'
+});
+const draggableStyles = css({
+  '&:focus': {
+    outlineStyle: 'solid',
+    outlineColor: token('color.border.focus', B100)
+  },
+  outlineWidth: '2px'
+});
+export const RankableTableBodyRow = /*#__PURE__*/forwardRef(({
   isRanking,
-  isRankingItem
-}) => css`
-  ${isRanking && rankingStyles} ${isRankingItem && rankingItemStyles} &:focus {
-    outline-style: solid;
-    outline-color: ${B100};
-    outline-width: 2px;
-  }
-`;
-
-export const RankableTableBodyRow = styled(TableBodyRow)`
-  ${draggableStyles};
-`;
+  isRankingItem,
+  ...props
+}, ref) => {
+  return jsx(TableBodyRow, _extends({
+    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+    ref: ref
+  }, props));
+});

package/dist/es2019/theme.js

@@ -1,44 +1,51 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+export const MSThemeColors = {
+  Background: 'Canvas',
+  Text: 'CanvasText',
+  SelectedBackground: 'Highlight',
+  SelectedText: 'HighlightText'
+};
 export const arrow = {
   defaultColor: themed({
-    light: colors.N40,
-    dark: colors.DN40
+    light: token('color.background.subtleNeutral.resting', colors.N40),
+    dark: token('color.background.subtleNeutral.resting', colors.DN40)
   }),
   selectedColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   }),
   hoverColor: themed({
-    light: colors.N60,
-    dark: colors.DN60
+    light: token('color.background.subtleNeutral.pressed', colors.N60),
+    dark: token('color.background.subtleNeutral.pressed', colors.DN60)
   })
 };
 export const row = {
   focusOutline: themed({
-    light: colors.B100,
-    dark: colors.B100
+    light: token('color.border.focus', colors.B100),
+    dark: token('color.border.focus', colors.B100)
   }),
   highlightedBackground: themed({
-    light: colors.N20,
-    dark: colors.DN50
+    light: token('color.background.selected.resting', colors.B50),
+    dark: token('color.background.selected.resting', colors.DN50)
   }),
   hoverBackground: themed({
-    light: colors.N10,
-    dark: colors.DN40
+    light: token('color.background.subtleBorderedNeutral.resting', colors.N10),
+    dark: token('color.background.subtleBorderedNeutral.resting', colors.DN40)
   }),
   hoverHighlightedBackground: themed({
-    light: colors.N30,
-    dark: colors.DN60
+    light: token('color.background.selected.hover', colors.B75),
+    dark: token('color.background.selected.hover', colors.DN60)
   })
 };
 export const head = {
   borderColor: themed({
-    light: colors.N40,
-    dark: colors.DN50
+    light: token('color.border.neutral', colors.N40),
+    dark: token('color.border.neutral', colors.DN50)
   }),
   textColor: themed({
-    light: colors.N300,
-    dark: colors.DN300
+    light: token('color.text.lowEmphasis', colors.N300),
+    dark: token('color.text.lowEmphasis', colors.DN300)
   })
 };

package/dist/es2019/version.json

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

package/dist/esm/components/Body.js

@@ -6,7 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import withSortedPageRows from '../hoc/withSortedPageRows';
@@ -40,7 +40,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/esm/components/LoadingContainer.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import Spinner from '@atlaskit/spinner';

package/dist/esm/components/LoadingContainerAdvanced.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import { findDOMNode } from 'react-dom';
@@ -89,7 +89,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getSpinnerNode", function () {
-      return safeFindDOMNode(_this.spinner);
+      return safeFindDOMNode(_this.spinnerRef);
     });
 
     _defineProperty(_assertThisInitialized(_this), "hasTargetNode", function (nextProps) {
@@ -237,8 +237,8 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
           _this2.children = el;
         }
       }), isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, null, /*#__PURE__*/React.createElement(SpinnerContainer, {
-        innerRef: function innerRef(el) {
-          _this2.spinner = el;
+        ref: function ref(el) {
+          return _this2.spinnerRef = el;
         }
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: spinnerSize,

package/dist/esm/components/Stateful.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import { reorderRows } from '../internal/helpers';
@@ -135,7 +135,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.createElement(DynamicTableStateless, {
         paginationi18n: paginationi18n,
         caption: caption,
@@ -157,7 +158,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         onRankEnd: this.onRankEnd,
         onRankStart: onRankStart,
         onPageRowsUpdate: onPageRowsUpdate,
-        testId: testId
+        testId: testId,
+        label: label
       });
     }
   }]);

package/dist/esm/components/Stateless.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -24,7 +24,7 @@ import ManagedPagination from './managedPagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.2.3";
+var packageVersion = "14.4.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -188,7 +188,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
@@ -237,7 +238,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         testId: testId
       }, /*#__PURE__*/React.createElement(Table, {
         isFixedSize: isFixedSize,
-        "data-testid": testId && "".concat(testId, "--table")
+        "data-testid": testId && "".concat(testId, "--table"),
+        "aria-label": label
       }, !!caption && /*#__PURE__*/React.createElement(Caption, null, caption), head && /*#__PURE__*/React.createElement(TableHead, {
         head: head,
         onSort: this.onSort,

package/dist/esm/components/TableHead.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import { validateSortKey } from '../internal/helpers';

package/dist/esm/components/TableHeadCell.js

@@ -1,54 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
 import React from 'react';
 import { HeadCell } from '../styled/TableHead';
 
-var TableHeadCell = /*#__PURE__*/function (_React$Component) {
-  _inherits(TableHeadCell, _React$Component);
-
-  var _super = _createSuper(TableHeadCell);
-
-  function TableHeadCell() {
-    _classCallCheck(this, TableHeadCell);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(TableHeadCell, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          content = _this$props.content,
-          inlineStyles = _this$props.inlineStyles,
-          testId = _this$props.testId,
-          rest = _objectWithoutProperties(_this$props, ["content", "inlineStyles", "testId"]);
-
-      return /*#__PURE__*/React.createElement(HeadCell, _extends({
-        style: inlineStyles,
-        "data-testid": testId && "".concat(testId, "--head--cell")
-      }, rest, {
-        tabIndex: rest.isSortable ? 0 : undefined
-      }), /*#__PURE__*/React.createElement("span", null, content));
-    }
-  }]);
-
-  return TableHeadCell;
-}(React.Component);
-
-_defineProperty(TableHeadCell, "defaultProps", {
-  innerRef: function innerRef() {},
-  inlineStyles: {}
-});
+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 = _objectWithoutProperties(_ref, ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"]);
+
+  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+    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.createElement("span", null, content));
+};
 
 export default TableHeadCell;

package/dist/esm/components/TableRow.js

@@ -15,7 +15,10 @@ var Row = function Row(_ref) {
       restRowProps = _objectWithoutProperties(row, ["cells"]);
 
   return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, 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/esm/components/managedPagination.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import Pagination from '@atlaskit/pagination';

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

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
@@ -114,7 +114,7 @@ export 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/esm/components/rankable/TableCell.js

@@ -8,7 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import withDimensions from '../../hoc/withDimensions';
@@ -33,8 +33,8 @@ export 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 = _objectWithoutProperties(cell, ["content"]);
@@ -50,10 +50,10 @@ export 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/esm/components/rankable/TableHeadCell.js

@@ -8,7 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React from 'react';
 import withDimensions from '../../hoc/withDimensions';
@@ -33,13 +33,11 @@ var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
           isRanking = _this$props.isRanking,
           refHeight = _this$props.refHeight,
           refWidth = _this$props.refWidth,
-          innerRef = _this$props.innerRef,
-          restProps = _objectWithoutProperties(_this$props, ["isRanking", "refHeight", "refWidth", "innerRef"]);
+          restProps = _objectWithoutProperties(_this$props, ["isRanking", "refHeight", "refWidth"]);
 
       var inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
       return /*#__PURE__*/React.createElement(HeadCell, _extends({
-        inlineStyles: inlineStyles,
-        innerRef: innerRef
+        inlineStyles: inlineStyles
       }, restProps));
     }
   }]);