@atlaskit/reactions 33.8.0 → 33.8.1

package/dist/es2019/components/Reactions.js

@@ -1,5 +1,4 @@
 /* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _extends from "@babel/runtime/helpers/extends";
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -7,7 +6,6 @@ import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -20,8 +18,6 @@ import { ReactionSummaryView } from './ReactionSummaryView';
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
-const listWrapperStyle = null;
-const listItemStyle = null;
 const reactionPickerStyle = null;
 
 /**
@@ -68,34 +64,7 @@ export function getTooltip(status, errorMessage, tooltipContent) {
       return !!tooltipContent ? tooltipContent : /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction);
   }
 }
-const ReactionsWrapper = ({
-  children,
-  noWrap,
-  noRelativeContainer,
-  isListItem = false,
-  reactionsLength = 0,
-  isShowingDefaultReactions = false
-}) => {
-  if (isListItem && fg('jfp_a11y_team_comment_actions_semantic')) {
-    // with no reactions picker render children inside listitem container
-    if (reactionsLength === 0 && !isShowingDefaultReactions) {
-      return /*#__PURE__*/React.createElement("li", {
-        "data-testid": RENDER_REACTIONS_TESTID,
-        className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-      }, children);
-    }
 
-    // with reactions or default reactions present, reactions & picker rendered as listitem inside un-ordered list
-    return /*#__PURE__*/React.createElement("ul", {
-      "data-testid": RENDER_REACTIONS_TESTID,
-      className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-  }, children);
-};
 /**
  * Renders list of reactions
  */
@@ -308,70 +277,11 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
-  const renderReactionPicker = () => {
-    if (isListItem && memorizedReactions.length > 0 && fg('jfp_a11y_team_comment_actions_semantic')) {
-      // render the reaction picker inside li when reactions are present
-      return /*#__PURE__*/React.createElement("li", {
-        className: ax(["_qtt8glyw _19pkze3t"])
-      }, /*#__PURE__*/React.createElement(ReactionPicker, {
-        emojiProvider: emojiProvider,
-        allowAllEmojis: allowAllEmojis,
-        pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-        disabled: status !== ReactionStatus.ready,
-        onSelection: handleOnSelection,
-        onOpen: handlePickerOpen,
-        onCancel: handleOnCancel,
-        onShowMore: handleOnMore,
-        tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
-        emojiPickerSize: emojiPickerSize,
-        miniMode: miniMode,
-        showOpaqueBackground: showOpaqueBackground,
-        showAddReactionText: showAddReactionText,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
-        hoverableReactionPicker: hoverableSummaryView,
-        hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
-        reactionPickerPlacement: reactionPickerPlacement,
-        reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-        className: ax(["_1e0c1o8l _19pk1b66"])
-      }));
-    }
-    return /*#__PURE__*/React.createElement(ReactionPicker, {
-      emojiProvider: emojiProvider,
-      allowAllEmojis: allowAllEmojis,
-      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-      disabled: status !== ReactionStatus.ready,
-      onSelection: handleOnSelection,
-      onOpen: handlePickerOpen,
-      onCancel: handleOnCancel,
-      onShowMore: handleOnMore,
-      tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
-      emojiPickerSize: emojiPickerSize,
-      miniMode: miniMode,
-      showOpaqueBackground: showOpaqueBackground,
-      showAddReactionText: showAddReactionText,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-      reactionPickerTriggerText: reactionPickerTriggerText,
-      isListItem: isListItem,
-      hoverableReactionPicker: hoverableSummaryView,
-      hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
-      reactionPickerPlacement: reactionPickerPlacement,
-      reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-      className: ax(["_1e0c1o8l _19pk1b66"])
-    });
-  };
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
-  }, /*#__PURE__*/React.createElement(ReactionsWrapper, {
-    noRelativeContainer: noRelativeContainer,
-    isListItem: isListItem,
-    reactionsLength: memorizedReactions.length,
-    noWrap: noWrap,
-    isShowingDefaultReactions:
-    // Conditon to determine whether showing the default reacitons
-    !(reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis)
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_REACTIONS_TESTID,
+    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -403,7 +313,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, _extends({
+  })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
     emojiProvider: emojiProvider,
@@ -417,9 +327,30 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  }, fg('jfp_a11y_team_comment_actions_semantic') && {
-    isListItem: isListItem
-  })))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : renderReactionPicker(), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
+  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
+    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"
   }, /*#__PURE__*/React.createElement(ReactionsDialog, {
     selectedEmojiId: selectedEmojiId,

package/dist/es2019/components/Trigger.js

@@ -99,7 +99,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent,
     canAppear: () => !showAddReactionText
-  }, isListItem && !fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("li", {
+  }, isListItem ? /*#__PURE__*/React.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: ax(["_qtt8glyw"])
   }, renderPressableButton()) : renderPressableButton()));

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

