@atlaskit/reactions 33.2.9 → 33.2.10

package/dist/esm/components/ReactionPicker.js

@@ -12,7 +12,7 @@ import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
 import { Box } from '@atlaskit/primitives/compiled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useCloseManagerV2 } from '../hooks/useCloseManager';
+import { useCloseManager } from '../hooks/useCloseManager';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { messages } from '../shared/i18n';
@@ -21,7 +21,6 @@ import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import Portal from '@atlaskit/portal';
 var pickerStyle = null;
 var popupWrapperStyle = null;
 var popupStyle = null;
@@ -148,6 +147,19 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     settings = _useState10[0],
     setSettings = _useState10[1];
 
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  useCloseManager(wrapperRef, function (callbackType) {
+    close();
+    onCancel();
+    if (triggerRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(function () {
+        return triggerRef.focus();
+      });
+    }
+  }, true, isPopupTrayOpen);
+
   /**
    * 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
@@ -266,10 +278,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     var _updatePopper$current;
     (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 || _updatePopper$current.call(updatePopper);
   }, [settings]);
-  var onClose = function onClose() {
-    close();
-    onCancel();
-  };
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
@@ -311,14 +319,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         isListItem: isListItem
       }))
     );
-  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: layers.layer()
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers,
-    isOpen: isPopupTrayOpen,
-    onClose: onClose,
-    triggerRef: triggerRef
+    popperModifiers: popperModifiers
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -334,13 +337,10 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     onMoreClick: onSelectMoreClick,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     hoverableReactionPickerSelector: hoverableReactionPicker
-  }))))));
+  })))));
 });
 export var PopperWrapper = function PopperWrapper(props) {
-  var triggerRef = props.triggerRef,
-    settings = props.settings,
-    isOpen = props.isOpen,
-    onClose = props.onClose,
+  var settings = props.settings,
     children = props.children,
     popperModifiers = props.popperModifiers;
   var _useState11 = useState(null),
@@ -356,21 +356,10 @@ export var PopperWrapper = function PopperWrapper(props) {
     initialFocusRef: null,
     targetRef: popupRef
   });
-
-  /**
-   * Custom hook triggers when user clicks outside the reactions picker
-   */
-  useCloseManagerV2(popupRef, triggerRef, function (callbackType) {
-    onClose();
-    if (popupRef && callbackType === 'ESCAPE') {
-      requestAnimationFrame(function () {
-        return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
-      });
-    }
-  }, true, isOpen);
   return /*#__PURE__*/React.createElement(Popper, {
     placement: settings.popperPlacement,
-    modifiers: popperModifiers
+    modifiers: popperModifiers,
+    strategy: "absolute"
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,

package/dist/esm/components/ReactionPickerNew.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
+._1bch1b66>div{margin-top:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._1pra1o8l.miniMode{display:inline-block}
+._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
+._bfhk13b4{background-color:var(--_1f6rtr1)}
+._s7n4nkob{vertical-align:middle}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/esm/components/ReactionPickerNew.js

@@ -0,0 +1,412 @@
+/* ReactionPickerNew.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./ReactionPickerNew.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { Manager, Popper, Reference } from '@atlaskit/popper';
+import { layers } from '@atlaskit/theme/constants';
+import { Box } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useCloseManagerV2 } from '../hooks/useCloseManager';
+import { useDelayedState } from '../hooks/useDelayedState';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+import { messages } from '../shared/i18n';
+import { PickerRender } from '../ufo';
+import { Selector } from './Selector';
+import { Trigger } from './Trigger';
+import { RepositionOnUpdate } from './RepositionOnUpdate';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import Portal from '@atlaskit/portal';
+var pickerStyle = null;
+var popupWrapperStyle = null;
+var popupStyle = null;
+var popupStyleWithMarginTop = null;
+var additionalStyles = {
+  selectorContainer: "_1e0c1txw"
+};
+
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+export var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
+/**
+ * Test id for ReactionPicker panel div
+ */
+export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+var PICKER_CONTROL_ID = 'emoji-picker';
+/**
+ * Picker component for adding reactions
+ */
+export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
+  var miniMode = props.miniMode,
+    className = props.className,
+    emojiProvider = props.emojiProvider,
+    onSelection = props.onSelection,
+    allowAllEmojis = props.allowAllEmojis,
+    disabled = props.disabled,
+    pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
+    _props$onShowMore = props.onShowMore,
+    onShowMore = _props$onShowMore === void 0 ? function () {} : _props$onShowMore,
+    _props$onOpen = props.onOpen,
+    onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
+    _props$onCancel = props.onCancel,
+    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
+    _props$tooltipContent = props.tooltipContent,
+    tooltipContent = _props$tooltipContent === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction) : _props$tooltipContent,
+    emojiPickerSize = props.emojiPickerSize,
+    _props$showOpaqueBack = props.showOpaqueBackground,
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    reactionPickerTriggerText = props.reactionPickerTriggerText,
+    reactionPickerPlacement = props.reactionPickerPlacement,
+    _props$isListItem = props.isListItem,
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem,
+    _props$hoverableReact = props.hoverableReactionPicker,
+    hoverableReactionPicker = _props$hoverableReact === void 0 ? false : _props$hoverableReact,
+    _props$hoverableReact2 = props.hoverableReactionPickerDelay,
+    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHoverableReactionPickerEmojiPickerOpen = _useState4[0],
+    setIsHoverableReactionPickerEmojiPickerOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isHoveringTrigger = _useState6[0],
+    setIsHoveringTrigger = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isHoveringPopup = _useState8[0],
+    setIsHoveringPopup = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isTriggerClicked = _useState0[0],
+    setIsTriggerClicked = _useState0[1];
+  var _useDelayedState = useDelayedState(false, hoverableReactionPickerDelay),
+    _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
+    isPopupTrayOpen = _useDelayedState2[0],
+    setIsPopupTrayOpen = _useDelayedState2[1];
+
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+  var wrapperRef = useRef(null);
+  var updatePopper = useRef();
+  var popperPlacement = reactionPickerPlacement || 'bottom-start';
+  var popperModifiers = [
+  /**
+    Removing this applyStyle modifier as it throws client errors ref:
+   https://popper.js.org/docs/v1/#modifiers
+   https://popper.js.org/docs/v1/#modifiers..applyStyle
+   { name: 'applyStyle', enabled: false },
+    */
+  {
+    name: 'hide',
+    enabled: false
+  }, {
+    name: 'offset',
+    enabled: true,
+    options: {
+      offset: [0, fg('platform-reactions-offset-based-popper') ? 4 : 0]
+    }
+  }, {
+    name: 'flip',
+    enabled: true,
+    options: {
+      flipVariations: true,
+      boundariesElement: 'scrollParent'
+    }
+  }];
+  var _useState1 = useState({
+      /**
+       * Show the full custom emoji list picker or the default list of emojis
+       */
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      /**
+       * Use placement for popper based on reactionPickerPlacement prop
+       */
+      popperPlacement: popperPlacement
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    settings = _useState10[0],
+    setSettings = _useState10[1];
+
+  /**
+   * 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 = useCallback(function (_id) {
+    setIsPopupTrayOpen(false, true);
+    // ufo abort reaction experience
+    PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
+      setIsTriggerClicked(false);
+      setIsHoveringTrigger(false);
+      setIsHoveringPopup(false);
+    }
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker, setIsTriggerClicked, setIsHoveringTrigger, setIsHoveringPopup]);
+
+  /**
+   * Event handle rwhen selecting to show the custom emoji icons picker
+   * @param e event param
+   */
+  var onSelectMoreClick = useCallback(function (e) {
+    e.preventDefault();
+    setSettings({
+      showFullPicker: hoverableReactionPicker ? settings.showFullPicker : true,
+      popperPlacement: popperPlacement
+    });
+    setIsPopupTrayOpen(true);
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsTriggerClicked(false);
+    }
+    onShowMore();
+  }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
+
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+  var onEmojiSelected = useCallback(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
+    close(item.id);
+  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
+
+  /**
+   * Event handler when the emoji icon to open the custom picker is selected
+   */
+  var onTriggerClick = useCallback(function () {
+    // ufo start reactions picker open experience
+    PickerRender.start();
+    setSettings(_objectSpread(_objectSpread({}, settings), {}, {
+      popperPlacement: popperPlacement
+    }));
+    if (hoverableReactionPicker) {
+      if (isHoverableReactionPickerEmojiPickerOpen || isTriggerClicked) {
+        // if either the emoji picker is open or the trigger was clicked, close the popup and reset the state
+        setIsTriggerClicked(false);
+        setIsPopupTrayOpen(false, true);
+      } else {
+        // if neither condition is true, open the popup and set the state
+        setIsTriggerClicked(true);
+        setIsPopupTrayOpen(true, true);
+      }
+      // close the emoji picker
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
+    } else {
+      setIsPopupTrayOpen(!isPopupTrayOpen);
+    }
+    onOpen();
+    // ufo reactions picker opened success
+    PickerRender.success();
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  var handleTriggerMouseEnter = useCallback(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var handleTriggerMouseLeave = useCallback(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(false);
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
+  var handlePopupMouseEnter = useCallback(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var handlePopupMouseLeave = useCallback(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(false);
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
+  var wrapperClassName = " ".concat(isPopupTrayOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  useLayoutEffect(function () {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 || _updatePopper$current.call(updatePopper);
+  }, [settings]);
+  var onClose = function onClose() {
+    close();
+    onCancel();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
+    "data-testid": RENDER_REACTIONPICKER_TESTID,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref) {
+    var _ref2 = _ref.ref;
+    return (
+      /*#__PURE__*/
+      // Render a button to open the <Selector /> panel
+      React.createElement(Box, {
+        onMouseEnter: handleTriggerMouseEnter,
+        onMouseLeave: handleTriggerMouseLeave
+      }, /*#__PURE__*/React.createElement(Trigger, {
+        ariaAttributes: {
+          'aria-expanded': isPopupTrayOpen,
+          'aria-controls': PICKER_CONTROL_ID
+        },
+        ref: function ref(node) {
+          if (node && isPopupTrayOpen) {
+            if (typeof _ref2 === 'function') {
+              _ref2(node);
+            } else {
+              _ref2.current = node;
+            }
+            setTriggerRef(node);
+          }
+        },
+        isSelected: isPopupTrayOpen,
+        onClick: onTriggerClick,
+        miniMode: miniMode,
+        disabled: disabled,
+        tooltipContent: isPopupTrayOpen ? null : tooltipContent,
+        showOpaqueBackground: showOpaqueBackground,
+        showAddReactionText: showAddReactionText,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        isListItem: isListItem
+      }))
+    );
+  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
+    zIndex: layers.layer()
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
+  }, /*#__PURE__*/React.createElement(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
+  }))))));
+});
+export var PopperWrapper = function PopperWrapper(props) {
+  var triggerRef = props.triggerRef,
+    settings = props.settings,
+    isOpen = props.isOpen,
+    onClose = props.onClose,
+    children = props.children,
+    popperModifiers = props.popperModifiers;
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    popupRef = _useState12[0],
+    setPopupRef = _useState12[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  /**
+   * add focus lock to popup
+   */
+  useFocusTrap({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  useCloseManagerV2(popupRef, triggerRef, function (callbackType) {
+    onClose();
+    if (popupRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(function () {
+        return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
+      });
+    }
+  }, true, isOpen);
+  return /*#__PURE__*/React.createElement(Popper, {
+    placement: settings.popperPlacement,
+    modifiers: popperModifiers
+  }, function (_ref3) {
+    var _ref4 = _ref3.ref,
+      style = _ref3.style,
+      update = _ref3.update;
+    return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": formatMessage(messages.popperWrapperLabel),
+      id: PICKER_CONTROL_ID,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: _objectSpread({
+        zIndex: layers.layer()
+      }, style),
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref4 === 'function') {
+            _ref4(node);
+          } else {
+            _ref4.current = node;
+          }
+          setPopupRef(node);
+        }
+      },
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
+    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+      update: update,
+      settings: settings
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_2rko1sit _bfhk13b4 _16qs1a23 _79pa1b66", !fg('platform-reactions-offset-based-popper') && "_1bch1b66"]),
+      style: {
+        "--_1f6rtr1": ix("var(--ds-surface-overlay, ".concat(N0, ")")),
+        "--_3t1odq": ix("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"))
+      }
+    }, children)));
+  });
+};

