@atlaskit/reactions 33.2.12 → 33.2.13

package/dist/types/store/ReactionConsumer.d.ts

@@ -5,17 +5,17 @@ import { type Actions, type State, type StorePropInput, type Store } from '../ty
  */
 export type ReactioConsumerProps<PropsFromState, PropsFromActions> = {
     /**
-     * Return a plain object containing the data that the connected component needs
+     * Component to render
      */
-    mapStateToProps?: (state: State) => PropsFromState;
+    children: (props: PropsFromState & PropsFromActions) => React.ReactNode;
     /**
      * Specify which actions the child component might need to dispatch from its props
      */
     mapActionsToProps?: (actions: Actions) => PropsFromActions;
     /**
-     * Component to render
+     * Return a plain object containing the data that the connected component needs
      */
-    children: (props: PropsFromState & PropsFromActions) => React.ReactNode;
+    mapStateToProps?: (state: State) => PropsFromState;
     /**
      * Reference to the store.
      * @remarks

package/dist/types/types/Actions.d.ts

@@ -7,6 +7,14 @@ import { type ReactionUpdateSuccess } from './reaction';
  */
 export type ReactionAction = (containerAri: string, ari: string, emojiId: string, onSuccess?: ReactionUpdateSuccess) => void;
 export type Actions = {
+    /**
+     * Add a new reation api
+     */
+    addReaction: ReactionAction;
+    /**
+     * Hover an existing reaction emoji api
+     */
+    getDetailedReaction: ReactionAction;
     /**
      * Retrieve reaction collection api
      * @param containerId the container for reactions/ari in the page
@@ -17,12 +25,4 @@ export type Actions = {
      * Select/deselect a rection callback
      */
     toggleReaction: ReactionAction;
-    /**
-     * Add a new reation api
-     */
-    addReaction: ReactionAction;
-    /**
-     * Hover an existing reaction emoji api
-     */
-    getDetailedReaction: ReactionAction;
 };

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

@@ -1,17 +1,17 @@
 export interface User {
-    /**
-     * user id in system
-     */
-    id: string;
+    accountId?: string;
     /**
      * name of user clicked on the reaction
      */
     displayName: string;
+    /**
+     * user id in system
+     */
+    id: string;
     /**
      * optional path to a user profile picture
      */
     profilePicture?: ProfilePicture;
-    accountId?: string;
 }
 /**
  * Type defining the path to a user profile picture

package/dist/types/types/client.d.ts

@@ -17,16 +17,6 @@ emojiId: string,
  */
 metadata?: Record<string, any>) => Promise<T>;
 export interface Client {
-    /**
-     * fetch reactions request handler
-     * @param containerAri container wrapper id
-     * @param aris container reaction assets unique ids
-     */
-    getReactions(containerAri: string, aris: string[]): Promise<Reactions>;
-    /**
-     * Fetch details for a given reaction.
-     */
-    getDetailedReaction: Request<ReactionSummary>;
     /**
      * Fetch request when adding a reaction to a container.
      */
@@ -35,4 +25,14 @@ export interface Client {
      * Fetch request when removing a reaction from a container.
      */
     deleteReaction: Request<ReactionSummary[]>;
+    /**
+     * Fetch details for a given reaction.
+     */
+    getDetailedReaction: Request<ReactionSummary>;
+    /**
+     * fetch reactions request handler
+     * @param containerAri container wrapper id
+     * @param aris container reaction assets unique ids
+     */
+    getReactions(containerAri: string, aris: string[]): Promise<Reactions>;
 }

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

@@ -8,15 +8,15 @@ 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;
+    ariaLabel?: string;
     canViewProfile?: boolean;
     children: ReactNode;
-    fullName?: string;
     disabledAriaAttributes?: boolean;
-    onVisibilityChange?: (isVisible: boolean) => void;
+    fullName?: string;
+    isAnonymous?: boolean;
     offset?: [number, number];
-    ariaLabel?: string;
+    onVisibilityChange?: (isVisible: boolean) => void;
+    position?: TriggerPosition;
+    userId?: string | null;
 };
 export type ProfileCardWrapper = React.ComponentType<ProfileCardWrapperProps>;

