@atlaskit/reactions 21.8.0 → 22.0.0

package/dist/types/analytics/ufo.d.ts

@@ -7,7 +7,10 @@ export declare enum ExperienceName {
     PICKER_OPENED = "reactions-picker-opened",
     REACTION_ADDED = "reaction-added",
     REACTION_REMOVED = "reaction-removed",
-    REACTION_DETAILS_FETCHED = "reaction-details-fetched"
+    REACTION_DETAILS_FETCHED = "reaction-details-fetched",
+    REACTION_DIALOG_OPENED = "reaction-dialog-opened",
+    REACTION_DIALOG_CLOSED = "reaction-dialog-closed",
+    REACTION_DIALOG_SELECTED_REACTION_CHANGED = "reaction-dialog-selected-reaction-changed"
 }
 /**
  * UFO types of components been instrumented
@@ -15,7 +18,8 @@ export declare enum ExperienceName {
 export declare enum ComponentName {
     PICKER_RENDERED = "reactions-picker",
     REACTIONS = "reactions-list",
-    REACTION_ITEM = "reaction-item"
+    REACTION_ITEM = "reaction-item",
+    REACTION_DIALOG = "reaction-dialog"
 }
 /**
  * Experience when the emoji picker is opened
@@ -29,6 +33,18 @@ export declare const ReactionsRendered: ConcurrentExperience;
  * Experience when a reaction emoji gets added
  */
 export declare const ReactionsAdd: ConcurrentExperience;
+/**
+ * Expeirence when a reaction dialog is opened
+ */
+export declare const ReactionDialogOpened: UFOExperience;
+/**
+ * Experience when a reaction dialog is closed
+ */
+export declare const ReactionDialogClosed: UFOExperience;
+/**
+ * Experience when a reaction changed/fetched from inside the modal dialog
+ */
+export declare const ReactionDialogSelectedReactionChanged: UFOExperience;
 /**
  * Experience when a reaction details gets fetched
  */

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

@@ -38,7 +38,6 @@ export interface CounterProps {
      */
     animationDuration?: number;
 }
-export declare const getLabel: (value: number, overLimitLabel?: string | undefined, limit?: number | undefined) => string;
 /**
  * Display reaction count next to the emoji button
  */

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

@@ -2,11 +2,13 @@
 import React from 'react';
 import { EmojiProvider } from '@atlaskit/emoji';
 import { ReactionSummary, ReactionClick, ReactionMouseEnter } from '../../types';