@@ -2,6 +2,7 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._8hrz1nam{transform-origin:center center 0}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._kqswh2mm{position:relative}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}

package/dist/esm/components/Reaction.js

@@ -18,11 +18,9 @@ import { isLeftClick } from '../shared/utils';
 import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
 var styles = {
-  container: "_kqswh2mm",
-  listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
+  container: "_kqswh2mm"
 };
 var emojiStyle = null;
 var emojiNoReactionStyle = null;
@@ -52,9 +50,7 @@ export var Reaction = function Reaction(_ref) {
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    showSubtleStyle = _ref.showSubtleStyle,
-    _ref$isListItem = _ref.isListItem,
-    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem;
+    showSubtleStyle = _ref.showSubtleStyle;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -149,10 +145,7 @@ export var Reaction = function Reaction(_ref) {
       count: reaction.count
     });
   }
-  return /*#__PURE__*/React.createElement(Box, isListItem && fg('jfp_a11y_team_comment_actions_semantic') ? {
-    as: 'li',
-    xcss: styles.listContainer
-  } : {
+  return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/esm/components/ReactionPicker.js

@@ -1,5 +1,4 @@
 /* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionPicker.compiled.css";
@@ -12,7 +11,6 @@ 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';
@@ -289,7 +287,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       React.createElement(Box, {
         onMouseEnter: handleTriggerMouseEnter,
         onMouseLeave: handleTriggerMouseLeave
-      }, /*#__PURE__*/React.createElement(Trigger, _extends({
+      }, /*#__PURE__*/React.createElement(Trigger, {
         ariaAttributes: {
           'aria-expanded': isPopupTrayOpen,
           'aria-controls': PICKER_CONTROL_ID
@@ -313,20 +311,19 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText
-      }, !fg('jfp_a11y_team_comment_actions_semantic') && {
+        reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem
-      })))
+      }))
     );
   }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
-    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.flag()
+    zIndex: reactionPickerPopperZIndex || layers.flag()
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
     popperModifiers: popperModifiers,
     isOpen: isPopupTrayOpen,
     onClose: onClose,
     triggerRef: triggerRef,
-    zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.layer()
+    zIndex: reactionPickerPopperZIndex || layers.flag()
   }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
     xcss: additionalStyles.selectorContainer,
     onMouseEnter: handlePopupMouseEnter,

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

@@ -1,10 +1,6 @@
-
-._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
+._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
-._19pk1wng{margin-top:var(--ds-space-negative-050,-4px)!important}
 ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
-._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
 ._1n261g80{flex-wrap:wrap}

package/dist/esm/components/Reactions.js

@@ -1,5 +1,4 @@
 /* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reactions.compiled.css";
@@ -9,7 +8,6 @@ import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -22,8 +20,6 @@ import { ReactionSummaryView } from './ReactionSummaryView';
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
-var listWrapperStyle = null;
-var listItemStyle = null;
 var reactionPickerStyle = null;
 
 /**
@@ -70,110 +66,81 @@ export function getTooltip(status, errorMessage, tooltipContent) {
       return !!tooltipContent ? tooltipContent : /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction);
   }
 }
-var ReactionsWrapper = function ReactionsWrapper(_ref) {
-  var children = _ref.children,
-    noWrap = _ref.noWrap,
-    noRelativeContainer = _ref.noRelativeContainer,
-    _ref$isListItem = _ref.isListItem,
-    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
-    _ref$reactionsLength = _ref.reactionsLength,
-    reactionsLength = _ref$reactionsLength === void 0 ? 0 : _ref$reactionsLength,
-    _ref$isShowingDefault = _ref.isShowingDefaultReactions,
-    isShowingDefaultReactions = _ref$isShowingDefault === void 0 ? false : _ref$isShowingDefault;
-  if (isListItem && fg('jfp_a11y_team_comment_actions_semantic')) {
-    // with no reactions picker render children inside listitem container
-    if (reactionsLength === 0 && !isShowingDefaultReactions) {
-      return /*#__PURE__*/React.createElement("li", {
-        "data-testid": RENDER_REACTIONS_TESTID,
-        className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-      }, children);
-    }
 