package/dist/types/types/reaction.d.ts

@@ -15,30 +15,30 @@ export interface ReactionSummary {
      * the container for reactions/ari in the page
      */
     containerAri: string;
-    /**
-     * unique Atlassian identifier for an emoji
-     */
-    emojiId: string;
     /**
      * Number of selected count for the emoji
      */
     count: number;
     /**
-     * Has the current user selected the emoji or not
+     * unique Atlassian identifier for an emoji
      */
-    reacted: boolean;
+    emojiId: string;
     /**
-     * Users collection
+     * A path to the emoji image, used for optimistic rendering.
      */
-    users?: User[];
+    emojiPath?: string;
     /**
      * @deprecated Legacy content Not in use anymore
      */
     optimisticallyUpdated?: boolean;
     /**
-     * A path to the emoji image, used for optimistic rendering.
+     * Has the current user selected the emoji or not
      */
-    emojiPath?: string;
+    reacted: boolean;
+    /**
+     * Users collection
+     */
+    users?: User[];
 }
 /**
  * Metadata for composing a summary of emojis that will be shown in the the primary view even if the reaction count is zero
@@ -102,15 +102,15 @@ export declare enum ReactionStatus {
  */
 export type ReactionsState = ReactionsNotLoaded | ReactionsLoading | ReactionsReadyState | ReactionsError;
 export type ReactionsReadyState = {
-    readonly status: ReactionStatus.ready;
     readonly reactions: ReactionSummary[];
+    readonly status: ReactionStatus.ready;
 };
 export type ReactionsLoading = {
     readonly status: ReactionStatus.loading;
 };
 export type ReactionsError = {
-    readonly status: ReactionStatus.error;
     readonly message: string;
+    readonly status: ReactionStatus.error;
 };
 export type ReactionsNotLoaded = {
     readonly status: ReactionStatus.notLoaded;

package/dist/types/types/store.d.ts

@@ -46,12 +46,6 @@ export type StorePropInput = Store | Promise<Store>;
  * store main structure
  */
 export type State = {
-    /**
-     * collection of the different reactions (key => unique reaction id , value => state of the reaction)
-     */
-    reactions: {
-        [key: string]: ReactionsState;
-    };
     /**
      * custom animation for given emojis as true|false (key => unique reaction id, value => collection of emojiIds and true|false to apply custom animation)
      */
@@ -68,4 +62,10 @@ export type State = {
             [emojiId: string]: boolean;
         };
     };
+    /**
+     * collection of the different reactions (key => unique reaction id , value => state of the reaction)
+     */
+    reactions: {
+        [key: string]: ReactionsState;
+    };
 };

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

