@atlaskit/reactions 21.5.1 → 21.6.1

package/dist/esm/types/reaction.js

@@ -0,0 +1,34 @@
+/**
+ * Collection of reactions as object (key is unique id from containerAri and ari combined)
+ */
+
+/**
+ * MetaData for Reaction object
+ */
+
+/**
+ * Event handler for when the user clicks on the reaction
+ * @param id give id for the emoji
+ * @param event selected mouse event proerties
+ */
+
+/**
+ * Event handler for when the user hovers with the mouse on the reaction
+ * @param reaction reaction object
+ * @param event (Optional) custom DOM event handler callback
+ */
+
+/**
+ * Condition of the reaction when gets loaded from the store
+ */
+export var ReactionStatus;
+/**
+ * state in which the reaction is at
+ */
+
+(function (ReactionStatus) {
+  ReactionStatus["ready"] = "READY";
+  ReactionStatus["loading"] = "LOADING";
+  ReactionStatus["error"] = "ERROR";
+  ReactionStatus["notLoaded"] = "NOT_LOADED";
+})(ReactionStatus || (ReactionStatus = {}));

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.5.1"
+	"version": "21.6.1"
 }

package/dist/types/MockReactionsClient.d.ts

@@ -0,0 +1,20 @@
+import { Reactions, Client, ReactionSummary } from './types';
+export declare const containerAri = "ari:cloud:owner:demo-cloud-id:container/1";
+export declare const ari = "ari:cloud:owner:demo-cloud-id:item/1";
+export declare const getReactionSummary: (shortName: string, count: number, reacted: boolean) => ReactionSummary;
+export declare const getUser: (id: string, displayName: string) => {
+    id: string;
+    displayName: string;
+};
+/**
+ * Mocked version of the client to fetch user information
+ */
+export declare class MockReactionsClient implements Client {
+    private delay;
+    constructor(delay?: number);
+    private delayPromise;
+    getReactions(containerAri: string, aris: string[]): Promise<Reactions>;
+    getDetailedReaction(containerAri: string, ari: string, emojiId: string): Promise<ReactionSummary>;
+    addReaction(containerAri: string, ari: string, emojiId: string): Promise<ReactionSummary[]>;
+    deleteReaction(containerAri: string, ari: string, emojiId: string): Promise<ReactionSummary[]>;
+}

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

@@ -0,0 +1,96 @@
+import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { EventType } from '@atlaskit/analytics-gas-types';
+import { ReactionSummary, ReactionSource } from '../types';
+export declare type PreviousState = 'new' | 'existingNotReacted' | 'existingReacted';
+export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export declare const createAndFireSafe: <U extends any[], T extends (...args: U) => AnalyticsEventPayload>(createAnalyticsEvent: CreateUIAnalyticsEvent | void, creator: T, ...args: U) => void;
+export declare const createRestSucceededEvent: (actionSubject: string) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createRestFailedEvent: (actionSubject: string, errorCode?: number | undefined) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createReactionsRenderedEvent: (startTime: number) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createPickerButtonClickedEvent: (reactionEmojiCount: number) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createPickerCancelledEvent: (startTime?: number | undefined) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createPickerMoreClickedEvent: (startTime?: number | undefined) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createReactionSelectionEvent: (source: ReactionSource, emojiId: string, reaction?: ReactionSummary | undefined, startTime?: number | undefined) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createReactionHoveredEvent: (startTime?: number | undefined) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};
+export declare const createReactionClickedEvent: (added: boolean, emojiId: string) => {
+    action: string;
+    actionSubject: string;
+    eventType: EventType;
+    actionSubjectId: string | undefined;
+    attributes: {
+        packageName: any;
+        packageVersion: any;
+    };
+};

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

@@ -1,97 +1,2 @@
-import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { EventType } from '@atlaskit/analytics-gas-types';
-import { ReactionSummary, ReactionSource } from '../types';
+export * as Analytics from './analytics';
 export * as UFO from './ufo';
