@atlaskit/dynamic-table 16.1.2 → 16.1.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/dynamic-table
 
+## 16.1.3
+
+### Patch Changes
+
+- [#163993](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163993)
+  [`d3922e72aa0e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3922e72aa0e6) -
+  [ux] Rankable table rows no longer have `role="button"` applied
+- Updated dependencies
+
 ## 16.1.2
 
 ### Patch Changes

package/dist/cjs/components/rankable/table-row.js

@@ -15,6 +15,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pragmaticDragAndDropReactBeautifulDndMigration = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration");
 var _withDimensions = _interopRequireDefault(require("../../hoc/with-dimensions"));
 var _helpers = require("../../internal/helpers");
@@ -74,13 +75,21 @@ var RankableTableRow = exports.RankableTableRow = /*#__PURE__*/function (_React$
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
-        var _provided$dragHandleP;
+        var _provided$dragHandleP, _provided$dragHandleP2;
         return /*#__PURE__*/_react.default.createElement(_tableRow.RankableTableBodyRow, (0, _extends2.default)({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
+          /**
+           * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
+           *
+           * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
+           * Previously we used RBD 12 which did not provide a role to the drag handle.
+           */
+          role: (0, _platformFeatureFlags.fg)('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
           // It is necessary to prevent the passing of aria-labelledby
+          ,
           "aria-labelledby": undefined
           // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
           ,
-          "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
+          "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
           ref: _this2.innerRef(provided.innerRef)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,

package/dist/cjs/components/stateless.js

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

package/dist/es2019/components/rankable/table-row.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-
+import { fg } from '@atlaskit/platform-feature-flags';
 // Allowing existing usage of non Pragmatic drag and drop solution
 // eslint-disable-next-line @atlaskit/design-system/no-unsupported-drag-and-drop-libraries
 import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
@@ -48,13 +48,21 @@ export class RankableTableRow extends React.Component {
       index: rowIndex,
       isDragDisabled: isRankingDisabled
     }, (provided, snapshot) => {
-      var _provided$dragHandleP;
+      var _provided$dragHandleP, _provided$dragHandleP2;
       return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
+        /**
+         * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
+         *
+         * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
+         * Previously we used RBD 12 which did not provide a role to the drag handle.
+         */
+        role: fg('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
         // It is necessary to prevent the passing of aria-labelledby
+        ,
         "aria-labelledby": undefined
         // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
         ,
-        "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
+        "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
         ref: this.innerRef(provided.innerRef)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/es2019/components/stateless.js

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

package/dist/esm/components/rankable/table-row.js

@@ -13,7 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, 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';
-
+import { fg } from '@atlaskit/platform-feature-flags';
 // Allowing existing usage of non Pragmatic drag and drop solution
 // eslint-disable-next-line @atlaskit/design-system/no-unsupported-drag-and-drop-libraries
 import { Draggable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
@@ -69,13 +69,21 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
         index: rowIndex,
         isDragDisabled: isRankingDisabled
       }, function (provided, snapshot) {
-        var _provided$dragHandleP;
+        var _provided$dragHandleP, _provided$dragHandleP2;
         return /*#__PURE__*/React.createElement(RankableTableBodyRow, _extends({}, restRowProps, provided.dragHandleProps, provided.draggableProps, {
+          /**
+           * `provided.dragHandleProps` provides `role="button"` which we don't want to apply to table rows.
+           *
+           * Providing `role="button"` is the RBD 13 behavior which the migration layer emulates.
+           * Previously we used RBD 12 which did not provide a role to the drag handle.
+           */
+          role: fg('platform_design_system_dynamic_table_row_role') ? undefined : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
           // It is necessary to prevent the passing of aria-labelledby
+          ,
           "aria-labelledby": undefined
           // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
           ,
-          "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-describedby'],
+          "aria-describedby": (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2['aria-describedby'],
           ref: _this2.innerRef(provided.innerRef)
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,

package/dist/esm/components/stateless.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "16.1.2",
+	"version": "16.1.3",
 	"description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,10 +42,11 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/pagination": "^14.9.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.1",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-beautiful-dnd": "^12.2.0"
@@ -58,6 +59,8 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
+		"@atlaskit/button": "*",
+		"@atlaskit/link": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
@@ -84,5 +87,10 @@
 				"emotion"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_design_system_dynamic_table_row_role": {
+			"type": "boolean"
+		}
 	}
 }