@@ -13,9 +13,13 @@ export declare const RENDER_COUNTER_TESTID = "counter-container";
 export declare const RENDER_LABEL_TESTID = "counter_label_wrapper";
 export interface CounterProps {
     /**
-     * Count of emoji been selected
+     * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
      */
-    value: number;
+    animationDuration?: Durations;
+    /**
+     * Optional wrapper class name
+     */
+    className?: string;
     /**
      * Has the emoji been selected by given user (defaults to false)
      */
@@ -28,14 +32,6 @@ export interface CounterProps {
      * Label to show when the value surpasses the limit value (defaults to "1k+")
      */
     overLimitLabel?: string;
-    /**
-     * Optional wrapper class name
-     */
-    className?: string;
-    /**
-     * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
-     */
-    animationDuration?: Durations;
     /**
      * Optional prop to use a darker text color for the counter
      */
@@ -44,6 +40,10 @@ export interface CounterProps {
      * Optional prop to show updated styling for counter
      */
     useUpdatedStyles?: boolean;
+    /**
+     * Count of emoji been selected
+     */
+    value: number;
 }
 /**
  * Display reaction count next to the emoji button

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

@@ -9,14 +9,14 @@ export interface EmojiButtonProps {
      * Async provider to fetch the emoji
      */
     emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Event handler when a new emoji is selected
-     */
-    onClick: OnEmojiEvent;
     /**
      * Optional prop for hoverable reaction picker selector emoji
      */
     hoverableReactionPickerSelectorEmoji?: boolean;
+    /**
+     * Event handler when a new emoji is selected
+     */
+    onClick: OnEmojiEvent;
 }
 /**
  * custom button to render the custom emoji selector inside the reaction picker

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

@@ -8,49 +8,49 @@ import { type OpenReactionsDialogOptions } from './Reactions';
 export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
 export interface ReactionProps {
     /**
-     * Data for the reaction
+     * Optional prop for enabling the Reactions Dialog
      */
-    reaction: ReactionSummary;
+    allowUserDialog?: boolean;
     /**
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
     /**
-     * event handler when the emoji button is clicked
+     * Show custom animation or render as standard without animation (defaults to false)
      */
-    onClick: ReactionClick;
+    flash?: boolean;
     /**
-     * Optional event when the mouse cursor hovers over the reaction
+     * Optional function when the user wants to open the Reactions Dialog
      */
-    onMouseEnter?: ReactionMouseEnter;
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
     /**
-     * Optional event when focused the reaction
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
-    onFocused?: ReactionFocused;
+    isViewOnly?: boolean;
     /**
-     * Show custom animation or render as standard without animation (defaults to false)
+     * event handler when the emoji button is clicked
      */
-    flash?: boolean;
+    onClick: ReactionClick;
     /**
-     * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
+     * Optional event when focused the reaction
      */
-    showParticleEffect?: boolean;
+    onFocused?: ReactionFocused;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional event when the mouse cursor hovers over the reaction
      */
-    showOpaqueBackground?: boolean;
+    onMouseEnter?: ReactionMouseEnter;
     /**
-     * Optional prop for enabling the Reactions Dialog
+     * Data for the reaction
      */
-    allowUserDialog?: boolean;
+    reaction: ReactionSummary;
     /**
-     * Optional function when the user wants to open the Reactions Dialog
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
      */
-    isViewOnly?: boolean;
+    showParticleEffect?: boolean;
     /**
      * Optional prop for controlling if the reaction displayed is a default one and should not have a border
      */

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

@@ -1,21 +1,21 @@
 import { type ReactionProps } from './Reaction';
 interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
     ariaLabel: string;
     ariaPressed?: boolean;
-    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    className?: string;
     dataAttributes?: {
         [key: string]: string;
     };
-    testId?: string;
-    children?: React.ReactNode;
-    showSubtleStyle?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    reacted?: boolean;
     showOpaqueBackground?: boolean;
+    showSubtleStyle?: boolean;
+    testId?: string;
     useCompactStyles?: boolean;
-    reacted?: boolean;
 }
 export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

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

@@ -19,55 +19,55 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
-    /**
-     * 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 Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    allowAllEmojis?: boolean;
     /**
      * Optional class name
      */
     className?: string;
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
     /**
      * Enable/Disable the button to be clickable (defaults to false)
      */
     disabled?: boolean;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Optional emoji picker size to control the size of emoji picker
      */
-    onOpen?: () => void;
+    emojiPickerSize?: PickerSize;
     /**
-     * Optional event handler when the emoji picker is clicked outside and closed
+     * Provider for loading emojis
      */
-    onCancel?: () => void;
+    emojiProvider: Promise<EmojiProvider>;
     /**
-     * Optional event handler when the custom emoji picker icon is selected
+     * Optional prop for hoverable reaction picker
      */
-    onShowMore?: () => void;
+    hoverableReactionPicker?: boolean;
     /**
-     * Optional emoji picker size to control the size of emoji picker
+     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
      */