-export declare type PreviousState = 'new' | 'existingNotReacted' | 'existingReacted';
-export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
-export declare const createAndFireSafe: <U extends any[], T extends (...args: U) => AnalyticsEventPayload>(createAnalyticsEvent: CreateUIAnalyticsEvent | void, creator: T, ...args: U) => void;
-export declare const createRestSucceededEvent: (actionSubject: string) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createRestFailedEvent: (actionSubject: string, errorCode?: number | undefined) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createReactionsRenderedEvent: (startTime: number) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createPickerButtonClickedEvent: (reactionEmojiCount: number) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createPickerCancelledEvent: (startTime?: number | undefined) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createPickerMoreClickedEvent: (startTime?: number | undefined) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createReactionSelectionEvent: (source: ReactionSource, emojiId: string, reaction?: ReactionSummary | undefined, startTime?: number | undefined) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createReactionHoveredEvent: (startTime?: number | undefined) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};
-export declare const createReactionClickedEvent: (added: boolean, emojiId: string) => {
-    action: string;
-    actionSubject: string;
-    eventType: EventType;
-    actionSubjectId: string | undefined;
-    attributes: {
-        packageName: any;
-        packageVersion: any;
-    };
-};

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

@@ -1,18 +1,35 @@
-import { Reactions } from '../types/Reactions';
-import { ReactionSummary } from '../types/ReactionSummary';
-import { ReactionClient } from './ReactionClient';
-export declare class ReactionServiceClient implements ReactionClient {
+import { Reactions, ReactionSummary, Client } from '../types';
+/**
+ * Utility class to retrieve/modify all actions on reactions collection
+ */
+export declare class ReactionServiceClient implements Client {
+    /**
+     * oAuth token
+     */
     private sessionToken?;
+    /**
+     * API config
+     */
     private serviceConfig;
+    /**
+     *
+     * @param baseUrl base domain url
+     * @param sessionToken oAuth token for reactions emoji services
+     */
     constructor(baseUrl: string, sessionToken?: string);
+    /**
+     * Get http headers for the "fetch" request
+     * @param hasBody
+     */
     private getHeaders;
+    /**
+     * Send a request to remote service
+     * @param path endpoint api url
+     * @param options Optional custom params
+     */
     private requestService;
     getReactions(containerAri: string, aris: string[]): Promise<Reactions>;
     getDetailedReaction(containerAri: string, ari: string, emojiId: string): Promise<ReactionSummary>;
-    addReaction(containerAri: string, ari: string, emojiId: string, metadata?: {
-        [k: string]: any;
-    }): Promise<ReactionSummary[]>;
-    deleteReaction(containerAri: string, ari: string, emojiId: string, metadata?: {
-        [k: string]: any;
-    }): Promise<ReactionSummary[]>;
+    addReaction(containerAri: string, ari: string, emojiId: string, metadata?: Record<string, any>): Promise<ReactionSummary[]>;
+    deleteReaction(containerAri: string, ari: string, emojiId: string, metadata?: Record<string, any>): Promise<ReactionSummary[]>;
 }

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

@@ -1,3 +1 @@
-export type { ReactionClient, ReactionRequest } from './ReactionClient';
 export { ReactionServiceClient } from './ReactionServiceClient';
-export { MockReactionsClient, ari, containerAri, getReactionSummary, getUser, } from './MockReactionsClient';

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

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import React from 'react';
+/**
+ * Test id for wrapper div
+ */
+export declare const RENDER_COUNTER_TESTID = "counter-container";
+/**
+ * Test id for container div
+ */
+export declare const RENDER_COUNTER_WRAPPER_TESTID = "counter-wrapper";
+export interface CounterProps {
+    /**
+     * Count of emoji been selected
+     */
+    value: number;
+    /**
+     * Has the emoji been selected by given user (defaults to false)
+     */
+    highlight?: boolean;
+    /**
+     * Max threshold of selections to show before having a label (defaults to 1000)
+     */
+    limit?: number;
+    /**
+     * Label to show when the value surpasses the limit value (defaults to "1k+")
+     */
+    overLimitLabel?: string;
+    /**
+     * Optional wrapper class name
+     */
+    className?: string;
+    /**
+     * Duration in ms of how long the motion will take (defaults to "mediumDurationMs" from '@atlaskit/motion')
+     */
+    animationDuration?: number;
+}
+/**
+ * Display reaction count next to the emoji button
+ */
+export declare const Counter: React.FC<CounterProps>;

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

@@ -0,0 +1,3 @@
+export { Counter, RENDER_COUNTER_TESTID, RENDER_COUNTER_WRAPPER_TESTID, } from './Counter';
+export type { CounterProps } from './Counter';
+export * as styles from './styles';

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

@@ -0,0 +1,3 @@
+export declare const countStyle: import("@emotion/utils").SerializedStyles;
+export declare const highlightStyle: import("@emotion/utils").SerializedStyles;
+export declare const containerStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import React from 'react';
+import { EmojiId, OnEmojiEvent, EmojiProvider } from '@atlaskit/emoji';
+export declare const RENDER_BUTTON_TESTID = "button-emoji-id";
+export interface EmojiButtonProps {
+    /**
+     * identifier info for a given emoji
+     */
+    emojiId: EmojiId;
+    /**
+     * Async provider to fetch the emoji
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Event handler when a new emoji is selected
+     */
+    onClick: OnEmojiEvent;
+}
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+export declare const EmojiButton: React.FC<EmojiButtonProps>;

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

@@ -0,0 +1,2 @@
+export { EmojiButton, RENDER_BUTTON_TESTID } from './EmojiButton';
+export type { EmojiButtonProps } from './EmojiButton';

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

@@ -0,0 +1 @@
+export declare const emojiButtonStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import React from 'react';
+export interface FlashAnimationProps {
+    /**
+     * Optional wrapper div class anme
+     */
+    className?: string;
+    /**
+     * Show custom animation or render as standard without animation (defaults to false)
+     */
+    flash?: boolean;
+}
+/**
+ * Test id for wrapper FlashAnimation div
+ */
+export declare const RENDER_FLASHANIMATION_TESTID = "flash-animation";
+/**
+ * Flash animation background component. See Reaction component for usage.
+ */
+export declare const FlashAnimation: React.FC<FlashAnimationProps>;

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

@@ -0,0 +1,2 @@
+export { FlashAnimation, RENDER_FLASHANIMATION_TESTID } from './FlashAnimation';
+export type { FlashAnimationProps } from './FlashAnimation';

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

@@ -0,0 +1,3 @@
+export declare const flashAnimation: import("@emotion/serialize").Keyframes;
+export declare const containerStyle: import("@emotion/utils").SerializedStyles;
+export declare const flashStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import React from 'react';
+import { EmojiProvider } from '@atlaskit/emoji';
+import { ReactionSummary, ReactionClick, ReactionMouseEnter } from '../../types';
+/**
+ * Test id for Reaction item wrapper div
+ */
+export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
+export interface ReactionProps {
+    /**
+     * Data for the reaction
+     */
+    reaction: ReactionSummary;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * event handler when the emoji button is clicked
+     */
+    onClick: ReactionClick;
+    /**
+     * Optional wrapper reaction <button /> class name
+     */
+    className?: string;
+    /**
+     * Optional event when the mouse cursor hovers over the reaction
+     */
+    onMouseEnter?: ReactionMouseEnter;
+    /**
+     * Show custom animation or render as standard without animation (defaults to false)
+     */
+    flash?: boolean;
+}
+/**
+ * Render an emoji reaction button
+ */
+export declare const Reaction: React.FC<ReactionProps>;

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

@@ -0,0 +1,2 @@
+export { Reaction, RENDER_REACTION_TESTID } from './Reaction';
+export type { ReactionProps } from './Reaction';

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

@@ -0,0 +1,10 @@
+/**
+ * Styling Note:
+ * Padding and line height are set within the child components
+ * of FlashAnimation b/c it otherwise throws off the flash styling
+ */
+export declare const emojiStyle: import("@emotion/utils").SerializedStyles;
+export declare const reactionStyle: import("@emotion/utils").SerializedStyles;
+export declare const reactedStyle: import("@emotion/utils").SerializedStyles;
+export declare const flashHeight: number;
+export declare const flashStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import React from 'react';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+import { SelectorProps } from '../Selector';
+import { ReactionSource } from '../../types';
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
+export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+    /**
+     * 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)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * apply "miniMode" className to the <ReactionPicker /> component
+     */
+    miniMode?: 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
+     */
+    onOpen?: () => void;
+    /**
+     * Optional event handler when the emoji picker is clicked outside and closed
+     */
+    onCancel?: () => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
+}
+/**
+ * Picker component for adding reactions
+ */
+export declare const ReactionPicker: React.FC<ReactionPickerProps>;

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

