@atlaskit/reactions 33.2.11 → 33.2.13

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

@@ -8,67 +8,67 @@ import { type TriggerProps } from './Trigger';
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
 interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling' | 'reactionPickerTriggerText'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
-     * Optional prop to change the placement of the summary popup reaction list
-     */
-    placement?: Placement;
-    /**
-     * event handler when a a reaction button is clicked inside the summary
+     * Optional prop for enabling the Reactions Dialog
      */
-    onReactionClick: ReactionClick;
+    allowUserDialog?: boolean;
     /**
-     * Event callback when an emoji button is selected
-     * @param emojiId emoji unique id
-     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     * Optional function when the user wants to open the Reactions Dialog
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
     /**
-     * Optional event when the mouse cursor hovers over a reaction button inside the summary
+     * Optional prop to make the summary view open on hover
      */
-    onReactionMouseEnter?: ReactionMouseEnter;
+    hoverableSummaryView?: boolean;
     /**
-     * Optional event when focused a reaction inside the summary
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
      */
-    onReactionFocused?: ReactionFocused;
+    hoverableSummaryViewDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
-    showOpaqueBackground?: boolean;
+    isViewOnly?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction picker
+     * Optional event handler when the emoji picker is opened
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onOpen?: () => void;
     /**
-     * Optional prop for enabling the Reactions Dialog
+     * event handler when a a reaction button is clicked inside the summary
      */
-    allowUserDialog?: boolean;
+    onReactionClick: ReactionClick;
     /**
-     * Optional function when the user wants to open the Reactions Dialog
+     * Optional event when focused a reaction inside the summary
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    onReactionFocused?: ReactionFocused;
     /**
-     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     * Optional event when the mouse cursor hovers over a reaction button inside the summary
      */
-    isViewOnly?: boolean;
+    onReactionMouseEnter?: ReactionMouseEnter;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Event callback when an emoji button is selected
+     * @param emojiId emoji unique id
+     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
      */
-    onOpen?: () => void;
+    onSelection: (emojiId: string, source: ReactionSource) => void;
     /**
-     * Optional prop to make the summary view open on hover
+     * Optional prop to change the placement of the summary popup reaction list
      */
-    hoverableSummaryView?: boolean;
+    placement?: Placement;
     /**
-     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableSummaryViewDelay?: number;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop for the optimistic image URL
+     * Optional prop for applying subtle styling to reaction picker
      */
-    summaryGetOptimisticImageURL?: (emojiId: string) => string;
+    subtleReactionsSummaryAndPicker?: boolean;
     /**
      * Optional prop to control if the side picker is shown
      */
     summaryButtonIconAfter?: React.ReactNode;
+    /**
+     * Optional prop for the optimistic image URL
+     */
+    summaryGetOptimisticImageURL?: (emojiId: string) => string;
     /**
      * Optional prop to set the most recently clicked id
      */

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

@@ -12,32 +12,32 @@ export declare const verticalMargin = 5;
 export declare const RENDER_REACTIONTOOLTIP_TESTID = "render-reactionTooltip";
 export type ReactionTooltipProps = PropsWithChildren<{
     /**
-     * Optional name for the reaction emoji
+     * Optional prop for enabling the Reactions Dialog
      */
-    emojiName?: string;
+    allowUserDialog?: boolean;
     /**
-     * Info on the emoji reaction to render
+     * Function that hides the tooltip
      */
-    reaction: ReactionSummary;
+    dismissTooltip: () => void;
     /**
-     * Optional Max users to show in the displayed tooltip (defaults to 5)
+     * Optional name for the reaction emoji
      */
-    maxReactions?: number;
+    emojiName?: string;
     /**
-     * Optional flag for enabling tooltip (defaults to true)
+     * Optional function when the user wants to open the Reactions Dialog
      */
-    isEnabled?: boolean;
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
     /**
-     * Optional prop for enabling the Reactions Dialog
+     * Optional flag for enabling tooltip (defaults to true)
      */
-    allowUserDialog?: boolean;
+    isEnabled?: boolean;
     /**
-     * Optional function when the user wants to open the Reactions Dialog
+     * Optional Max users to show in the displayed tooltip (defaults to 5)
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    maxReactions?: number;
     /**
-     * Function that hides the tooltip
+     * Info on the emoji reaction to render
      */
-    dismissTooltip: () => void;
+    reaction: ReactionSummary;
 }>;
 export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, dismissTooltip, }: ReactionTooltipProps) => JSX.Element;

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