+import { ReactionTooltipProps } from '../ReactionTooltip';
+import { ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
 export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
-export interface ReactionProps {
+export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDialog'> {
     /**
      * Data for the reaction
      */
@@ -27,10 +29,18 @@ export interface ReactionProps {
      * Optional event when the mouse cursor hovers over the reaction
      */
     onMouseEnter?: ReactionMouseEnter;
+    /**
+     * Optional event when focused the reaction
+     */
+    onFocused?: ReactionFocused;
     /**
      * Show custom animation or render as standard without animation (defaults to false)
      */
     flash?: boolean;
+    /**
+     * Optional function when the user wants to see more users in a modal
+     */
+    handleUserListClick?: (emojiId: string) => void;
 }
 /**
  * Render an emoji reaction button

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

@@ -0,0 +1,19 @@
+/** @jsx   jsx */
+import { FC } from 'react';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+import { ReactionSummary } from '../../types';
+export interface ReactionViewProps {
+    /**
+     * Selected reaction to get user data from
+     */
+    reaction: ReactionSummary;
+    /**
+     * Current emoji selected in the reactions dialog
+     */
+    selectedEmojiId: string;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+}
+export declare const ReactionView: FC<ReactionViewProps>;

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+import { OnCloseHandler } from '@atlaskit/modal-dialog';
+import { onDialogSelectReactionChange, ReactionSummary } from '../../types';
+/**
+ * Test id for the Reactions modal dialog
+ */
+export declare const RENDER_MODAL_TESTID = "render-reactions-modal";
+export interface ReactionsDialogProps {
+    /**
+     * List of reactions to render (defaults to empty list)
+     */
+    reactions: ReactionSummary[];
+    /**
+     * Optional handler when the dialog closes
+     */
+    handleCloseReactionsDialog: OnCloseHandler;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Current emoji selected to show the reactions dialog
+     */
+    selectedEmojiId: string;
+    /**
+     * Optional callback function called when user selects a reaction in reactions dialog
+     */
+    handleSelectReaction?: onDialogSelectReactionChange;
+}
+export declare const ReactionsDialog: FC<ReactionsDialogProps>;

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

@@ -0,0 +1,23 @@
+/** @jsx   jsx */
+import { FC } from 'react';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+import { onDialogSelectReactionChange, ReactionSummary } from '../../types';
+export interface ReactionsListProps {
+    /**
+     * Sorted list of reactions to render in list
+     */
+    reactions: ReactionSummary[];
+    /**
+     * Current emoji selected in the reactions dialog
+     */
+    initialEmojiId: string;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Function to handle clicking on an emoji from the list
+     */
+    onReactionChanged: onDialogSelectReactionChange;
+}
+export declare const ReactionsList: FC<ReactionsListProps>;

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

@@ -0,0 +1 @@
+export { ReactionsDialog } from './ReactionsDialog';

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

@@ -0,0 +1,11 @@
+import { ThemeIds } from '@atlaskit/tokens';
+export declare const containerStyle: (reactionsBorderWidth: number) => import("@emotion/react").SerializedStyles;
+export declare const titleStyle: import("@emotion/react").SerializedStyles;
+export declare const counterStyle: (isSelected: boolean) => import("@emotion/react").SerializedStyles;
+export declare const customTabWrapper: (isSelected: boolean, selectedEmojiId: string, theme: ThemeIds | null) => import("@emotion/react").SerializedStyles;
+export declare const navigationContainerStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionViewStyle: import("@emotion/react").SerializedStyles;
+export declare const userListStyle: import("@emotion/react").SerializedStyles;
+export declare const userStyle: import("@emotion/react").SerializedStyles;
+export declare const customTabListStyles: import("@emotion/react").SerializedStyles;
+export declare const centerSpinner: import("@emotion/react").SerializedStyles;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { PickerSize } from '@atlaskit/emoji/types';
 import { EmojiProvider } from '@atlaskit/emoji/resource';
 import { SelectorProps } from '../Selector';
 import { TriggerProps } from '../Trigger';
@@ -43,6 +44,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional event handler when the custom emoji picker icon is selected
      */
     onShowMore?: () => void;
+    /**
+     * Optional emoji picker size to control the size of emoji picker
+     */
+    emojiPickerSize?: PickerSize;
 }
 /**
  * Picker component for adding reactions

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

@@ -18,5 +18,17 @@ export interface ReactionTooltipProps {
      * Optional Max users to show in the displayed tooltip (defaults to 5)
      */
     maxReactions?: number;
+    /**
+     * Optional function when the user wants to see more users in a modal
+     */
+    handleUserListClick?: (emojiId: string) => void;
+    /**
+     * Optional flag to show reactions dialog (defaults to false)
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional flag for enabling tooltip (defaults to true)
+     */
+    isEnabled?: boolean;
 }
 export declare const ReactionTooltip: React.FC<ReactionTooltipProps>;

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