@@ -0,0 +1,2 @@
+export { ReactionPicker, RENDER_REACTIONPICKER_TESTID } from './ReactionPicker';
+export type { ReactionPickerProps } from './ReactionPicker';

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

@@ -0,0 +1,3 @@
+export declare const pickerStyle: import("@emotion/utils").SerializedStyles;
+export declare const contentStyle: import("@emotion/utils").SerializedStyles;
+export declare const popupStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import React from 'react';
+import { ReactionSummary } from '../../types';
+/**
+ * Test id for wrapper ReactionTooltip div
+ */
+export declare const RENDER_REACTIONTOOLTIP_TESTID = "render-reactionTooltip";
+export interface ReactionTooltipProps {
+    /**
+     * Optional name for the reaction emoji
+     */
+    emojiName?: string;
+    /**
+     * Info on the emoji reaction to render
+     */
+    reaction: ReactionSummary;
+    /**
+     * Optional Max users to show in the displayed tooltip (defaults to 5)
+     */
+    maxReactions?: number;
+}
+export declare const ReactionTooltip: React.FC<ReactionTooltipProps>;

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

@@ -0,0 +1,2 @@
+export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID, } from './ReactionTooltip';
+export type { ReactionTooltipProps } from './ReactionTooltip';

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

@@ -0,0 +1,4 @@
+export declare const verticalMargin = 5;
+export declare const tooltipStyle: import("@emotion/utils").SerializedStyles;
+export declare const emojiNameStyle: import("@emotion/utils").SerializedStyles;
+export declare const footerStyle: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+import React from 'react';
+import { ReactionStatus, ReactionClick, ReactionSummary } from '../../types';
+import { ReactionPickerProps } from '../ReactionPicker';
+import { SelectorProps } from '../Selector';
+/**
+ * Test id for wrapper Reactions div
+ */
+export declare const RENDER_REACTIONS_TESTID = "render-reactions";
+/**
+ * Test id for the tooltip
+ */
+export declare const RENDER_TOOLTIP_TESTID = "render-tooltip";
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+    /**
+     * event handler to fetching the reactions
+     */
+    loadReaction: () => void;
+    /**
+     * Event callback when an emoji button is selected
+     */
+    onSelection: (emojiId: string) => void;
+    /**
+     * Optional list of reactions to render (defaults to empty list)
+     */
+    reactions?: ReactionSummary[];
+    /**
+     * Condition for the reaction list status while been fetched
+     */
+    status: ReactionStatus;
+    /**
+     * event handler when the emoji button is clicked
+     */
+    onReactionClick: ReactionClick;
+    /**
+     * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
+     */
+    flash?: Record<string, boolean>;
+    /**
+     * Optional event when the mouse cursor hovers over the reaction
+     * @param emojiId hovered reaction emoji id
+     */
+    onReactionHover?: (emojiId: string) => void;
+    /**
+     * Optional error message to show when unable to display the reaction emoji
+     */
+    errorMessage?: string;
+    /**
+     * the container for reactions/ari in the page (attached to the "quickReactionEmojiIds" prop)
+     */
+    containerAri: string;
+    /**
+     * unique Atlassian identifier for an emoji (attached to the "quickReactionEmojiIds" prop)
+     */
+    ari: string;
+    /**
+     * quickReactionEmojiIds are emojis that will be shown in the the primary view even if the reaction count is zero
+     */
+    quickReactionEmojiIds?: string[];
+}
+/**
+ * Renders list of reactions
+ */
+export declare const Reactions: React.FC<ReactionsProps>;

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

@@ -0,0 +1,2 @@
+export { Reactions, RENDER_REACTIONS_TESTID, RENDER_TOOLTIP_TESTID, } from './Reactions';
+export type { ReactionsProps } from './Reactions';

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

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