@atlaskit/reactions 33.2.20 → 33.2.22

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/reactions
 
+## 33.2.22
+
+### Patch Changes
+
+- [`6fb79942fc3a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fb79942fc3a5) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 33.2.21
+
+### Patch Changes
+
+- [`2ca8e1156c6f5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ca8e1156c6f5) -
+  tidy up FF for reactions picker
+- Updated dependencies
+
 ## 33.2.20
 
 ### Patch Changes

package/dist/cjs/components/ReactionPicker.js

@@ -27,6 +27,7 @@ var _Selector = require("./Selector");
 var _Trigger = require("./Trigger");
 var _RepositionOnUpdate = require("./RepositionOnUpdate");
 var _colors = require("@atlaskit/theme/colors");
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
@@ -156,19 +157,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     settings = _useState10[0],
     setSettings = _useState10[1];
 
-  /**
-   * Custom hook triggers when user clicks outside the reactions picker
-   */
-  (0, _useCloseManager.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
@@ -287,6 +275,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     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.default.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)(["_s7n4nkob _1pra1o8l", wrapperClassName]),
@@ -328,9 +320,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         isListItem: isListItem
       }))
     );
-  }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(PopperWrapper, {
+  }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: _constants.layers.flag()
+  }, /*#__PURE__*/_react.default.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -346,10 +343,13 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     onMoreClick: onSelectMoreClick,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     hoverableReactionPickerSelector: hoverableReactionPicker
-  })))));
+  }))))));
 });
 var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
-  var settings = props.settings,
+  var triggerRef = props.triggerRef,
+    settings = props.settings,
+    isOpen = props.isOpen,
+    onClose = props.onClose,
     children = props.children,
     popperModifiers = props.popperModifiers;
   var _useState11 = (0, _react.useState)(null),
@@ -365,10 +365,21 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     initialFocusRef: null,
     targetRef: popupRef
   });
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  (0, _useCloseManager.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.default.createElement(_popper.Popper, {
     placement: settings.popperPlacement,
-    modifiers: popperModifiers,
-    strategy: "absolute"
+    modifiers: popperModifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,

package/dist/cjs/components/Reactions.js

@@ -26,14 +26,8 @@ var _ufo = require("../ufo");
 var _Reaction = require("./Reaction");
 var _ReactionsDialog = require("./ReactionsDialog");
 var _ReactionPicker = require("./ReactionPicker");
-var _ReactionPickerNew = require("./ReactionPickerNew");
 var _ReactionSummaryView = require("./ReactionSummaryView");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var ReactionPicker = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix') || (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix_jira');
-}, _ReactionPickerNew.ReactionPicker, _ReactionPicker.ReactionPicker);
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
@@ -390,7 +384,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(ReactionPicker, {
+  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/cjs/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zlfl6d{border-bottom:var(--_1wtzbnt)}._10d67vkz>span{min-height:1pc}
+._n7zl4gxu{border-bottom:var(--_1i0gnx0)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -154,9 +154,9 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zlfl6d _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zl4gxu _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
     style: {
-      "--_1wtzbnt": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #EBECF0)"))
+      "--_1i0gnx0": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #EBECF0)"))
     }
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage

package/dist/cjs/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -12,12 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 var _components = require("../../components");
 var _ufo = require("../../ufo");
 var _ReactionPicker = require("../../components/ReactionPicker");
-var _ReactionPickerNew = require("../../components/ReactionPickerNew");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var ReactionPicker = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix') || (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix_jira');
-}, _ReactionPickerNew.ReactionPicker, _ReactionPicker.ReactionPicker);
 /**
  * Reaction Picker component
  */
@@ -49,7 +43,7 @@ var ConnectedReactionPicker = exports.ConnectedReactionPicker = function Connect
   };
   return /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
     experiences: [_ufo.PickerRender]
-  }, /*#__PURE__*/_react.default.createElement(ReactionPicker, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, (0, _extends2.default)({}, props, {
     onSelection: onSelection
   })));
 };

package/dist/cjs/index.js

@@ -33,7 +33,12 @@ Object.defineProperty(exports, "ReactionConsumer", {
     return _store.ReactionConsumer;
   }
 });
