@atlaskit/dynamic-table 14.5.4 → 14.6.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/dynamic-table
 
+## 14.6.1
+
+### Patch Changes
+
+- [`deca22d60e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/deca22d60e1) - Update DynamicTable HeaderCellType to make it clear that the width prop takes a percentage not a pixel value
+
+## 14.6.0
+
+### Minor Changes
+
+- [`1cc3c9f1c8f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cc3c9f1c8f) - Add test ID to table pagination so it can be queried in tests. It will be prefixed with the `testId` prop: `{testId}--pagination`.
+
+### Patch Changes
+
+- [`0b545855a57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b545855a57) - [ux] Updated tokens in `@atlaskit/dynamic-table`
+
+## 14.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.5.4
 
 ### Patch Changes

package/dist/cjs/components/Stateless.js

@@ -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.5.4";
+var packageVersion = "14.6.1";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -277,7 +277,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         value: page,
         onChange: this.onSetPage,
         total: totalPages,
-        i18n: paginationi18n
+        i18n: paginationi18n,
+        testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_LoadingContainer.default, {
         isLoading: isLoading,
         spinnerSize: _constants.LARGE,

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

@@ -59,7 +59,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
           total = _this$props.total,
           _this$props$value = _this$props.value,
           value = _this$props$value === void 0 ? 1 : _this$props$value,
-          i18n = _this$props.i18n;
+          i18n = _this$props.i18n,
+          testId = _this$props.testId;
       var pages = (0, _toConsumableArray2.default)(Array(total)).map(function (_, index) {
         return index + 1;
       }); // Pagination accepts array now thus selectedIndex starts with 0
@@ -72,7 +73,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
         onChange: this.onChange,
-        pages: pages
+        pages: pages,
+        testId: testId && "".concat(testId, "--pagination")
       });
     }
   }]);

package/dist/cjs/styled/TableHead.js

@@ -44,9 +44,9 @@ var rankingStyles = (0, _core.css)({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return (0, _core.css)({
-    borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_theme.head.borderColor({
+    borderBottom: "2px solid ".concat(_theme.head.borderColor({
       theme: theme
-    }), ")"))
+    }))
   });
 };
 

package/dist/cjs/theme.js

@@ -24,16 +24,16 @@ var MSThemeColors = {
 exports.MSThemeColors = MSThemeColors;
 var arrow = {
   defaultColor: (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
-    dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N40, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN40, ")")
   }),
   selectedColor: (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
+    light: "var(--ds-icon-subtle, ".concat(colors.N300, ")"),
+    dark: "var(--ds-icon-subtle, ".concat(colors.DN300, ")")
   }),
   hoverColor: (0, _components.themed)({
-    light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
-    dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N60, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN60, ")")
   })
 };
 exports.arrow = arrow;
@@ -47,8 +47,8 @@ var row = {
     dark: "var(--ds-background-selected, ".concat(colors.DN50, ")")
   }),
   hoverBackground: (0, _components.themed)({
-    light: "var(--ds-background-input, ".concat(colors.N10, ")"),
-    dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
+    light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: (0, _components.themed)({
     light: "var(--ds-background-selected-hovered, ".concat(colors.B75, ")"),

package/dist/cjs/version.json

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

package/dist/es2019/components/LoadingContainerAdvanced.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import Spinner from '@atlaskit/spinner';

package/dist/es2019/components/Stateless.js

@@ -13,7 +13,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.5.4";
+const packageVersion = "14.6.1";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -230,7 +230,8 @@ class DynamicTable extends React.Component {
       value: page,
       onChange: this.onSetPage,
       total: totalPages,
-      i18n: paginationi18n
+      i18n: paginationi18n,
+      testId: testId
     })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
       isLoading: isLoading,
       spinnerSize: LARGE,

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

@@ -14,7 +14,8 @@ export default class ManagedPagination extends React.Component {
     const {
       total,
       value = 1,
-      i18n
+      i18n,
+      testId
     } = this.props;
     const pages = [...Array(total)].map((_, index) => index + 1); // Pagination accepts array now thus selectedIndex starts with 0
     // So, we are substracting value by one thus not breaking dynamic table
@@ -26,7 +27,8 @@ export default class ManagedPagination extends React.Component {
       nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
       previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
       onChange: this.onChange,
-      pages: pages
+      pages: pages,
+      testId: testId && `${testId}--pagination`
     });
   }
 

package/dist/es2019/styled/TableHead.js

@@ -16,9 +16,9 @@ const rankingStyles = css({
 });
 
 const getHeadStyles = theme => css({
-  borderBottom: `2px solid ${`var(--ds-border, ${head.borderColor({
+  borderBottom: `2px solid ${head.borderColor({
     theme
-  })})`}`
+  })}`
 });
 
 export const Head = ({

package/dist/es2019/theme.js

@@ -8,16 +8,16 @@ export const MSThemeColors = {
 };
 export const arrow = {
   defaultColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N40})`,
