@atlaskit/reactions 24.1.0 → 24.2.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 24.2.0
+
+### Minor Changes
+
+- [#108078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108078)
+  [`d7e3f8c56ff08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7e3f8c56ff08) -
+  [ux] Adds the profileCardWrapper prop which adds an on-hover interaction to the Avatar picture and
+  shows the user's profile card
+
 ## 24.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 = "24.1.0";
+var packageVersion = "24.2.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionDialog/ReactionView.js

@@ -26,10 +26,14 @@ var _styles = require("./styles");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var userDescriptionStyle = (0, _primitives.xcss)({
+  marginLeft: 'space.200'
+});
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
-    reaction = _ref.reaction;
+    reaction = _ref.reaction,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     emojiShortName = _useState2[0],
@@ -85,7 +89,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: 24
     })), alphabeticalNames.length === 0 ?
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
@@ -104,10 +108,22 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         (0, _react2.jsx)("li", {
           css: _styles.userStyle,
           key: user.id
+        }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(ProfileCardWrapper, {
+          userId: user.accountId,
+          isAnonymous: false,
+          canViewProfile: true,
+          position: "left-start"
         }, (0, _react2.jsx)(_Avatar.default, {
           size: "large",
-          src: profile
-        }), (0, _react2.jsx)("span", null, user.displayName))
+          src: profile,
+          testId: "profile"
+        })) : (0, _react2.jsx)(_Avatar.default, {
+          size: "large",
+          src: profile,
+          testId: "profile"
+        }), (0, _react2.jsx)(_primitives.Flex, {
+          xcss: userDescriptionStyle
+        }, (0, _react2.jsx)("div", null, user.displayName)))
       );
     })))
   );

package/dist/cjs/components/ReactionDialog/ReactionsDialog.js

@@ -110,7 +110,8 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     _ref2$handleSelectRea = _ref2.handleSelectReaction,
     handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
     _ref2$handlePaginatio = _ref2.handlePaginationChange,
-    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio;
+    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
+    ProfileCardWrapper = _ref2.ProfileCardWrapper;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     elementToScroll = _useState2[0],
@@ -251,7 +252,8 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2)
     initialEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction
+    onReactionChanged: handleSelectReaction,
+    ProfileCardWrapper: ProfileCardWrapper
   }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog

package/dist/cjs/components/ReactionDialog/ReactionsList.js

@@ -32,7 +32,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     initialEmojiId = _ref.initialEmojiId,
     emojiProvider = _ref.emojiProvider,
-    onReactionChanged = _ref.onReactionChanged;
+    onReactionChanged = _ref.onReactionChanged,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(function () {
       // Calculate this only on initialize the List of Tabs and each Reactions View collection
       return {
@@ -110,7 +111,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
       key: reaction.emojiId,
       reaction: reaction,
       selectedEmojiId: selectedEmoji.id,
-      emojiProvider: emojiProvider
+      emojiProvider: emojiProvider,
+      ProfileCardWrapper: ProfileCardWrapper
     });
   }));
 };

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

@@ -130,7 +130,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$showAddReactionT = _ref.showAddReactionText,
     showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
     _ref$hideDefaultReact = _ref.hideDefaultReactions,
-    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -370,7 +371,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,
-      handlePaginationChange: handlePaginationChange
+      handlePaginationChange: handlePaginationChange,
+      ProfileCardWrapper: ProfileCardWrapper
     })))
   );
 });

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

package/dist/es2019/components/ReactionDialog/ReactionView.js

@@ -11,13 +11,17 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { useTabPanel } from '@atlaskit/tabs';
-import { Text } from '@atlaskit/primitives';
+import { Text, Flex, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+const userDescriptionStyle = xcss({
+  marginLeft: 'space.200'
+});
 export const ReactionView = ({
   selectedEmojiId,
   emojiProvider,
-  reaction
+  reaction,
+  ProfileCardWrapper
 }) => {
   const [emojiShortName, setEmojiShortName] = useState('');
   useEffect(() => {
@@ -54,7 +58,7 @@ export const ReactionView = ({
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: 24
     })), alphabeticalNames.length === 0 ?
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -73,10 +77,22 @@ export const ReactionView = ({
         jsx("li", {
           css: userStyle,
           key: user.id
+        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
+          userId: user.accountId,
+          isAnonymous: false,
+          canViewProfile: true,
+          position: "left-start"
         }, jsx(Avatar, {
           size: "large",
-          src: profile
-        }), jsx("span", null, user.displayName))
+          src: profile,
+          testId: "profile"
+        })) : jsx(Avatar, {
+          size: "large",
+          src: profile,
+          testId: "profile"
+        }), jsx(Flex, {
+          xcss: userDescriptionStyle
+        }, jsx("div", null, user.displayName)))
       );
     })))
   );

package/dist/es2019/components/ReactionDialog/ReactionsDialog.js

@@ -86,7 +86,8 @@ export const ReactionsDialog = ({
   emojiProvider,
   selectedEmojiId,
   handleSelectReaction = () => {},
-  handlePaginationChange = () => {}
+  handlePaginationChange = () => {},
+  ProfileCardWrapper
 }) => {
   var _currentReactions$;
   const [elementToScroll, setElementToScroll] = useState();
@@ -215,7 +216,8 @@ export const ReactionsDialog = ({
     initialEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction
+    onReactionChanged: handleSelectReaction,
+    ProfileCardWrapper: ProfileCardWrapper
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog

package/dist/es2019/components/ReactionDialog/ReactionsList.js

@@ -19,7 +19,8 @@ export const ReactionsList = ({
   reactions,
   initialEmojiId,
   emojiProvider,
-  onReactionChanged
+  onReactionChanged,
+  ProfileCardWrapper
 }) => {
   const [selectedEmoji, setSelectedEmoji] = useState(() => {
     // Calculate this only on initialize the List of Tabs and each Reactions View collection
@@ -91,6 +92,7 @@ export const ReactionsList = ({
     key: reaction.emojiId,
     reaction: reaction,
     selectedEmojiId: selectedEmoji.id,
-    emojiProvider: emojiProvider
+    emojiProvider: emojiProvider,
+    ProfileCardWrapper: ProfileCardWrapper
   })));
 };

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

@@ -100,7 +100,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
   showAddReactionText = false,
-  hideDefaultReactions = false
+  hideDefaultReactions = false,
+  ProfileCardWrapper
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -331,7 +332,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,
-      handlePaginationChange: handlePaginationChange
+      handlePaginationChange: handlePaginationChange,
+      ProfileCardWrapper: ProfileCardWrapper
     })))
   );
 });

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

package/dist/esm/components/ReactionDialog/ReactionView.js

@@ -14,13 +14,17 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { useTabPanel } from '@atlaskit/tabs';
-import { Text } from '@atlaskit/primitives';
+import { Text, Flex, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+var userDescriptionStyle = xcss({
+  marginLeft: 'space.200'
+});
 export var ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
-    reaction = _ref.reaction;
+    reaction = _ref.reaction,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     emojiShortName = _useState2[0],
@@ -76,7 +80,7 @@ export var ReactionView = function ReactionView(_ref) {
         id: selectedEmojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: 24
     })), alphabeticalNames.length === 0 ?
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -95,10 +99,22 @@ export var ReactionView = function ReactionView(_ref) {
         jsx("li", {
           css: userStyle,
           key: user.id
+        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
+          userId: user.accountId,
+          isAnonymous: false,
+          canViewProfile: true,
+          position: "left-start"
         }, jsx(Avatar, {
           size: "large",
-          src: profile
-        }), jsx("span", null, user.displayName))
+          src: profile,
+          testId: "profile"
+        })) : jsx(Avatar, {
+          size: "large",
+          src: profile,
+          testId: "profile"
+        }), jsx(Flex, {
+          xcss: userDescriptionStyle
+        }, jsx("div", null, user.displayName)))
       );
     })))
   );

package/dist/esm/components/ReactionDialog/ReactionsDialog.js

@@ -98,7 +98,8 @@ export var ReactionsDialog = function ReactionsDialog(_ref2) {
     _ref2$handleSelectRea = _ref2.handleSelectReaction,
     handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
     _ref2$handlePaginatio = _ref2.handlePaginationChange,
-    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio;
+    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
+    ProfileCardWrapper = _ref2.ProfileCardWrapper;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     elementToScroll = _useState2[0],
@@ -239,7 +240,8 @@ export var ReactionsDialog = function ReactionsDialog(_ref2) {
     initialEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction
+    onReactionChanged: handleSelectReaction,
+    ProfileCardWrapper: ProfileCardWrapper
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog

package/dist/esm/components/ReactionDialog/ReactionsList.js

@@ -20,7 +20,8 @@ export var ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
     initialEmojiId = _ref.initialEmojiId,
     emojiProvider = _ref.emojiProvider,
-    onReactionChanged = _ref.onReactionChanged;
+    onReactionChanged = _ref.onReactionChanged,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = useState(function () {
       // Calculate this only on initialize the List of Tabs and each Reactions View collection
       return {
@@ -98,7 +99,8 @@ export var ReactionsList = function ReactionsList(_ref) {
       key: reaction.emojiId,
       reaction: reaction,
       selectedEmojiId: selectedEmoji.id,
-      emojiProvider: emojiProvider
+      emojiProvider: emojiProvider,
+      ProfileCardWrapper: ProfileCardWrapper
     });
   }));
 };

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

@@ -117,7 +117,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$showAddReactionT = _ref.showAddReactionText,
     showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
     _ref$hideDefaultReact = _ref.hideDefaultReactions,
-    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -357,7 +358,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,
-      handlePaginationChange: handlePaginationChange
+      handlePaginationChange: handlePaginationChange,
+      ProfileCardWrapper: ProfileCardWrapper
     })))
   );
 });

package/dist/types/components/ReactionDialog/ReactionView.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type ReactionSummary } from '../../types';
+import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionViewProps {
     /**
      * Selected reaction to get user data from
@@ -14,5 +14,6 @@ export interface ReactionViewProps {
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionsDialog.d.ts

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
-import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
+import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
 /**
  * Test id for the Reactions modal dialog
  */
@@ -28,5 +28,6 @@ export interface ReactionsDialogProps {
      */
     handleSelectReaction?: onDialogSelectReactionChange;
     handlePaginationChange?: (emojiId: string) => void;
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/ReactionsList.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
+import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
      * Sorted list of reactions to render in list
@@ -18,5 +18,9 @@ export interface ReactionsListProps {
      * Function to handle clicking on an emoji from the list
      */
     onReactionChanged: onDialogSelectReactionChange;
+    /**
+     * A functional component from Confluence to show a profile card on hover
+     */
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
-import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
 import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
@@ -126,6 +126,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for hiding default reactions displayed when there are no existing reactions
      */
     hideDefaultReactions?: boolean;
+    /**
+     * Optional prop for rendering a profile card wrapper in the Reactions Dialog
+     */
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
 /**
  * Get content of the tooltip
@@ -134,4 +138,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, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: 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, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types/types/User.d.ts

@@ -11,6 +11,7 @@ export interface User {
      * optional path to a user profile picture
      */
     profilePicture?: ProfilePicture;
+    accountId?: string;
 }
 /**
  * Type defining the path to a user profile picture

package/dist/types/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type { ReactionAction, Actions } from './Actions';
 export { ReactionStatus, ReactionUpdateType } from './reaction';
 export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, ReactionFocused, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, onDialogSelectReactionChange, } from './reaction';
@@ -5,3 +6,17 @@ export type { Client, Request } from './client';
 export type { Updater } from './Updater';
 export type { User } from './User';
 export type { Store, StorePropInput, State, OnChangeCallback } from './store';
+type TriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
+type ProfileCardWrapperProps = {
+    userId?: string | null;
+    position?: TriggerPosition;
+    isAnonymous?: boolean;
+    canViewProfile?: boolean;
+    children: ReactNode;
+    fullName?: string;
+    disabledAriaAttributes?: boolean;
+    onVisibilityChange?: (isVisible: boolean) => void;
+    offset?: [number, number];
+    ariaLabel?: string;
+};
+export type ProfileCardWrapper = React.ComponentType<ProfileCardWrapperProps>;

package/dist/types-ts4.5/components/ReactionDialog/ReactionView.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type ReactionSummary } from '../../types';
+import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionViewProps {
     /**
      * Selected reaction to get user data from
@@ -14,5 +14,6 @@ export interface ReactionViewProps {
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionDialog/ReactionsDialog.d.ts

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
-import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
+import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
 /**
  * Test id for the Reactions modal dialog
  */
@@ -28,5 +28,6 @@ export interface ReactionsDialogProps {
      */
     handleSelectReaction?: onDialogSelectReactionChange;
     handlePaginationChange?: (emojiId: string) => void;
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionDialog/ReactionsList.d.ts

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
+import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
      * Sorted list of reactions to render in list
@@ -18,5 +18,9 @@ export interface ReactionsListProps {
      * Function to handle clicking on an emoji from the list
      */
     onReactionChanged: onDialogSelectReactionChange;
+    /**
+     * A functional component from Confluence to show a profile card on hover
+     */
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
-import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
 import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
@@ -126,6 +126,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for hiding default reactions displayed when there are no existing reactions
      */
     hideDefaultReactions?: boolean;
+    /**
+     * Optional prop for rendering a profile card wrapper in the Reactions Dialog
+     */
+    ProfileCardWrapper?: ProfileCardWrapper;
 }
 /**
  * Get content of the tooltip
@@ -134,4 +138,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, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: 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, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -11,6 +11,7 @@ export interface User {
      * optional path to a user profile picture
      */
     profilePicture?: ProfilePicture;
+    accountId?: string;
 }
 /**
  * Type defining the path to a user profile picture

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type { ReactionAction, Actions } from './Actions';
 export { ReactionStatus, ReactionUpdateType } from './reaction';
 export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, ReactionFocused, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, onDialogSelectReactionChange, } from './reaction';
@@ -5,3 +6,20 @@ export type { Client, Request } from './client';
 export type { Updater } from './Updater';
 export type { User } from './User';
 export type { Store, StorePropInput, State, OnChangeCallback } from './store';
+type TriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
+type ProfileCardWrapperProps = {
+    userId?: string | null;
+    position?: TriggerPosition;
+    isAnonymous?: boolean;
+    canViewProfile?: boolean;
+    children: ReactNode;
+    fullName?: string;
+    disabledAriaAttributes?: boolean;
+    onVisibilityChange?: (isVisible: boolean) => void;
+    offset?: [
+        number,
+        number
+    ];
+    ariaLabel?: string;
+};
+export type ProfileCardWrapper = React.ComponentType<ProfileCardWrapperProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.1.0",
+	"version": "24.2.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"