-exports.ReactionPicker = void 0;
+Object.defineProperty(exports, "ReactionPicker", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionPicker.ReactionPicker;
+  }
+});
 Object.defineProperty(exports, "ReactionServiceClient", {
   enumerable: true,
   get: function get() {
@@ -68,9 +73,6 @@ Object.defineProperty(exports, "useCloseManager", {
 var _constants = require("./shared/constants");
 var _ufo = require("./ufo");
 var _ReactionPicker = require("./components/ReactionPicker");
-var _ReactionPickerNew = require("./components/ReactionPickerNew");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _client = require("./client");
 var _Reaction = require("./components/Reaction");
 var _Reactions = require("./components/Reactions");
@@ -78,10 +80,6 @@ var _useCloseManager = require("./hooks/useCloseManager");
 var _containers = require("./containers");
 var _store = require("./store");
 var _types = require("./types");
-var ReactionPicker = exports.ReactionPicker = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix') || (0, _platformFeatureFlags.fg)('platform_editor_reactions_picker_fix_jira');
-}, _ReactionPickerNew.ReactionPicker, _ReactionPicker.ReactionPicker);
-
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
 var constants = exports.constants = {

package/dist/es2019/components/ReactionPicker.js

@@ -8,7 +8,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 { useCloseManager } from '../hooks/useCloseManager';
+import { useCloseManagerV2 } from '../hooks/useCloseManager';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { messages } from '../shared/i18n';
@@ -17,6 +17,7 @@ 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';
 const pickerStyle = null;
 const popupWrapperStyle = null;
 const popupStyle = null;
@@ -114,17 +115,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     popperPlacement
   });
 
-  /**
-   * Custom hook triggers when user clicks outside the reactions picker
-   */
-  useCloseManager(wrapperRef, callbackType => {
-    close();
-    onCancel();
-    if (triggerRef && callbackType === 'ESCAPE') {
-      requestAnimationFrame(() => 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
@@ -244,6 +234,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     var _updatePopper$current;
     (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
   }, [settings]);
+  const 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]),
@@ -283,9 +277,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem
-  }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
+  }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
+    zIndex: layers.flag()
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -301,11 +300,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     onMoreClick: onSelectMoreClick,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     hoverableReactionPickerSelector: hoverableReactionPicker
-  })))));
+  }))))));
 });
 export const PopperWrapper = props => {
   const {
+    triggerRef,
     settings,
+    isOpen,
+    onClose,
     children,
     popperModifiers
   } = props;
@@ -320,10 +322,19 @@ export const PopperWrapper = props => {
     initialFocusRef: null,
     targetRef: popupRef
   });
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  useCloseManagerV2(popupRef, triggerRef, callbackType => {
+    onClose();
+    if (popupRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(() => triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus());
+    }
+  }, true, isOpen);
   return /*#__PURE__*/React.createElement(Popper, {
     placement: settings.popperPlacement,
-    modifiers: popperModifiers,
-    strategy: "absolute"
+    modifiers: popperModifiers
   }, ({
     ref,
     style,

package/dist/es2019/components/Reactions.js

@@ -13,14 +13,8 @@ import { ReactionStatus } from '../types';
 import { ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../ufo';
 import { Reaction } from './Reaction';
 import { ReactionsDialog } from './ReactionsDialog';
-import { ReactionPicker as ReactionPickerOld } from './ReactionPicker';
-import { ReactionPicker as ReactionPickerNew } from './ReactionPickerNew';
+import { ReactionPicker } from './ReactionPicker';
 import { ReactionSummaryView } from './ReactionSummaryView';
-import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { fg } from '@atlaskit/platform-feature-flags';
-const ReactionPicker = componentWithCondition(() => {
-  return fg('platform_editor_reactions_picker_fix') || fg('platform_editor_reactions_picker_fix_jira');
-}, ReactionPickerNew, ReactionPickerOld);
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;

package/dist/es2019/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl1l7n{border-bottom:1px solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
+._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -125,7 +125,7 @@ export const ReactionsDialogHeader = ({
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: ax(["_1reo1wug _18m91wug _n7zl1l7n _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
+    className: ax(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(TabList, null, currentReactions.map((reaction, index) => {

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -2,13 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { UfoErrorBoundary } from '../../components';
 import { PickerRender } from '../../ufo';
-import { ReactionPicker as ReactionPickerOld } from '../../components/ReactionPicker';
-import { ReactionPicker as ReactionPickerNew } from '../../components/ReactionPickerNew';
-import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { fg } from '@atlaskit/platform-feature-flags';
-const ReactionPicker = componentWithCondition(() => {
-  return fg('platform_editor_reactions_picker_fix') || fg('platform_editor_reactions_picker_fix_jira');
-}, ReactionPickerNew, ReactionPickerOld);
+import { ReactionPicker } from '../../components/ReactionPicker';
 /**
  * Reaction Picker component
  */

package/dist/es2019/index.js

@@ -1,12 +1,6 @@
 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 { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { fg } from '@atlaskit/platform-feature-flags';
-const ReactionPicker = componentWithCondition(() => {
-  return fg('platform_editor_reactions_picker_fix') || fg('platform_editor_reactions_picker_fix_jira');
-}, ReactionPickerNew, ReactionPickerLegacy);
+import { ReactionPicker } from './components/ReactionPicker';
 export { ReactionServiceClient } from './client';
 export { Reaction } from './components/Reaction';
 export { ReactionPicker };

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 { useCloseManager } from '../hooks/useCloseManager';
+import { useCloseManagerV2 } from '../hooks/useCloseManager';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { messages } from '../shared/i18n';
@@ -21,6 +21,7 @@ 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;
@@ -147,19 +148,6 @@ 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
@@ -278,6 +266,10 @@ 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]),
@@ -319,9 +311,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         isListItem: isListItem
       }))
     );
-  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
+  }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
+    zIndex: layers.flag()
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen,
+    onClose: onClose,
+    triggerRef: triggerRef
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -337,10 +334,13 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     onMoreClick: onSelectMoreClick,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     hoverableReactionPickerSelector: hoverableReactionPicker
-  })))));
+  }))))));
 });
 export var PopperWrapper = function PopperWrapper(props) {
-  var settings = props.settings,
+  var triggerRef = props.triggerRef,
+    settings = props.settings,
+    isOpen = props.isOpen,
+    onClose = props.onClose,
     children = props.children,
     popperModifiers = props.popperModifiers;
   var _useState11 = useState(null),
@@ -356,10 +356,21 @@ 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,
-    strategy: "absolute"
+    modifiers: popperModifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,

package/dist/esm/components/Reactions.js

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

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

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zlfl6d{border-bottom:var(--_1wtzbnt)}._10d67vkz>span{min-height:1pc}
+._n7zl4gxu{border-bottom:var(--_1i0gnx0)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/esm/components/ReactionsDialogHeader.js

@@ -146,9 +146,9 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref3) {
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: ax(["_1reo1wug _18m91wug _n7zlfl6d _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
+    className: ax(["_1reo1wug _18m91wug _n7zl4gxu _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
     style: {
-      "--_1wtzbnt": ix("1px solid ".concat("var(--ds-border, #EBECF0)"))
+      "--_1i0gnx0": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #EBECF0)"))
     }
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage

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

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

package/dist/esm/index.js

@@ -1,12 +1,6 @@
 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 { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { fg } from '@atlaskit/platform-feature-flags';
-var ReactionPicker = componentWithCondition(function () {
-  return fg('platform_editor_reactions_picker_fix') || fg('platform_editor_reactions_picker_fix_jira');
-}, ReactionPickerNew, ReactionPickerLegacy);
+import { ReactionPicker } from './components/ReactionPicker';
 export { ReactionServiceClient } from './client';
 export { Reaction } from './components/Reaction';
 export { ReactionPicker };

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

@@ -72,6 +72,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop to set the strategy of the reaction picker popup
+     */
+    reactionPickerStrategy?: PopperProps<{}>['strategy'];
     /**
      * Optional prop for controlling icon inside Trigger
      */
@@ -98,10 +102,13 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
+    isOpen: boolean;
+    onClose: () => void;
     popperModifiers?: PopperProps<{}>['modifiers'];
     settings: {
         popperPlacement: Placement;
         showFullPicker: boolean;
     };
+    triggerRef: HTMLDivElement | HTMLButtonElement | null;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentName, ExperienceName } from './ufo';
-declare const ReactionPicker: import("react").FC<import("./components/ReactionPickerNew").ReactionPickerProps & import("./components/ReactionPicker").ReactionPickerProps>;
+import { ReactionPicker } from './components/ReactionPicker';
 export { ReactionServiceClient } from './client';
 export { Reaction } from './components/Reaction';
 export { ReactionPicker };

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

@@ -72,6 +72,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop to set the strategy of the reaction picker popup
+     */
+    reactionPickerStrategy?: PopperProps<{}>['strategy'];
     /**
      * Optional prop for controlling icon inside Trigger
      */
@@ -98,10 +102,13 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
+    isOpen: boolean;
+    onClose: () => void;
     popperModifiers?: PopperProps<{}>['modifiers'];
     settings: {
         popperPlacement: Placement;
         showFullPicker: boolean;
     };
+    triggerRef: HTMLDivElement | HTMLButtonElement | null;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

package/dist/types-ts4.5/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentName, ExperienceName } from './ufo';
-declare const ReactionPicker: import("react").FC<import("./components/ReactionPickerNew").ReactionPickerProps & import("./components/ReactionPicker").ReactionPickerProps>;
+import { ReactionPicker } from './components/ReactionPicker';
 export { ReactionServiceClient } from './client';
 export { Reaction } from './components/Reaction';
 export { ReactionPicker };