@@ -1,14 +1,37 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
+import { OnCloseHandler } from '@atlaskit/modal-dialog';
+import { onDialogSelectReactionChange, ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
+import { ReactionProps } from '../Reaction';
 import { ReactionPickerProps } from '../ReactionPicker';
 import { SelectorProps } from '../Selector';
+/**
+ * Set of all available UFO experiences relating to reactions dialog
+ */
+export declare const ufoExperiences: {
+    /**
+     * Expeirence when a reaction dialog is opened
+     */
+    openDialog: import("@atlaskit/ufo").UFOExperience;
+    /**
+     * Experience when a reaction dialog is closed
+     */
+    closeDialog: import("@atlaskit/ufo").UFOExperience;
+    /**
+     * Experience when a reaction changed/fetched from inside the modal dialog
+     */
+    selectedReactionChangeInsideDialog: import("@atlaskit/ufo").UFOExperience;
+};
 /**
  * Test id for wrapper Reactions div
  */
 export declare const RENDER_REACTIONS_TESTID = "render-reactions";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+/**
+ * Test id for the view all reacted user to trigger the dialog
+ */
+export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-users-dialog";
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
     /**
      * event handler to fetching the reactions
      */
@@ -22,7 +45,7 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     reactions?: ReactionSummary[];
     /**
-     * Condition for the reaction list status while been fetched
+     * Condition for the reaction list status while being fetched
      */
     status: ReactionStatus;
     /**
@@ -34,8 +57,12 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     flash?: Record<string, boolean>;
     /**
-     * Optional event when the mouse cursor hovers over the reaction
-     * @param emojiId hovered reaction emoji id
+     * Optional event to get reaction details for an emoji
+     * @param emojiId current reaction emoji id
+     */
+    getReactionDetails?: (emojiId: string) => void;
+    /**
+     * @deprecated use getReactionDetails instead
      */
     onReactionHover?: (emojiId: string) => void;
     /**
@@ -43,9 +70,21 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     errorMessage?: string;
     /**
-     * quickReactionEmojis are emojis that will be shown in the the primary view even if the reaction count is zero
+     * quickReactionEmojiIds are emojis that will be shown in the the primary view even if the reaction count is zero
      */
     quickReactionEmojis?: QuickReactionEmojiSummary;
+    /**
+     * Optional callback function called when opening reactions dialog
+     */
+    onDialogOpenCallback?: (emojiId: string, source?: string) => void;
+    /**
+     * Optional callback function called when closing reactions dialog
+     */
+    onDialogCloseCallback?: OnCloseHandler;
+    /**
+     * Optional callback function called when selecting a reaction in reactions dialog
+     */
+    onDialogSelectReactionCallback?: onDialogSelectReactionChange;
 }
 /**
  * Get content of the tooltip

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

@@ -1,2 +1,3 @@
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
+export declare const seeWhoReacted: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -6,3 +6,4 @@ export { Reactions } from './Reactions';
 export type { ReactionsProps } from './Reactions';
 export { UfoErrorBoundary } from './UfoErrorBoundary';
 export type { UfoErrorBoundaryProps } from './UfoErrorBoundary';
+export { ReactionsDialog } from './ReactionDialog/ReactionsDialog';

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

@@ -2,10 +2,6 @@ import React from 'react';
 import { ReactionPickerProps } from '../../components';
 import { StorePropInput } from '../../types';
 export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps, 'onSelection'> {
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
     /**
      * Wrapper id for reactions list
      */

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

@@ -1,16 +1,7 @@
 import React from 'react';
-import { EmojiProvider } from '@atlaskit/emoji/resource';
 import { ReactionsProps, ReactionPickerProps } from '../../components';
 import { ReactionStatus, Actions, State, StorePropInput } from '../../types';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
-    /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */
@@ -46,7 +37,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
 export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri: string, ari: string) => {
     loadReaction: () => void;
     onReactionClick: (emojiId: string) => void;
-    onReactionHover: (emojiId: string) => void;
+    getReactionDetails: (emojiId: string) => void;
     onSelection: (emojiId: string) => void;
 };
 export declare const ConnectedReactionsView: React.FC<ConnectedReactionsViewProps>;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { UFO } from './analytics';
 export { ReactionServiceClient } from './client';
-export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, } from './types';
+export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, onDialogSelectReactionChange, } from './types';
 export { constants } from './shared';
 export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';

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

@@ -4,18 +4,24 @@ import { EmojiId } from '@atlaskit/emoji/types';
  */
 export declare const DefaultReactions: EmojiId[];
 /**
- * Default label to show for the overLimitLabel prop
+ * Extended list of reactions used only for examples
  */
-export declare const DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = "1k+";
+export declare const ExtendedReactions: EmojiId[];
 /**
- * Default maximum value to use when the emoji received higher than top limit reactions
+ * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
  */
-export declare const DEFAULT_REACTION_TOP_LIMIT = 1000;
+export declare const DefaultReactionsByShortName: Map<string, EmojiId>;
 /**
  * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
+ * Only for use in extended reaction examples
  */
