@atlaskit/dynamic-table 17.0.0 → 17.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/dynamic-table
 
+## 17.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.0.1
+
+### Patch Changes
+
+- [#99494](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99494)
+  [`71da0c3911d56`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/71da0c3911d56) -
+  [ux] Added customisable sort button labels
+
 ## 17.0.0
 
 ### Major Changes

package/dist/cjs/components/stateless.js

@@ -86,14 +86,14 @@ var DynamicTable = function DynamicTable(_ref) {
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   var onRankEnd = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   (0, _react.useEffect)(function () {
     (0, _helpers.validateSortKey)(sortKey, head);

package/dist/cjs/components/table-head-cell.js

@@ -1,4 +1,4 @@
-/* table-head-cell.tsx generated by @compiled/babel-plugin v0.32.2 */
+/* table-head-cell.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -20,13 +20,13 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../internal/constants");
 var _tableHead = require("../styled/table-head");
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var styles = {
   buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _1yt41b66 _1h7hkb7n",
-  buttonVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _1yt41b66"
+  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
+  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
 };
 var headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -42,6 +42,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
     onClick = _ref.onClick,
     headCellId = _ref.headCellId,
     activeSortButtonId = _ref.activeSortButtonId,
+    _ref$ascendingSortToo = _ref.ascendingSortTooltip,
+    ascendingSortTooltip = _ref$ascendingSortToo === void 0 ? 'Sort ascending' : _ref$ascendingSortToo,
+    _ref$descendingSortTo = _ref.descendingSortTooltip,
+    descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
+    _ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
+    buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _ref2 = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ?
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -74,11 +80,11 @@ var TableHeadCell = function TableHeadCell(_ref) {
   }, content), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     xcss: styles.buttonWrapper
   }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    content: sortOrder === _constants.ASC ? 'Sort ascending' : 'Sort descending'
+    content: sortOrder === _constants.ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,
     xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
-    "aria-roledescription": "Sort button"
+    "aria-roledescription": buttonAriaRoleDescription
   }, sortOrder === _constants.ASC ? /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
     label: "",
     color: "var(--ds-text-subtle, #44546F)"

package/dist/cjs/components/table-head.js

@@ -19,7 +19,7 @@ var _tableHead = require("../styled/table-head");
 var _tableHeadCell = _interopRequireDefault(require("./rankable/table-head-cell"));
 var _tableHeadCell2 = _interopRequireDefault(require("./table-head-cell"));
 var _excluded = ["cells"],
-  _excluded2 = ["colSpan", "content", "isSortable", "key", "shouldTruncate", "testId", "width"];
+  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var TableHead = /*#__PURE__*/function (_React$Component) {
@@ -74,8 +74,11 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
         isRanking: isRanking,
         testId: testId && "".concat(testId, "--head")
       }), /*#__PURE__*/_react.default.createElement("tr", null, cells.map(function (cell, index) {
-        var colSpan = cell.colSpan,
+        var ascendingSortTooltip = cell.ascendingSortTooltip,
+          buttonAriaRoleDescription = cell.buttonAriaRoleDescription,
+          colSpan = cell.colSpan,
           content = cell.content,
+          descendingSortTooltip = cell.descendingSortTooltip,
           isSortable = cell.isSortable,
           key = cell.key,
           shouldTruncate = cell.shouldTruncate,
@@ -108,7 +111,10 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           testId: cellTestId || testId,
           shouldTruncate: shouldTruncate,
           sortOrder: key === sortKey ? sortOrder : undefined,
-          width: width
+          width: width,
+          ascendingSortTooltip: ascendingSortTooltip,
+          descendingSortTooltip: descendingSortTooltip,
+          buttonAriaRoleDescription: buttonAriaRoleDescription
         }, restCellProps));
       })));
     }

package/dist/cjs/styled/table-head.js