@@ -1,12 +1,12 @@
 import { type ReactionSummary, type ProfileCardWrapper } from '../types';
 export interface ReactionViewProps {
-    /**
-     * Selected reaction to get user data from
-     */
-    reaction: ReactionSummary;
     /**
      * Optional ProfileWrapper component to show profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
+    /**
+     * Selected reaction to get user data from
+     */
+    reaction: ReactionSummary;
 }
 export declare const ReactionView: ({ reaction, ProfileCardWrapper }: ReactionViewProps) => JSX.Element;

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

@@ -35,156 +35,156 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
 export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon' | 'reactionPickerPlacement'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
-     * event handler to fetching the reactions
+     * Optional prop for controlling if we can select emojis and display UI via summary view picker
      */
-    loadReaction: () => void;
+    allowSelectFromSummaryView?: boolean;
     /**
-     * Event callback when an emoji button is selected
+     * Optional prop from checking a feature gate for rendering Reactions Dialog
      */
-    onSelection: (emojiId: string) => void;
+    allowUserDialog?: boolean;
     /**
-     * Optional list of reactions to render (defaults to empty list)
+     * Optional error message to show when unable to display the reaction emoji
      */
-    reactions?: ReactionSummary[];
+    errorMessage?: string;
     /**
-     * Condition for the reaction list status while being fetched
+     * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
      */
-    status: ReactionStatus;
+    flash?: Record<string, boolean>;
     /**
-     * event handler when the emoji button is clicked
+     * Optional event to get reaction details for an emoji
+     * @param emojiId current reaction emoji id
      */
-    onReactionClick: ReactionClick;
+    getReactionDetails?: (emojiId: string) => void;
     /**
-     * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
+     * Optional prop for hiding default reactions displayed when there are no existing reactions
      */
-    flash?: Record<string, boolean>;
+    hideDefaultReactions?: boolean;
     /**
-     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
-     * Generally used for newly added reactions.
+     * Optional prop for controlling if the summary view is hoverable
      */
-    particleEffectByEmoji?: Record<string, boolean>;
+    hoverableSummaryView?: boolean;
     /**
-     * Optional event to get reaction details for an emoji
-     * @param emojiId current reaction emoji id
+     * Optional prop to say if the reactions component is in a list
      */
-    getReactionDetails?: (emojiId: string) => void;
+    isListItem?: boolean;
     /**
-     * Optional error message to show when unable to display the reaction emoji
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
-    errorMessage?: string;
+    isViewOnly?: boolean;
     /**
-     * quickReactionEmojiIds are emojis that will be shown in the the primary view even if the reaction count is zero
+     * event handler to fetching the reactions
      */
-    quickReactionEmojis?: QuickReactionEmojiSummary;
+    loadReaction: () => void;
     /**
-     * Optional callback function called when opening reactions dialog
+     * Optional prop for using your own container for relative positioning for emoji picker popup
      */
-    onDialogOpenCallback?: (emojiId: string, source?: string) => void;
+    noRelativeContainer?: boolean;
+    noWrap?: boolean;
     /**
      * Optional callback function called when closing reactions dialog
      */
     onDialogCloseCallback?: OnCloseHandler;
     /**
-     * Optional callback function called when selecting a reaction in reactions dialog
+     * Optional callback function called when opening reactions dialog
      */
-    onDialogSelectReactionCallback?: (emojiId: string) => void;
+    onDialogOpenCallback?: (emojiId: string, source?: string) => void;
     /**
      * Optional callback function called when navigating between pages in the reactions dialog
      */
     onDialogPageChangeCallback?: (emojiId: string, curentPage: number, maxPages: number) => void;
     /**
-     * Enables a summary view for displaying reactions. If enabled and the number of reactions meets or exceeds the summaryViewThreshold, reactions will be shown in a more aggregated format.
-     */
-    summaryViewEnabled?: boolean;
-    /**
-     * The minimum number of reactions required to switch to the summary view when summaryViewEnabled is true. Defaults to 3 if not specified.
+     * Optional callback function called when selecting a reaction in reactions dialog
      */
-    summaryViewThreshold?: number;
+    onDialogSelectReactionCallback?: (emojiId: string) => void;
     /**
-     * Optional prop to change the placement of the summary popup reaction list
+     * Optional prop to hide the user reactions and only render the picker
      */
-    summaryViewPlacement?: Placement;
+    onlyRenderPicker?: boolean;
     /**
-     * Optional prop to change the style of the summary view
+     * event handler when the emoji button is clicked
      */
-    useButtonAlignmentStyling?: boolean;
+    onReactionClick: ReactionClick;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Event callback when an emoji button is selected
      */
-    showOpaqueBackground?: boolean;
+    onSelection: (emojiId: string) => void;
     /**
-     * Optional prop for applying subtle styling to reaction summary and picker
+     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
+     * Generally used for newly added reactions.
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    particleEffectByEmoji?: Record<string, boolean>;
     /**
-     * Optional prop for displaying text to add a reaction
+     * Optional prop for rendering a profile card wrapper in the Reactions Dialog
      */
