@atlaskit/reactions 33.7.1 → 33.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/reactions
 
+## 33.8.0
+
+### Minor Changes
+
+- [`ad2ff048af406`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad2ff048af406) -
+  Use the isListItem prop to render the reactions and reaction picker as list item
+
 ## 33.7.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
-		{
-			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/popper/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
-		{
-			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/popper/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -62,9 +62,6 @@
 		{
 			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
 		},
-		{
-			"path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/popper/afm-products/tsconfig.json"
 		},

package/dist/cjs/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/cjs/components/Reaction.js

@@ -26,10 +26,12 @@ var _utils = require("../shared/utils");
 var _constants = require("../shared/constants");
 var _ReactionButton = require("./ReactionButton");
 var _StaticReaction = require("./StaticReaction");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
 };
 var emojiStyle = null;
 var emojiNoReactionStyle = null;
@@ -59,7 +61,9 @@ var Reaction = exports.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 = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -154,7 +158,10 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
       count: reaction.count
     });
   }
-  return /*#__PURE__*/React.createElement(_compiled.Box, {
+  return /*#__PURE__*/React.createElement(_compiled.Box, isListItem && (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? {
+    as: 'li',
+    xcss: styles.listContainer
+  } : {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
     emojiId: emojiId,

package/dist/cjs/components/ReactionPicker.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = exports.PopperWrapper = void 0;
 require("./ReactionPicker.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -297,7 +298,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       _react.default.createElement(_compiled.Box, {
         onMouseEnter: handleTriggerMouseEnter,
         onMouseLeave: handleTriggerMouseLeave
-      }, /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
+      }, /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, (0, _extends2.default)({
         ariaAttributes: {
           'aria-expanded': isPopupTrayOpen,
           'aria-controls': PICKER_CONTROL_ID
@@ -321,9 +322,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
+        reactionPickerTriggerText: reactionPickerTriggerText
+      }, !(0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') && {
         isListItem: isListItem
-      }))
+      })))
     );
   }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: (0, _platformFeatureFlags.fg)('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || _constants.layers.flag() : _constants.layers.flag()

package/dist/cjs/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/cjs/components/Reactions.js

@@ -11,6 +11,7 @@ exports.getTooltip = getTooltip;
 exports.ufoExperiences = void 0;
 require("./Reactions.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -18,6 +19,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../analytics");
 var _constants = require("../shared/constants");
 var _i18n = require("../shared/i18n");
@@ -31,6 +33,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
+var listWrapperStyle = null;
+var listItemStyle = null;
 var reactionPickerStyle = null;
 
 /**
@@ -77,81 +81,110 @@ function getTooltip(status, errorMessage, tooltipContent) {
       return !!tooltipContent ? tooltipContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.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 && (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic')) {
+    // with no reactions picker render children inside listitem container
+    if (reactionsLength === 0 && !isShowingDefaultReactions) {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        "data-testid": RENDER_REACTIONS_TESTID,
+        className: (0, _runtime.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.default.createElement("ul", {
+      "data-testid": RENDER_REACTIONS_TESTID,
+      className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": RENDER_REACTIONS_TESTID,
+    className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, children);
+};
 /**
  * Renders list of reactions
  */
-var Reactions = exports.Reactions = /*#__PURE__*/_react.default.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 Reactions = exports.Reactions = /*#__PURE__*/_react.default.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 = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -311,11 +344,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
    * @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);
@@ -331,11 +364,70 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }
     });
   };
+  var renderReactionPicker = function renderReactionPicker() {
+    if (isListItem && memorizedReactions.length > 0 && (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic')) {
+      // render the reaction picker inside li when reactions are present
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: (0, _runtime.ax)(["_qtt8glyw _19pkze3t"])
+      }, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+        emojiProvider: emojiProvider,
+        allowAllEmojis: allowAllEmojis,
+        pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+        disabled: status !== _types.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: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+      emojiProvider: emojiProvider,
+      allowAllEmojis: allowAllEmojis,
+      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+      disabled: status !== _types.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: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": RENDER_REACTIONS_TESTID,
-    className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
   }, /*#__PURE__*/_react.default.createElement(_ReactionSummaryView.ReactionSummaryView, {
@@ -370,7 +462,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
   })) : memorizedReactions.map(function (reaction) {
-    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
+    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, (0, _extends2.default)({
       key: reaction.emojiId,
       reaction: reaction,
       emojiProvider: emojiProvider,
@@ -384,31 +476,10 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-    });
-  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
-    emojiProvider: emojiProvider,
-    allowAllEmojis: allowAllEmojis,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    disabled: status !== _types.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: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
-  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
+    }, (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') && {
+      isListItem: isListItem
+    }));
+  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : renderReactionPicker(), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"
   }, /*#__PURE__*/_react.default.createElement(_ReactionsDialog.ReactionsDialog, {
     selectedEmojiId: selectedEmojiId,

package/dist/cjs/components/Trigger.js

@@ -116,7 +116,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     canAppear: function canAppear() {
       return !showAddReactionText;
     }
-  }, isListItem ? /*#__PURE__*/_react2.default.createElement("li", {
+  }, isListItem && !(0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/_react2.default.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: (0, _runtime.ax)(["_qtt8glyw"])
   }, renderPressableButton()) : renderPressableButton()));

package/dist/es2019/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/es2019/components/Reaction.js

@@ -15,9 +15,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';
 const styles = {
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
 };
 const emojiStyle = null;
 const emojiNoReactionStyle = null;
@@ -41,7 +43,8 @@ export const Reaction = ({
   allowUserDialog,
   handleOpenReactionsDialog,
   isViewOnly = false,
-  showSubtleStyle
+  showSubtleStyle,
+  isListItem = false
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -121,7 +124,10 @@ export const Reaction = ({
       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/es2019/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 "./ReactionPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
@@ -254,7 +255,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(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
@@ -278,9 +279,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(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, {
+  })))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
     zIndex: fg('platform_reactions_custom_popper_zindex') ? reactionPickerPopperZIndex || layers.flag() : layers.flag()
   }, /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,

package/dist/es2019/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}