package/dist/esm/components/Reactions.js

@@ -15,8 +15,11 @@ import { ReactionStatus } from '../types';
 import { ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../ufo';
 import { Reaction } from './Reaction';
 import { ReactionsDialog } from './ReactionsDialog';
-import { ReactionPicker } from './ReactionPicker';
+import { ReactionPicker as ReactionPickerOld } from './ReactionPicker';
+import { ReactionPicker as ReactionPickerNew } from './ReactionPickerNew';
 import { ReactionSummaryView } from './ReactionSummaryView';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var ReactionPicker = componentWithFG('platform_editor_reactions_picker_fix', ReactionPickerNew, ReactionPickerOld);
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;

package/dist/esm/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -4,7 +4,10 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { UfoErrorBoundary } from '../../components';
 import { PickerRender } from '../../ufo';
-import { ReactionPicker } from '../../components/ReactionPicker';
+import { ReactionPicker as ReactionPickerOld } from '../../components/ReactionPicker';
+import { ReactionPicker as ReactionPickerNew } from '../../components/ReactionPickerNew';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var ReactionPicker = componentWithFG('platform_editor_reactions_picker_fix', ReactionPickerNew, ReactionPickerOld);
 /**
  * Reaction Picker component
  */

package/dist/esm/index.js

@@ -1,8 +1,12 @@
 import { DefaultReactions, DefaultReactionsByShortName, ExtendedReactions, ExtendedReactionsByShortName, NUMBER_OF_REACTIONS_TO_DISPLAY, SAMPLING_RATE_REACTIONS_RENDERED_EXP, TOOLTIP_USERS_LIMIT } from './shared/constants';
 import { ComponentName, ExperienceName, PickerRender, ReactionsAdd, ReactionDetailsFetch, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionsRemove, ReactionsRendered, sampledReactionsRendered } from './ufo';
+import { ReactionPicker as ReactionPickerLegacy } from './components/ReactionPicker';
+import { ReactionPicker as ReactionPickerNew } from './components/ReactionPickerNew';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var ReactionPicker = componentWithFG('platform_editor_reactions_picker_fix', ReactionPickerNew, ReactionPickerLegacy);
 export { ReactionServiceClient } from './client';
 export { Reaction } from './components/Reaction';
-export { ReactionPicker } from './components/ReactionPicker';
+export { ReactionPicker };
 export { Reactions } from './components/Reactions';
 export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type Durations } from '@atlaskit/motion';
 /**
  * Test id for component top level div

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type EmojiId, type OnEmojiEvent, type EmojiProvider } from '@atlaskit/emoji';
 export declare const RENDER_BUTTON_TESTID = "button-emoji-id";
 export interface EmojiButtonProps {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type EmojiProvider } from '@atlaskit/emoji';
 import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../types';
 import { type ReactionFocused } from '../types/reaction';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ReactionProps } from './Reaction';
 interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -92,23 +92,16 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop to set a delay for the reaction picker when it opens/closes on hover
      */
     hoverableReactionPickerDelay?: number;
-    /**
-     * Optional prop to set the strategy of the reaction picker popup
-     */
-    reactionPickerStrategy?: PopperProps<{}>['strategy'];
 }
 /**
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
-    triggerRef: HTMLDivElement | HTMLButtonElement | null;
     settings: {
         showFullPicker: boolean;
         popperPlacement: Placement;
     };
-    isOpen: boolean;
-    onClose: () => void;
     popperModifiers?: PopperProps<{}>['modifiers'];
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;