@atlaskit/reactions 33.2.11 → 33.2.13

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

@@ -14,60 +14,60 @@ export declare const RENDER_TRIGGER_CONTAINER_TESTID = "render-trigger-container
 export declare const RENDER_LIST_ITEM_WRAPPER_TESTID = "render-list-item-wrapper";
 export interface TriggerProps {
     /**
-     * Optional Event handler when the button to open the picker is clicked
-     * @param e Mouse Dom event
-     * @param analyticsEvent atlaskit analytics event payload of the button
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: AnalyticsEvent) => void;
-    /**
-     * apply "miniMode" className to the button
+     * Aria accessibility attributes that will be added to the button
      */
-    miniMode?: boolean;
+    ariaAttributes?: AriaAttributes;
     /**
      * Enable/Disable the button to be clickable (defaults to false)
      */
     disabled?: boolean;
+    fullWidthSelectorTrayReactionPickerTrigger?: boolean;
     /**
-     * Tooltip content for trigger button
+     * Optional prop for controlling if the summary view reaction picker trigger should be full width
      */
-    tooltipContent: React.ReactNode;
+    fullWidthSummaryViewReactionPickerTrigger?: boolean;
     /**
-     * Aria accessibility attributes that will be added to the button
+     * Optional prop to say if the reactions component is in a list
      */
-    ariaAttributes?: AriaAttributes;
+    isListItem?: boolean;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop for controlling if reaction picker is opened
      */
-    showOpaqueBackground?: boolean;
+    isSelected?: boolean;
     /**
-     * Optional prop for displaying text to add a reaction
+     * apply "miniMode" className to the button
      */
-    showAddReactionText?: boolean;
+    miniMode?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction picker
+     * Optional Event handler when the button to open the picker is clicked
+     * @param e Mouse Dom event
+     * @param analyticsEvent atlaskit analytics event payload of the button
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: AnalyticsEvent) => void;
     /**
      * Optional prop for controlling icon inside Trigger
      */
     reactionPickerTriggerIcon?: React.ReactNode;
-    /**
-     * Optional prop for controlling if reaction picker is opened
-     */
-    isSelected?: boolean;
     /**
      * Optional prop for controlling text inside Trigger
      */
     reactionPickerTriggerText?: string;
     /**
-     * Optional prop for controlling if the summary view reaction picker trigger should be full width
+     * Optional prop for displaying text to add a reaction
      */
-    fullWidthSummaryViewReactionPickerTrigger?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop to say if the reactions component is in a list
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    isListItem?: boolean;
-    fullWidthSelectorTrayReactionPickerTrigger?: boolean;
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Tooltip content for trigger button
+     */
+    tooltipContent: React.ReactNode;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -2,11 +2,11 @@ import React, { type ErrorInfo } from 'react';
 import { type UFOExperience } from '@atlaskit/ufo';
 import { type WithSamplingUFOExperience } from '@atlaskit/emoji';
 export interface UfoErrorBoundaryProps {
+    children?: React.ReactNode;
     /**
      * UFO Experiences to notify failure when the children components fail on rendering
      */
     experiences: UFOExperience[] | WithSamplingUFOExperience[];
-    children?: React.ReactNode;
 }
 /**
  * Error boundary wrapper to notify "failure" for UFO events of components when there was a re-rendering exception caught inside the `componentDidCatch` event handler

package/dist/types/containers/ConnectedReactionPicker/ConnectedReactionPicker.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import { type ReactionPickerProps } from '../../components';
 import { type StorePropInput } from '../../types';
 export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps, 'onSelection'> {
-    /**
-     * Wrapper id for reactions list
-     */
-    containerAri: string;
     /**
      * Individual id for a reaction
      */
     ari: string;
+    /**
+     * Wrapper id for reactions list
+     */
+    containerAri: string;
     /**
      * Reference to the store.
      * @remarks

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -3,28 +3,28 @@ 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' | 'isViewOnly' | 'allowSelectFromSummaryView'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
-    /**
-     * Wrapper id for reactions list
-     */
-    containerAri: string;
     /**
      * Individual id for a reaction
      */
     ari: string;
     /**
-     * Reference to the store.
-     * @remarks
-     * This was initially implemented with a sync and Async versions and will be replaced with just a sync Store in a future release (Please use only the sync version)
+     * Wrapper id for reactions list
      */
-    store: StorePropInput;
+    containerAri: string;
+    /**
+     * Callback function when a reaction is successfully added
+     */
+    onReactionSuccess?: ReactionUpdateSuccess;
     /**
      * Optional boolean to control if particle animation on reactions appear
      */
     particleEffectByEmojiEnabled?: boolean;
     /**
-     * Callback function when a reaction is successfully added
+     * Reference to the store.
+     * @remarks
+     * This was initially implemented with a sync and Async versions and will be replaced with just a sync Store in a future release (Please use only the sync version)
      */
-    onReactionSuccess?: ReactionUpdateSuccess;
+    store: StorePropInput;
 }
 /**
  * Export the mapper function outside the component so easier to do unit tests

package/dist/types/hooks/useFocusTrap.d.ts

@@ -1,5 +1,5 @@
 export type FocusManagerHook = {
-    targetRef: HTMLDivElement | null;
     initialFocusRef: HTMLElement | null;
+    targetRef: HTMLDivElement | null;
 };
 export declare const useFocusTrap: ({ targetRef, initialFocusRef }: FocusManagerHook) => void;

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

@@ -26,8 +26,8 @@ export declare const ufoExperiences: {
  * Optional metadata information in the store used in sending the API client requests
  */
 interface StoreMetadata {
-    subproduct?: string;
     [k: string]: any;
+    subproduct?: string;
 }
 export declare class MemoryReactionsStore implements Store {
     private client;

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 {};