@atlaskit/reactions 25.1.0 → 25.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 25.2.0
+
+### Minor Changes
+
+- [#113141](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113141)
+  [`2b9b00172281b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b9b00172281b) -
+  Added new 'onlyRenderPicker' property to hide user reactions and only render picker
+
 ## 25.1.0
 
 ### Minor 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.1.0";
+var packageVersion = "25.2.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -146,7 +146,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
     _ref$hideDefaultReact = _ref.hideDefaultReactions,
     hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
-    ProfileCardWrapper = _ref.ProfileCardWrapper;
+    ProfileCardWrapper = _ref.ProfileCardWrapper,
+    _ref$onlyRenderPicker = _ref.onlyRenderPicker,
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -316,7 +318,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     (0, _react2.jsx)("div", {
       css: _styles.wrapperStyle,
       "data-testid": RENDER_REACTIONS_TESTID
-    }, shouldShowSummaryView ? (0, _react2.jsx)("div", {
+    }, !onlyRenderPicker && (shouldShowSummaryView ? (0, _react2.jsx)("div", {
       "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
     }, (0, _react2.jsx)(_ReactionSummary.ReactionSummaryView, {
       reactions: sortedReactions,
@@ -343,7 +345,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground
       });
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
+    })), !onlyRenderPicker && allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
       xcss: dialogEntrypointButtonStyle
     }, (0, _react2.jsx)(_primitives.Pressable, {
       backgroundColor: "color.background.neutral.subtle",

package/dist/cjs/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "ReactionServiceClient", {
     return _client.ReactionServiceClient;
   }
 });
+Object.defineProperty(exports, "ReactionStatus", {
+  enumerable: true,
+  get: function get() {
+    return _types.ReactionStatus;
+  }
+});
 Object.defineProperty(exports, "ReactionUpdateType", {
   enumerable: true,
   get: function get() {

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

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

@@ -114,7 +114,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   subtleReactionsSummaryAndPicker = false,
   showAddReactionText = false,
   hideDefaultReactions = false,
-  ProfileCardWrapper
+  ProfileCardWrapper,
+  onlyRenderPicker = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -275,7 +276,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     jsx("div", {
       css: wrapperStyle,
       "data-testid": RENDER_REACTIONS_TESTID
-    }, shouldShowSummaryView ? jsx("div", {
+    }, !onlyRenderPicker && (shouldShowSummaryView ? jsx("div", {
       "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
     }, jsx(ReactionSummaryView, {
       reactions: sortedReactions,
@@ -300,7 +301,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       flash: flash[reaction.emojiId],
       showParticleEffect: particleEffectByEmoji[reaction.emojiId],
       showOpaqueBackground: showOpaqueBackground
-    })), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
+    }))), !onlyRenderPicker && allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
       xcss: dialogEntrypointButtonStyle
     }, jsx(Pressable, {
       backgroundColor: "color.background.neutral.subtle",

package/dist/es2019/index.js

@@ -6,7 +6,7 @@ export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
-export { ReactionUpdateType } from './types';
+export { ReactionUpdateType, ReactionStatus } from './types';
 export const constants = {
   DefaultReactions,
   DefaultReactionsByShortName,

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

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

@@ -133,7 +133,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
     _ref$hideDefaultReact = _ref.hideDefaultReactions,
     hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
-    ProfileCardWrapper = _ref.ProfileCardWrapper;
+    ProfileCardWrapper = _ref.ProfileCardWrapper,
+    _ref$onlyRenderPicker = _ref.onlyRenderPicker,
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -303,7 +305,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     jsx("div", {
       css: wrapperStyle,
       "data-testid": RENDER_REACTIONS_TESTID
-    }, shouldShowSummaryView ? jsx("div", {
+    }, !onlyRenderPicker && (shouldShowSummaryView ? jsx("div", {
       "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
     }, jsx(ReactionSummaryView, {
       reactions: sortedReactions,
@@ -330,7 +332,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground
       });
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
+    })), !onlyRenderPicker && allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
       xcss: dialogEntrypointButtonStyle
     }, jsx(Pressable, {
       backgroundColor: "color.background.neutral.subtle",

package/dist/esm/index.js

@@ -6,7 +6,7 @@ export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
-export { ReactionUpdateType } from './types';
+export { ReactionUpdateType, ReactionStatus } from './types';
 export var constants = {
   DefaultReactions: DefaultReactions,
   DefaultReactionsByShortName: DefaultReactionsByShortName,

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

@@ -139,6 +139,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for rendering a profile card wrapper in the Reactions Dialog
      */
     ProfileCardWrapper?: ProfileCardWrapper;
+    /**
+     * Optional prop to hide the user reactions and only render the picker
+     */
+    onlyRenderPicker?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -147,4 +151,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, }: 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, }: ReactionsProps) => jsx.JSX.Element>;

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'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, } from './types';
-export { ReactionUpdateType } from './types';
+export { ReactionUpdateType, ReactionStatus } from './types';
 export declare const constants: {
     DefaultReactions: import("@atlaskit/emoji").EmojiId[];
     DefaultReactionsByShortName: Map<string, import("@atlaskit/emoji").EmojiId>;

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

@@ -139,6 +139,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for rendering a profile card wrapper in the Reactions Dialog
      */
     ProfileCardWrapper?: ProfileCardWrapper;
+    /**
+     * Optional prop to hide the user reactions and only render the picker
+     */
+    onlyRenderPicker?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -147,4 +151,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, }: 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, }: ReactionsProps) => jsx.JSX.Element>;

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'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/dist/types-ts4.5/index.d.ts

@@ -4,7 +4,7 @@ export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, } from './types';
-export { ReactionUpdateType } from './types';
+export { ReactionUpdateType, ReactionStatus } from './types';
 export declare const constants: {
     DefaultReactions: import("@atlaskit/emoji").EmojiId[];
     DefaultReactionsByShortName: Map<string, import("@atlaskit/emoji").EmojiId>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "25.1.0",
+	"version": "25.2.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/avatar": "^21.18.0",
 		"@atlaskit/button": "^20.5.0",
-		"@atlaskit/emoji": "^67.13.0",
+		"@atlaskit/emoji": "^67.14.0",
 		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.8.0",
+		"@atlaskit/icon": "^23.9.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/motion": "^2.0.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",