@atlaskit/reactions 21.6.0 → 21.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 21.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.6.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 21.6.0
 
 ### Minor Changes

package/MockReactionsClient/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/MockReactionsClient.js",
   "module": "../dist/esm/MockReactionsClient.js",
   "module:es2019": "../dist/es2019/MockReactionsClient.js",
-  "types": "../dist/types/MockReactionsClient.d.ts"
+  "types": "../dist/types/MockReactionsClient.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/MockReactionsClient.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.6.0"
+	"version": "21.6.2"
 }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.6.0"
+	"version": "21.6.2"
 }

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.6.0"
+	"version": "21.6.2"
 }

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/analytics/constants.d.ts

@@ -0,0 +1 @@
+export declare const SAMPLING_RATE_REACTIONS_RENDERED_EXP = 0.02;

package/dist/types-ts4.0/analytics/index.d.ts

@@ -0,0 +1,2 @@
+export * as Analytics from './analytics';
+export * as UFO from './ufo';

package/dist/types-ts4.0/analytics/ufo.d.ts

@@ -0,0 +1,40 @@
+import { ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+/**
+ * Types of experiences
+ */
+export declare enum ExperienceName {
+    REACTIONS_RENDERED = "reactions-rendered",
+    PICKER_OPENED = "reactions-picker-opened",
+    REACTION_ADDED = "reaction-added",
+    REACTION_REMOVED = "reaction-removed",
+    REACTION_DETAILS_FETCHED = "reaction-details-fetched"
+}
+/**
+ * UFO types of components been instrumented
+ */
+export declare enum ComponentName {
+    PICKER_RENDERED = "reactions-picker",
+    REACTIONS = "reactions-list",
+    REACTION_ITEM = "reaction-item"
+}
+/**
+ * Experience when the emoji picker is opened
+ */
+export declare const PickerRender: UFOExperience;
+/**
+ * Experience when the list of reactions gets rendered
+ */
+export declare const ReactionsRendered: ConcurrentExperience;
+/**
+ * Experience when a reaction emoji gets added
+ */
+export declare const ReactionsAdd: ConcurrentExperience;
+/**
+ * Experience when a reaction details gets fetched
+ */
+export declare const ReactionDetailsFetch: ConcurrentExperience;
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+export declare const ReactionsRemove: ConcurrentExperience;
+export declare const sampledReactionsRendered: (instanceId: string) => import("@atlaskit/emoji").WithSamplingUFOExperience;

package/dist/types-ts4.0/client/ReactionServiceClient.d.ts

@@ -0,0 +1,35 @@
+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?: Record<string, any>): Promise<ReactionSummary[]>;
+    deleteReaction(containerAri: string, ari: string, emojiId: string, metadata?: Record<string, any>): Promise<ReactionSummary[]>;
+}

package/dist/types-ts4.0/client/index.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/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-ts4.0/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-ts4.0/components/EmojiButton/index.d.ts

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

package/dist/types-ts4.0/components/EmojiButton/styles.d.ts

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

package/dist/types-ts4.0/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-ts4.0/components/FlashAnimation/index.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/components/Reaction/index.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/components/ReactionPicker/index.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/components/ReactionTooltip/index.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/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-ts4.0/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;

package/dist/types-ts4.0/components/Selector/Selector.d.ts

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import React from 'react';
+import { EmojiId, OnEmojiEvent } from '@atlaskit/emoji/types';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+/**
+ * Test id for wrapper Selector div
+ */
+export declare const RENDER_SELECTOR_TESTID = "render-selector";
+export interface SelectorProps {
+    /**
+     * Provider for loading emojis
+     */
+    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)
+     */
+    showMore?: boolean;
+    /**
+     * Optional event when extra custom emojis icon is selected
+     */
+    onMoreClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Optional emojis shown for user to select from when the reaction add button is clicked (defaults to pre-defined list of emojis {@link constants.DEFAULT_REACTION_EMOJI_IDS})
+     */
+    pickerQuickReactionEmojiIds?: EmojiId[];
+}
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export declare const Selector: React.FC<SelectorProps>;

package/dist/types-ts4.0/components/Selector/index.d.ts

@@ -0,0 +1,3 @@
+export { Selector, RENDER_SELECTOR_TESTID } from './Selector';
+export * as styles from './styles';
+export type { SelectorProps } from './Selector';

package/dist/types-ts4.0/components/Selector/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const selectorStyle: import("@emotion/utils").SerializedStyles;
+export declare const emojiStyle: import("@emotion/utils").SerializedStyles;
+export declare const revealAnimation: import("@emotion/serialize").Keyframes;
+export declare const revealStyle: import("@emotion/utils").SerializedStyles;
+/**
+ * custom css styling for the emoji icon
+ * @param index location of the emoji in the rendered list of items
+ */
+export declare const emojiStyleAnimation: (index: number) => React.CSSProperties;