-    dark: `var(--ds-background-neutral, ${colors.DN40})`
+    light: `var(--ds-icon-disabled, ${colors.N40})`,
+    dark: `var(--ds-icon-disabled, ${colors.DN40})`
   }),
   selectedColor: themed({
-    light: `var(--ds-text-subtlest, ${colors.N300})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN300})`
+    light: `var(--ds-icon-subtle, ${colors.N300})`,
+    dark: `var(--ds-icon-subtle, ${colors.DN300})`
   }),
   hoverColor: themed({
-    light: `var(--ds-background-neutral-pressed, ${colors.N60})`,
-    dark: `var(--ds-background-neutral-pressed, ${colors.DN60})`
+    light: `var(--ds-icon-disabled, ${colors.N60})`,
+    dark: `var(--ds-icon-disabled, ${colors.DN60})`
   })
 };
 export const row = {
@@ -30,8 +30,8 @@ export const row = {
     dark: `var(--ds-background-selected, ${colors.DN50})`
   }),
   hoverBackground: themed({
-    light: `var(--ds-background-input, ${colors.N10})`,
-    dark: `var(--ds-background-input, ${colors.DN40})`
+    light: `var(--ds-background-neutral-subtle-hovered, ${colors.N10})`,
+    dark: `var(--ds-background-neutral-subtle-hovered, ${colors.DN40})`
   }),
   hoverHighlightedBackground: themed({
     light: `var(--ds-background-selected-hovered, ${colors.B75})`,

package/dist/es2019/version.json

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

package/dist/esm/components/LoadingContainerAdvanced.js

@@ -11,6 +11,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; } }
 
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import Spinner from '@atlaskit/spinner';

package/dist/esm/components/Stateless.js

@@ -24,7 +24,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.5.4";
+var packageVersion = "14.6.1";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -257,7 +257,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         value: page,
         onChange: this.onSetPage,
         total: totalPages,
-        i18n: paginationi18n
+        i18n: paginationi18n,
+        testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
         isLoading: isLoading,
         spinnerSize: LARGE,

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

@@ -44,7 +44,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
           total = _this$props.total,
           _this$props$value = _this$props.value,
           value = _this$props$value === void 0 ? 1 : _this$props$value,
-          i18n = _this$props.i18n;
+          i18n = _this$props.i18n,
+          testId = _this$props.testId;
 
       var pages = _toConsumableArray(Array(total)).map(function (_, index) {
         return index + 1;
@@ -59,7 +60,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
         onChange: this.onChange,
-        pages: pages
+        pages: pages,
+        testId: testId && "".concat(testId, "--pagination")
       });
     }
   }]);

package/dist/esm/styled/TableHead.js

