@atlaskit/reactions 25.3.0 → 25.5.0

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

@@ -1,5 +1,4 @@
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionViewProps {
     /**
@@ -7,13 +6,8 @@ export interface ReactionViewProps {
      */
     reaction: ReactionSummary;
     /**
-     * Current emoji selected in the reactions dialog
+     * Optional ProfileWrapper component to show profile card on hover
      */
-    selectedEmojiId: string;
-    /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ reaction, ProfileCardWrapper }: ReactionViewProps) => jsx.JSX.Element;

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

@@ -29,6 +29,5 @@ 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, handleReactionMouseEnter, }: ReactionsDialogProps) => jsx.JSX.Element;
+export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ReactionsDialogTriggerProps {
+    onClick: () => void;
+}
+export declare const ReactionsDialogTrigger: ({ onClick }: ReactionsDialogTriggerProps) => React.JSX.Element;
+export {};

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
@@ -17,10 +16,9 @@ export interface ReactionsListProps {
     /**
      * Provider for loading emojis
      */
-    emojiProvider: Promise<EmojiProvider>;
     /**
      * A functional component from Confluence to show a profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, selectedEmojiId, emojiProvider, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, selectedEmojiId, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -32,9 +32,13 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     subtleReactionsSummaryAndPicker?: boolean;
     /**
-     * Optional function when the user wants to see more users in a modal
+     * Optional prop for enabling the Reactions Dialog
      */
-    handleOpenReactionsDialog?: (emojiId: string) => void;
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -26,5 +26,13 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional flag for enabling tooltip (defaults to true)
      */
     isEnabled?: boolean;
+    /**
+     * Optional prop for enabling the Reactions Dialog
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, }: ReactionTooltipProps) => jsx.JSX.Element;

package/dist/types/components/ReactionTooltip/styles.d.ts

@@ -2,3 +2,4 @@ export declare const verticalMargin = 5;
 export declare const tooltipStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNameStyle: import("@emotion/react").SerializedStyles;
 export declare const footerStyle: import("@emotion/react").SerializedStyles;
+export declare const underlineStyle: import("@emotion/react").SerializedStyles;

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

@@ -74,11 +74,6 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * @param emojiId current reaction emoji id
      */
     getReactionDetails?: (emojiId: string) => void;
-    /**
-     * @private
-     * @deprecated use getReactionDetails instead
-     */
-    onReactionHover?: (emojiId: string) => void;
     /**
      * Optional error message to show when unable to display the reaction emoji
      */
@@ -147,6 +142,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * 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
@@ -155,4 +154,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, showRoundTrigger, }: ReactionsProps) => jsx.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, showRoundTrigger, isViewOnly, }: 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' | 'onlyRenderPicker' | 'showRoundTrigger'>, 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/Reaction/Reaction.d.ts

@@ -39,8 +39,16 @@ export interface ReactionProps {
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for enabling the Reactions Dialog
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, }: ReactionProps) => jsx.JSX.Element;

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

@@ -1,5 +1,4 @@
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionViewProps {
     /**
@@ -7,13 +6,8 @@ export interface ReactionViewProps {
      */
     reaction: ReactionSummary;
     /**
-     * Current emoji selected in the reactions dialog
+     * Optional ProfileWrapper component to show profile card on hover
      */
-    selectedEmojiId: string;
-    /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;
+export declare const ReactionView: ({ reaction, ProfileCardWrapper }: ReactionViewProps) => jsx.JSX.Element;

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

@@ -29,6 +29,5 @@ 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, handleReactionMouseEnter, }: 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/ReactionsDialogTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ReactionsDialogTriggerProps {
+    onClick: () => void;
+}
+export declare const ReactionsDialogTrigger: ({ onClick }: ReactionsDialogTriggerProps) => React.JSX.Element;
+export {};

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

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { jsx } from '@emotion/react';
-import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
@@ -17,10 +16,9 @@ export interface ReactionsListProps {
     /**
      * Provider for loading emojis
      */
-    emojiProvider: Promise<EmojiProvider>;
     /**
      * A functional component from Confluence to show a profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, selectedEmojiId, emojiProvider, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, selectedEmojiId, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -32,9 +32,13 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     subtleReactionsSummaryAndPicker?: boolean;
     /**
-     * Optional function when the user wants to see more users in a modal
+     * Optional prop for enabling the Reactions Dialog
      */
-    handleOpenReactionsDialog?: (emojiId: string) => void;
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -26,5 +26,13 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional flag for enabling tooltip (defaults to true)
      */
     isEnabled?: boolean;
+    /**
+     * Optional prop for enabling the Reactions Dialog
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, }: ReactionTooltipProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ReactionTooltip/styles.d.ts

@@ -2,3 +2,4 @@ export declare const verticalMargin = 5;
 export declare const tooltipStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNameStyle: import("@emotion/react").SerializedStyles;
 export declare const footerStyle: import("@emotion/react").SerializedStyles;
+export declare const underlineStyle: import("@emotion/react").SerializedStyles;

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

@@ -74,11 +74,6 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * @param emojiId current reaction emoji id
      */
     getReactionDetails?: (emojiId: string) => void;
-    /**
-     * @private
-     * @deprecated use getReactionDetails instead
-     */
-    onReactionHover?: (emojiId: string) => void;
     /**
      * Optional error message to show when unable to display the reaction emoji
      */
@@ -147,6 +142,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * 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
@@ -155,4 +154,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, showRoundTrigger, }: ReactionsProps) => jsx.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, showRoundTrigger, isViewOnly, }: 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' | 'onlyRenderPicker' | 'showRoundTrigger'>, 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.3.0",
+	"version": "25.5.0",
 	"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",