@atlaskit/reactions 31.6.3 → 31.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/reactions
 
+## 31.8.0
+
+### Minor Changes
+
+- [#152134](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152134)
+  [`9d7c343ded23e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d7c343ded23e) -
+  [ux] Adds an optional side picker emoji icon to the reaction summary button
+
+## 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

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.3";
+var packageVersion = "31.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,6 +1,10 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
 ._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)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/cjs/components/ReactionSummaryButton.js

@@ -25,7 +25,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 /**
  * Test id for summary reaction wrapper button
@@ -52,7 +53,8 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -107,5 +109,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     value: totalReactionsCount,
     useDarkerFont: useButtonAlignmentStyling,
     useUpdatedStyles: useButtonAlignmentStyling
-  })));
+  }), summaryButtonIconAfter && /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.summaryButtonIconAfter
+  }, summaryButtonIconAfter)));
 });

package/dist/cjs/components/ReactionSummaryView.js

@@ -64,7 +64,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     _ref$hoverableSummary = _ref.hoverableSummaryView,
     hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
     _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
-    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var _useDelayedState = (0, _useDelayedState3.useDelayedState)(false, hoverableSummaryViewDelay),
     _useDelayedState2 = (0, _slicedToArray2.default)(_useDelayedState, 2),
     isSummaryPopupOpen = _useDelayedState2[0],
@@ -216,7 +217,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         onMouseLeave: handleButtonMouseLeave,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useButtonAlignmentStyling: useButtonAlignmentStyling
+        useButtonAlignmentStyling: useButtonAlignmentStyling,
+        summaryButtonIconAfter: summaryButtonIconAfter
       }));
     }
   });

package/dist/cjs/components/Reactions.js

@@ -146,7 +146,9 @@ 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,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -329,7 +331,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
     reactionPickerTriggerText: reactionPickerTriggerText,
-    hoverableSummaryView: hoverableSummaryView
+    hoverableSummaryView: hoverableSummaryView,
+    summaryButtonIconAfter: summaryButtonIconAfter
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
       key: reaction.emojiId,
@@ -366,6 +369,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/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.3";
+const packageVersion = "31.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,6 +1,10 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
 ._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)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/components/ReactionSummaryButton.js

@@ -14,7 +14,8 @@ import { cx } from '@compiled/react';
 const styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 /**
  * Test id for summary reaction wrapper button
@@ -36,7 +37,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   subtleReactionsSummaryAndPicker = false,
   useButtonAlignmentStyling = false,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  summaryButtonIconAfter
 }, ref) => {
   const intl = useIntl();
 
@@ -86,5 +88,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     value: totalReactionsCount,
     useDarkerFont: useButtonAlignmentStyling,
     useUpdatedStyles: useButtonAlignmentStyling
-  })));
+  }), summaryButtonIconAfter && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.summaryButtonIconAfter
+  }, summaryButtonIconAfter)));
 });

package/dist/es2019/components/ReactionSummaryView.js

@@ -44,7 +44,8 @@ export const ReactionSummaryView = ({
   useButtonAlignmentStyling,
   reactionPickerTriggerText,
   hoverableSummaryView = false,
-  hoverableSummaryViewDelay = 300
+  hoverableSummaryViewDelay = 300,
+  summaryButtonIconAfter
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useDelayedState(false, hoverableSummaryViewDelay);
   const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
@@ -177,7 +178,8 @@ export const ReactionSummaryView = ({
       onMouseLeave: handleButtonMouseLeave,
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-      useButtonAlignmentStyling: useButtonAlignmentStyling
+      useButtonAlignmentStyling: useButtonAlignmentStyling,
+      summaryButtonIconAfter: summaryButtonIconAfter
     }))
   });
 };

package/dist/es2019/components/Reactions.js

@@ -108,7 +108,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   useButtonAlignmentStyling = false,
   reactionPickerTriggerText,
   hoverableSummaryView = false,
-  isListItem = false
+  isListItem = false,
+  reactionPickerPlacement,
+  summaryButtonIconAfter
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -278,7 +280,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
     reactionPickerTriggerText: reactionPickerTriggerText,
-    hoverableSummaryView: hoverableSummaryView
+    hoverableSummaryView: hoverableSummaryView,
+    summaryButtonIconAfter: summaryButtonIconAfter
   })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -313,6 +316,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/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.3";
+var packageVersion = "31.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,6 +1,10 @@
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
 ._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)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/esm/components/ReactionSummaryButton.js

@@ -15,7 +15,8 @@ import { cx } from '@compiled/react';
 var styles = {
   emoji: "_8hrz1nam",
   button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
-  container: "_kqswh2mm"
+  container: "_kqswh2mm",
+  summaryButtonIconAfter: "_u5f3u2gc _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 /**
  * Test id for summary reaction wrapper button
@@ -42,7 +43,8 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var intl = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -97,5 +99,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     value: totalReactionsCount,
     useDarkerFont: useButtonAlignmentStyling,
     useUpdatedStyles: useButtonAlignmentStyling
-  })));
+  }), summaryButtonIconAfter && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.summaryButtonIconAfter
+  }, summaryButtonIconAfter)));
 });

package/dist/esm/components/ReactionSummaryView.js

@@ -54,7 +54,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     _ref$hoverableSummary = _ref.hoverableSummaryView,
     hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
     _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
-    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var _useDelayedState = useDelayedState(false, hoverableSummaryViewDelay),
     _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
     isSummaryPopupOpen = _useDelayedState2[0],
@@ -206,7 +207,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         onMouseLeave: handleButtonMouseLeave,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        useButtonAlignmentStyling: useButtonAlignmentStyling
+        useButtonAlignmentStyling: useButtonAlignmentStyling,
+        summaryButtonIconAfter: summaryButtonIconAfter
       }));
     }
   });

package/dist/esm/components/Reactions.js

@@ -134,7 +134,9 @@ 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,
+    summaryButtonIconAfter = _ref.summaryButtonIconAfter;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -317,7 +319,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
     reactionPickerTriggerText: reactionPickerTriggerText,
-    hoverableSummaryView: hoverableSummaryView
+    hoverableSummaryView: hoverableSummaryView,
+    summaryButtonIconAfter: summaryButtonIconAfter
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
@@ -354,6 +357,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/types/components/ReactionSummaryButton.d.ts

@@ -25,6 +25,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional event handler when mouse leaves the button
      */
     onMouseLeave?: () => void;
+    /**
+     * Optional prop to add an icon to the end of the summary button
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -61,6 +61,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to set a delay for the summary view when it opens/closes on hover
      */
     hoverableSummaryViewDelay?: number;
+    /**
+     * Optional prop to control if the side picker is shown
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, summaryButtonIconAfter, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -169,6 +169,14 @@ 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;
+    /**
+     * Optional prop to add an icon to the end of the summary button
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -181,4 +189,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, summaryButtonIconAfter, }: ReactionsProps) => JSX.Element>;

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

@@ -25,6 +25,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional event handler when mouse leaves the button
      */
     onMouseLeave?: () => void;
+    /**
+     * Optional prop to add an icon to the end of the summary button
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -61,6 +61,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to set a delay for the summary view when it opens/closes on hover
      */
     hoverableSummaryViewDelay?: number;
+    /**
+     * Optional prop to control if the side picker is shown
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, summaryButtonIconAfter, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -169,6 +169,14 @@ 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;
+    /**
+     * Optional prop to add an icon to the end of the summary button
+     */
+    summaryButtonIconAfter?: React.ReactNode;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -181,4 +189,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, summaryButtonIconAfter, }: ReactionsProps) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.6.3",
+	"version": "31.8.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",