-    // with reactions or default reactions present, reactions & picker rendered as listitem inside un-ordered list
-    return /*#__PURE__*/React.createElement("ul", {
-      "data-testid": RENDER_REACTIONS_TESTID,
-      className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
-  }, children);
-};
 /**
  * Renders list of reactions
  */
-export var Reactions = /*#__PURE__*/React.memo(function (_ref2) {
-  var _ref2$flash = _ref2.flash,
-    flash = _ref2$flash === void 0 ? {} : _ref2$flash,
-    _ref2$particleEffectB = _ref2.particleEffectByEmoji,
-    particleEffectByEmoji = _ref2$particleEffectB === void 0 ? {} : _ref2$particleEffectB,
-    status = _ref2.status,
-    errorMessage = _ref2.errorMessage,
-    loadReaction = _ref2.loadReaction,
-    quickReactionEmojis = _ref2.quickReactionEmojis,
-    pickerQuickReactionEmojiIds = _ref2.pickerQuickReactionEmojiIds,
-    _ref2$getReactionDeta = _ref2.getReactionDetails,
-    getReactionDetails = _ref2$getReactionDeta === void 0 ? function () {} : _ref2$getReactionDeta,
-    onSelection = _ref2.onSelection,
-    _ref2$reactions = _ref2.reactions,
-    reactions = _ref2$reactions === void 0 ? [] : _ref2$reactions,
-    emojiProvider = _ref2.emojiProvider,
-    allowAllEmojis = _ref2.allowAllEmojis,
-    onReactionClick = _ref2.onReactionClick,
-    allowUserDialog = _ref2.allowUserDialog,
-    _ref2$onDialogOpenCal = _ref2.onDialogOpenCallback,
-    onDialogOpenCallback = _ref2$onDialogOpenCal === void 0 ? function () {} : _ref2$onDialogOpenCal,
-    _ref2$onDialogCloseCa = _ref2.onDialogCloseCallback,
-    onDialogCloseCallback = _ref2$onDialogCloseCa === void 0 ? function () {} : _ref2$onDialogCloseCa,
-    _ref2$onDialogSelectR = _ref2.onDialogSelectReactionCallback,
-    onDialogSelectReactionCallback = _ref2$onDialogSelectR === void 0 ? function () {} : _ref2$onDialogSelectR,
-    _ref2$onDialogPageCha = _ref2.onDialogPageChangeCallback,
-    onDialogPageChangeCallback = _ref2$onDialogPageCha === void 0 ? function () {} : _ref2$onDialogPageCha,
-    _ref2$emojiPickerSize = _ref2.emojiPickerSize,
-    emojiPickerSize = _ref2$emojiPickerSize === void 0 ? 'medium' : _ref2$emojiPickerSize,
-    _ref2$miniMode = _ref2.miniMode,
-    miniMode = _ref2$miniMode === void 0 ? false : _ref2$miniMode,
-    _ref2$summaryViewEnab = _ref2.summaryViewEnabled,
-    summaryViewEnabled = _ref2$summaryViewEnab === void 0 ? false : _ref2$summaryViewEnab,
-    _ref2$summaryViewThre = _ref2.summaryViewThreshold,
-    summaryViewThreshold = _ref2$summaryViewThre === void 0 ? 3 : _ref2$summaryViewThre,
-    summaryViewPlacement = _ref2.summaryViewPlacement,
-    _ref2$showOpaqueBackg = _ref2.showOpaqueBackground,
-    showOpaqueBackground = _ref2$showOpaqueBackg === void 0 ? false : _ref2$showOpaqueBackg,
-    _ref2$subtleReactions = _ref2.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref2$subtleReactions === void 0 ? false : _ref2$subtleReactions,
-    _ref2$showAddReaction = _ref2.showAddReactionText,
-    showAddReactionText = _ref2$showAddReaction === void 0 ? false : _ref2$showAddReaction,
-    _ref2$hideDefaultReac = _ref2.hideDefaultReactions,
-    hideDefaultReactions = _ref2$hideDefaultReac === void 0 ? false : _ref2$hideDefaultReac,
-    ProfileCardWrapper = _ref2.ProfileCardWrapper,
-    _ref2$onlyRenderPicke = _ref2.onlyRenderPicker,
-    onlyRenderPicker = _ref2$onlyRenderPicke === void 0 ? false : _ref2$onlyRenderPicke,
-    _ref2$isViewOnly = _ref2.isViewOnly,
-    isViewOnly = _ref2$isViewOnly === void 0 ? false : _ref2$isViewOnly,
-    _ref2$noWrap = _ref2.noWrap,
-    noWrap = _ref2$noWrap === void 0 ? false : _ref2$noWrap,
-    _ref2$noRelativeConta = _ref2.noRelativeContainer,
-    noRelativeContainer = _ref2$noRelativeConta === void 0 ? false : _ref2$noRelativeConta,
-    showSubtleDefaultReactions = _ref2.showSubtleDefaultReactions,
-    reactionPickerTriggerTooltipContent = _ref2.reactionPickerTriggerTooltipContent,
-    reactionPickerTriggerIcon = _ref2.reactionPickerTriggerIcon,
-    _ref2$allowSelectFrom = _ref2.allowSelectFromSummaryView,
-    allowSelectFromSummaryView = _ref2$allowSelectFrom === void 0 ? false : _ref2$allowSelectFrom,
-    _ref2$useButtonAlignm = _ref2.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref2$useButtonAlignm === void 0 ? false : _ref2$useButtonAlignm,
-    reactionPickerTriggerText = _ref2.reactionPickerTriggerText,
-    _ref2$hoverableSummar = _ref2.hoverableSummaryView,
-    hoverableSummaryView = _ref2$hoverableSummar === void 0 ? false : _ref2$hoverableSummar,
-    _ref2$isListItem = _ref2.isListItem,
-    isListItem = _ref2$isListItem === void 0 ? false : _ref2$isListItem,
-    summaryGetOptimisticImageURL = _ref2.summaryGetOptimisticImageURL,
-    reactionPickerPlacement = _ref2.reactionPickerPlacement,
-    summaryButtonIconAfter = _ref2.summaryButtonIconAfter,
-    _ref2$renderParticleE = _ref2.renderParticleEffectOnSummaryView,
-    renderParticleEffectOnSummaryView = _ref2$renderParticleE === void 0 ? false : _ref2$renderParticleE,
-    reactionPickerPopperZIndex = _ref2.reactionPickerPopperZIndex;
+export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
+    status = _ref.status,
+    errorMessage = _ref.errorMessage,
+    loadReaction = _ref.loadReaction,
+    quickReactionEmojis = _ref.quickReactionEmojis,
+    pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
+    _ref$getReactionDetai = _ref.getReactionDetails,
+    getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
+    onSelection = _ref.onSelection,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    emojiProvider = _ref.emojiProvider,
+    allowAllEmojis = _ref.allowAllEmojis,
+    onReactionClick = _ref.onReactionClick,
+    allowUserDialog = _ref.allowUserDialog,
+    _ref$onDialogOpenCall = _ref.onDialogOpenCallback,
+    onDialogOpenCallback = _ref$onDialogOpenCall === void 0 ? function () {} : _ref$onDialogOpenCall,
+    _ref$onDialogCloseCal = _ref.onDialogCloseCallback,
+    onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
+    _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
+    onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
+    _ref$onDialogPageChan = _ref.onDialogPageChangeCallback,
+    onDialogPageChangeCallback = _ref$onDialogPageChan === void 0 ? function () {} : _ref$onDialogPageChan,
+    _ref$emojiPickerSize = _ref.emojiPickerSize,
+    emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+    _ref$miniMode = _ref.miniMode,
+    miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
+    _ref$summaryViewEnabl = _ref.summaryViewEnabled,
+    summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
+    _ref$summaryViewThres = _ref.summaryViewThreshold,
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
+    summaryViewPlacement = _ref.summaryViewPlacement,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    _ref$showAddReactionT = _ref.showAddReactionText,
+    showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
+    _ref$hideDefaultReact = _ref.hideDefaultReactions,
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
+    ProfileCardWrapper = _ref.ProfileCardWrapper,
+    _ref$onlyRenderPicker = _ref.onlyRenderPicker,
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$noRelativeContai = _ref.noRelativeContainer,
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
+    reactionPickerTriggerTooltipContent = _ref.reactionPickerTriggerTooltipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
+    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    _ref$hoverableSummary = _ref.hoverableSummaryView,
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
+    summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
+    reactionPickerPlacement = _ref.reactionPickerPlacement,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter,
+    _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
+    renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
+    reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -333,11 +300,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref2) {
    * @param emojiId initial emoji id to load dialog with
    */
   var _handleOpenReactionsDialog = function handleOpenReactionsDialog() {
-    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref3$emojiId = _ref3.emojiId,
-      emojiId = _ref3$emojiId === void 0 ? sortedReactions[0].emojiId : _ref3$emojiId,
-      _ref3$source = _ref3.source,
-      source = _ref3$source === void 0 ? 'endOfPageReactions' : _ref3$source;
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$emojiId = _ref2.emojiId,
+      emojiId = _ref2$emojiId === void 0 ? sortedReactions[0].emojiId : _ref2$emojiId,
+      _ref2$source = _ref2.source,
+      source = _ref2$source === void 0 ? 'endOfPageReactions' : _ref2$source;
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     getReactionDetails(emojiId);
@@ -353,70 +320,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref2) {
       }
     });
   };
