@atlaskit/reactions 22.3.3 → 22.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 22.4.0
+
+### Minor Changes
+
+- [`ac5a05f5929`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac5a05f5929) - We are testing an upgrade to the `focus-trap` dependency behind a feature flag. If this fix is successful it will be available in a later release.
+
 ## 22.3.3
 
 ### Patch Changes

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = void 0;
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = exports.PICKER_CONTROL_ID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -42,6 +42,7 @@ var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
  */
 exports.RENDER_REACTIONPICKERPANEL_TESTID = RENDER_REACTIONPICKERPANEL_TESTID;
 var PICKER_CONTROL_ID = 'emoji-picker';
+exports.PICKER_CONTROL_ID = PICKER_CONTROL_ID;
 var popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:

package/dist/cjs/hooks/useFocusTrap.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusTrap = void 0;
 var _react = require("react");
-var _focusTrap = _interopRequireDefault(require("focus-trap"));
+var _focusTrap = require("focus-trap");
+var _focusTrapV = _interopRequireDefault(require("focus-trap-v2"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * Custom hook to add focus trap
  * used for focus trap in ReactionPicker
@@ -27,7 +29,12 @@ var useFocusTrap = function useFocusTrap(_ref) {
       fallbackFocus: targetRef,
       returnFocusOnDeactivate: false
     };
-    var focusTrap = (0, _focusTrap.default)(targetRef, trapConfig);
+    var focusTrap;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = (0, _focusTrap.createFocusTrap)(targetRef, trapConfig);
+    } else {
+      focusTrap = (0, _focusTrapV.default)(targetRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.3.3"
+	"version": "22.4.0"
 }

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -27,7 +27,7 @@ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
 /**
  * Emoji Picker Controller Id for Accessibility Labels
  */
-const PICKER_CONTROL_ID = 'emoji-picker';
+export const PICKER_CONTROL_ID = 'emoji-picker';
 const popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:

package/dist/es2019/hooks/useFocusTrap.js

@@ -4,7 +4,9 @@
  * copied from useFocusManager in @atlaskit/popup
  */
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const useFocusTrap = ({
   targetRef,
   initialFocusRef
@@ -20,7 +22,12 @@ export const useFocusTrap = ({
       fallbackFocus: targetRef,
       returnFocusOnDeactivate: false
     };
-    const focusTrap = createFocusTrap(targetRef, trapConfig);
+    let focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(targetRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(targetRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     let frameId = requestAnimationFrame(() => {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.3.3"
+	"version": "22.4.0"
 }

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -31,7 +31,7 @@ export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
 /**
  * Emoji Picker Controller Id for Accessibility Labels
  */
-var PICKER_CONTROL_ID = 'emoji-picker';
+export var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:

package/dist/esm/hooks/useFocusTrap.js

@@ -4,7 +4,9 @@
  * copied from useFocusManager in @atlaskit/popup
  */
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var useFocusTrap = function useFocusTrap(_ref) {
   var targetRef = _ref.targetRef,
     initialFocusRef = _ref.initialFocusRef;
@@ -19,7 +21,12 @@ export var useFocusTrap = function useFocusTrap(_ref) {
       fallbackFocus: targetRef,
       returnFocusOnDeactivate: false
     };
-    var focusTrap = createFocusTrap(targetRef, trapConfig);
+    var focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(targetRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(targetRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.3.3"
+	"version": "22.4.0"
 }

package/dist/types/components/ReactionPicker/ReactionPicker.d.ts

@@ -13,6 +13,10 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
  * Test id for ReactionPicker panel div
  */
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+export declare const PICKER_CONTROL_ID = "emoji-picker";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
      * Provider for loading emojis

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

@@ -13,6 +13,10 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
  * Test id for ReactionPicker panel div
  */
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+export declare const PICKER_CONTROL_ID = "emoji-picker";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
      * Provider for loading emojis

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.3.3",
+  "version": "22.4.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Foundational Elements",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Reactions"
     }
@@ -36,22 +36,24 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/emoji": "^67.4.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "focus-trap": "^2.4.5"
+    "focus-trap": "^7.0.0",
+    "focus-trap-v2": "npm:focus-trap@^2.4.5"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -61,11 +63,11 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/docs": "^9.1.0",
-    "@atlaskit/editor-test-helpers": "^18.4.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/util-data-test": "^17.8.0",
+    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.2.0",
     "@emotion/jest": "^11.8.0",
@@ -112,5 +114,10 @@
     "typecheck": "cd ../../ && yarn typecheck:package ./packages/elements/reactions",
     "start:dev": "cd ../../ && yarn start reactions --proxy ./packages/elements/reactions/proxy.ts",
     "start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start reactions --proxy ./packages/elements/reactions/proxy.ts"
+  },
+  "platform-feature-flags": {
+    "platform.design-system-team.focus-trap-upgrade_p2cei": {
+      "type": "boolean"
+    }
   }
 }