@atlaskit/dynamic-table 14.4.0 → 14.4.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/dynamic-table
 
+## 14.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.4.3
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 14.4.2
+
+### Patch Changes
+
+- [`78a7ffa81f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78a7ffa81f8) - Fixes a bug that meant an undefined width would still be stringifed and applied to the inline styles of table cells.
+
+## 14.4.1
+
+### Patch Changes
+
+- [`1601e51ab32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1601e51ab32) - Fixes for internal types.
+
 ## 14.4.0
 
 ### Minor Changes

package/README.md

@@ -1,4 +1,4 @@
-# Dynamic-table
+# Dynamic table
 
 Table component with pagination and sorting functionality.
 
@@ -10,4 +10,4 @@ yarn add @atlaskit/dynamic-table
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/dynamic-table).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/dynamic-table/usage).

package/dist/cjs/components/Stateful.js

@@ -31,6 +31,32 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**
+ * __Dynamic Table__
+ *
+ * A table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/dynamic-table)
+ * - [Code](https://bitbucket.org/atlassian/atlassian-frontend/packages/design-system/dynamic-table)
+ *
+ * @example
+ * ```jsx
+ * import DynamicTable from '@atlaskit/dynamic-table';
+ *
+ * export default function TableUncontrolled() {
+ *  return (
+ *   <DynamicTable
+ *    head={head}
+ *    rows={rows}
+ *    rowsPerPage={10}
+ *    defaultPage={1}
+ *    loadingSpinnerSize="large"
+ *    isLoading={false}
+ *   />
+ *  );
+ * }
+ * ```
+ */
 var DynamicTable = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DynamicTable, _React$Component);
 

package/dist/cjs/components/Stateless.js

@@ -41,7 +41,7 @@ var _LoadingContainer = _interopRequireDefault(require("./LoadingContainer"));
 
 var _LoadingContainerAdvanced = _interopRequireDefault(require("./LoadingContainerAdvanced"));
 
-var _managedPagination = _interopRequireDefault(require("./managedPagination"));
+var _managedPagination = _interopRequireDefault(require("./managed-pagination"));
 
 var _Body2 = _interopRequireDefault(require("./rankable/Body"));
 