-  var renderReactionPicker = function renderReactionPicker() {
-    if (isListItem && memorizedReactions.length > 0 && fg('jfp_a11y_team_comment_actions_semantic')) {
-      // render the reaction picker inside li when reactions are present
-      return /*#__PURE__*/React.createElement("li", {
-        className: ax(["_qtt8glyw _19pkze3t"])
-      }, /*#__PURE__*/React.createElement(ReactionPicker, {
-        emojiProvider: emojiProvider,
-        allowAllEmojis: allowAllEmojis,
-        pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-        disabled: status !== ReactionStatus.ready,
-        onSelection: handleOnSelection,
-        onOpen: handlePickerOpen,
-        onCancel: handleOnCancel,
-        onShowMore: handleOnMore,
-        tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
-        emojiPickerSize: emojiPickerSize,
-        miniMode: miniMode,
-        showOpaqueBackground: showOpaqueBackground,
-        showAddReactionText: showAddReactionText,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
-        hoverableReactionPicker: hoverableSummaryView,
-        hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
-        reactionPickerPlacement: reactionPickerPlacement,
-        reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-        className: ax(["_1e0c1o8l _19pk1b66"])
-      }));
-    }
-    return /*#__PURE__*/React.createElement(ReactionPicker, {
-      emojiProvider: emojiProvider,
-      allowAllEmojis: allowAllEmojis,
-      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-      disabled: status !== ReactionStatus.ready,
-      onSelection: handleOnSelection,
-      onOpen: handlePickerOpen,
-      onCancel: handleOnCancel,
-      onShowMore: handleOnMore,
-      tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
-      emojiPickerSize: emojiPickerSize,
-      miniMode: miniMode,
-      showOpaqueBackground: showOpaqueBackground,
-      showAddReactionText: showAddReactionText,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-      reactionPickerTriggerText: reactionPickerTriggerText,
-      isListItem: isListItem,
-      hoverableReactionPicker: hoverableSummaryView,
-      hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
-      reactionPickerPlacement: reactionPickerPlacement,
-      reactionPickerPopperZIndex: reactionPickerPopperZIndex,
-      className: ax(["_1e0c1o8l _19pk1b66"])
-    });
-  };
   return /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions"
-  }, /*#__PURE__*/React.createElement(ReactionsWrapper, {
-    noRelativeContainer: noRelativeContainer,
-    isListItem: isListItem,
-    reactionsLength: memorizedReactions.length,
-    noWrap: noWrap,
-    isShowingDefaultReactions:
-    // Conditon to determine whether showing the default reacitons
-    !(reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis)
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_REACTIONS_TESTID,
+    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -451,7 +359,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref2) {
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/React.createElement(Reaction, _extends({
+    return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
       emojiProvider: emojiProvider,
@@ -465,10 +373,31 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref2) {
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-    }, fg('jfp_a11y_team_comment_actions_semantic') && {
-      isListItem: isListItem
-    }));
-  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : renderReactionPicker(), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
+    });
+  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
+    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"
   }, /*#__PURE__*/React.createElement(ReactionsDialog, {
     selectedEmojiId: selectedEmojiId,

package/dist/esm/components/Trigger.js

@@ -109,7 +109,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     canAppear: function canAppear() {
       return !showAddReactionText;
     }
-  }, isListItem && !fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("li", {
+  }, isListItem ? /*#__PURE__*/React.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: ax(["_qtt8glyw"])
   }, renderPressableButton()) : renderPressableButton()));