@atlaskit/reactions 21.8.0 → 22.0.0

package/docs/5-graphql-support.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { md, code, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+
+  ### How to get reactions support GraphQL?
+
+  The pre-built \`ReactionClient\` is supporting REST APIs, if you want to support GraphQL, please follow best practice below.
+
+  We have a \`ReactionClient\` interface which can be extended to support integrating with Graphql APIs.
+
+  You can simply create your own \`ReactionGraphQLClient\` to extend our \`ReactionClient\` interface, and implement each method from interface by using your own GraphQL queries or mutations. Just ensure the payload is matched with the type defined from interface. You may need the data transformation before return the promise.
+
+  #### 1. Create your own \`ReactionsGraphQLClient\` to support your own GraphQL APIs:
+
+  ${code`
+  import type { ReactionClient } from "@atlaskit/reactions"
+
+  /**
+  * demo purpose, assume apolloClient has initialized in 'graphqlClient'
+  */
+  import apolloClient from 'graphqlClient'
+
+  export class ReactionsGraphQLClient implements ReactionClient {
+      private clientConfig: ClientConfig;
+      // optional, you can set up a clientConfig if you need some extra options that params from methods of ReactionClient doesn't provide.
+      constructor(clientConfig: ClientConfig) {
+          this.clientConfig = clientConfig;
+      }
+      getReactions(containerAri: string, aris: string[]) {
+          return apolloClient.
+              .query({
+                  query: GET_REACTIONS_QUERY, // your own query to fetch reactions
+                  variables: {
+                    containerAri,
+                    aris,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      getDetailedReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .query({
+                  query: GET_DETAILED_REACTION, // your own query to fetch detailed reaction
+                  variables: {
+                    containerAri,
+                    aris,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      addReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .mutate({
+                  mutation: ADD_REACTION, // your own mutation to add reaction
+                  variables: {
+                    containerAri,
+                    ari,
+                    emojiId,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      deleteReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .mutate({
+                  mutation: REMOVE_REACTION, // your own mutation to delete reaction
+                  variables: {
+                    containerAri,
+                    ari,
+                    emojiId,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+  }
+  `}
+
+  #### 2. Set up ReactionsStore with \`ReactionGraphQLClient\`:
+
+  ${code`
+  const intialState: State = {
+      reactions: {},
+      flash: {}
+  };
+
+  const reactionsStore = useMemo(() => {
+      return new MemoryReactionsStore(
+          new ReactionsGraphQLClient(
+              clientConfig, // client config from your own to provie extra options for your GraphQL APIs
+          ),
+          initialState,
+          {
+              subproduct: 'atlaskit', // e.g. jira, confluence, etc
+          }
+      );
+  }, [clientConfig]);
+  `}
+
+  #### 3. Consume your reactionsStore in your ConnectedReactionsView
+
+  ${code`
+  ReactDOM.render(
+    <ConnectedReactionsView
+      store={reactionsStore}
+      containerAri={containerAri}
+      ari={demoAri}
+      emojiProvider={Promise.resolve(emojiResource)}
+    />
+    container,
+  };`}
+
+${(
+  <>
+    <br />
+    <SectionMessage
+      appearance="information"
+      title="There should be only one instance of EmojiResource in your application"
+    >
+      <p>
+        Above examples show the best practice to integrate Graphql APIs. By
+        extending from our `ReactionsClient` interface, you are free to use any
+        GrapqhQL client, any queries or mutations, as long as they return the
+        same type as defined in the interface.
+      </p>
+    </SectionMessage>
+    <br />
+    <SectionMessage appearance="warning">
+      Use base UI Components `Reactions` from `@atlaskit/reactions` directly
+      with your own implementation around to support GraphQL or custom behavior
+      is at your own risk. Without using ReactionsStore, we can't track the
+      operations of reactions, please add your own tracking to measure. The
+      custom implementation will lead to limited support from us.
+    </SectionMessage>
+  </>
+)}
+
+${(
+  <Props
+    heading="ReactionClient type"
+    props={require('!!extract-react-types-loader!../extract-react-type/reactionClient')}
+  />
+)}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.8.0",
+  "version": "22.0.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "TWP Collaboration Platform",
@@ -36,14 +28,18 @@
     "@atlaskit/analytics-gas-types": "^5.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/emoji": "^66.0.0",
+    "@atlaskit/emoji": "^66.1.0",
     "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/popper": "^5.0.0",
+    "@atlaskit/popper": "^5.4.0",
+    "@atlaskit/spinner": "^15.3.0",
+    "@atlaskit/tabs": "^13.2.12",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",
@@ -62,7 +58,7 @@
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/tooltip": "^17.6.0",
-    "@atlaskit/util-data-test": "^17.5.0",
+    "@atlaskit/util-data-test": "^17.6.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
     "@emotion/jest": "^11.8.0",
@@ -71,17 +67,14 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "@types/webpack-dev-server": "^3.11.2",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "es6-promise": "^4.0.5",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.11.1"
   },
   "keywords": [
     "fabric",

package/dist/types-ts4.0/MockReactionsClient.d.ts

@@ -1,23 +0,0 @@
-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;
-};
-export declare const mockData: {
-    [key: string]: ReactionSummary[];
-};
-/**
- * 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

@@ -1,102 +0,0 @@
-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;
-    };
-};
-/**
- * Used for store failure metadata for analytics
- * @param error The error could be a service error with {code, reason} or an Error
- * @returns any
- */
-export declare const extractErrorInfo: (error: any) => any;

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

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

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

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

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

@@ -1,40 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

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

@@ -1,45 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-/**
- * Test id for component top level div
- */
-export declare const RENDER_COMPONENT_WRAPPER = "counter-wrapper";
-/**
- * Test id for wrapper div of the counter inside the slider
- */
-export declare const RENDER_COUNTER_TESTID = "counter-container";
-/**
- * Counter label value wrapper div
- */
-export declare const RENDER_LABEL_TESTID = "counter_label_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;
-}
-export declare const getLabel: (value: number, overLimitLabel?: string | undefined, limit?: number | undefined) => string;
-/**
- * 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

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

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

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

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

@@ -1,22 +0,0 @@
-/** @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

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

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

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

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

@@ -1,20 +0,0 @@
-/** @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

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

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

@@ -1,5 +0,0 @@
-/** @jsx jsx */
-import { keyframes } from '@emotion/react';
-export declare const flashAnimation: typeof keyframes;
-export declare const containerStyle: import("@emotion/react").SerializedStyles;
-export declare const flashStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,38 +0,0 @@
-/** @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

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

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

@@ -1,10 +0,0 @@
-/**
- * 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/react").SerializedStyles;
-export declare const reactionStyle: import("@emotion/react").SerializedStyles;
-export declare const reactedStyle: import("@emotion/react").SerializedStyles;
-export declare const flashHeight: number;
-export declare const flashStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,50 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { EmojiProvider } from '@atlaskit/emoji/resource';
-import { SelectorProps } from '../Selector';
-import { TriggerProps } from '../Trigger';
-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'>, 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)
-     */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
-    /**
-     * 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

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