@atlaskit/reactions 33.8.11 → 33.8.13

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/reactions
 
+## 33.8.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 33.8.12
+
+### Patch Changes
+
+- [`2fb6fe3d37cd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fb6fe3d37cd3) -
+  Added appropriate list markup for comment reactions
+
 ## 33.8.11
 
 ### Patch Changes

package/dist/cjs/components/Reaction.js

@@ -21,6 +21,7 @@ var _analytics = require("../analytics");
 var _Counter = require("./Counter");
 var _ReactionParticleEffect = require("./ReactionParticleEffect");
 var _ReactionTooltip = require("./ReactionTooltip");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("../shared/i18n");
 var _utils = require("../shared/utils");
 var _constants = require("../shared/constants");
@@ -155,7 +156,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    as: (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider

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

@@ -1,10 +1,27 @@
-._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+
+._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+._17s9idpf >li{padding-bottom:0}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
 ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
+._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1l0sidpf >li{margin-bottom:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
+._1pyaidpf >li{margin-top:0}
+._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
+._694cidpf >li{margin-right:0}
+._9g0pidpf >li{margin-left:0}
+._ahxuidpf >li{padding-top:0}
+._bapwidpf >li{padding-right:0}
+._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
-._kqswpfqs{position:static}
+._kqswpfqs{position:static}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/cjs/components/Reactions.js

@@ -18,6 +18,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");
@@ -32,6 +33,7 @@ var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
+var listContainerStyles = null;
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -369,7 +371,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : memorizedReactions.map(function (reaction) {
+  })) : (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/_react.default.createElement("ul", {
+    className: (0, _runtime.ax)(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+  }, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -385,7 +389,23 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
+    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      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,

package/dist/es2019/components/Reaction.js

@@ -10,6 +10,7 @@ import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEve
 import { Counter } from './Counter';
 import { ReactionParticleEffect } from './ReactionParticleEffect';
 import { ReactionTooltip } from './ReactionTooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../shared/i18n';
 import { isLeftClick } from '../shared/utils';
 import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
@@ -122,7 +123,8 @@ export const Reaction = ({
     });
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider

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

@@ -1,10 +1,27 @@
-._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+
+._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+._17s9idpf >li{padding-bottom:0}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
 ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
+._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1l0sidpf >li{margin-bottom:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
+._1pyaidpf >li{margin-top:0}
+._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
+._694cidpf >li{margin-right:0}
+._9g0pidpf >li{margin-left:0}
+._ahxuidpf >li{padding-top:0}
+._bapwidpf >li{padding-right:0}
+._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
-._kqswpfqs{position:static}
+._kqswpfqs{position:static}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/es2019/components/Reactions.js

@@ -6,6 +6,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';
@@ -19,6 +20,7 @@ const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
 const reactionPickerStyle = null;
+const listContainerStyles = null;
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -313,7 +315,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
+  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
+    className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+  }, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
     emojiProvider: emojiProvider,
@@ -327,7 +331,21 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
+    key: reaction.emojiId,
+    reaction: reaction,
+    emojiProvider: emojiProvider,
+    onClick: onReactionClick,
+    onMouseEnter: handleReactionMouseEnter,
+    onFocused: handleReactionFocused,
+    flash: flash[reaction.emojiId],
+    showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+    showOpaqueBackground: showOpaqueBackground,
+    allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    isViewOnly: isViewOnly,
+    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+  })))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/esm/components/Reaction.js

@@ -13,6 +13,7 @@ import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEve
 import { Counter } from './Counter';
 import { ReactionParticleEffect } from './ReactionParticleEffect';
 import { ReactionTooltip } from './ReactionTooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../shared/i18n';
 import { isLeftClick } from '../shared/utils';
 import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
@@ -146,7 +147,8 @@ export var Reaction = function Reaction(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: styles.container,
+    as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider

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

@@ -1,10 +1,27 @@
-._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+
+._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+._17s9idpf >li{padding-bottom:0}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
 ._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
 ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
+._1b3sidpf >li{padding-left:0}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1l0sidpf >li{margin-bottom:0}
 ._1n261g80{flex-wrap:wrap}
 ._1n261q9c{flex-wrap:nowrap}
+._1pyaidpf >li{margin-top:0}
+._2hwxidpf{margin-right:0}
 ._4cvr1h6o{align-items:center}
+._694cidpf >li{margin-right:0}
+._9g0pidpf >li{margin-left:0}
+._ahxuidpf >li{padding-top:0}
+._bapwidpf >li{padding-right:0}
+._ca0qidpf{padding-top:0}
 ._kqswh2mm{position:relative}
-._kqswpfqs{position:static}
+._kqswpfqs{position:static}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/esm/components/Reactions.js

@@ -8,6 +8,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';
@@ -21,6 +22,7 @@ var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
+var listContainerStyles = null;
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -358,7 +360,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
     summaryButtonIconAfter: summaryButtonIconAfter,
     summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
-  })) : memorizedReactions.map(function (reaction) {
+  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
+    className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
+  }, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -374,7 +378,23 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
+    return /*#__PURE__*/React.createElement(Reaction, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      handleOpenReactionsDialog: _handleOpenReactionsDialog,
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+    });
+  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import React from 'react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';

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

@@ -35,7 +35,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
     flash?: undefined;
     particleEffectByEmoji?: undefined;
 } | {
-    reactions: import("../../types").ReactionSummary[];
+    reactions: import("../..").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import React from 'react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';

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

@@ -35,7 +35,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
     flash?: undefined;
     particleEffectByEmoji?: undefined;
 } | {
-    reactions: import("../../types").ReactionSummary[];
+    reactions: import("../..").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.8.11",
+	"version": "33.8.13",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,8 +39,8 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/emoji": "^69.10.0",
-		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/motion": "^5.3.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/portal": "^5.2.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/react-ufo": "^5.0.0",
+		"@atlaskit/react-ufo": "^5.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tabs": "^18.3.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -71,7 +71,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.5.0",
-		"@atlassian/a11y-jest-testing": "^0.8.0",
+		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -125,6 +125,9 @@
 		},
 		"platform-a11y-remove-autofocus-prop": {
 			"type": "boolean"
+		},
+		"jfp_a11y_team_comment_actions_semantic": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [