@atlaskit/reactions 33.7.1 → 33.8.0

package/dist/es2019/components/Reactions.js

@@ -1,4 +1,5 @@
 /* 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';
@@ -6,6 +7,7 @@ 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';
@@ -18,6 +20,8 @@ import { ReactionSummaryView } from './ReactionSummaryView';
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
+const listWrapperStyle = null;
+const listItemStyle = null;
 const reactionPickerStyle = null;
 
 /**
@@ -64,7 +68,34 @@ 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
  */
@@ -277,11 +308,70 @@ 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("div", {
-    "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, /*#__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)
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -313,7 +403,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
+  })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, _extends({
     key: reaction.emojiId,
     reaction: reaction,
     emojiProvider: emojiProvider,
@@ -327,30 +417,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  }))), 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, {
+  }, 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, {
     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 ? /*#__PURE__*/React.createElement("li", {
+  }, isListItem && !fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: ax(["_qtt8glyw"])
   }, renderPressableButton()) : renderPressableButton()));

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

@@ -2,7 +2,6 @@
 ._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,9 +18,11 @@ 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"
+  container: "_kqswh2mm",
+  listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
 };
 var emojiStyle = null;
 var emojiNoReactionStyle = null;
@@ -50,7 +52,9 @@ export var Reaction = function Reaction(_ref) {
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    showSubtleStyle = _ref.showSubtleStyle;
+    showSubtleStyle = _ref.showSubtleStyle,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -145,7 +149,10 @@ export var Reaction = function Reaction(_ref) {
       count: reaction.count
     });
   }
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, isListItem && fg('jfp_a11y_team_comment_actions_semantic') ? {
+    as: 'li',
+    xcss: styles.listContainer
+  } : {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/esm/components/ReactionPicker.js

@@ -1,4 +1,5 @@
 /* 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";
@@ -288,7 +289,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       React.createElement(Box, {
         onMouseEnter: handleTriggerMouseEnter,
         onMouseLeave: handleTriggerMouseLeave
-      }, /*#__PURE__*/React.createElement(Trigger, {
+      }, /*#__PURE__*/React.createElement(Trigger, _extends({
         ariaAttributes: {
           'aria-expanded': isPopupTrayOpen,
           'aria-controls': PICKER_CONTROL_ID
@@ -312,9 +313,10 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
+        reactionPickerTriggerText: reactionPickerTriggerText
+      }, !fg('jfp_a11y_team_comment_actions_semantic') && {
         isListItem: isListItem
-      }))
+      })))
     );
   }), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
     zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.flag()

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

@@ -1,6 +1,10 @@
-._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+
+._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+._19bvze3t{padding-left:var(--ds-space-0,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,4 +1,5 @@
 /* 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";
@@ -8,6 +9,7 @@ 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,6 +22,8 @@ import { ReactionSummaryView } from './ReactionSummaryView';
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
+var listWrapperStyle = null;
+var listItemStyle = null;
 var reactionPickerStyle = null;
 
 /**
@@ -66,81 +70,110 @@ 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 (_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;
+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;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -300,11 +333,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
    * @param emojiId initial emoji id to load dialog with
    */
   var _handleOpenReactionsDialog = function handleOpenReactionsDialog() {
-    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;
+    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;
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     getReactionDetails(emojiId);
@@ -320,11 +353,70 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
+  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("div", {
-    "data-testid": RENDER_REACTIONS_TESTID,
-    className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, /*#__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)
   }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -359,7 +451,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/React.createElement(Reaction, {
+    return /*#__PURE__*/React.createElement(Reaction, _extends({
       key: reaction.emojiId,
       reaction: reaction,
       emojiProvider: emojiProvider,
@@ -373,31 +465,10 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-    });
-  })), 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, {
+    }, 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, {
     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 ? /*#__PURE__*/React.createElement("li", {
+  }, isListItem && !fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: ax(["_qtt8glyw"])
   }, renderPressableButton()) : renderPressableButton()));

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

@@ -23,6 +23,10 @@ export interface ReactionProps {
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    /**
+     * Optional prop to say if the reaction component is in a list
+     */
+    isListItem?: boolean;
     /**
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
@@ -59,4 +63,4 @@ export interface ReactionProps {
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, isListItem, }: ReactionProps) => JSX.Element;