-    emojiPickerSize?: PickerSize;
+    hoverableReactionPickerDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop to say if the reactions component is in a list
      */
-    showOpaqueBackground?: boolean;
+    isListItem?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction summary and picker
+     * Optional event handler when the emoji picker is clicked outside and closed
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onCancel?: () => void;
     /**
-     * Optional prop for displaying text to add a reaction
+     * Optional event handler when the emoji picker is opened
      */
-    showAddReactionText?: boolean;
+    onOpen?: () => void;
+    /**
+     * 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)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
     /**
      * Optional prop for controlling the picker location
      */
@@ -81,27 +81,27 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerTriggerText?: string;
     /**
-     * Optional prop to say if the reactions component is in a list
+     * Optional prop for displaying text to add a reaction
      */
-    isListItem?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop for hoverable reaction picker
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableReactionPicker?: boolean;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
+     * Optional prop for applying subtle styling to reaction summary and picker
      */
-    hoverableReactionPickerDelay?: number;
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
+    popperModifiers?: PopperProps<{}>['modifiers'];
     settings: {
-        showFullPicker: boolean;
         popperPlacement: Placement;
+        showFullPicker: boolean;
     };
-    popperModifiers?: PopperProps<{}>['modifiers'];
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

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

@@ -19,59 +19,63 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
-    /**
-     * 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 Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    allowAllEmojis?: boolean;
     /**
      * Optional class name
      */
     className?: string;
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
     /**
      * Enable/Disable the button to be clickable (defaults to false)
      */
     disabled?: boolean;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Optional emoji picker size to control the size of emoji picker
      */
-    onOpen?: () => void;
+    emojiPickerSize?: PickerSize;
     /**
-     * Optional event handler when the emoji picker is clicked outside and closed
+     * Provider for loading emojis
      */
-    onCancel?: () => void;
+    emojiProvider: Promise<EmojiProvider>;
     /**
-     * Optional event handler when the custom emoji picker icon is selected
+     * Optional prop for hoverable reaction picker
      */
-    onShowMore?: () => void;
+    hoverableReactionPicker?: boolean;
     /**
-     * Optional emoji picker size to control the size of emoji picker
+     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
      */
-    emojiPickerSize?: PickerSize;
+    hoverableReactionPickerDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop to say if the reactions component is in a list
      */
-    showOpaqueBackground?: boolean;
+    isListItem?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction summary and picker
+     * Optional event handler when the emoji picker is clicked outside and closed
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onCancel?: () => void;
     /**
-     * Optional prop for displaying text to add a reaction
+     * Optional event handler when the emoji picker is opened
      */
-    showAddReactionText?: boolean;
+    onOpen?: () => void;
+    /**
+     * 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)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
     /**
      * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop to set the strategy of the reaction picker popup
+     */
+    reactionPickerStrategy?: PopperProps<{}>['strategy'];
     /**
      * Optional prop for controlling icon inside Trigger
      */
@@ -81,34 +85,30 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerTriggerText?: string;
     /**
-     * Optional prop to say if the reactions component is in a list
-     */
-    isListItem?: boolean;
-    /**
-     * Optional prop for hoverable reaction picker
+     * Optional prop for displaying text to add a reaction
      */
-    hoverableReactionPicker?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableReactionPickerDelay?: number;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop to set the strategy of the reaction picker popup
+     * Optional prop for applying subtle styling to reaction summary and picker
      */
-    reactionPickerStrategy?: PopperProps<{}>['strategy'];
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
-    triggerRef: HTMLDivElement | HTMLButtonElement | null;
-    settings: {
-        showFullPicker: boolean;
-        popperPlacement: Placement;
-    };
     isOpen: boolean;
     onClose: () => void;
     popperModifiers?: PopperProps<{}>['modifiers'];
+    settings: {
+        popperPlacement: Placement;
+        showFullPicker: boolean;
+    };
+    triggerRef: HTMLDivElement | HTMLButtonElement | null;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;