@atlaskit/dynamic-table 14.11.2 → 14.11.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dynamic-table
 
+## 14.11.3
+
+### Patch Changes
+
+- [`a486e54d1ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a486e54d1ef) - Improved performance of built-in table sorting for stateful dynamic tables
+
 ## 14.11.2
 
 ### Patch Changes

package/dist/cjs/components/stateless.js

@@ -29,7 +29,7 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
 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; } }
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.11.2";
+var packageVersion = "14.11.3";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:

package/dist/cjs/hoc/with-sorted-page-rows.js

@@ -23,6 +23,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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); }; }
 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 getSortingCellValue = function getSortingCellValue(cells, head, sortKey) {
+  for (var i = 0; i < cells.length; i++) {
+    var _head$cells$i;
+    if (head.cells[i] && ((_head$cells$i = head.cells[i]) === null || _head$cells$i === void 0 ? void 0 : _head$cells$i.key) === sortKey) {
+      var _cells$i;
+      return (_cells$i = cells[i]) === null || _cells$i === void 0 ? void 0 : _cells$i.key;
+    }
+  }
+  return undefined;
+};
+
 // sort all rows based on sort key and order
 var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   if (!sortKey || !head) {
@@ -31,16 +42,13 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   if (!rows) {
     return [];
   }
+  var modifier = sortOrder === _constants.ASC ? 1 : -1;
 
-  // return value which will be used for sorting
-  var getSortingCellValue = function getSortingCellValue(cells) {
-    for (var i = 0; i < cells.length; i++) {
-      if (head.cells[i] && head.cells[i].key === sortKey) {
-        return cells[i].key;
-      }
-    }
-    return undefined;
-  };
+  // Re-initialising an I18n Collator on every sort is performance intensive, thus constructed outside
+  var collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'accent'
+  });
 
   // Get copy of rows to avoid sorting prop in place
   var sortableRows = Array.from(rows);
@@ -48,11 +56,8 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   // Reorder rows in table based on sorting cell value
   // Algorithm will sort numerics or strings, but not both
   return sortableRows.sort(function (a, b) {
-    var valA = getSortingCellValue(a.cells);
-    var valB = getSortingCellValue(b.cells);
-
-    // modifier used for sorting type (ascending or descending)
-    var modifier = sortOrder === _constants.ASC ? 1 : -1;
+    var valA = getSortingCellValue(a.cells, head, sortKey);
+    var valB = getSortingCellValue(b.cells, head, sortKey);
     if (valA === undefined || valB === undefined) {
       return modifier;
     }
@@ -72,13 +77,8 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
         return 1;
       }
     }
-
-    // Sort strings using localeCompare
     if (typeof valA === 'string' && typeof valB === 'string') {
-      return modifier * valA.localeCompare(valB, undefined, {
-        sensitivity: 'accent',
-        numeric: true
-      });
+      return modifier * collator.compare(valA, valB);
     }
     if (!valA && valA !== 0 || valA < valB) {
       return -modifier;

package/dist/cjs/version.json

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

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.11.2";
+const packageVersion = "14.11.3";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:

package/dist/es2019/hoc/with-sorted-page-rows.js

@@ -3,6 +3,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { ASC } from '../internal/constants';
 import { getPageRows, validateSortKey } from '../internal/helpers';
+const getSortingCellValue = (cells, head, sortKey) => {
+  for (let i = 0; i < cells.length; i++) {
+    var _head$cells$i;
+    if (head.cells[i] && ((_head$cells$i = head.cells[i]) === null || _head$cells$i === void 0 ? void 0 : _head$cells$i.key) === sortKey) {
+      var _cells$i;
+      return (_cells$i = cells[i]) === null || _cells$i === void 0 ? void 0 : _cells$i.key;
+    }
+  }
+  return undefined;
+};
+
 // sort all rows based on sort key and order
 const getSortedRows = (head, rows, sortKey, sortOrder) => {
   if (!sortKey || !head) {
@@ -11,16 +22,13 @@ const getSortedRows = (head, rows, sortKey, sortOrder) => {
   if (!rows) {
     return [];
   }
+  const modifier = sortOrder === ASC ? 1 : -1;
 
-  // return value which will be used for sorting
-  const getSortingCellValue = cells => {
-    for (let i = 0; i < cells.length; i++) {
-      if (head.cells[i] && head.cells[i].key === sortKey) {
-        return cells[i].key;
-      }
-    }
-    return undefined;
-  };
+  // Re-initialising an I18n Collator on every sort is performance intensive, thus constructed outside
+  const collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'accent'
+  });
 
   // Get copy of rows to avoid sorting prop in place
   const sortableRows = Array.from(rows);
@@ -28,11 +36,8 @@ const getSortedRows = (head, rows, sortKey, sortOrder) => {
   // Reorder rows in table based on sorting cell value
   // Algorithm will sort numerics or strings, but not both
   return sortableRows.sort((a, b) => {
-    const valA = getSortingCellValue(a.cells);
-    const valB = getSortingCellValue(b.cells);
-
-    // modifier used for sorting type (ascending or descending)
-    const modifier = sortOrder === ASC ? 1 : -1;
+    const valA = getSortingCellValue(a.cells, head, sortKey);
+    const valB = getSortingCellValue(b.cells, head, sortKey);
     if (valA === undefined || valB === undefined) {
       return modifier;
     }
@@ -52,13 +57,8 @@ const getSortedRows = (head, rows, sortKey, sortOrder) => {
         return 1;
       }
     }
-
-    // Sort strings using localeCompare
     if (typeof valA === 'string' && typeof valB === 'string') {
-      return modifier * valA.localeCompare(valB, undefined, {
-        sensitivity: 'accent',
-        numeric: true
-      });
+      return modifier * collator.compare(valA, valB);
     }
     if (!valA && valA !== 0 || valA < valB) {
       return -modifier;

package/dist/es2019/version.json

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

package/dist/esm/components/stateless.js

@@ -22,7 +22,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/body';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.11.2";
+var packageVersion = "14.11.3";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:

package/dist/esm/hoc/with-sorted-page-rows.js

@@ -16,6 +16,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { ASC } from '../internal/constants';
 import { getPageRows, validateSortKey } from '../internal/helpers';
+var getSortingCellValue = function getSortingCellValue(cells, head, sortKey) {
+  for (var i = 0; i < cells.length; i++) {
+    var _head$cells$i;
+    if (head.cells[i] && ((_head$cells$i = head.cells[i]) === null || _head$cells$i === void 0 ? void 0 : _head$cells$i.key) === sortKey) {
+      var _cells$i;
+      return (_cells$i = cells[i]) === null || _cells$i === void 0 ? void 0 : _cells$i.key;
+    }
+  }
+  return undefined;
+};
+
 // sort all rows based on sort key and order
 var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   if (!sortKey || !head) {
@@ -24,16 +35,13 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   if (!rows) {
     return [];
   }
+  var modifier = sortOrder === ASC ? 1 : -1;
 
-  // return value which will be used for sorting
-  var getSortingCellValue = function getSortingCellValue(cells) {
-    for (var i = 0; i < cells.length; i++) {
-      if (head.cells[i] && head.cells[i].key === sortKey) {
-        return cells[i].key;
-      }
-    }
-    return undefined;
-  };
+  // Re-initialising an I18n Collator on every sort is performance intensive, thus constructed outside
+  var collator = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: 'accent'
+  });
 
   // Get copy of rows to avoid sorting prop in place
   var sortableRows = Array.from(rows);
@@ -41,11 +49,8 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
   // Reorder rows in table based on sorting cell value
   // Algorithm will sort numerics or strings, but not both
   return sortableRows.sort(function (a, b) {
-    var valA = getSortingCellValue(a.cells);
-    var valB = getSortingCellValue(b.cells);
-
-    // modifier used for sorting type (ascending or descending)
-    var modifier = sortOrder === ASC ? 1 : -1;
+    var valA = getSortingCellValue(a.cells, head, sortKey);
+    var valB = getSortingCellValue(b.cells, head, sortKey);
     if (valA === undefined || valB === undefined) {
       return modifier;
     }
@@ -65,13 +70,8 @@ var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
         return 1;
       }
     }
-
-    // Sort strings using localeCompare
     if (typeof valA === 'string' && typeof valB === 'string') {
-      return modifier * valA.localeCompare(valB, undefined, {
-        sensitivity: 'accent',
-        numeric: true
-      });
+      return modifier * collator.compare(valA, valB);
     }
     if (!valA && valA !== 0 || valA < valB) {
       return -modifier;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.11.2",
+  "version": "14.11.3",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/pagination": "^14.4.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-beautiful-dnd": "^12.1.1"

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,215 @@
+## 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 noop from '@atlaskit/ds-lib/noop';
+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';
+
+// @public
+class DynamicTable extends React_2.Component<StatefulProps, State> {
+    // (undocumented)
+    static defaultProps: {
+        defaultPage: number;
+        isLoading: boolean;
+        isFixedSize: boolean;
+        isRankable: boolean;
+        onSetPage: typeof noop;
+        onSort: typeof noop;
+        rowsPerPage: number;
+    };
+    // (undocumented)
+    onRankEndHandler: (params: RankEnd) => void;
+    // (undocumented)
+    onRankEndIfExistsHandler: (params: RankEnd) => void;
+    // (undocumented)
+    onSetPageHandler: (page: number, analyticsEvent?: UIAnalyticsEvent) => void;
+    // (undocumented)
+    onSortHandler: ({ key, item, sortOrder }: any, analyticsEvent?: UIAnalyticsEvent) => void;
+    // (undocumented)
+    render(): JSX.Element;
+    // (undocumented)
+    state: {
+        page: number | undefined;
+        sortKey: string | undefined;
+        sortOrder: SortOrderType | undefined;
+        rows: RowType[] | undefined;
+    };
+    // (undocumented)
+    UNSAFE_componentWillReceiveProps(newProps: StatefulProps): void;
+}
+export default DynamicTable;
+
+// @public (undocumented)
+export const DynamicTableStateless: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<StatelessProps, keyof WithAnalyticsEventsProps>, "caption" | "emptyView" | "head" | "highlightedRowIndex" | "label" | "loadingSpinnerSize" | "onPageRowsUpdate" | "rows" | "sortKey" | "sortOrder" | "testId" | "totalRows"> & Partial<Pick<Omit<StatelessProps, keyof WithAnalyticsEventsProps>, "isFixedSize" | "isLoading" | "isRankable" | "isRankingDisabled" | "onRankEnd" | "onRankStart" | "onSetPage" | "onSort" | "page" | "paginationi18n" | "rowsPerPage">> & Partial<Pick<{
+    isLoading: boolean;
+    isFixedSize: boolean;
+    rowsPerPage: number;
+    onSetPage: typeof noop;
+    onSort: typeof noop;
+    page: number;
+    isRankable: boolean;
+    isRankingDisabled: boolean;
+    onRankStart: typeof noop;
+    onRankEnd: typeof noop;
+    paginationi18n: {
+        prev: string;
+        next: string;
+        label: string;
+        pageLabel: string;
+    };
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "caption" | "emptyView" | "head" | "highlightedRowIndex" | "isFixedSize" | "isLoading" | "isRankable" | "isRankingDisabled" | "key" | "label" | "loadingSpinnerSize" | "onPageRowsUpdate" | "onRankEnd" | "onRankStart" | "onSetPage" | "onSort" | "page" | "paginationi18n" | "rows" | "rowsPerPage" | "sortKey" | "sortOrder" | "testId" | "totalRows"> & React_2.RefAttributes<any>>;
+
+// @public (undocumented)
+interface HeadCellType extends RowCellType {
+    isSortable?: boolean;
+    shouldTruncate?: boolean;
+    width?: number;
+}
+
+// @public (undocumented)
+interface HeadType {
+    // (undocumented)
+    cells: Array<HeadCellType>;
+}
+
+// @public (undocumented)
+interface I18nShape {
+    label: string;
+    next: string;
+    pageLabel?: string;
+    prev: string;
+}
+
+// @public (undocumented)
+type LoadingSpinnerSizeType = 'large' | 'small';
+
+// @public (undocumented)
+interface RankEnd {
+    // (undocumented)
+    destination?: RankEndLocation;
+    // (undocumented)
+    sourceIndex: number;
+    // (undocumented)
+    sourceKey: string;
+}
+
+// @public (undocumented)
+interface RankEndLocation {
+    // (undocumented)
+    afterKey?: string;
+    // (undocumented)
+    beforeKey?: string;
+    // (undocumented)
+    index: number;
+}
+
+// @public (undocumented)
+interface RankStart {
+    // (undocumented)
+    index: number;
+    // (undocumented)
+    key: string;
+}
+
+// @public (undocumented)
+interface RowCellType {
+    colSpan?: number;
+    content?: React_2.ReactNode | string;
+    key?: number | string;
+    testId?: string;
+}
+
+// @public (undocumented)
+interface RowType extends React_2.ComponentPropsWithoutRef<'tr'> {
+    // (undocumented)
+    cells: Array<RowCellType>;
+    isHighlighted?: boolean;
+    // (undocumented)
+    key?: string;
+    onClick?: React_2.MouseEventHandler;
+    onKeyPress?: React_2.KeyboardEventHandler;
+    // (undocumented)
+    ref?: Ref<HTMLTableRowElement>;
+    testId?: string;
+}
+
+// @public
+type SortOrderType = 'ASC' | 'DESC';
+
+// @public (undocumented)
+interface State {
+    // (undocumented)
+    page?: number;
+    // (undocumented)
+    rows?: RowType[];
+    // (undocumented)
+    sortKey?: string;
+    // (undocumented)
+    sortOrder?: SortOrderType;
+}
+
+// @public (undocumented)
+interface StatefulProps extends WithAnalyticsEventsProps {
+    caption?: React_2.ReactNode;
+    defaultPage?: number;
+    defaultSortKey?: string;
+    defaultSortOrder?: SortOrderType;
+    emptyView?: React_2.ReactElement<any>;
+    head?: HeadType;
+    highlightedRowIndex?: number | number[];
+    isFixedSize?: boolean;
+    isLoading?: boolean;
+    isRankable?: boolean;
+    isRankingDisabled?: boolean;
+    label?: string;
+    loadingSpinnerSize?: LoadingSpinnerSizeType;
+    onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+    onRankEnd?: (rankEnd: RankEnd) => void;
+    onRankStart?: (rankStart: RankStart) => void;
+    onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    page?: number;
+    paginationi18n?: I18nShape;
+    rows?: Array<RowType>;
+    rowsPerPage?: number;
+    sortKey?: string;
+    sortOrder?: SortOrderType;
+    testId?: string;
+}
+
+// @public (undocumented)
+interface StatelessProps extends WithAnalyticsEventsProps {
+    caption?: React_2.ReactNode;
+    emptyView?: React_2.ReactElement<any>;
+    head?: HeadType;
+    highlightedRowIndex?: number | number[];
+    isFixedSize?: boolean;
+    isLoading?: boolean;
+    isRankable?: boolean;
+    isRankingDisabled?: boolean;
+    label?: string;
+    loadingSpinnerSize?: LoadingSpinnerSizeType;
+    onPageRowsUpdate?: (pageRows: Array<RowType>) => void;
+    onRankEnd?: (rankEnd: RankEnd, uiAnalyticsEvent?: UIAnalyticsEvent) => void;
+    onRankStart?: (rankStart: RankStart) => void;
+    onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
+    page?: number;
+    paginationi18n?: I18nShape;
+    rows?: Array<RowType>;
+    rowsPerPage?: number;
+    sortKey?: string;
+    sortOrder?: SortOrderType;
+    testId?: string;
+    totalRows?: number;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```