@@ -88,7 +88,9 @@ var baseStyles = (0, _react2.css)({
     border: 'none',
     color: 'inherit',
     cursor: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',

package/dist/es2019/components/stateless.js

@@ -60,14 +60,14 @@ const DynamicTable = ({
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   const onRankEnd = usePlatformLeafEventHandler({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   useEffect(() => {
     validateSortKey(sortKey, head);

package/dist/es2019/components/table-head-cell.js

@@ -1,4 +1,4 @@
-/* table-head-cell.tsx generated by @compiled/babel-plugin v0.32.2 */
+/* table-head-cell.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./table-head-cell.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -12,8 +12,8 @@ import { ASC } from '../internal/constants';
 import { HeadCell } from '../styled/table-head';
 const styles = {
   buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _1yt41b66 _1h7hkb7n",
-  buttonVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _1yt41b66"
+  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
+  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
 };
 const headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -29,6 +29,9 @@ const TableHeadCell = ({
   onClick,
   headCellId,
   activeSortButtonId,
+  ascendingSortTooltip = 'Sort ascending',
+  descendingSortTooltip = 'Sort descending',
+  buttonAriaRoleDescription = 'Sort button',
   ...rest
 }) => {
   const [isHovered, setIsHovered] = fg('platform-component-visual-refresh') ?
@@ -59,11 +62,11 @@ const TableHeadCell = ({
   }, content), /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.buttonWrapper
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: sortOrder === ASC ? 'Sort ascending' : 'Sort descending'
+    content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,
     xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
-    "aria-roledescription": "Sort button"
+    "aria-roledescription": buttonAriaRoleDescription
   }, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
     label: "",
     color: "var(--ds-text-subtle, #44546F)"

package/dist/es2019/components/table-head.js

@@ -52,8 +52,11 @@ class TableHead extends React.Component {
       testId: testId && `${testId}--head`
     }), /*#__PURE__*/React.createElement("tr", null, cells.map((cell, index) => {
       const {
+        ascendingSortTooltip,
+        buttonAriaRoleDescription,
         colSpan,
         content,
+        descendingSortTooltip,
         isSortable,
         key,
         shouldTruncate,
@@ -89,7 +92,10 @@ class TableHead extends React.Component {
         testId: cellTestId || testId,
         shouldTruncate: shouldTruncate,
         sortOrder: key === sortKey ? sortOrder : undefined,
-        width: width
+        width: width,
+        ascendingSortTooltip: ascendingSortTooltip,
+        descendingSortTooltip: descendingSortTooltip,
+        buttonAriaRoleDescription: buttonAriaRoleDescription
       }, restCellProps));
     })));
   }

package/dist/es2019/styled/table-head.js

@@ -77,7 +77,9 @@ const baseStyles = css({
     border: 'none',
     color: 'inherit',
     cursor: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',

package/dist/esm/components/stateless.js

@@ -76,14 +76,14 @@ var DynamicTable = function DynamicTable(_ref) {
     action: 'sorted',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   var onRankEnd = usePlatformLeafEventHandler({
     fn: providedOnRankEnd,
     action: 'ranked',
     componentName: 'dynamicTable',
     packageName: "@atlaskit/dynamic-table",
-    packageVersion: "17.0.0"
+    packageVersion: "17.0.2"
   });
   useEffect(function () {
     validateSortKey(sortKey, head);

package/dist/esm/components/table-head-cell.js

@@ -1,8 +1,8 @@
-/* table-head-cell.tsx generated by @compiled/babel-plugin v0.32.2 */
+/* table-head-cell.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId"];
+var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
 import "./table-head-cell.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useState } from 'react';
@@ -15,8 +15,8 @@ import { ASC } from '../internal/constants';
 import { HeadCell } from '../styled/table-head';
 var styles = {
   buttonWrapper: "_19bvu2gc _d0altlke",
-  buttonHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk18uv _1yt41b66 _1h7hkb7n",
-  buttonVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk18uv _1yt41b66"
+  buttonHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
+  buttonVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv"
 };
 var headCellStyles = {
   headCellContainer: "_1e0c1txw _4cvr1h6o"
@@ -32,6 +32,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
     onClick = _ref.onClick,
     headCellId = _ref.headCellId,
     activeSortButtonId = _ref.activeSortButtonId,
+    _ref$ascendingSortToo = _ref.ascendingSortTooltip,
+    ascendingSortTooltip = _ref$ascendingSortToo === void 0 ? 'Sort ascending' : _ref$ascendingSortToo,
+    _ref$descendingSortTo = _ref.descendingSortTooltip,
+    descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
+    _ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
+    buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = fg('platform-component-visual-refresh') ?
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -64,11 +70,11 @@ var TableHeadCell = function TableHeadCell(_ref) {
   }, content), /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.buttonWrapper
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: sortOrder === ASC ? 'Sort ascending' : 'Sort descending'
+    content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,
     xcss: isSortButtonVisible ? styles.buttonVisibleWrapper : styles.buttonHiddenWrapper,
-    "aria-roledescription": "Sort button"
+    "aria-roledescription": buttonAriaRoleDescription
   }, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
     label: "",
     color: "var(--ds-text-subtle, #44546F)"

package/dist/esm/components/table-head.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 var _excluded = ["cells"],
-  _excluded2 = ["colSpan", "content", "isSortable", "key", "shouldTruncate", "testId", "width"];
+  _excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
@@ -67,8 +67,11 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
         isRanking: isRanking,
         testId: testId && "".concat(testId, "--head")
       }), /*#__PURE__*/React.createElement("tr", null, cells.map(function (cell, index) {
-        var colSpan = cell.colSpan,
+        var ascendingSortTooltip = cell.ascendingSortTooltip,
+          buttonAriaRoleDescription = cell.buttonAriaRoleDescription,
+          colSpan = cell.colSpan,
           content = cell.content,
+          descendingSortTooltip = cell.descendingSortTooltip,
           isSortable = cell.isSortable,
           key = cell.key,
           shouldTruncate = cell.shouldTruncate,
@@ -101,7 +104,10 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
           testId: cellTestId || testId,
           shouldTruncate: shouldTruncate,
           sortOrder: key === sortKey ? sortOrder : undefined,
-          width: width
+          width: width,
+          ascendingSortTooltip: ascendingSortTooltip,
+          descendingSortTooltip: descendingSortTooltip,
+          buttonAriaRoleDescription: buttonAriaRoleDescription
         }, restCellProps));
       })));
     }

package/dist/esm/styled/table-head.js

@@ -82,7 +82,9 @@ var baseStyles = css({
     border: 'none',
     color: 'inherit',
     cursor: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontWeight: 'inherit',
     '&::before, &::after': {
       display: 'block',

package/dist/types/components/table-head-cell.d.ts

@@ -16,6 +16,9 @@ export interface TableHeadCellProps {
     isRanking?: boolean;
     headCellId: string;
     activeSortButtonId?: string | null;
+    ascendingSortTooltip?: string;
+    descendingSortTooltip?: string;
+    buttonAriaRoleDescription?: string;
 }
 declare const TableHeadCell: FC<TableHeadCellProps>;
 export default TableHeadCell;

package/dist/types/types.d.ts

@@ -338,6 +338,21 @@ export interface HeadCellType extends RowCellType {
      * Whether the text in the cell will truncate or not if constrained. Avoid truncating content wherever possible.
      */
     shouldTruncate?: boolean;
+    /**
+     * Accessible tooltip applied to the ascending sort button.
+     * Defaults to "Sort ascending".
+     */
+    ascendingSortTooltip?: string;
+    /**
+     * Accessible tooltip applied to the descending sort button.
+     * Defaults to "Sort descending".
+     */
+    descendingSortTooltip?: string;
+    /**
+     * Accessible aria role description applied to the sort button.
+     * Defaults to "Sort button".
+     */
+    buttonAriaRoleDescription?: string;
 }
 export interface RankEndLocation {
     index: number;

package/dist/types-ts4.5/components/table-head-cell.d.ts

@@ -16,6 +16,9 @@ export interface TableHeadCellProps {
     isRanking?: boolean;
     headCellId: string;
     activeSortButtonId?: string | null;
+    ascendingSortTooltip?: string;
+    descendingSortTooltip?: string;
+    buttonAriaRoleDescription?: string;
 }
 declare const TableHeadCell: FC<TableHeadCellProps>;
 export default TableHeadCell;

package/dist/types-ts4.5/types.d.ts

@@ -338,6 +338,21 @@ export interface HeadCellType extends RowCellType {
      * Whether the text in the cell will truncate or not if constrained. Avoid truncating content wherever possible.
      */
     shouldTruncate?: boolean;
+    /**
+     * Accessible tooltip applied to the ascending sort button.
+     * Defaults to "Sort ascending".
+     */
+    ascendingSortTooltip?: string;
+    /**
+     * Accessible tooltip applied to the descending sort button.
+     * Defaults to "Sort descending".
+     */
+    descendingSortTooltip?: string;
+    /**
+     * Accessible aria role description applied to the sort button.
+     * Defaults to "Sort button".
+     */
+    buttonAriaRoleDescription?: string;
 }
 export interface RankEndLocation {
     index: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "17.0.0",
+	"version": "17.0.2",
 	"description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-beautiful-dnd": "^12.2.0"