@atlaskit/reactions 31.6.2 → 31.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/reactions
 
+## 31.7.0
+
+### Minor Changes
+
+- [#150353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150353)
+  [`fb0f2127ccd01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb0f2127ccd01) -
+  [ux] Removes reactions trigger tooltip when the reaction trigger already has text
+- [#152335](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152335)
+  [`e863365b1e932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e863365b1e932) -
+  Pass reactionPickerPlacement prop into Reactions component to allow for differing aligment of
+  reaction picker popup
+
+## 31.6.3
+
+### Patch Changes
+
+- [#151050](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/151050)
+  [`bed009e6ccbf2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bed009e6ccbf2) -
+  A11y fix to allow screenreaders to read out the current emoji counts
+
 ## 31.6.2
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "31.6.2";
+var packageVersion = "31.7.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction.js

@@ -146,6 +146,15 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));
+  var reactionAriaLabel = intl.formatMessage(_i18n.messages.reactWithEmoji, {
+    emoji: emojiName
+  });
+  if (reaction.count) {
+    reactionAriaLabel = intl.formatMessage(_i18n.messages.reactWithEmojiAndCount, {
+      emoji: emojiName,
+      count: reaction.count
+    });
+  }
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
@@ -168,9 +177,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }, emojiAndCount) : /*#__PURE__*/React.createElement(_ReactionButton.ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
-      emoji: emojiName
-    }),
+    ariaLabel: reactionAriaLabel,
     ariaPressed: reacted,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,

package/dist/cjs/components/Reactions.js

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

package/dist/cjs/components/Trigger.js

@@ -117,7 +117,10 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     testId: RENDER_TRIGGER_CONTAINER_TESTID
   }, /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent
+    content: tooltipContent,
+    canAppear: function canAppear() {
+      return !showAddReactionText;
+    }
   }, isListItem ? /*#__PURE__*/_react2.default.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: (0, _runtime.ax)(["_qtt8glyw"])

package/dist/cjs/shared/i18n.js

@@ -31,6 +31,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'React with {emoji} emoji',
     description: 'Aria label on reaction button'
   },
+  reactWithEmojiAndCount: {
+    id: 'fabric.reactions.reactwithemojiandcount',
+    defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
+    description: 'Aria label on reaction button'
+  },
   summary: {
     id: 'fabric.reactions.summary',
     defaultMessage: 'View all user reactions',

package/dist/es2019/analytics/index.js

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

package/dist/es2019/components/Reaction.js

@@ -112,6 +112,15 @@ export const Reaction = ({
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));
+  let reactionAriaLabel = intl.formatMessage(messages.reactWithEmoji, {
+    emoji: emojiName
+  });
+  if (reaction.count) {
+    reactionAriaLabel = intl.formatMessage(messages.reactWithEmojiAndCount, {
+      emoji: emojiName,
+      count: reaction.count
+    });
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
@@ -134,9 +143,7 @@ export const Reaction = ({
   }, emojiAndCount) : /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
-      emoji: emojiName
-    }),
+    ariaLabel: reactionAriaLabel,
     ariaPressed: reacted,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,

package/dist/es2019/components/Reactions.js

@@ -108,7 +108,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   useButtonAlignmentStyling = false,
   reactionPickerTriggerText,
   hoverableSummaryView = false,
-  isListItem = false
+  isListItem = false,
+  reactionPickerPlacement
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -313,6 +314,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     isListItem: isListItem,
     hoverableReactionPicker: hoverableSummaryView,
     hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
+    reactionPickerPlacement: reactionPickerPlacement,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

package/dist/es2019/components/Trigger.js

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

package/dist/es2019/shared/i18n.js

@@ -25,6 +25,11 @@ export const messages = defineMessages({
     defaultMessage: 'React with {emoji} emoji',
     description: 'Aria label on reaction button'
   },
+  reactWithEmojiAndCount: {
+    id: 'fabric.reactions.reactwithemojiandcount',
+    defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
+    description: 'Aria label on reaction button'
+  },
   summary: {
     id: 'fabric.reactions.summary',
     defaultMessage: 'View all user reactions',

package/dist/esm/analytics/index.js

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

package/dist/esm/components/Reaction.js

@@ -136,6 +136,15 @@ export var Reaction = function Reaction(_ref) {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));
+  var reactionAriaLabel = intl.formatMessage(messages.reactWithEmoji, {
+    emoji: emojiName
+  });
+  if (reaction.count) {
+    reactionAriaLabel = intl.formatMessage(messages.reactWithEmojiAndCount, {
+      emoji: emojiName,
+      count: reaction.count
+    });
+  }
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.container
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
@@ -158,9 +167,7 @@ export var Reaction = function Reaction(_ref) {
   }, emojiAndCount) : /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
-      emoji: emojiName
-    }),
+    ariaLabel: reactionAriaLabel,
     ariaPressed: reacted,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,

package/dist/esm/components/Reactions.js

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

package/dist/esm/components/Trigger.js

@@ -110,7 +110,10 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     testId: RENDER_TRIGGER_CONTAINER_TESTID
   }, /*#__PURE__*/React.createElement(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent
+    content: tooltipContent,
+    canAppear: function canAppear() {
+      return !showAddReactionText;
+    }
   }, isListItem ? /*#__PURE__*/React.createElement("li", {
     "data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
     className: ax(["_qtt8glyw"])

package/dist/esm/shared/i18n.js

@@ -25,6 +25,11 @@ export var messages = defineMessages({
     defaultMessage: 'React with {emoji} emoji',
     description: 'Aria label on reaction button'
   },
+  reactWithEmojiAndCount: {
+    id: 'fabric.reactions.reactwithemojiandcount',
+    defaultMessage: '{count, plural, one {# {emoji} emoji} other {# {emoji} emojis}}. React with {emoji} emoji',
+    description: 'Aria label on reaction button'
+  },
   summary: {
     id: 'fabric.reactions.summary',
     defaultMessage: 'View all user reactions',

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

@@ -169,6 +169,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to say if the reactions component is in a list
      */
     isListItem?: boolean;
+    /**
+     *  Optional prop to change the placement of the reaction picker popup
+     */
+    reactionPickerPlacement?: Placement;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -181,4 +185,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, reactionPickerPlacement, }: ReactionsProps) => JSX.Element>;

package/dist/types/shared/i18n.d.ts

@@ -24,6 +24,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    reactWithEmojiAndCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     summary: {
         id: string;
         defaultMessage: string;

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

@@ -169,6 +169,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to say if the reactions component is in a list
      */
     isListItem?: boolean;
+    /**
+     *  Optional prop to change the placement of the reaction picker popup
+     */
+    reactionPickerPlacement?: Placement;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -181,4 +185,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, reactionPickerPlacement, }: ReactionsProps) => JSX.Element>;

package/dist/types-ts4.5/shared/i18n.d.ts

@@ -24,6 +24,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    reactWithEmojiAndCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     summary: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.6.2",
+	"version": "31.7.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.1.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.7.0",
+		"@atlaskit/icon": "^25.8.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/primitives": "^14.7.0",
-		"@atlaskit/react-ufo": "^3.9.0",
+		"@atlaskit/react-ufo": "^3.10.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",