@atlaskit/reactions 25.2.1 → 25.4.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/reactions
 
+## 25.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 25.4.0
+
+### Minor Changes
+
+- [#115405](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115405)
+  [`8f77c2c8c5307`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f77c2c8c5307) -
+  [ux] Adds the isViewOnly prop to the reactions component, making the picker disabled and
+  preventing addition of new reactions
+
+## 25.3.0
+
+### Minor Changes
+
+- [#114320](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114320)
+  [`5ab40880ad189`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ab40880ad189) -
+  [ux] Adds a new showRoundTrigger prop to the ReactionPicker component which is used in Trigger
+  component to display a round hover border around the trigger button.
+
 ## 25.2.1
 
 ### 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 = "25.2.1";
+var packageVersion = "25.4.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -95,7 +95,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
-    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio;
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    _props$showRoundTrigg = props.showRoundTrigger,
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -229,7 +231,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         tooltipContent: settings.isOpen ? null : tooltipContent,
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        showRoundTrigger: showRoundTrigger
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

package/dist/cjs/components/Reactions/Reactions.js

@@ -148,7 +148,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
     ProfileCardWrapper = _ref.ProfileCardWrapper,
     _ref$onlyRenderPicker = _ref.onlyRenderPicker,
-    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker;
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
+    _ref$showRoundTrigger = _ref.showRoundTrigger,
+    showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -364,7 +368,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       }, (0, _react2.jsx)(_showMoreHorizontal.default, {
         label: intl.formatMessage(_i18n.messages.seeWhoReacted)
       })));
-    }))), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
+    }))), !isViewOnly && (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: _styles.reactionPickerStyle,
@@ -381,7 +385,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       miniMode: miniMode,
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      showRoundTrigger: showRoundTrigger
     }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: sortedReactions,

package/dist/cjs/components/Selector/Selector.js

@@ -46,18 +46,12 @@ var separatorStyles = (0, _primitives.xcss)({
 });
 var Reveal = function Reveal(_ref) {
   var children = _ref.children,
-    delay = _ref.delay,
     testId = _ref.testId;
   return (0, _react2.jsx)("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
     ,
     css: _styles.revealStyle
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: delay ? {
-      animationDelay: "".concat(delay, "ms")
-    } : undefined
   }, children);
 };
 

package/dist/cjs/components/Trigger/Trigger.js

@@ -55,6 +55,11 @@ var expandedTriggerStyles = (0, _primitives.xcss)({
 var triggerStylesRefresh = (0, _primitives.xcss)({
   borderRadius: 'border.radius'
 });
+var roundTriggerStyles = (0, _primitives.xcss)({
+  borderRadius: '50%',
+  height: '2rem',
+  width: '2rem'
+});
 var transparentEnabledTriggerStyles = (0, _primitives.xcss)({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -109,7 +114,9 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction;
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showRoundTrigg = props.showRoundTrigger,
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -120,7 +127,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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 = "25.2.1";
+const packageVersion = "25.4.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -78,7 +78,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     emojiPickerSize,
     showOpaqueBackground = false,
     subtleReactionsSummaryAndPicker = false,
-    showAddReactionText = false
+    showAddReactionText = false,
+    showRoundTrigger = false
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -206,7 +207,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     tooltipContent: settings.isOpen ? null : tooltipContent,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
-    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    showRoundTrigger: showRoundTrigger
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

package/dist/es2019/components/Reactions/Reactions.js

@@ -115,7 +115,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   showAddReactionText = false,
   hideDefaultReactions = false,
   ProfileCardWrapper,
-  onlyRenderPicker = false
+  onlyRenderPicker = false,
+  showRoundTrigger = false,
+  isViewOnly = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -316,7 +318,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       xcss: iconStyle
     }, jsx(ShowMoreHorizontalIcon, {
       label: intl.formatMessage(messages.seeWhoReacted)
-    })))))), jsx(ReactionPicker
+    })))))), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,
@@ -333,7 +335,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       miniMode: miniMode,
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      showRoundTrigger: showRoundTrigger
     }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: sortedReactions,

package/dist/es2019/components/Selector/Selector.js

