@atlaskit/reactions 33.3.4 → 33.4.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/reactions
 
+## 33.4.1
+
+### Patch Changes
+
+- [`feb2d9020eaf2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/feb2d9020eaf2) -
+  introduce optional popperZIndex of reaction picker for products to config
+
+## 33.4.0
+
+### Minor Changes
+
+- [`8c47e99583a3e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c47e99583a3e) -
+  [ux] Hoverable summary view not compatible with introduced FG, this removes the logic
+  conditionally
+
 ## 33.3.4
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.3.3";
+var packageVersion = "33.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -87,7 +87,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$hoverableReact = props.hoverableReactionPicker,
     hoverableReactionPicker = _props$hoverableReact === void 0 ? false : _props$hoverableReact,
     _props$hoverableReact2 = props.hoverableReactionPickerDelay,
-    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2;
+    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2,
+    reactionPickerPopperZIndex = props.reactionPickerPopperZIndex;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -321,13 +322,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       }))
     );
   }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(_portal.default, {
-    zIndex: _constants.layers.flag()
+    zIndex: (0, _platformFeatureFlags.fg)('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || _constants.layers.flag() : _constants.layers.flag()
   }, /*#__PURE__*/_react.default.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers,
     isOpen: isPopupTrayOpen,
     onClose: onClose,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    zIndex: (0, _platformFeatureFlags.fg)('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || _constants.layers.flag() : _constants.layers.layer()
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? (0, _platformFeatureFlags.fg)('platform_reaction_full_picker_hover') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: additionalStyles.selectorContainer,
     onMouseEnter: handlePopupMouseEnter,
@@ -359,7 +361,8 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     isOpen = props.isOpen,
     onClose = props.onClose,
     children = props.children,
-    popperModifiers = props.popperModifiers;
+    popperModifiers = props.popperModifiers,
+    zIndex = props.zIndex;
   var _useState11 = (0, _react.useState)(null),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     popupRef = _useState12[0],
@@ -396,11 +399,9 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       role: "group",
       "aria-label": formatMessage(_i18n.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
-      ,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
-        zIndex: _constants.layers.layer()
+        zIndex: zIndex
       }, style),
       ref: function ref(node) {
         if (node) {

package/dist/cjs/components/ReactionSummaryView.js

@@ -250,6 +250,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
     },
-    shouldRenderToParent: (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-editor-coll')
+    shouldRenderToParent: !hoverableSummaryView && (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/cjs/components/Reactions.js

@@ -150,7 +150,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     reactionPickerPlacement = _ref.reactionPickerPlacement,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
-    renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf;
+    renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
+    reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -405,6 +406,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     hoverableReactionPicker: hoverableSummaryView,
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex,
     className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "33.3.3";
+const packageVersion = "33.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker.js

@@ -65,7 +65,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerPlacement,
     isListItem = false,
     hoverableReactionPicker = false,
-    hoverableReactionPickerDelay = 0
+    hoverableReactionPickerDelay = 0,
+    reactionPickerPopperZIndex
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
   const [isHoverableReactionPickerEmojiPickerOpen, setIsHoverableReactionPickerEmojiPickerOpen] = useState(false);
@@ -278,13 +279,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem
   }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: layers.flag()
+    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.flag()
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers,
     isOpen: isPopupTrayOpen,
     onClose: onClose,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.layer()
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? fg('platform_reaction_full_picker_hover') ? /*#__PURE__*/React.createElement(Box, {
     xcss: additionalStyles.selectorContainer,
     onMouseEnter: handlePopupMouseEnter,
@@ -317,7 +319,8 @@ export const PopperWrapper = props => {
     isOpen,
     onClose,
     children,
-    popperModifiers
+    popperModifiers,
+    zIndex
   } = props;
   const [popupRef, setPopupRef] = useState(null);
   const {
@@ -352,11 +355,10 @@ export const PopperWrapper = props => {
       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
-      ,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: {
-        zIndex: layers.layer(),
+        zIndex,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ...style
       },
       ref: node => {

package/dist/es2019/components/ReactionSummaryView.js

@@ -212,6 +212,6 @@ export const ReactionSummaryView = ({
       summaryButtonIconAfter: summaryButtonIconAfter,
       summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
     })),
-    shouldRenderToParent: fg('should-render-to-parent-should-be-true-editor-coll')
+    shouldRenderToParent: !hoverableSummaryView && fg('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/es2019/components/Reactions.js

@@ -112,7 +112,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   summaryGetOptimisticImageURL,
   reactionPickerPlacement,
   summaryButtonIconAfter,
-  renderParticleEffectOnSummaryView = false
+  renderParticleEffectOnSummaryView = false,
+  reactionPickerPopperZIndex
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const [summaryViewParticleEffectEmojiId, setSummaryViewParticleEffectEmojiId] = useState(null);
@@ -347,6 +348,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     hoverableReactionPicker: hoverableSummaryView,
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.3.3";
+var packageVersion = "33.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ReactionPicker.js

@@ -78,7 +78,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$hoverableReact = props.hoverableReactionPicker,
     hoverableReactionPicker = _props$hoverableReact === void 0 ? false : _props$hoverableReact,
     _props$hoverableReact2 = props.hoverableReactionPickerDelay,
-    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2;
+    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2,
+    reactionPickerPopperZIndex = props.reactionPickerPopperZIndex;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -312,13 +313,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       }))
     );
   }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: layers.flag()
+    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.flag()
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers,
     isOpen: isPopupTrayOpen,
     onClose: onClose,
-    triggerRef: triggerRef
+    triggerRef: triggerRef,
+    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.layer()
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? fg('platform_reaction_full_picker_hover') ? /*#__PURE__*/React.createElement(Box, {
     xcss: additionalStyles.selectorContainer,
     onMouseEnter: handlePopupMouseEnter,
@@ -350,7 +352,8 @@ export var PopperWrapper = function PopperWrapper(props) {
     isOpen = props.isOpen,
     onClose = props.onClose,
     children = props.children,
-    popperModifiers = props.popperModifiers;
+    popperModifiers = props.popperModifiers,
+    zIndex = props.zIndex;
   var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
     popupRef = _useState12[0],
@@ -387,11 +390,9 @@ export var PopperWrapper = function PopperWrapper(props) {
       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
-      ,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
-        zIndex: layers.layer()
+        zIndex: zIndex
       }, style),
       ref: function ref(node) {
         if (node) {

package/dist/esm/components/ReactionSummaryView.js

@@ -241,6 +241,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
     },
-    shouldRenderToParent: fg('should-render-to-parent-should-be-true-editor-coll')
+    shouldRenderToParent: !hoverableSummaryView && fg('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/esm/components/Reactions.js

@@ -139,7 +139,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     reactionPickerPlacement = _ref.reactionPickerPlacement,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
-    renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf;
+    renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
+    reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -394,6 +395,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     hoverableReactionPicker: hoverableSummaryView,
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

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 zIndex for the reaction picker popper
+     */
+    reactionPickerPopperZIndex?: number;
     /**
      * Optional prop to set the strategy of the reaction picker popup
      */
@@ -110,5 +114,6 @@ export interface PopperWrapperProps {
         showFullPicker: boolean;
     };
     triggerRef: HTMLDivElement | HTMLButtonElement | null;
+    zIndex?: number;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

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

@@ -33,7 +33,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon' | 'reactionPickerPlacement'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon' | 'reactionPickerPlacement' | 'reactionPickerPopperZIndex'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Optional prop for controlling if we can select emojis and display UI via summary view picker
      */
@@ -197,4 +197,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => JSX.Element>;

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
 import { type ReactionUpdateSuccess } from '../../types/reaction';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'isViewOnly' | 'allowSelectFromSummaryView'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'isViewOnly' | 'allowSelectFromSummaryView' | 'reactionPickerPopperZIndex'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Individual id for a reaction
      */

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 zIndex for the reaction picker popper
+     */
+    reactionPickerPopperZIndex?: number;
     /**
      * Optional prop to set the strategy of the reaction picker popup
      */
@@ -110,5 +114,6 @@ export interface PopperWrapperProps {
         showFullPicker: boolean;
     };
     triggerRef: HTMLDivElement | HTMLButtonElement | null;
+    zIndex?: number;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

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

@@ -33,7 +33,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon' | 'reactionPickerPlacement'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon' | 'reactionPickerPlacement' | 'reactionPickerPopperZIndex'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Optional prop for controlling if we can select emojis and display UI via summary view picker
      */
@@ -197,4 +197,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => JSX.Element>;

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
 import { type ReactionUpdateSuccess } from '../../types/reaction';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'isViewOnly' | 'allowSelectFromSummaryView'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'isViewOnly' | 'allowSelectFromSummaryView' | 'reactionPickerPopperZIndex'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Individual id for a reaction
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.3.4",
+	"version": "33.4.1",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
 		"@atlaskit/tabs": "^18.2.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^7.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
+		"@atlaskit/tooltip": "^20.6.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -72,7 +72,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.3.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^13.4.0",
@@ -138,6 +138,9 @@
 		},
 		"platform_reaction_full_picker_hover": {
 			"type": "boolean"
+		},
+		"platform_reactions_custom_popper_zindex": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [