@atlaskit/reactions 33.5.0 → 33.6.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/reactions
 
+## 33.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 33.6.1
+
+### Patch Changes
+
+- [`fcf19235f6097`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fcf19235f6097) -
+  Clean up feature flag.
+- Updated dependencies
+
+## 33.6.0
+
+### Minor Changes
+
+- [`e120a04be28c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e120a04be28c8) -
+  [ux] Return focus to add reactions button after selecting emoji
+
 ## 33.5.0
 
 ### Minor Changes

package/dist/cjs/components/ReactionPicker.js

@@ -209,7 +209,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     }
     onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
     close(item.id);
-  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_focus_on_button')) {
+      // After selecting an emoji, we would like focus to be returned to the trigger button
+      // This is for the purposes of navigation for keyboard users
+      requestAnimationFrame(function () {
+        return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
+      });
+    }
+  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
 
   /**
    * Event handler when the emoji icon to open the custom picker is selected

package/dist/cjs/components/ReactionSummaryView.js

@@ -15,7 +15,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _picker = require("@atlaskit/emoji/picker");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useDelayedState3 = require("../hooks/useDelayedState");
 var _Reaction = require("./Reaction");
 var _Trigger = require("./Trigger");
@@ -249,7 +248,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         summaryButtonIconAfter: summaryButtonIconAfter,
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
-    },
-    shouldRenderToParent: !hoverableSummaryView && (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-editor-coll')
+    }
   });
 };

package/dist/es2019/components/ReactionPicker.js

@@ -167,7 +167,12 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     }
     onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
     close(item.id);
-  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
+    if (fg('platform_emoji_picker_focus_on_button')) {
+      // After selecting an emoji, we would like focus to be returned to the trigger button
+      // This is for the purposes of navigation for keyboard users
+      requestAnimationFrame(() => triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus());
+    }
+  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
 
   /**
    * Event handler when the emoji icon to open the custom picker is selected

package/dist/es2019/components/ReactionSummaryView.js

@@ -6,7 +6,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { Trigger as EmojiPickerTrigger } from './Trigger';
@@ -211,7 +210,6 @@ export const ReactionSummaryView = ({
       summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
       summaryButtonIconAfter: summaryButtonIconAfter,
       summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
-    })),
-    shouldRenderToParent: !hoverableSummaryView && fg('should-render-to-parent-should-be-true-editor-coll')
+    }))
   });
 };

package/dist/esm/components/ReactionPicker.js

@@ -200,7 +200,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     }
     onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
     close(item.id);
-  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
+    if (fg('platform_emoji_picker_focus_on_button')) {
+      // After selecting an emoji, we would like focus to be returned to the trigger button
+      // This is for the purposes of navigation for keyboard users
+      requestAnimationFrame(function () {
+        return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
+      });
+    }
+  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
 
   /**
    * Event handler when the emoji icon to open the custom picker is selected

package/dist/esm/components/ReactionSummaryView.js

@@ -7,7 +7,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { Trigger as EmojiPickerTrigger } from './Trigger';
@@ -240,7 +239,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         summaryButtonIconAfter: summaryButtonIconAfter,
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
-    },
-    shouldRenderToParent: !hoverableSummaryView && fg('should-render-to-parent-should-be-true-editor-coll')
+    }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.5.0",
+	"version": "33.6.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/platform-feature-flags-react": "^0.3.0",
+		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/portal": "^5.1.0",
@@ -115,6 +115,9 @@
 		"start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start:webpack reactions --proxy ./packages/elements/reactions/proxy.ts"
 	},
 	"platform-feature-flags": {
+		"platform_emoji_picker_focus_on_button": {
+			"type": "boolean"
+		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		},
@@ -124,9 +127,6 @@
 		"dst-a11y__replace-anchor-with-link__editor-collabo": {
 			"type": "boolean"
 		},
-		"should-render-to-parent-should-be-true-editor-coll": {
-			"type": "boolean"
-		},
 		"platform_optimistic_reaction_emoji": {
 			"type": "boolean"
 		},