@atlaskit/reactions 25.0.0 → 25.1.0

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

@@ -8,13 +8,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Pressable, Flex, xcss } from '@atlaskit/primitives';
 import { fg } from '@atlaskit/platform-feature-flags';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import Button from '@atlaskit/button/new';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
@@ -44,10 +45,6 @@ export var ufoExperiences = {
   selectedReactionChangeInsideDialog: ReactionDialogSelectedReactionChanged,
   pageNavigated: ReactionDialogPageNavigation
 };
-var dialogEntrypointButtonStyle = xcss({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
 
 /**
  * Test id for wrapper Reactions div
@@ -79,6 +76,13 @@ export function getTooltip(status, errorMessage) {
       return jsx(FormattedMessage, messages.addReaction);
   }
 }
+var dialogEntrypointButtonStyle = xcss({
+  marginRight: 'space.050',
+  marginTop: 'space.050'
+});
+var iconStyle = xcss({
+  height: '20px'
+});
 
 /**
  * Renders list of reactions
@@ -136,6 +140,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     setSelectedEmojiId = _useState2[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var intl = useIntl();
   var openTime = useRef();
   var renderTime = useRef();
   useEffect(function () {
@@ -327,18 +332,24 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       });
     }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
       xcss: dialogEntrypointButtonStyle
+    }, jsx(Pressable, {
+      backgroundColor: "color.background.neutral.subtle",
+      padding: "space.0"
     }, jsx(Tooltip, {
-      content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
-      hideTooltipOnClick: true
+      content: intl.formatMessage(messages.seeWhoReactedTooltip)
     }, function (tooltipProps) {
       return jsx(Button, _extends({}, tooltipProps, {
         spacing: "compact",
         onClick: function onClick() {
           return handleOpenReactionsDialog(sortedReactions[0].emojiId);
-        },
-        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-      }), jsx(FormattedMessage, messages.seeWhoReacted));
-    })), jsx(ReactionPicker
+        }
+      }), jsx(Flex, {
+        alignItems: "center",
+        xcss: iconStyle
+      }, jsx(ShowMoreHorizontalIcon, {
+        label: intl.formatMessage(messages.seeWhoReacted)
+      })));
+    }))), jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: reactionPickerStyle,

package/dist/esm/shared/i18n.js

@@ -69,10 +69,5 @@ export var messages = defineMessages({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
-  },
-  peopleWhoReactedSubheading: {
-    id: 'reactions.dialog.people-who-reacted.subheader',
-    defaultMessage: 'People who reacted with {emojiShortName}',
-    description: 'Subheading that shows the user which emoji tab they are on'
   }
 });

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

@@ -29,5 +29,6 @@ export interface ReactionsDialogProps {
     handleSelectReaction?: (emojiId: string) => void;
     handlePaginationChange?: (emojiId: string, currentPage: number, maxPages: number) => void;
     ProfileCardWrapper?: ProfileCardWrapper;
+    handleReactionMouseEnter?: (emojiId: string) => void;
 }
-export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, handleReactionMouseEnter, }: ReactionsDialogProps) => jsx.JSX.Element;

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

@@ -1,4 +1,5 @@
 import { jsx } from '@emotion/react';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary } from '../../types';
 interface ReactionsDialogModalHeaderProps {
@@ -8,8 +9,8 @@ interface ReactionsDialogModalHeaderProps {
     currentPage: number;
     maxPages: number;
     emojiProvider: Promise<EmojiProvider>;
-    selectedEmojiId: string;
     currentReactions: ReactionSummary[];
+    handleCloseReactionsDialog: OnCloseHandler;
 }
-export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, selectedEmojiId, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
+export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, handleCloseReactionsDialog, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
 export {};

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

@@ -75,6 +75,7 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     getReactionDetails?: (emojiId: string) => void;
     /**
+     * @private
      * @deprecated use getReactionDetails instead
      */
     onReactionHover?: (emojiId: string) => void;

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

@@ -69,9 +69,4 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    peopleWhoReactedSubheading: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

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

@@ -29,5 +29,6 @@ export interface ReactionsDialogProps {
     handleSelectReaction?: (emojiId: string) => void;
     handlePaginationChange?: (emojiId: string, currentPage: number, maxPages: number) => void;
     ProfileCardWrapper?: ProfileCardWrapper;
+    handleReactionMouseEnter?: (emojiId: string) => void;
 }
-export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, handleReactionMouseEnter, }: ReactionsDialogProps) => jsx.JSX.Element;

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

@@ -1,4 +1,5 @@
 import { jsx } from '@emotion/react';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary } from '../../types';
 interface ReactionsDialogModalHeaderProps {
@@ -8,8 +9,8 @@ interface ReactionsDialogModalHeaderProps {
     currentPage: number;
     maxPages: number;
     emojiProvider: Promise<EmojiProvider>;
-    selectedEmojiId: string;
     currentReactions: ReactionSummary[];
+    handleCloseReactionsDialog: OnCloseHandler;
 }
-export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, selectedEmojiId, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
+export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, handleCloseReactionsDialog, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
 export {};

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

@@ -75,6 +75,7 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     getReactionDetails?: (emojiId: string) => void;
     /**
+     * @private
      * @deprecated use getReactionDetails instead
      */
     onReactionHover?: (emojiId: string) => void;

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

@@ -69,9 +69,4 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    peopleWhoReactedSubheading: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

package/package.json

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