-    showAddReactionText?: boolean;
+    ProfileCardWrapper?: ProfileCardWrapper;
     /**
-     * Optional prop for hiding default reactions displayed when there are no existing reactions
+     * quickReactionEmojiIds are emojis that will be shown in the the primary view even if the reaction count is zero
      */
-    hideDefaultReactions?: boolean;
+    quickReactionEmojis?: QuickReactionEmojiSummary;
     /**
-     * Optional prop from checking a feature gate for rendering Reactions Dialog
+     *  Optional prop to change the placement of the reaction picker popup
      */
-    allowUserDialog?: boolean;
+    reactionPickerPlacement?: Placement;
     /**
-     * Optional prop for rendering a profile card wrapper in the Reactions Dialog
+     * Optional prop for controlling text of the trigger button
      */
-    ProfileCardWrapper?: ProfileCardWrapper;
+    reactionPickerTriggerText?: string;
     /**
-     * Optional prop to hide the user reactions and only render the picker
+     * Optional prop for controlling tooltip content of the trigger button
      */
-    onlyRenderPicker?: boolean;
+    reactionPickerTriggerTooltipContent?: string;
     /**
-     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     * Optional list of reactions to render (defaults to empty list)
      */
-    isViewOnly?: boolean;
-    noWrap?: boolean;
+    reactions?: ReactionSummary[];
     /**
-     * Optional prop for using your own container for relative positioning for emoji picker popup
+     * Optional prop to render the particle effect on the summary view
      */
-    noRelativeContainer?: boolean;
+    renderParticleEffectOnSummaryView?: boolean;
     /**
-     * Optional prop for controlling if default reactions are subtle
+     * Optional prop for displaying text to add a reaction
      */
-    showSubtleDefaultReactions?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling tooltip content of the trigger button
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    reactionPickerTriggerTooltipContent?: string;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop for controlling if we can select emojis and display UI via summary view picker
+     * Optional prop for controlling if default reactions are subtle
      */
-    allowSelectFromSummaryView?: boolean;
+    showSubtleDefaultReactions?: boolean;
     /**
-     * Optional prop for controlling text of the trigger button
+     * Condition for the reaction list status while being fetched
      */
-    reactionPickerTriggerText?: string;
+    status: ReactionStatus;
     /**
-     * Optional prop for controlling if the summary view is hoverable
+     * Optional prop for applying subtle styling to reaction summary and picker
      */
-    hoverableSummaryView?: boolean;
+    subtleReactionsSummaryAndPicker?: boolean;
     /**
-     * Optional prop to say if the reactions component is in a list
+     * Optional prop to add an icon to the end of the summary button
      */
-    isListItem?: boolean;
+    summaryButtonIconAfter?: React.ReactNode;
     /**
      * Optional prop to optimistically render the image URL for a given emoji id. Typically used in SSR before the emoji Provider resolves & the real image is loaded.
      */
     summaryGetOptimisticImageURL?: (emojiId: string) => string;
     /**
-     *  Optional prop to change the placement of the reaction picker popup
+     * Enables a summary view for displaying reactions. If enabled and the number of reactions meets or exceeds the summaryViewThreshold, reactions will be shown in a more aggregated format.
      */
-    reactionPickerPlacement?: Placement;
+    summaryViewEnabled?: boolean;
     /**
-     * Optional prop to add an icon to the end of the summary button
+     * Optional prop to change the placement of the summary popup reaction list
      */
-    summaryButtonIconAfter?: React.ReactNode;
+    summaryViewPlacement?: Placement;
     /**
-     * Optional prop to render the particle effect on the summary view
+     * The minimum number of reactions required to switch to the summary view when summaryViewEnabled is true. Defaults to 3 if not specified.
      */
-    renderParticleEffectOnSummaryView?: boolean;
+    summaryViewThreshold?: number;
+    /**
+     * Optional prop to change the style of the summary view
+     */
+    useButtonAlignmentStyling?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;

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

