@atlaskit/reactions 22.2.5 → 22.2.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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

@@ -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; }
@@ -87,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
        */
@@ -105,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.useCloseManager)(wrapperRef, function () {
-    onCancel();
+  (0, _hooks.useCloseManager)(wrapperRef, function (callbackType) {
     close();
+    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: {
@@ -134,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
@@ -176,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, {
@@ -202,28 +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, {
@@ -238,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/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/useCloseManager.js

@@ -25,13 +25,13 @@ function useCloseManager(ref, callback) {
      */
     function handleClickOutside(event) {
       if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
-        callback();
+        callback('CLICK_OUTSIDE');
       }
     }
     function handleKeydown(event) {
       var key = event.key;
       if (key === 'Escape' || key === 'Esc') {
-        callback();
+        callback('ESCAPE');
       }
     }
 

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/shared/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_USERS_LIMIT = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = exports.ExtendedReactionsByShortName = exports.ExtendedReactions = exports.DefaultReactionsByShortName = exports.DefaultReactions = void 0;
+exports.TOOLTIP_USERS_LIMIT = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = exports.ExtendedReactionsByShortName = exports.ExtendedReactions = exports.DefaultReactionsByShortName = exports.DefaultReactions = void 0;
 /**
  * Initial list of emoji to pick from
  */
@@ -104,4 +104,8 @@ var TOOLTIP_USERS_LIMIT = 5;
  */
 exports.TOOLTIP_USERS_LIMIT = TOOLTIP_USERS_LIMIT;
 var NUMBER_OF_REACTIONS_TO_DISPLAY = 9;
-exports.NUMBER_OF_REACTIONS_TO_DISPLAY = NUMBER_OF_REACTIONS_TO_DISPLAY;
+
+// This rate is used in fetching emoji resource
+exports.NUMBER_OF_REACTIONS_TO_DISPLAY = NUMBER_OF_REACTIONS_TO_DISPLAY;
+var SAMPLING_RATE_REACTIONS_RENDERED_EXP = 50;
+exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = SAMPLING_RATE_REACTIONS_RENDERED_EXP;

package/dist/cjs/store/MemoryReactionsStore.js

@@ -13,7 +13,7 @@ var _analytics = require("../analytics");
 var Types = _interopRequireWildcard(require("../types"));
 var _batched = require("./batched");
 var utils = _interopRequireWildcard(require("./utils"));
-var _constants = require("../analytics/constants");
+var _constants = require("../shared/constants");
 var _ufo = require("../analytics/ufo");
 var _analytics2 = require("../analytics/analytics");
 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); }

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.5"
+	"version": "22.2.6"
 }

package/dist/es2019/analytics/analytics.js

@@ -1,6 +1,24 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 import { name as packageName, version as packageVersion } from '../version.json';
+/**
+ * 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
+export const isSampled = rate => {
+  if (rate === 1) {
+    return true;
+  }
+  if (rate === 0) {
+    return false;
+  }
+  return Math.random() * rate <= 1;
+};
 export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
   if (createAnalyticsEvent) {

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
@@ -11,6 +11,7 @@ import { UFO } from '../../analytics';
 import { i18n } from '../../shared';
 import { useCloseManager } from '../../hooks';
 import * as styles from './styles';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 
 /**
  * Test id for wrapper ReactionPicker div
@@ -71,13 +72,12 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     tooltipContent = jsx(FormattedMessage, i18n.messages.addReaction),
     emojiPickerSize
   } = props;
+  const [triggerRef, setTriggerRef] = useState(null);
+  const [popupRef, setPopupRef] = useState(null);
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   const wrapperRef = useRef(null);
-  /**
-   * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
-   */
   const updatePopper = useRef();
   const [settings, setSettings] = useState({
     /**
@@ -93,19 +93,30 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   /**
    * Custom hook triggers when user clicks outside the reactions picker
    */
-  useCloseManager(wrapperRef, () => {
-    onCancel();
+  useCloseManager(wrapperRef, callbackType => {
     close();
+    onCancel();
+    if (triggerRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(() => triggerRef.focus());
+    }
   }, true, settings.isOpen);
 
+  /**
+   * add focus lock to popup
+   */
+  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
    */
   const close = useCallback(_id => {
     setSettings({
-      isOpen: false,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      ...settings,
+      isOpen: false
     });
     // ufo abort reaction experience
     UFO.PickerRender.abort({
@@ -115,7 +126,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
         reason: 'close dialog'
       }
     });
-  }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+  }, [settings]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -157,25 +168,18 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     // ufo reactions picker opened success
     UFO.PickerRender.success();
   };
-
-  /**
-   * When picker is opened, re-calculate the picker position
-   */
-  useEffect(() => {
-    if (settings.isOpen) {
-      if (updatePopper.current) {
-        updatePopper.current();
-      }
-    }
-  }, [settings]);
   const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
+  useLayoutEffect(() => {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
+  }, [settings]);
   return jsx("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
     "data-testid": RENDER_REACTIONPICKER_TESTID,
     ref: wrapperRef
   }, jsx(Manager, null, jsx(Reference, null, ({
-    ref: popperRef
+    ref
   }) =>
   // Render a button to open the <Selector /> panel
   jsx(Trigger, {
@@ -183,12 +187,21 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       'aria-expanded': settings.isOpen,
       'aria-controls': PICKER_CONTROL_ID
     },
-    ref: popperRef,
+    ref: node => {
+      if (node && settings.isOpen) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    },
     onClick: onTriggerClick,
     miniMode: miniMode,
     disabled: disabled,
     tooltipContent: settings.isOpen ? null : tooltipContent
-  })), jsx(Popper, {
+  })), settings.isOpen && jsx(Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
   }, ({
@@ -197,14 +210,25 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     update
   }) => {
     updatePopper.current = update;
-    return jsx(Fragment, null, settings.isOpen && jsx("div", {
+    return jsx("div", {
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: {
         zIndex: layers.layer(),
         ...style
       },
-      ref: ref
+      ref: node => {
+        if (node) {
+          if (typeof ref === 'function') {
+            ref(node);
+          } else {
+            ref.current = node;
+          }
+          setPopupRef(node);
+        }
+      },
+      css: styles.popupWrapperStyle,
+      tabIndex: 0
     }, jsx("div", {
       css: styles.popupStyle
     }, settings.showFullPicker ? jsx(EmojiPicker, {
@@ -219,6 +243,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       showMore: allowAllEmojis,
       onMoreClick: onSelectMoreClick,
       pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-    })))));
+    }))));
   })));
 });

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

@@ -11,6 +11,11 @@ export const pickerStyle = css({
 export const contentStyle = css({
   display: 'flex'
 });
+export const popupWrapperStyle = css({
+  ':focus': {
+    outline: 'none'
+  }
+});
 export const popupStyle = css({
   background: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: `${borderRadius()}px`,

package/dist/es2019/components/Reactions/Reactions.js

@@ -13,6 +13,8 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import * as styles from './styles';
+import { isSampled } from '../../analytics/analytics';
+import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 
 /**
  * Set of all available UFO experiences relating to reactions dialog
@@ -97,9 +99,11 @@ export const Reactions = /*#__PURE__*/React.memo(({
     if (status !== ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      var _renderTime$current;
-      Analytics.createAndFireSafe(createAnalyticsEvent, 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 (isSampled(SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
+        var _renderTime$current;
+        Analytics.createAndFireSafe(createAnalyticsEvent, 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]);