@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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.4.0";
+var packageVersion = "14.4.4";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {

package/dist/cjs/components/TableHead.js

@@ -35,6 +35,9 @@ var _TableHeadCell = _interopRequireDefault(require("./rankable/TableHeadCell"))
 
 var _TableHeadCell2 = _interopRequireDefault(require("./TableHeadCell"));
 
+var _excluded = ["cells"],
+    _excluded2 = ["isSortable", "key"];
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -93,14 +96,14 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
 
       var HeadCellComponent = isRankable ? _TableHeadCell.default : _TableHeadCell2.default;
       var cells = head.cells,
-          rest = (0, _objectWithoutProperties2.default)(head, ["cells"]);
+          rest = (0, _objectWithoutProperties2.default)(head, _excluded);
       return /*#__PURE__*/_react.default.createElement(_TableHead.Head, (0, _extends2.default)({}, rest, {
         isRanking: isRanking,
         "data-testid": testId && "".concat(testId, "--head")
       }), /*#__PURE__*/_react.default.createElement("tr", null, cells.map(function (cell, index) {
         var isSortable = cell.isSortable,
             key = cell.key,
-            restCellProps = (0, _objectWithoutProperties2.default)(cell, ["isSortable", "key"]);
+            restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);
         return /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
           isFixedSize: isFixedSize,
           isSortable: !!isSortable,

package/dist/cjs/components/TableHeadCell.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _TableHead = require("../styled/TableHead");
 
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"];
+
 var TableHeadCell = function TableHeadCell(_ref) {
   var content = _ref.content,
       inlineStyles = _ref.inlineStyles,
@@ -22,7 +24,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
       isRanking = _ref.isRanking,
       innerRef = _ref.innerRef,
       isSortable = _ref.isSortable,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_TableHead.HeadCell, (0, _extends2.default)({
     style: inlineStyles,
     "data-testid": testId && "".concat(testId, "--head--cell"),

package/dist/cjs/components/TableRow.js

@@ -17,6 +17,9 @@ var _TableCell = require("../styled/TableCell");
 
 var _TableRow = require("../styled/TableRow");
 
+var _excluded = ["cells"],
+    _excluded2 = ["content"];
+
 var Row = function Row(_ref) {
   var row = _ref.row,
       head = _ref.head,
@@ -24,7 +27,7 @@ var Row = function Row(_ref) {
       isFixedSize = _ref.isFixedSize,
       isHighlighted = _ref.isHighlighted;
   var cells = row.cells,
-      restRowProps = (0, _objectWithoutProperties2.default)(row, ["cells"]);
+      restRowProps = (0, _objectWithoutProperties2.default)(row, _excluded);
   return /*#__PURE__*/_react.default.createElement(_TableRow.TableBodyRow, (0, _extends2.default)({}, restRowProps, {
     isHighlighted: isHighlighted
   }, isHighlighted ? {
@@ -33,7 +36,7 @@ var Row = function Row(_ref) {
     "data-testid": testId && "".concat(testId, "--row-").concat(restRowProps.key)
   }), cells.map(function (cell, cellIndex) {
     var content = cell.content,
-        restCellProps = (0, _objectWithoutProperties2.default)(cell, ["content"]);
+        restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);
 
     var _ref2 = (head || {
       cells: []

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

@@ -29,6 +29,8 @@ var _helpers = require("../../internal/helpers");
 
 var _TableCell = require("../../styled/rankable/TableCell");
 
+var _excluded = ["content"];
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -54,7 +56,7 @@ var RankableTableCell = /*#__PURE__*/function (_React$Component) {
           refWidth = _this$props.refWidth,
           innerRef = _this$props.innerRef;
       var content = cell.content,
-          restCellProps = (0, _objectWithoutProperties2.default)(cell, ["content"]);
+          restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded);
 
       var _ref = head || {},
           shouldTruncate = _ref.shouldTruncate,

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

@@ -29,6 +29,8 @@ var _helpers = require("../../internal/helpers");
 
 var _TableHeadCell = _interopRequireDefault(require("../TableHeadCell"));
 
+var _excluded = ["isRanking", "refHeight", "refWidth"];
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -50,7 +52,7 @@ var RankableTableHeadCell = /*#__PURE__*/function (_React$Component) {
           isRanking = _this$props.isRanking,
           refHeight = _this$props.refHeight,
           refWidth = _this$props.refWidth,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props, ["isRanking", "refHeight", "refWidth"]);
+          restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
       return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, (0, _extends2.default)({
         inlineStyles: inlineStyles

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

@@ -37,9 +37,11 @@ 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; }
+var _excluded = ["cells", "key"];
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -89,7 +91,7 @@ var RankableTableRow = /*#__PURE__*/function (_React$Component) {
           testId = _this$props.testId;
       var cells = row.cells,
           key = row.key,
-          restRowProps = (0, _objectWithoutProperties2.default)(row, ["cells", "key"]);
+          restRowProps = (0, _objectWithoutProperties2.default)(row, _excluded);
       var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
 
       if (typeof key !== 'string' && !isRankingDisabled) {

package/dist/cjs/hoc/withSortedPageRows.js

@@ -33,9 +33,11 @@ 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; }
+var _excluded = ["rows", "head", "sortKey", "sortOrder", "rowsPerPage", "page"];
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -165,7 +167,7 @@ function withSortedPageRows(WrappedComponent) {
             sortOrder = _this$props.sortOrder,
             rowsPerPage = _this$props.rowsPerPage,
             page = _this$props.page,
-            restProps = (0, _objectWithoutProperties2.default)(_this$props, ["rows", "head", "sortKey", "sortOrder", "rowsPerPage", "page"]);
+            restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         return /*#__PURE__*/_react.default.createElement(WrappedComponent //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
         , (0, _extends2.default)({
           pageRows: this.state.pageRows,

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "DynamicTableStateless", {
   enumerable: true,
   get: function get() {
-    return _Stateful.default;
+    return _Stateless.default;
   }
 });
-Object.defineProperty(exports, "DynamicTableStateless", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Stateless.default;
+    return _Stateful.default;
   }
 });
 

package/dist/cjs/internal/constants.js

@@ -3,18 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LOADING_CONTENTS_OPACITY = exports.XLARGE = exports.LARGE = exports.MEDIUM = exports.SMALL = exports.DESC = exports.ASC = void 0;
+exports.SMALL = exports.LOADING_CONTENTS_OPACITY = exports.LARGE = exports.DESC = exports.ASC = void 0;
 var ASC = 'ASC';
 exports.ASC = ASC;
 var DESC = 'DESC';
 exports.DESC = DESC;
 var SMALL = 'small';
 exports.SMALL = SMALL;
-var MEDIUM = 'medium';
-exports.MEDIUM = MEDIUM;
 var LARGE = 'large';
 exports.LARGE = LARGE;
-var XLARGE = 'xlarge';
-exports.XLARGE = XLARGE;
 var LOADING_CONTENTS_OPACITY = 0.22;
 exports.LOADING_CONTENTS_OPACITY = LOADING_CONTENTS_OPACITY;

package/dist/cjs/internal/helpers.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reorderRows = exports.computeIndex = exports.inlineStylesIfRanking = exports.validateSortKey = exports.assertIsSortable = exports.getPageRows = void 0;
+exports.validateSortKey = exports.reorderRows = exports.inlineStylesIfRanking = exports.getPageRows = exports.computeIndex = exports.assertIsSortable = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/styled/DynamicTable.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaginationWrapper = exports.Caption = exports.Table = exports.tableRowCSSVars = void 0;
+exports.tableRowCSSVars = exports.Table = exports.PaginationWrapper = exports.Caption = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -23,7 +23,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _theme = require("../theme");
 
-/** @jsx jsx */
+var _excluded = ["isFixedSize", "children"];
 var gridSize = (0, _constants.gridSize)();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
@@ -46,7 +46,7 @@ var Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var isFixedSize = _ref.isFixedSize,
       children = _ref.children,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["isFixedSize", "children"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   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({

package/dist/cjs/styled/EmptyBody.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmptyViewContainer = exports.EmptyViewWithFixedHeight = void 0;
+exports.EmptyViewWithFixedHeight = exports.EmptyViewContainer = void 0;
 
 var _core = require("@emotion/core");
 

package/dist/cjs/styled/TableCell.js

@@ -15,13 +15,14 @@ var _core = require("@emotion/core");
 
 var _constants = require("./constants");
 
-/** @jsx jsx */
+var _excluded = ["width", "isFixedSize", "shouldTruncate", "innerRef"];
+
 var TableBodyCell = function TableBodyCell(_ref) {
   var width = _ref.width,
       isFixedSize = _ref.isFixedSize,
       shouldTruncate = _ref.shouldTruncate,
       innerRef = _ref.innerRef,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["width", "isFixedSize", "shouldTruncate", "innerRef"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("td", (0, _extends2.default)({
     style: (0, _constants.getTruncationStyleVars)({
       width: width

package/dist/cjs/styled/TableHead.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeadCell = exports.getArrowStyles = exports.Head = void 0;
+exports.getArrowStyles = exports.HeadCell = exports.Head = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -23,17 +23,18 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("../internal/constants");
 
 var _theme = require("../theme");
 
 var _constants3 = require("./constants");
 
-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; }
+var _excluded = ["isRanking"],
+    _excluded2 = ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var gridSize = (0, _constants.gridSize)();
 var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
@@ -43,15 +44,15 @@ var rankingStyles = (0, _core.css)({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return (0, _core.css)({
-    borderBottom: "2px solid ".concat((0, _tokens.token)('color.border.neutral', _theme.head.borderColor({
+    borderBottom: "2px solid ".concat("var(--ds-border-neutral, ".concat(_theme.head.borderColor({
       theme: theme
-    })))
+    }), ")"))
   });
 };
 
 var Head = function Head(_ref) {
   var isRanking = _ref.isRanking,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var theme = (0, _components.useGlobalTheme)();
   return (0, _core.jsx)("thead", (0, _extends2.default)({
     css: [getHeadStyles(theme), isRanking && rankingStyles]
@@ -67,9 +68,9 @@ var headCellStyles = (0, _core.css)([_constants3.cellStyles, {
   position: 'relative',
   textAlign: 'left',
   verticalAlign: 'top',
-  color: (0, _tokens.token)('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  color: "var(--ds-text-lowEmphasis, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
   '&:focus': {
-    outline: "solid 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
+    outline: "solid 2px ".concat("var(--ds-border-focus, ".concat(_colors.B100, ")"))
   }
 }]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
 
@@ -153,7 +154,7 @@ exports.getArrowStyles = getArrowStyles;
 var onClickStyles = (0, _core.css)({
   '&:hover': {
     cursor: 'pointer',
-    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30A)
+    backgroundColor: "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30A, ")")
   }
 });
 var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -165,7 +166,7 @@ var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       shouldTruncate = _ref2.shouldTruncate,
       onClick = _ref2.onClick,
       style = _ref2.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var theme = (0, _components.useGlobalTheme)();
 
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && (0, _constants3.getTruncationStyleVars)({

package/dist/cjs/styled/TableRow.js

@@ -15,33 +15,31 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _DynamicTable = require("./DynamicTable");
 
-/** @jsx jsx */
+var _excluded = ["isHighlighted", "children", "style"];
 var rowStyles = (0, _core.css)({
   '&:focus': {
-    outline: "2px solid ".concat((0, _tokens.token)('color.border.focus', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outline: "2px solid ".concat("var(--ds-border-focus, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")),
     outlineOffset: "-2px"
   }
 });
 var rowBackgroundStyles = (0, _core.css)({
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"), ")")
   }
 });
 var rowHighlightedBackgroundStyles = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")"), ")"),
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+    backgroundColor: "var(--ds-background-selected-hover, ".concat("var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
   }
 });
 var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isHighlighted = _ref.isHighlighted,
       children = _ref.children,
       style = _ref.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["isHighlighted", "children", "style"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("tr", (0, _extends2.default)({
     style: style,
     css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]

package/dist/cjs/styled/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cellStyles = exports.getTruncationStyleVars = exports.overflowTruncateStyles = exports.fixedSizeTruncateStyles = exports.truncationWidthStyles = void 0;
+exports.truncationWidthStyles = exports.overflowTruncateStyles = exports.getTruncationStyleVars = exports.fixedSizeTruncateStyles = exports.cellStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -31,7 +31,7 @@ exports.overflowTruncateStyles = overflowTruncateStyles;
 
 var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
   var width = _ref.width;
-  return (0, _defineProperty2.default)({}, CSS_VAR_WIDTH, "".concat(width, "%"));
+  return (0, _defineProperty2.default)({}, CSS_VAR_WIDTH, typeof width !== 'undefined' ? "".concat(width, "%") : undefined);
 };
 
 exports.getTruncationStyleVars = getTruncationStyleVars;

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

@@ -15,7 +15,7 @@ var _core = require("@emotion/core");
 
 var _TableCell = require("../TableCell");
 
-/** @jsx jsx */
+var _excluded = ["isRanking", "innerRef"];
 var rankingStyles = (0, _core.css)({
   boxSizing: 'border-box'
 });
@@ -23,7 +23,7 @@ var rankingStyles = (0, _core.css)({
 var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
   var isRanking = _ref.isRanking,
       innerRef = _ref.innerRef,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "innerRef"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)(_TableCell.TableBodyCell, (0, _extends2.default)({
     css: isRanking && rankingStyles
   }, props, {

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

@@ -17,36 +17,34 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _TableRow = require("../TableRow");
 
-/** @jsx jsx */
+var _excluded = ["isRanking", "isRankingItem"];
 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));
+var elevationStyle = "var(--ds-overlay, ".concat("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, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+  backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")"),
   boxShadow: elevationStyle,
   borderRadius: '2px'
 });
 var draggableStyles = (0, _core.css)({
   '&:focus': {
     outlineStyle: 'solid',
-    outlineColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+    outlineColor: "var(--ds-border-focus, ".concat(_colors.B100, ")")
   },
   outlineWidth: '2px'
 });
 var RankableTableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isRanking = _ref.isRanking,
       isRankingItem = _ref.isRankingItem,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking", "isRankingItem"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)(_TableRow.TableBodyRow, (0, _extends2.default)({
     css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
     ref: ref