@atlaskit/reactions 22.2.4 → 22.2.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 22.2.6
+
+### Patch Changes
+
+- [`6b5bf5505b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b5bf5505b6) - revert atlaskit popup refactor in reaction picker
+- [`db658265a45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db658265a45) - add sampling for reaction view analytics
+- [`c84afc8fbd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c84afc8fbd8) - [ux] add focus trap to reaction picker
+- [`ed219dee1bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed219dee1bd) - refactor reactions picker with @atlaskit/popup
+- Updated dependencies
+
+## 22.2.5
+
+### Patch Changes
+
+- [`dfbecb4aa7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfbecb4aa7c) - [ux] [COLLAB-2263] allow `Enter` to open Show more to show emoji picker, allow `ESC` to close emoji picker / reaction selector.
+- Updated dependencies
+
 ## 22.2.4
 
 ### Patch Changes

package/dist/cjs/analytics/analytics.js

@@ -4,13 +4,32 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractErrorInfo = exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionFocusedEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.isSampled = exports.extractErrorInfo = exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionFocusedEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 var _version = require("../version.json");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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; }
+/**
+ * TODO: move to utility package?
+ * A random sampling function
+ * sampling algorithm is from @atlassian/jira-coinflip at https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/platform/app-framework/coinflip/src/index.tsx
+ * E.g. isSampled(2) will pass 50% of the time
+ * @param rate The chance that it will pass (1 in <rate> times)
+ * @returns bool, if it passes or not
+ */
+// default sampling function to determine which one to be sampled
+var isSampled = function isSampled(rate) {
+  if (rate === 1) {
+    return true;
+  }
+  if (rate === 0) {
+    return false;
+  }
+  return Math.random() * rate <= 1;
+};
+exports.isSampled = isSampled;
 var createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
 exports.createAndFireEventInElementsChannel = createAndFireEventInElementsChannel;
 var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {

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 = void 0;
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -20,6 +20,7 @@ var _analytics = require("../../analytics");
 var _shared = require("../../shared");
 var _hooks = require("../../hooks");
 var styles = _interopRequireWildcard(require("./styles"));
+var _useFocusTrap = require("../../hooks/useFocusTrap");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -30,9 +31,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
 
 /**
- * Emoji Picker Controller Id for Accessibility Labels
+ * Test id for ReactionPicker panel div
  */
 exports.RENDER_REACTIONPICKER_TESTID = RENDER_REACTIONPICKER_TESTID;
+var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+exports.RENDER_REACTIONPICKERPANEL_TESTID = RENDER_REACTIONPICKERPANEL_TESTID;
 var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
 /**
@@ -81,15 +88,20 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     _props$tooltipContent = props.tooltipContent,
     tooltipContent = _props$tooltipContent === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent,
     emojiPickerSize = props.emojiPickerSize;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    popupRef = _useState4[0],
+    setPopupRef = _useState4[1];
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   var wrapperRef = (0, _react.useRef)(null);
-  /**
-   * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
-   */
   var updatePopper = (0, _react.useRef)();
-  var _useState = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       /**
        * Show the picker floating panel
        */
@@ -99,27 +111,39 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    settings = _useState2[0],
-    setSettings = _useState2[1];
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    settings = _useState6[0],
+    setSettings = _useState6[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
    */
-  (0, _hooks.useClickAway)(wrapperRef, function () {
-    onCancel();
+  (0, _hooks.useCloseManager)(wrapperRef, function (callbackType) {
     close();
-  }, 'click', true, settings.isOpen);
+    onCancel();
+    if (triggerRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(function () {
+        return triggerRef.focus();
+      });
+    }
+  }, true, settings.isOpen);
+
+  /**
+   * add focus lock to popup
+   */
+  (0, _useFocusTrap.useFocusTrap)({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
 
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
    */
   var close = (0, _react.useCallback)(function (_id) {
-    setSettings({
-      isOpen: false,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
-    });
+    setSettings(_objectSpread(_objectSpread({}, settings), {}, {
+      isOpen: false
+    }));
     // ufo abort reaction experience
     _analytics.UFO.PickerRender.abort({
       metadata: {
@@ -128,7 +152,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
         reason: 'close dialog'
       }
     });
-  }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+  }, [settings]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -170,25 +194,18 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     // ufo reactions picker opened success
     _analytics.UFO.PickerRender.success();
   };
-
-  /**
-   * When picker is opened, re-calculate the picker position
-   */
-  (0, _react.useEffect)(function () {
-    if (settings.isOpen) {
-      if (updatePopper.current) {
-        updatePopper.current();
-      }
-    }
-  }, [settings]);
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  (0, _react.useLayoutEffect)(function () {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
+  }, [settings]);
   return (0, _react2.jsx)("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
     "data-testid": RENDER_REACTIONPICKER_TESTID,
     ref: wrapperRef
   }, (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref) {
-    var popperRef = _ref.ref;
+    var _ref2 = _ref.ref;
     return (
       // Render a button to open the <Selector /> panel
       (0, _react2.jsx)(_Trigger.Trigger, {
@@ -196,27 +213,48 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
           'aria-expanded': settings.isOpen,
           'aria-controls': PICKER_CONTROL_ID
         },
-        ref: popperRef,
+        ref: function ref(node) {
+          if (node && settings.isOpen) {
+            if (typeof _ref2 === 'function') {
+              _ref2(node);
+            } else {
+              _ref2.current = node;
+            }
+            setTriggerRef(node);
+          }
+        },
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
         tooltipContent: settings.isOpen ? null : tooltipContent
       })
     );
-  }), (0, _react2.jsx)(_popper.Popper, {
+  }), settings.isOpen && (0, _react2.jsx)(_popper.Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
-  }, function (_ref2) {
-    var ref = _ref2.ref,
-      style = _ref2.style,
-      update = _ref2.update;
+  }, function (_ref3) {
+    var _ref4 = _ref3.ref,
+      style = _ref3.style,
+      update = _ref3.update;
     updatePopper.current = update;
-    return (0, _react2.jsx)(_react.Fragment, null, settings.isOpen && (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       id: PICKER_CONTROL_ID,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
         zIndex: _constants.layers.layer()
       }, style),
-      ref: ref
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref4 === 'function') {
+            _ref4(node);
+          } else {
+            _ref4.current = node;
+          }
+          setPopupRef(node);
+        }
+      },
+      css: styles.popupWrapperStyle,
+      tabIndex: 0
     }, (0, _react2.jsx)("div", {
       css: styles.popupStyle
     }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
@@ -231,7 +269,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       showMore: allowAllEmojis,
       onMoreClick: onSelectMoreClick,
       pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-    })))));
+    }))));
   })));
 });
 exports.ReactionPicker = ReactionPicker;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.popupStyle = exports.pickerStyle = exports.contentStyle = void 0;
+exports.popupWrapperStyle = exports.popupStyle = exports.pickerStyle = exports.contentStyle = void 0;
 var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
@@ -20,6 +20,12 @@ var contentStyle = (0, _react.css)({
   display: 'flex'
 });
 exports.contentStyle = contentStyle;
+var popupWrapperStyle = (0, _react.css)({
+  ':focus': {
+    outline: 'none'
+  }
+});
+exports.popupWrapperStyle = popupWrapperStyle;
 var popupStyle = (0, _react.css)({
   background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),

package/dist/cjs/components/Reactions/Reactions.js

@@ -23,6 +23,8 @@ var _Reaction = require("../Reaction");
 var _ReactionDialog = require("../ReactionDialog");
 var _ReactionPicker = require("../ReactionPicker");
 var styles = _interopRequireWildcard(require("./styles"));
+var _analytics2 = require("../../analytics/analytics");
+var _constants = require("../../shared/constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -123,9 +125,11 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     if (status !== _types.ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      var _renderTime$current;
-      _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
-      );
+      if ((0, _analytics2.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
+        var _renderTime$current;
+        _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
+        );
+      }
       renderTime.current = undefined;
     }
   }, [createAnalyticsEvent, status]);

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -50,7 +50,7 @@ var ShowMore = function ShowMore(_ref) {
       "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
       type: "button",
       style: style.button,
-      onMouseDown: onClick,
+      onClick: onClick,
       "data-testid": RENDER_SHOWMORE_TESTID
     }, (0, _react2.jsx)(_more.default, {
       label: "More"

package/dist/cjs/components/Trigger/Trigger.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Trigger = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
+exports.Trigger = exports.RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -22,6 +22,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 exports.RENDER_TOOLTIP_TRIGGER_TESTID = RENDER_TOOLTIP_TRIGGER_TESTID;
+var RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+exports.RENDER_TRIGGER_BUTTON_TESTID = RENDER_TRIGGER_BUTTON_TESTID;
 /**
  * Render an emoji button to open the reactions select picker
  */
@@ -42,6 +44,7 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({
+    testId: RENDER_TRIGGER_BUTTON_TESTID,
     css: styles.triggerStyle({
       miniMode: miniMode,
       disabled: disabled

package/dist/cjs/components/Trigger/styles.js

@@ -39,6 +39,11 @@ var triggerStyle = function triggerStyle(_ref) {
   }), {}, {
     '&:hover': {
       background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
+    },
+    '&:focus': {
+      boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+      transitionDuration: '0s, 0.2s',
+      outline: 'none'
     }
   }));
 };

package/dist/cjs/hooks/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useClickAway", {
+Object.defineProperty(exports, "useCloseManager", {
   enumerable: true,
   get: function get() {
-    return _useClickAway.useClickAway;
+    return _useCloseManager.useCloseManager;
   }
 });
-var _useClickAway = require("./useClickAway");
+var _useCloseManager = require("./useCloseManager");

package/dist/cjs/hooks/useCloseManager.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCloseManager = useCloseManager;
+var _react = require("react");
+/**
+ * Custom hook to detect when user action is outside given container ref or press escape key
+ * @param ref ref object to an html element
+ * @param callback event callback when detected a click outside the ref object or escape key is pressed
+ * @param useCapture (Optional) use capture phase of event. @default false
+ * @param enabled (Optional) enable/disable the outside click or escape key press handler. @default true
+ */
+function useCloseManager(ref, callback) {
+  var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var enabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  (0, _react.useEffect)(function () {
+    if (!enabled) {
+      return;
+    }
+
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event) {
+      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+        callback('CLICK_OUTSIDE');
+      }
+    }
+    function handleKeydown(event) {
+      var key = event.key;
+      if (key === 'Escape' || key === 'Esc') {
+        callback('ESCAPE');
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener('click', handleClickOutside, useCapture);
+    document.addEventListener('keydown', handleKeydown);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside, useCapture);
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [ref, callback, useCapture, enabled]);
+}

package/dist/cjs/hooks/useFocusTrap.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = void 0;
+var _react = require("react");
+var _focusTrap = _interopRequireDefault(require("focus-trap"));
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+
+var useFocusTrap = function useFocusTrap(_ref) {
+  var targetRef = _ref.targetRef,
+    initialFocusRef = _ref.initialFocusRef;
+  (0, _react.useEffect)(function () {
+    if (!targetRef) {
+      return;
+    }
+    var trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: initialFocusRef || targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: false
+    };
+    var focusTrap = (0, _focusTrap.default)(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    var frameId = requestAnimationFrame(function () {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return function () {
+      if (frameId != null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef, initialFocusRef]);
+};
+exports.useFocusTrap = useFocusTrap;

package/dist/cjs/i18n/cs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Czech
 var _default = {
-  'fabric.reactions.add': 'Přidat reakci',
-  'fabric.reactions.error.unexpected': 'Reakce jsou dočasně nedostupné.',
-  'fabric.reactions.loading': 'Načítání...',
-  'fabric.reactions.more.emojis': 'Více smajlíků',
-  'fabric.reactions.more.info': 'Další informace',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}',
-  'fabric.reactions.reactwithemoji': 'Reagovat pomocí smajlíku {emoji}',
-  'reactions.dialog.close': 'Zavřít',
-  'reactions.dialog.left.navigate': 'Navigace doleva',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}',
-  'reactions.dialog.right.navigate': 'Navigace doprava',
-  'reactions.dialog.viewall': 'Podívejte se, kdo reagoval',
-  'reactions.dialog.viewall.tooltip': 'Zobrazit všechny reakce uživatelů'
+  "fabric.reactions.add": "Přidat reakci",
+  "fabric.reactions.error.unexpected": "Reakce jsou dočasně nedostupné.",
+  "fabric.reactions.loading": "Načítání...",
+  "fabric.reactions.more.emojis": "Více smajlíků",
+  "fabric.reactions.more.info": "Další informace",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}",
+  "fabric.reactions.reactwithemoji": "Reagovat pomocí smajlíku {emoji}",
+  "reactions.dialog.close": "Zavřít",
+  "reactions.dialog.left.navigate": "Navigace doleva",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}",
+  "reactions.dialog.right.navigate": "Navigace doprava",
+  "reactions.dialog.viewall": "Podívejte se, kdo reagoval",
+  "reactions.dialog.viewall.tooltip": "Zobrazit všechny reakce uživatelů"
 };
 exports.default = _default;

package/dist/cjs/i18n/da.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Danish (Denmark)
 var _default = {
-  'fabric.reactions.add': 'Tilføj reaktion',
-  'fabric.reactions.error.unexpected': 'Reaktioner er midlertidigt utilgængelige',
-  'fabric.reactions.loading': 'Indlæser ...',
-  'fabric.reactions.more.emojis': 'Flere emojis',
-  'fabric.reactions.more.info': 'Flere oplysninger',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {og én anden} other {og {count} andre}}',
-  'fabric.reactions.reactwithemoji': 'Reager med emojien {emoji}',
-  'reactions.dialog.close': 'Luk',
-  'reactions.dialog.left.navigate': 'Navigation til venstre',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
-  'reactions.dialog.right.navigate': 'Navigation til højre',
-  'reactions.dialog.viewall': 'Se, hvem der har reageret',
-  'reactions.dialog.viewall.tooltip': 'Se alle brugerreaktioner'
+  "fabric.reactions.add": "Tilføj reaktion",
+  "fabric.reactions.error.unexpected": "Reaktioner er midlertidigt utilgængelige",
+  "fabric.reactions.loading": "Indlæser ...",
+  "fabric.reactions.more.emojis": "Flere emojis",
+  "fabric.reactions.more.info": "Flere oplysninger",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {og én anden} other {og {count} andre}}",
+  "fabric.reactions.reactwithemoji": "Reager med emojien {emoji}",
+  "reactions.dialog.close": "Luk",
+  "reactions.dialog.left.navigate": "Navigation til venstre",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}",
+  "reactions.dialog.right.navigate": "Navigation til højre",
+  "reactions.dialog.viewall": "Se, hvem der har reageret",
+  "reactions.dialog.viewall.tooltip": "Se alle brugerreaktioner"
 };
 exports.default = _default;

package/dist/cjs/i18n/de.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //German (Germany)
 var _default = {
-  'fabric.reactions.add': 'Reaktion hinzufügen',
-  'fabric.reactions.error.unexpected': 'Reaktionen sind vorübergehend nicht verfügbar.',
-  'fabric.reactions.loading': 'Wird geladen...',
-  'fabric.reactions.more.emojis': 'Mehr Emojis',
-  'fabric.reactions.more.info': 'Weitere Informationen',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {und ein weiterer} other {und {count} weitere}}',
-  'fabric.reactions.reactwithemoji': 'Mit {emoji}-Emoji reagieren',
-  'reactions.dialog.close': 'Schließen',
-  'reactions.dialog.left.navigate': 'Nach links navigieren',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}',
-  'reactions.dialog.right.navigate': 'Nach rechts navigieren',
-  'reactions.dialog.viewall': 'Reaktionen ansehen',
-  'reactions.dialog.viewall.tooltip': 'Alle Benutzerreaktionen anzeigen'
+  "fabric.reactions.add": "Reaktion hinzufügen",
+  "fabric.reactions.error.unexpected": "Reaktionen sind vorübergehend nicht verfügbar.",
+  "fabric.reactions.loading": "Wird geladen...",
+  "fabric.reactions.more.emojis": "Mehr Emojis",
+  "fabric.reactions.more.info": "Weitere Informationen",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {und ein weiterer} other {und {count} weitere}}",
+  "fabric.reactions.reactwithemoji": "Mit {emoji}-Emoji reagieren",
+  "reactions.dialog.close": "Schließen",
+  "reactions.dialog.left.navigate": "Nach links navigieren",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}",
+  "reactions.dialog.right.navigate": "Nach rechts navigieren",
+  "reactions.dialog.viewall": "Reaktionen ansehen",
+  "reactions.dialog.viewall.tooltip": "Alle Benutzerreaktionen anzeigen"
 };
 exports.default = _default;