@@ -25,9 +25,9 @@ var rankingStyles = css({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return css({
-    borderBottom: "2px solid ".concat("var(--ds-border, ".concat(head.borderColor({
+    borderBottom: "2px solid ".concat(head.borderColor({
       theme: theme
-    }), ")"))
+    }))
   });
 };
 

package/dist/esm/theme.js

@@ -8,16 +8,16 @@ export var MSThemeColors = {
 };
 export var arrow = {
   defaultColor: themed({
-    light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
-    dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N40, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN40, ")")
   }),
   selectedColor: themed({
-    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
+    light: "var(--ds-icon-subtle, ".concat(colors.N300, ")"),
+    dark: "var(--ds-icon-subtle, ".concat(colors.DN300, ")")
   }),
   hoverColor: themed({
-    light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
-    dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N60, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN60, ")")
   })
 };
 export var row = {
@@ -30,8 +30,8 @@ export var row = {
     dark: "var(--ds-background-selected, ".concat(colors.DN50, ")")
   }),
   hoverBackground: themed({
-    light: "var(--ds-background-input, ".concat(colors.N10, ")"),
-    dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
+    light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: themed({
     light: "var(--ds-background-selected-hovered, ".concat(colors.B75, ")"),

package/dist/esm/version.json

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

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

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

package/dist/types/theme.d.ts

@@ -5,14 +5,14 @@ export declare const MSThemeColors: {
     SelectedText: string;
 };
 export declare const arrow: {
-    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
-    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
-    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-pressed)">;
+    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-disabled)">;
+    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
+    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-disabled)">;
 };
 export declare const row: {
     focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
     highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected)">;
-    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-input)">;
+    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle-hovered)">;
     hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-hovered)">;
 };
 export declare const head: {

package/dist/types/types.d.ts

@@ -134,13 +134,14 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
       `data-testid` in the rendered code, serving as a hook for automated tests.
   
       The value of `testId` is used to prefix `testId` props in given elements.
-      + `${testId}--table` - Table.
-      + `${testId}--head` - Table header.
-      + `${testId}--head--{content of the cell}` - Table header cell can be identified by their content.
-      + `${testId}--row--{index - content of the first cell}` - Table row.
-      + `${testId}--body` - Table body.
-      + `${testId}--body--{content of the cell}` - Table body cell can be identified by their content.
-      + `${testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--table` - Table.
+      - `{testId}--head` - Table header.
+      - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+      - `{testId}--row--{index - content of the first cell}` - Table row.
+      - `{testId}--body` - Table body.
+      - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+      - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--pagination` - The table pagination.
      */
     testId?: string;
     /**
@@ -265,13 +266,14 @@ export interface StatefulProps extends WithAnalyticsEventsProps {
       `data-testid` in the rendered code, serving as a hook for automated tests.
   
       The value of `testId` is used to prefix `testId` props in given elements.
-      + `${testId}--table` - Table.
-      + `${testId}--head` - Table header.
-      + `${testId}--head--{content of the cell}` - Table header cell can be identified by their content.
-      + `${testId}--row--{index - content of the first cell}` - Table row.
-      + `${testId}--body` - Table body.
-      + `${testId}--body--{content of the cell}` - Table body cell can be identified by their content.
-      + `${testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--table` - Table.
+      - `{testId}--head` - Table header.
+      - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+      - `{testId}--row--{index - content of the first cell}` - Table row.
+      - `{testId}--body` - Table body.
+      - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+      - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--pagination` - The table pagination.
      */
     testId?: string;
     /**
@@ -315,7 +317,7 @@ export declare type LoadingSpinnerSizeType = 'small' | 'large';
 export interface HeadCellType extends RowCellType {
     /** Whether the column the cell sits above is sortable. */
     isSortable?: boolean;
-    /** The pixel width of the cell. */
+    /** The width of the cell as a percentage. */
     width?: number;
     /** Whether the text in the cell will truncate or not if constrained. */
     shouldTruncate?: boolean;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.5.4",
+  "version": "14.6.1",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "homepage": "https://atlassian.design/components/dynamic-table/",
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -20,7 +20,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Dynamic table"
+      "name": "Dynamic table",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -28,7 +29,7 @@
     "@atlaskit/pagination": "^14.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-beautiful-dnd": "^12.1.1"
@@ -38,10 +39,10 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^11.1.0",
+    "@atlaskit/dropdown-menu": "^11.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
@@ -60,6 +61,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -0,0 +1,508 @@
+## API Report File for "@atlaskit/dynamic-table"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { default as React_2 } from 'react';
+import { Ref } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+/**
+ * __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}
+ *   />
+ *  );
+ * }
+ * ```
+ */
+declare class DynamicTable extends React_2.Component<StatefulProps, State> {
+  static defaultProps: {
+    defaultPage: number;
+    isLoading: boolean;
+    isFixedSize: boolean;
+    isRankable: boolean;
+    onSetPage: () => void;
+    onSort: () => void;
+    rowsPerPage: number;
+  };
+  state: {
+    page: number | undefined;
+    sortKey: string | undefined;
+    sortOrder: SortOrderType | undefined;
+    rows: RowType[] | undefined;
+  };
+  UNSAFE_componentWillReceiveProps(newProps: StatefulProps): void;
+  onSetPage: (
+    page: number,
+    analyticsEvent?: UIAnalyticsEvent | undefined,
+  ) => void;
+  onSort: (
+    { key, item, sortOrder }: any,
+    analyticsEvent?: UIAnalyticsEvent | undefined,
+  ) => void;
+  onRankEndIfExists: (params: RankEnd) => void;
+  onRankEnd: (params: RankEnd) => void;
+  render(): JSX.Element;
+}
+export default DynamicTable;
+
+export declare const DynamicTableStateless: React_2.ForwardRefExoticComponent<
+  Pick<
+    Pick<
+      Omit<StatelessProps, keyof WithAnalyticsEventsProps>,
+      | 'caption'
+      | 'head'
+      | 'label'
+      | 'rows'
+      | 'sortKey'
+      | 'sortOrder'
+      | 'onPageRowsUpdate'
+      | 'testId'
+      | 'highlightedRowIndex'
+      | 'emptyView'
+      | 'loadingSpinnerSize'
+      | 'totalRows'
+    > &
+      Partial<
+        Pick<
+          Omit<StatelessProps, keyof WithAnalyticsEventsProps>,
+          | 'isFixedSize'
+          | 'page'
+          | 'rowsPerPage'
+          | 'isLoading'
+          | 'isRankingDisabled'
+          | 'onRankStart'
+          | 'onRankEnd'
+          | 'onSort'
+          | 'isRankable'
+          | 'onSetPage'
+          | 'paginationi18n'
+        >
+      > &
+      Partial<
+        Pick<
+          {
+            isLoading: boolean;
+            isFixedSize: boolean;
+            rowsPerPage: number;
+            onSetPage: () => void;
+            onSort: () => void;
+            page: number;
+            isRankable: boolean;
+            isRankingDisabled: boolean;
+            onRankStart: () => void;
+            onRankEnd: () => void;
+            paginationi18n: {
+              prev: string;
+              next: string;
+              label: string;
+            };
+          },
+          never
+        >
+      > &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    | 'caption'
+    | 'head'
+    | 'label'
+    | 'key'
+    | 'isFixedSize'
+    | 'rows'
+    | 'page'
+    | 'rowsPerPage'
+    | 'sortKey'
+    | 'sortOrder'
+    | 'onPageRowsUpdate'
+    | 'testId'
+    | 'highlightedRowIndex'
+    | 'isLoading'
+    | 'isRankingDisabled'
+    | 'onRankStart'
+    | 'onRankEnd'
+    | 'onSort'
+    | 'isRankable'
+    | 'emptyView'
+    | 'loadingSpinnerSize'
+    | 'totalRows'
+    | 'onSetPage'
+    | 'paginationi18n'
+    | 'analyticsContext'
+  > &
+    React_2.RefAttributes<any>
+>;
+
+declare interface HeadCellType extends RowCellType {
+  /** Whether the column the cell sits above is sortable. */
+  isSortable?: boolean;
+  /** The pixel width of the cell. */
+  width?: number;
+  /** Whether the text in the cell will truncate or not if constrained. */
+  shouldTruncate?: boolean;
+}
+
+declare interface HeadType {
+  cells: Array<HeadCellType>;
+}
+
+declare interface I18nShape {
+  /**
+   * Accessible label applied to the previous page button in the pagination component.
+   */
+  prev: string;
+  /**
+   * Accessible label applied to the next page button in the pagination component.
+   */
+  next: string;
+  /**
+   * Accessible label applied to the current page button in the pagination component.
+   */
+  label: string;
+}
+
+declare type LoadingSpinnerSizeType = 'small' | 'large';
+
+declare interface RankEnd {
+  sourceIndex: number;
+  sourceKey: string;
+  destination?: RankEndLocation;
+}
+
+declare interface RankEndLocation {
+  index: number;
+  afterKey?: string;
+  beforeKey?: string;
+}
+
+declare interface RankStart {
+  index: number;
+  key: string;
+}
+
+declare interface RowCellType {
+  /**
+   * Key to resolve sorting this cell in its column.
+   */
+  key?: string | number;
+  /**
+   * The number of columns a cell should span. Defaults to 1, and maxes out at the total column width of the table.
+   */
+  colSpan?: number;
+  /**
+   * The content of the cell.
+   */
+  content?: React_2.ReactNode | string;
+  /**
+   * Hook for automated testing.
+   */
+  testId?: string;
+}
+
+declare interface RowType extends React_2.ComponentPropsWithoutRef<'tr'> {
+  cells: Array<RowCellType>;
+  key?: string;
+  /**
+   * A mouse handler to support interaction of a row.
+   */
+  onClick?: React_2.MouseEventHandler;
+  /**
+   * A key event handler to support interaction of a row.
+   */
+  onKeyPress?: React_2.KeyboardEventHandler;
+  /**
+   * Highlights the row. Should be used to draw attention to a row; not to indicate selection.
+   */
+  isHighlighted?: boolean;
+  /**
+   * Hook for automated testing.
+   */
+  testId?: string;
+  ref?: Ref<HTMLTableRowElement>;
+}
+
+/**
+ * Enum style type to determine whether sort results are ascending or descending.
+ */
+declare type SortOrderType = 'ASC' | 'DESC';
+
+declare interface State {
+  page?: number;
+  sortKey?: string;
+  sortOrder?: SortOrderType;
+  rows?: RowType[];
+}
+
+declare interface StatefulProps extends WithAnalyticsEventsProps {
+  /**
+   * Caption for the table styled as a heading.
+   */
+  caption?: React_2.ReactNode;
+  /**
+   * Cells to be placed in the head of the table.
+   * Each element in the head creates a new column.
+   */
+  head?: HeadType;
+  /**
+     * Rows to be placed in the table.
+     * Each row contains cells which should map to the ones defined in the head.
+     * Rows accept standard HTML <tr> props in addition to those listed below.
+
+     * Ensure each cell has a unique `key` per column - this is used for both React's reconciliation of lists and column sorting.
+     */
+  rows?: Array<RowType>;
+  /**
+   * Shown when the table has no content.
+   */
+  emptyView?: React_2.ReactElement<any>;
+  /**
+   * Configuration of the loading spinner shown when `isLoading` is true.
+   * Defaults to `"large"` when a page has more than two rows, else `"small"`.
+   */
+  loadingSpinnerSize?: LoadingSpinnerSizeType;
+  /**
+   * Displays a loading spinner overlaid on top of the current page.
+   */
+  isLoading?: boolean;
+  /**
+   * Displays columns as their initial width regardless of the content that loads in.
+   */
+  isFixedSize?: boolean;
+  /**
+   * Controls how many rows should be diplayed per page.
+   */
+  rowsPerPage?: number;
+  /**
+   * Callback fired when the table page has changed,
+   * useful when wanting to control dynamic table.
+   */
+  onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+  /**
+   * Callback fired when a column heading has been sorted,
+   * useful when wanting to control dynamic table.
+   */
+  onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+  /**
+   * Callback fired when the rows displayed on a page have changed.
+   */
+  onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+  /**
+   * Page the table should show.
+   * Useful when wanting to control dynamic table.
+   */
+  page?: number;
+  /**
+   * Default page dynamic table should show when initially rendering.
+   */
+  defaultPage?: number;
+  /**
+   * Column key that the rows should be sorted by.
+   * Corresponds to the `key`'s defined in the `head` prop.
+   * Useful when wanting to control dynamic table.
+   */
+  sortKey?: string;
+  /**
+   * Default column sort key that the rows should be sorted by.
+   * Corresponds to the `key`'s defined in the `head` prop.
+   */
+  defaultSortKey?: string;
+  /**
+   * Column sort order.
+   * Useful when wanting to control dynamic table.
+   */
+  sortOrder?: SortOrderType;
+  /**
+   * Default column sort order used when initially rendering.
+   * Defaults to `"ASC"`.
+   */
+  defaultSortOrder?: SortOrderType;
+  /**
+   * Enables drag & drop sorting of table rows.
+   */
+  isRankable?: boolean;
+  /**
+   * Disables being able to drop rows on the table.
+   * Drag will still function.
+   */
+  isRankingDisabled?: boolean;
+  /**
+   * Callback fired when a drag of a row has started.
+   */
+  onRankStart?: (rankStart: RankStart) => void;
+  /**
+   * Callback fired when a drop of a row has completed.
+   */
+  onRankEnd?: (rankEnd: RankEnd) => void;
+  /**
+   * Labels for the previous and next buttons used in pagination.
+   * Defaults to `"previous"` and `"next"`.
+   */
+  paginationi18n?: I18nShape;
+  /**
+   * Will highlight a row(s) of the table.
+   */
+  highlightedRowIndex?: number | number[];
+  /**
+     A `testId` prop is provided for specified elements,
+     which is a unique string that appears as a data attribute
+     `data-testid` in the rendered code, serving as a hook for automated tests.
+
+     The value of `testId` is used to prefix `testId` props in given elements.
+     - `{testId}--table` - Table.
+     - `{testId}--head` - Table header.
+     - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     - `{testId}--row--{index - content of the first cell}` - Table row.
+     - `{testId}--body` - Table body.
+     - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+     - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+     - `{testId}--pagination` - The table pagination.
+     */
+  testId?: string;
+  /**
+   * Used to provide a better description of the table for users with assistive technologies.
+   * Rather than a screen reader speaking "Entering table", passing in an label
+   * allows a custom message like "Entering Sample Numerical Data table".
+   */
+  label?: string;
+}
+
+declare interface StatelessProps extends WithAnalyticsEventsProps {
+  /**
+   * Caption for the table styled as a heading.
+   */
+  caption?: React_2.ReactNode;
+  /**
+   * Cells to be placed in the head of the table.
+   * Each element in the head creates a new column.
+   */
+  head?: HeadType;
+  /**
+     * Rows to be placed in the table.
+     * Each row contains cells which should map to the ones defined in the head.
+
+     * Ensure each cell has a unique `key` per column - this is used for both Reacts reconcilation of lists and column sorting.
+     */
+  rows?: Array<RowType>;
+  /**
+   * Shown when the table has no content.
+   */
+  emptyView?: React_2.ReactElement<any>;
+  /**
+   * Configuration of the loading spinner shown when `isLoading` is true.
+   * Defaults to `"large"` when a page has more than two rows, else `"small"`.
+   */
+  loadingSpinnerSize?: LoadingSpinnerSizeType;
+  /**
+   * Displays a loading spinner overlaid on top of the current page.
+   */
+  isLoading?: boolean;
+  /**
+   * Displays columns as their initial width regardless of the content that loads in.
+   */
+  isFixedSize?: boolean;
+  /**
+   * Controls how many rows should be displayed per page.
+   */
+  rowsPerPage?: number;
+  /**
+   * Total number of rows, in case of paginated data.
+   */
+  totalRows?: number;
+  /**
+   * Callback fired when the table page has changed,
+   * useful when wanting to control the pagination of the table.
+   */
+  onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+  /**
+   * Callback fired when a column heading has been sorted,
+   * useful when wanting to control the sort order of the table.
+   */
+  onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+  /**
+   * Callback fired when the rows displayed on a page have changed.
+   */
+  onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+  /**
+   * Page the table should show.
+   */
+  page?: number;
+  /**
+   * Column key that the rows should be sorted by.
+   * Corresponds to the `key`'s defined in the `head` prop.
+   */
+  sortKey?: string;
+  /**
+   * Column sort order.
+   */
+  sortOrder?: SortOrderType;
+  /**
+   * Enables drag & drop sorting of table rows.
+   */
+  isRankable?: boolean;
+  /**
+   * Disables being able to drop rows on the table.
+   * Drag will still function.
+   */
+  isRankingDisabled?: boolean;
+  /**
+   * Callback fired when a drag of a row has started.
+   */
+  onRankStart?: (rankStart: RankStart) => void;
+  /**
+   * Callback fired when a drop of a row has completed.
+   */
+  onRankEnd?: (rankEnd: RankEnd, uiAnalyticsEvent?: UIAnalyticsEvent) => void;
+  /**
+   * Labels for the pagination wrapper, previous and next buttons used in pagination.
+   * Defaults to `"pagination"`, `"previous"` and `"next"`.
+   */
+  paginationi18n?: I18nShape;
+  /**
+   * Will highlight a row(s) of the table. Should be used to draw attention to a row; not to indicate selection.
+   */
+  highlightedRowIndex?: number | number[];
+  /**
+     A `testId` prop is provided for specified elements,
+     which is a unique string that appears as a data attribute
+     `data-testid` in the rendered code, serving as a hook for automated tests.
+
+     The value of `testId` is used to prefix `testId` props in given elements.
+     - `{testId}--table` - Table.
+     - `{testId}--head` - Table header.
+     - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+     - `{testId}--row--{index - content of the first cell}` - Table row.
+     - `{testId}--body` - Table body.
+     - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+     - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+     - `{testId}--pagination` - The table pagination.
+     */
+  testId?: string;
+  /**
+   * Used to provide a better description of the table for users with assistive technologies.
+   * Rather than a screen reader speaking "Entering table", passing in an label
+   * allows a custom message like "Entering Sample Numerical Data table".
+   */
+  label?: string;
+}
+
+export {};
+````

package/theme/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/theme.js",
   "module": "../dist/esm/theme.js",
   "module:es2019": "../dist/es2019/theme.js",
+  "sideEffects": false,
   "types": "../dist/types/theme.d.ts"
 }

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
   "types": "../dist/types/types.d.ts"
 }