@@ -35,7 +35,6 @@ const separatorStyles = xcss({
 });
 const Reveal = ({
   children,
-  delay,
   testId
 }) => {
   return jsx("div", {
@@ -43,11 +42,6 @@ const Reveal = ({
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
     ,
     css: revealStyle
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: delay ? {
-      animationDelay: `${delay}ms`
-    } : undefined
   }, children);
 };
 

package/dist/es2019/components/Trigger/Trigger.js

@@ -47,6 +47,11 @@ const expandedTriggerStyles = xcss({
 const triggerStylesRefresh = xcss({
   borderRadius: 'border.radius'
 });
+const roundTriggerStyles = xcss({
+  borderRadius: '50%',
+  height: '2rem',
+  width: '2rem'
+});
 const transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -98,7 +103,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     ariaAttributes = {},
     showOpaqueBackground = false,
     showAddReactionText = false,
-    subtleReactionsSummaryAndPicker = false
+    subtleReactionsSummaryAndPicker = false,
+    showRoundTrigger = false
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -110,7 +116,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -88,7 +88,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showAddReactio = props.showAddReactionText,
-    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio;
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    _props$showRoundTrigg = props.showRoundTrigger,
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -222,7 +224,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         tooltipContent: settings.isOpen ? null : tooltipContent,
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
-        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        showRoundTrigger: showRoundTrigger
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

package/dist/esm/components/Reactions/Reactions.js

@@ -135,7 +135,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
     ProfileCardWrapper = _ref.ProfileCardWrapper,
     _ref$onlyRenderPicker = _ref.onlyRenderPicker,
-    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker;
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
+    _ref$showRoundTrigger = _ref.showRoundTrigger,
+    showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -351,7 +355,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }, jsx(ShowMoreHorizontalIcon, {
         label: intl.formatMessage(messages.seeWhoReacted)
       })));
-    }))), jsx(ReactionPicker
+    }))), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,
@@ -368,7 +372,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       miniMode: miniMode,
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      showRoundTrigger: showRoundTrigger
     }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: sortedReactions,

package/dist/esm/components/Selector/Selector.js

@@ -35,18 +35,12 @@ var separatorStyles = xcss({
 });
 var Reveal = function Reveal(_ref) {
   var children = _ref.children,
-    delay = _ref.delay,
     testId = _ref.testId;
   return jsx("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
     ,
     css: revealStyle
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: delay ? {
-      animationDelay: "".concat(delay, "ms")
-    } : undefined
   }, children);
 };
 

package/dist/esm/components/Trigger/Trigger.js

@@ -47,6 +47,11 @@ var expandedTriggerStyles = xcss({
 var triggerStylesRefresh = xcss({
   borderRadius: 'border.radius'
 });
+var roundTriggerStyles = xcss({
+  borderRadius: '50%',
+  height: '2rem',
+  width: '2rem'
+});
 var transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -101,7 +106,9 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction;
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showRoundTrigg = props.showRoundTrigger,
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -112,7 +119,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

@@ -68,6 +68,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for displaying text to add a reaction
      */
     showAddReactionText?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -143,6 +143,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to hide the user reactions and only render the picker
      */
     onlyRenderPicker?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -151,4 +159,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, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -44,6 +44,10 @@ export interface TriggerProps {
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
 import { type ReactionUpdateSuccess } from '../../types/reaction';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'showRoundTrigger' | 'isViewOnly'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

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

@@ -68,6 +68,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for displaying text to add a reaction
      */
     showAddReactionText?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -143,6 +143,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to hide the user reactions and only render the picker
      */
     onlyRenderPicker?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -151,4 +159,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, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -44,6 +44,10 @@ export interface TriggerProps {
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for controlling if the picker hover border will be rounded
+     */
+    showRoundTrigger?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
 import { type ReactionUpdateSuccess } from '../../types/reaction';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'showRoundTrigger' | 'isViewOnly'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "25.2.1",
+	"version": "25.4.1",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-gas-types": "^5.1.0",
-		"@atlaskit/analytics-namespaced-context": "^6.13.0",
+		"@atlaskit/analytics-namespaced-context": "^6.14.0",
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/avatar": "^21.18.0",
 		"@atlaskit/button": "^20.5.0",
@@ -42,13 +42,13 @@
 		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/motion": "^3.0.0",
-		"@atlaskit/platform-feature-flags": "^1.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^6.4.0",
-		"@atlaskit/popup": "1.31.2",
+		"@atlaskit/popup": "1.31.3",
 		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/spinner": "^17.1.0",
 		"@atlaskit/tabs": "^17.2.0",
-		"@atlaskit/theme": "^15.0.0",
+		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",
 		"@atlaskit/ufo": "^0.3.0",