@@ -7,26 +7,26 @@ import { type ReactionSummary, type ProfileCardWrapper } from '../types';
 export declare const RENDER_MODAL_TESTID = "render-reactions-modal";
 export interface ReactionsDialogProps {
     /**
-     * List of reactions to render (defaults to empty list)
+     * Provider for loading emojis
      */
-    reactions: ReactionSummary[];
+    emojiProvider: Promise<EmojiProvider>;
     /**
      * Optional handler when the dialog closes
      */
     handleCloseReactionsDialog: OnCloseHandler;
+    handlePaginationChange?: (emojiId: string, currentPage: number, maxPages: number) => void;
     /**
-     * Provider for loading emojis
+     * Optional callback function called when user selects a reaction in reactions dialog
      */
-    emojiProvider: Promise<EmojiProvider>;
+    handleSelectReaction?: (emojiId: string) => void;
+    ProfileCardWrapper?: ProfileCardWrapper;
     /**
-     * Current emoji selected to show the reactions dialog
+     * List of reactions to render (defaults to empty list)
      */
-    selectedEmojiId: string;
+    reactions: ReactionSummary[];
     /**
-     * Optional callback function called when user selects a reaction in reactions dialog
+     * Current emoji selected to show the reactions dialog
      */
-    handleSelectReaction?: (emojiId: string) => void;
-    handlePaginationChange?: (emojiId: string, currentPage: number, maxPages: number) => void;
-    ProfileCardWrapper?: ProfileCardWrapper;
+    selectedEmojiId: string;
 }
 export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => JSX.Element;

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

@@ -2,14 +2,14 @@ import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSummary } from '../types';
 interface ReactionsDialogModalHeaderProps {
-    totalReactionsCount: number;
-    handlePreviousPage: () => void;
-    handleNextPage: () => void;
     currentPage: number;
-    maxPages: number;
-    emojiProvider: Promise<EmojiProvider>;
     currentReactions: ReactionSummary[];
+    emojiProvider: Promise<EmojiProvider>;
     handleCloseReactionsDialog: OnCloseHandler;
+    handleNextPage: () => void;
+    handlePreviousPage: () => void;
+    maxPages: number;
+    totalReactionsCount: number;
 }
 export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, handleCloseReactionsDialog, }: ReactionsDialogModalHeaderProps) => JSX.Element;
 export {};

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

@@ -2,19 +2,19 @@ import React from 'react';
 import { type ReactionSummary, type ProfileCardWrapper } from '../types';
 export interface ReactionsListProps {
     /**
-     * Sorted list of reactions to render in list
+     * Provider for loading emojis
      */
-    reactions: ReactionSummary[];
     /**
-     * Current emoji selected in the reactions dialog
+     * A functional component from Confluence to show a profile card on hover
      */
-    selectedEmojiId: string;
+    ProfileCardWrapper?: ProfileCardWrapper;
     /**
-     * Provider for loading emojis
+     * Sorted list of reactions to render in list
      */
+    reactions: ReactionSummary[];
     /**
-     * A functional component from Confluence to show a profile card on hover
+     * Current emoji selected in the reactions dialog
      */
-    ProfileCardWrapper?: ProfileCardWrapper;
+    selectedEmojiId: string;
 }
 export declare const ReactionsList: ({ reactions, selectedEmojiId, ProfileCardWrapper, }: ReactionsListProps) => React.JSX.Element;

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

@@ -4,10 +4,10 @@
 import React from 'react';
 import { type PopperChildrenProps, type Placement } from '@atlaskit/popper';
 export type RepositionOnUpdateProps = {
-    update: PopperChildrenProps['update'];
     settings: {
-        showFullPicker: boolean;
         popperPlacement: Placement;
+        showFullPicker: boolean;
     };
+    update: PopperChildrenProps['update'];
 };
 export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -10,25 +10,25 @@ export interface SelectorProps {
      */
     emojiProvider: Promise<EmojiProvider>;
     /**
-     * Event handler when an emoji gets selected
-     */
-    onSelection: OnEmojiEvent;
-    /**
-     * Enable/Disable selection of extra custom emoji beyond default list (defaults to false)
+     * Optional prop for hoverable reaction picker selector
      */
-    showMore?: boolean;
+    hoverableReactionPickerSelector?: boolean;
     /**
      * Optional event when extra custom emojis icon is selected
      */
     onMoreClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Event handler when an emoji gets selected
+     */
+    onSelection: OnEmojiEvent;
     /**
      * Optional emojis shown for user to select from when the reaction add button is clicked (defaults to pre-defined list of emojis {@link DefaultReactions})
      */
     pickerQuickReactionEmojiIds?: EmojiId[];
     /**
-     * Optional prop for hoverable reaction picker selector
+     * Enable/Disable selection of extra custom emoji beyond default list (defaults to false)
      */
-    hoverableReactionPickerSelector?: boolean;
+    showMore?: boolean;
 }
 /**
  * Reactions picker panel part of the <ReactionPicker /> component

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

@@ -1,11 +1,11 @@
 type StaticReactionProps = {
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
-    testId?: string;
     children?: React.ReactNode;
     dataAttributes?: {
         [key: string]: string;
     };
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    testId?: string;
 };
 export declare const StaticReaction: ({ onMouseEnter, onFocus, children, testId, dataAttributes, }: StaticReactionProps) => JSX.Element;
 export {};