-export declare const DefaultReactionsByShortName: Map<string, EmojiId>;
+export declare const ExtendedReactionsByShortName: Map<string, EmojiId>;
 /**
  * Maximum number of users to show in the tooltip for an emoji reaction
  */
 export declare const TOOLTIP_USERS_LIMIT = 5;
+/**
+ * Maximum number of reactions that will fit in the horizontal scroll of
+ * reactions dialog
+ */
+export declare const NUMBER_OF_REACTIONS_TO_DISPLAY = 9;

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

@@ -14,6 +14,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    moreInfo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     reactWithEmoji: {
         id: string;
         defaultMessage: string;
@@ -29,4 +34,39 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    closeReactionsDialog: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    reactionsCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    leftNavigateLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    rightNavigateLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emojiName: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    seeWhoReacted: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    seeWhoReactedTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -9,3 +9,10 @@ export declare const isLeftClick: (event: React.MouseEvent<HTMLElement>) => bool
  * @param item selected emoji item
  */
 export declare const isDefaultReaction: (item: EmojiId) => boolean;
+export declare const formatStringWithDecimal: (value: string, decimalPlaces: number) => string;
+/**
+ * Truncates numbers >= 1000 to shorthand representations with a maximum of one decimal point.
+ * If the first decimal number is a zero then it's also truncated.
+ * (Ex: 9085 will return 9K, 787555 will return 787.5M)
+ */
+export declare const formatLargeNumber: (value: number) => string;

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

@@ -7,4 +7,14 @@ export interface User {
      * name of user clicked on the reaction
      */
     displayName: string;
+    /**
+     * optional path to a user profile picture
+     */
+    profilePicture?: ProfilePicture;
 }
+/**
+ * Type defining the path to a user profile picture
+ */
+export declare type ProfilePicture = {
+    path: string;
+};

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

@@ -1,6 +1,6 @@
 export type { ReactionAction, Actions } from './Actions';
 export { ReactionStatus } from './reaction';
-export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, } from './reaction';
+export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, onDialogSelectReactionChange, } from './reaction';
 export type { Client, Request } from './client';
 export type { Updater } from './Updater';
 export type { User } from './User';

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

@@ -1,9 +1,16 @@
 /// <reference types="react" />
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { User } from './User';
 /**
  * Collection of reactions as object (key is unique id from containerAri and ari combined)
  */
 export declare type Reactions = Record<string, ReactionSummary[]>;
+/**
+ * Event handler when reactions dialog selected emoji is clicked
+ * @param emojiId selected emoji
+ * @param analyticsEvent Optional analytics event emitted from @atlaskit/tabs component
+ */
+export declare type onDialogSelectReactionChange = (emojiId: string, analyticsEvent: UIAnalyticsEvent) => void;
 /**
  * MetaData for Reaction object
  */
@@ -62,10 +69,16 @@ export interface QuickReactionEmojiSummary {
 export declare type ReactionClick = (id: string, event: React.MouseEvent<HTMLButtonElement>) => void;
 /**
  * Event handler for when the user hovers with the mouse on the reaction
- * @param reaction reaction object
+ * @param emojiId id of emoji
+ * @param event (Optional) custom DOM event handler callback
+ */
+export declare type ReactionMouseEnter = (emojiId: string, event?: React.MouseEvent<any>) => void;
+/**
+ * Event handler for when the user focused on the reaction
+ * @param emojiId id of emoji
  * @param event (Optional) custom DOM event handler callback
  */
-export declare type ReactionMouseEnter = (reaction: ReactionSummary, event?: React.MouseEvent<any>) => void;
+export declare type ReactionFocused = (emojiId: string, event?: React.FocusEvent<any>) => void;
 /**
  * Condition of the reaction when gets loaded from the store
  */

package/docs/0-intro.tsx

@@ -25,6 +25,9 @@ export default md`
   1. [ReactionServiceClient](/packages/elements/reactions/docs/reaction-service-client)
   1. [EmojiResource](https://atlaskit.atlassian.com/packages/elements/emoji/docs/resourced-emoji)
 
+  The guide to supporting GraphQL can be found here:
+  * [Graphql Support](/packages/elements/reactions/docs/graphql-support)
+
   ## Usage
 
   For each of these components, first import the following in your React app as follows: