@atlaskit/emoji 64.7.0 → 65.1.0

package/report.api.md

@@ -0,0 +1,1287 @@
+## API Report File for "@atlaskit/emoji"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { AbstractResource } from '@atlaskit/util-service-support';
+import { Component } from 'react';
+import { ComponentClass } from 'react';
+import { ConcurrentExperience } from '@atlaskit/ufo';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ForwardRefExoticComponent } from 'react';
+import { Provider } from '@atlaskit/util-service-support/types';
+import { PureComponent } from 'react';
+import { default as React_2 } from 'react';
+import { RefAttributes } from 'react';
+import { ServiceConfig } from '@atlaskit/util-service-support';
+import { SyntheticEvent } from 'react';
+import { UFOExperience } from '@atlaskit/ufo';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+export { AbstractResource };
+
+export declare interface AltRepresentations {
+  [key: string]: EmojiServiceRepresentation;
+}
+
+declare interface BaseResourcedEmojiProps {
+  emojiId: EmojiId;
+  showTooltip?: boolean;
+  fitToHeight?: number;
+}
+
+export declare interface CategoryDescription {
+  id: string;
+  name: keyof typeof messages;
+  icon: any;
+  order: number;
+}
+
+export declare type CategoryId =
+  | 'FREQUENT'
+  | 'PEOPLE'
+  | 'NATURE'
+  | 'FOODS'
+  | 'ACTIVITY'
+  | 'PLACES'
+  | 'OBJECTS'
+  | 'SYMBOLS'
+  | 'FLAGS'
+  | 'ATLASSIAN'
+  | 'CUSTOM';
+
+export declare const customCategory = 'CUSTOM';
+
+export declare const defaultEmojiHeight = 20;
+
+/**
+ * Denormalised an emoji response (emojis + sprite references) into an array of
+ * emoji with local sprite definitions.
+ */
+export declare const denormaliseEmojiServiceResponse: (
+  emojiData: EmojiServiceResponse,
+) => EmojiResponse;
+
+/**
+ * A queue which will limit the number of duplicates of type T that it holds. When the duplicate limit is
+ * reached the earliest inserted duplicate (the "original") is removed to make room for the new insertion.
+ */
+declare class DuplicateLimitedQueue<T> {
+  private maximumSize;
+  private perItemSize;
+  private items;
+  private itemCountMap;
+  /**
+   * An array derived from items and itemCountMap which holds each item once and is ordered by
+   * how often an item is duplicated in the items array.
+   */
+  private itemsOrderedByFrequency;
+  /**
+   * Construct a new DuplicateLimitedQueue.
+   *
+   * @param options the options for this queue.
+   */
+  constructor(options: QueueOptions);
+  /**
+   * @param item the item to add to the queue.
+   */
+  enqueue(item: T): void;
+  /**
+   * Return the items in the queue, ordered by how often they are duplicated. The items with the
+   * most duplicates come first in the returned Array.
+   *
+   * If there are no items in the queue then an empty Array will be returned.
+   */
+  getItemsOrderedByDuplicateCount(): Array<T>;
+  /**
+   * Exposed for storybook/testing purposes only. Clear the contents of the queue.
+   */
+  clear(): void;
+  /**
+   * A more efficient mechanism for adding multiple items. Ordering is only performed once all
+   * the items have been added.
+   *
+   * @param items the items to be enqueued, which happens in their presented order.
+   */
+  protected bulkEnqueue(items: T[]): void;
+  /**
+   * Return the items currently stored in the queue.
+   */
+  protected getItems(): T[];
+  private createEmptyState;
+  /**
+   * Enqueue the supplied item, keeping consistency with the limits configured. However no ordering is
+   * performed by this enqueuing. You must trigger that manually if required.
+   *
+   * @param item the item to be queued
+   */
+  private enqueueWithoutOrdering;
+  /**
+   * Get an array of items from the queue ordered by how often they are duplicated in the queue.
+   */
+  private orderItemsByFrequency;
+  private decrementCount;
+  /**
+   * Walk the list of items and remove the first occurrence of the matching item.
+   *
+   * @param item the item to be removed.
+   */
+  private removeFirstOccurrence;
+  /**
+   * Remove the first item from the queue and update the itemCountMap accordingly.
+   * @return the item add the front of the queue or undefined if the queue is empty
+   */
+  private remove;
+  /**
+   * Add the supplied item to the end of the queue and update the itemCountMap accordingly.
+   * @param item the item to be added to the queue
+   */
+  private add;
+}
+
+export declare const Emoji: (props: Props) => JSX.Element;
+
+export declare interface EmojiDescription extends EmojiId {
+  name?: string;
+  order?: number;
+  type: string;
+  category: string;
+  ascii?: string[];
+  createdDate?: string;
+  creatorUserId?: string;
+  representation: EmojiRepresentation;
+  altRepresentation?: EmojiRepresentation;
+  searchable: boolean;
+}
+
+export declare interface EmojiDescriptionWithVariations
+  extends EmojiDescription {
+  skinVariations?: EmojiDescription[];
+}
+
+/**
+ * Minimum information to defined an emoji is the shortName.
+ * In order to uniquely define an emoji, the id should be included, and is
+ * used in preference to shortName if provided, and has a matching emoji.
+ * If not emoji can be found by id (e.g. a custom emoji has been removed),
+ * fallback behaviour will be to attempt to find a matching emoji by shortName.
+ */
+export declare interface EmojiId {
+  shortName: string;
+  id?: string;
+  fallback?: string;
+}
+
+export declare const emojiImage = 'emoji-common-emoji-image';
+
+export declare interface EmojiImageRepresentation {
+  height: number;
+  width: number;
+}
+
+/**
+ * Emoji providers should return JSON in the format defined by EmojiServiceResponse.
+ */
+export declare class EmojiLoader {
+  private config;
+  constructor(config: EmojiLoaderConfig);
+  /**
+   * Returns a promise with an array of Emoji from all providers.
+   */
+  loadEmoji(): Promise<EmojiResponse>;
+}
+
+declare interface EmojiLoaderConfig extends ServiceConfig {
+  getRatio?: () => number;
+}
+
+export declare interface EmojiMeta {
+  spriteSheets?: SpriteSheets;
+  mediaApiToken?: MediaApiToken;
+}
+
+export declare const emojiNode = 'emoji-common-node';
+
+declare const EmojiPicker: ForwardRefExoticComponent<
+  Omit<Props_3 & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> &
+    RefAttributes<any>
+>;
+export { EmojiPicker };
+export default EmojiPicker;
+
+export declare const emojiPickerHeight = 295;
+
+export declare const emojiPickerWidth = 350;
+
+export declare const EmojiPlaceholder: (props: Props_2) => JSX.Element;
+
+declare interface EmojiProgessCallback {
+  (progress: EmojiProgress): void;
+}
+
+declare interface EmojiProgress {
+  readonly percent: number;
+}
+
+export declare interface EmojiProvider
+  extends Provider<string, EmojiSearchResult, any, undefined, SearchOptions> {
+  /**
+   * Returns an immutable copy of EmojiDescription where mediaPath has token and client appended to url
+   *
+   * Will allow emoji to render site emojis without needing to fail first
+   */
+  getMediaEmojiDescriptionURLWithInlineToken(
+    emoji: EmojiDescription,
+  ): Promise<EmojiDescription>;
+  /**
+   * Returns the first matching emoji matching the shortName, or null if none found.
+   *
+   * Will load media api images before returning.
+   */
+  findByShortName(
+    shortName: string,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  /**
+   * Returns the first matching emoji matching the emojiId.id.
+   *
+   * If not found or emojiId.id is undefined, fallback to a search by shortName.
+   *
+   * Will load media api images before returning.
+   */
+  findByEmojiId(
+    emojiId: EmojiId,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  /**
+   * Return the emoji that matches the supplied id or undefined. As with findByEmojiId, this call should load
+   * the media api images before returning.
+   */
+  findById(
+    id: string,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  /**
+   * Finds emojis belonging to specified category.
+   *
+   * Does not automatically load Media API images.
+   */
+  findInCategory(categoryId: string): Promise<EmojiDescription[]>;
+  /**
+   * Returns a map matching ascii representations to their corresponding EmojiDescription.
+   */
+  getAsciiMap(): Promise<Map<string, EmojiDescription>>;
+  /**
+   * Returns, in a Promise, an array of the most frequently used emoji, ordered from most frequent to least frequent.
+   * If there is no frequently used data then an empty array should be returned.
+   *
+   * @param options supply options to be applied to the request.
+   */
+  getFrequentlyUsed(options?: SearchOptions): Promise<EmojiDescription[]>;
+  /**
+   * Records an emoji selection, for example for using in tracking recent emoji.
+   * If no recordConfig is configured then a resolved promise should be returned
+   *
+   * Optional.
+   */
+  recordSelection?(emoji: EmojiDescription): Promise<any>;
+  /**
+   * Deletes the given emoji from the site emoji service
+   * No changes are made if it is not a media emoji, no siteEmojiResource has been initialised
+   * or the user is not authorised.
+   * It should also be removed from the EmojiResource so it cannot be returned via search
+   *
+   * Optional.
+   *
+   * @return a boolean indicating whether the delete was successful
+   */
+  deleteSiteEmoji(emoji: EmojiDescription): Promise<boolean>;
+  /**
+   * Load media emoji that may require authentication to download, producing
+   * a new EmojiDescription to be used for rendering, if necessary.
+   *
+   * Future results may be returned from a cache.
+   *
+   * Acts as a no-op if not a media emoji.
+   *
+   * Downloads and caches the altRepresentation image if useAlt is passed in
+   *
+   * @return an OptionalEmojiDescription or a promise for one, may be the same as the input,
+   *   or updated with a new url to cached image data. Will return the original EmojiDescription
+   *   if not a custom emoji.
+   */
+  loadMediaEmoji(
+    emoji: EmojiDescription,
+    useAlt?: boolean,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  /**
+   * Indicates if media emoji should be rendered optimistically,
+   * i.e. assume the url can be rendered directly from the URL, and
+   * only explicitly loaded via loadEmojiImageData if it fails to load.
+   *
+   * If useAlt is provided, the altRepresentation image URL is used
+   */
+  optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
+  /**
+   * Used by the picker and typeahead to obtain a skin tone preference
+   * if the user has previously selected one via the Tone Selector
+   */
+  getSelectedTone(): ToneSelection;
+  /**
+   * Used by Tone Selector to indicate to the provider that the user
+   * has selected a skin tone preference that should be remembered
+   */
+  setSelectedTone(tone: ToneSelection): void;
+  /**
+   * Returns a list of all the non-standard categories with emojis in the EmojiRepository
+   * e.g. 'FREQUENT', 'ATLASSIAN' and 'CUSTOM'
+   */
+  calculateDynamicCategories?(): Promise<string[]>;
+  /**
+   * Returns the logged user passed by the Product
+   */
+  getCurrentUser(): OptionalUser;
+}
+
+export declare class EmojiRepository {
+  private emojis;
+  private fullSearch;
+  private shortNameMap;
+  private idMap;
+  private asciiMap;
+  private dynamicCategoryList;
+  private static readonly defaultEmojiWeight;
+  protected usageTracker: UsageFrequencyTracker;
+  constructor(emojis: EmojiDescription[], usageTracker?: UsageFrequencyTracker);
+  /**
+   * Returns all available (and searchable) emoji in some default order.
+   */
+  all(): EmojiSearchResult;
+  /**
+   * Text search of emoji shortName and name field for suitable matches.
+   *
+   * Returns an array of all (searchable) emoji if query is empty or null, otherwise returns matching emoji.
+   *
+   * You can change how the results are sorted by specifying a custom EmojiComparator in the SearchOptions. If
+   * you don't want any sorting you can also disable via the SearchOptions (this might be a useful optimisation).
+   * If no sort is specified in SearchOptions then a default sorting it applied based on the query.
+   */
+  search(query?: string, options?: SearchOptions): EmojiSearchResult;
+  /**
+   * Returns all emoji with matching shortName
+   */
+  findAllMatchingShortName(shortName: string): EmojiDescription[];
+  /**
+   * Returns the first matching emoji matching the shortName, or null if none found.
+   */
+  findByShortName(shortName: string): OptionalEmojiDescription;
+  /**
+   * Returns the first matching emoji matching the id, or null if none found.
+   */
+  findById(id: string): OptionalEmojiDescription;
+  findByAsciiRepresentation(asciiEmoji: string): OptionalEmojiDescription;
+  findInCategory(categoryId: CategoryId): EmojiDescription[];
+  addUnknownEmoji(emoji: EmojiDescription): void;
+  getAsciiMap(): Map<string, EmojiDescription>;
+  /**
+   * Return the most frequently used emoji, ordered from most frequent to least frequent. Return an empty array if
+   * there are none.
+   *
+   * @param options optional settings to be applied to the set of frequently used emoji
+   */
+  getFrequentlyUsed(options?: SearchOptions): EmojiDescription[];
+  getDynamicCategoryList(): CategoryId[];
+  /**
+   * Call this on emoji usage to allow the EmojiRepository to track the usage of emoji (which could be useful
+   * in sorting, etc).
+   *
+   * @param emoji the emoji that was just used
+   */
+  used(emoji: EmojiDescription): void;
+  delete(emoji: EmojiDescription): void;
+  private withAsciiMatch;
+  private applySearchOptions;
+  private initMembers;
+  /**
+   * Optimisation to initialise all map member variables in single loop over emojis
+   */
+  private initRepositoryMetadata;
+  private initSearchIndex;
+  private getAllSearchableEmojis;
+  private addToMaps;
+  private addToDynamicCategories;
+}
+
+export declare type EmojiRepresentation =
+  | SpriteRepresentation
+  | ImageRepresentation
+  | MediaApiRepresentation
+  | undefined;
+
+export declare class EmojiResource
+  extends EmojiResource_2
+  implements UploadingEmojiProvider {
+  protected allowUpload: boolean;
+  constructor(config: EmojiResourceConfig);
+  isUploadSupported(): Promise<boolean>;
+  uploadCustomEmoji(upload: EmojiUpload): Promise<EmojiDescription>;
+  prepareForUpload(): Promise<void>;
+}
+
+declare class EmojiResource_2
+  extends AbstractResource<
+    string,
+    EmojiSearchResult,
+    any,
+    undefined,
+    SearchOptions
+  >
+  implements EmojiProvider {
+  protected recordConfig?: ServiceConfig;
+  protected emojiRepository?: EmojiRepository;
+  protected lastQuery?: LastQuery;
+  protected activeLoaders: number;
+  protected retries: Map<Retry<any>, ResolveReject<any>>;
+  protected siteEmojiResource?: SiteEmojiResource;
+  protected selectedTone: ToneSelection;
+  protected currentUser?: User;
+  constructor(config: EmojiResourceConfig);
+  private getProviderType;
+  protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;
+  protected initSiteEmojiResource(
+    emojiResponse: EmojiResponse,
+    provider: ServiceConfig,
+  ): Promise<void>;
+  private performRetries;
+  private loadStoredTone;
+  protected refreshLastFilter(): void;
+  protected isLoaded: () => false | EmojiRepository | undefined;
+  protected retryIfLoading<T>(retry: Retry<T>, defaultResponse: T): Promise<T>;
+  protected notifyResult(result: EmojiSearchResult): void;
+  /**
+   *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+   */
+  getMediaEmojiDescriptionURLWithInlineToken(
+    emoji: EmojiDescription,
+  ): Promise<EmojiDescription>;
+  loadMediaEmoji(
+    emoji: EmojiDescription,
+    useAlt?: boolean,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
+  filter(query?: string, options?: SearchOptions): void;
+  findByShortName(
+    shortName: string,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  findByEmojiId(
+    emojiId: EmojiId,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  findById(
+    id: string,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  findInCategory(categoryId: CategoryId): Promise<EmojiDescription[]>;
+  getAsciiMap(): Promise<Map<string, EmojiDescription>>;
+  getFrequentlyUsed(options?: SearchOptions): Promise<EmojiDescription[]>;
+  /**
+   * Record the selection of an emoji to a remote service if 'recordConfig' has been supplied.
+   * Regardless of the recordConfig, emoji selections will always be recorded on the EmojiRepository
+   * for the purposes of tracking the frequency of use.
+   *
+   * @param emoji The full description of the emoji to record usage for.
+   */
+  recordSelection(emoji: EmojiDescription): Promise<any>;
+  deleteSiteEmoji(emoji: EmojiDescription): Promise<boolean>;
+  getSelectedTone(): ToneSelection;
+  setSelectedTone(tone: ToneSelection): void;
+  calculateDynamicCategories(): Promise<CategoryId[]>;
+  getCurrentUser(): OptionalUser;
+  protected addUnknownEmoji(emoji: EmojiDescription): void;
+}
+
+export declare interface EmojiResourceConfig {
+  /**
+   * The service configuration for remotely recording emoji selections.
+   * A post will be performed to this URL with the EmojiId as the body.
+   */
+  recordConfig?: ServiceConfig;
+  /**
+   * This defines the different providers. Later providers will override earlier
+   * providers when performing shortName based look up.
+   */
+  providers: ServiceConfig[];
+  /**
+   * Must be set to true to enable upload support in the emoji components.
+   *
+   * Can be used for the restriction of the upload UI based on permissions, or feature flags.
+   *
+   * Note this also requires that other conditions are met (for example, one of the providers
+   * must support upload for the UploadingEmojiResource implementation of UploadingEmojiProvider).
+   */
+  allowUpload?: boolean;
+  /**
+   * Logged user in the Product.
+   */
+  currentUser?: User;
+}
+
+export declare interface EmojiResponse {
+  emojis: EmojiDescriptionWithVariations[];
+  mediaApiToken?: MediaApiToken;
+}
+
+export declare interface EmojiSearchResult {
+  emojis: EmojiDescription[];
+  query?: string;
+}
+
+export declare interface EmojiServiceDescription {
+  id: string;
+  shortName: string;
+  name?: string;
+  order?: number;
+  fallback?: string;
+  ascii?: string[];
+  createdDate?: string;
+  creatorUserId?: string;
+  type: string;
+  category: string;
+  representation: EmojiServiceRepresentation;
+  altRepresentations?: AltRepresentations;
+  searchable: boolean;
+}
+
+export declare interface EmojiServiceDescriptionWithVariations
+  extends EmojiServiceDescription {
+  skinVariations?: EmojiServiceDescription[];
+}
+
+export declare type EmojiServiceRepresentation =
+  | SpriteServiceRepresentation
+  | ImageRepresentation;
+
+/**
+ * The expected response from an Emoji service.
+ */
+export declare interface EmojiServiceResponse {
+  emojis: EmojiServiceDescriptionWithVariations[];
+  meta?: EmojiMeta;
+}
+
+export declare const emojiSprite = 'emoji-common-emoji-sprite';
+
+export declare class EmojiTypeAhead extends LoadingEmojiComponent<
+  Props_7,
+  State
+> {
+  static AsyncLoadedComponent?: ComponentClass<Props_8>;
+  state: {
+    asyncLoadedComponent: React_2.ComponentClass<Props_8, any> | undefined;
+  };
+  constructor(props: Props_7);
+  selectNext: () => void;
+  selectPrevious: () => void;
+  chooseCurrentSelection: () => void;
+  count: () => number;
+  asyncLoadComponent(): void;
+  renderLoaded(
+    loadedEmojiProvider: EmojiProvider,
+    EmojiTypeAheadComponent: ComponentClass<Props_8>,
+  ): JSX.Element | null;
+}
+
+declare interface EmojiTypeAheadBaseProps {
+  onSelection?: OnEmojiEvent;
+  query?: string;
+  listLimit?: number;
+  onOpen?: OnLifecycle;
+  onClose?: OnLifecycle;
+  createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+
+export declare class EmojiTypeAheadItem extends PureComponent<Props_11, {}> {
+  onEmojiSelected: React_2.MouseEventHandler<HTMLDivElement>;
+  onEmojiMenuItemMouseMove: React_2.MouseEventHandler<HTMLDivElement>;
+  render(): JSX.Element;
+}
+
+export declare interface EmojiUpload {
+  name: string;
+  shortName: string;
+  filename: string;
+  dataURL: string;
+  width: number;
+  height: number;
+}
+
+export declare type EmojiUploader = EmojiUploaderInternal;
+
+export declare const EmojiUploader: React_2.ForwardRefExoticComponent<
+  Omit<Props_5, keyof WithAnalyticsEventsProps> & React_2.RefAttributes<any>
+>;
+
+declare class EmojiUploaderInternal extends LoadingEmojiComponent<
+  Props_5,
+  State
+> {
+  static AsyncLoadedComponent?: ComponentClass<Props_6>;
+  state: {
+    asyncLoadedComponent: React_2.ComponentClass<Props_6, any> | undefined;
+  };
+  constructor(props: Props_5);
+  asyncLoadComponent(): void;
+  renderLoaded(
+    loadedEmojiProvider: EmojiProvider,
+    EmojiUploadComponent: ComponentClass<Props_6>,
+  ): JSX.Element;
+}
+
+/**
+ * Describes an emoji which is a variant of some base emoji. This is used when you want to promote the
+ * skinVariations in an EmojiDescriptionWithVariations to represent them along side their base representations.
+ */
+export declare interface EmojiVariationDescription extends EmojiDescription {
+  /** The id of the 'non-variant version of the emoji */
+  baseId: string;
+}
+
+export declare interface ImageRepresentation extends EmojiImageRepresentation {
+  imagePath: string;
+}
+
+declare interface LastQuery {
+  query?: string;
+  options?: SearchOptions;
+}
+
+/**
+ * A base class for components that don't want to start rendering
+ * until the EmojiProvider is resolved.
+ * Notes: super.componentDidMount and super.componentWillUnmount will need to be
+ * called explicitly if they are overridden on the child class.
+ */
+declare abstract class LoadingEmojiComponent<
+  P extends Props_4,
+  S extends State
+> extends Component<P, S> {
+  private isUnmounted;
+  constructor(props: P, state: S);
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Readonly<P>): void;
+  componentWillUnmount(): void;
+  private loadEmojiProvider;
+  private loaded;
+  abstract asyncLoadComponent(): void;
+  protected setAsyncState(asyncLoadedComponent: ComponentClass<any>): void;
+  renderLoading(): JSX.Element | null;
+  abstract renderLoaded(
+    loadedEmojiProvider: EmojiProvider,
+    asyncLoadedComponent: ComponentClass<any>,
+  ): JSX.Element | null;
+  render(): JSX.Element | null;
+}
+
+export declare interface MediaApiRepresentation
+  extends EmojiImageRepresentation {
+  mediaPath: string;
+}
+
+/**
+ * An access token for emoji stored in the MediaApi
+ * (indicated by urls beginning with the url of the token.)
+ */
+export declare interface MediaApiToken {
+  url: string;
+  clientId: string;
+  jwt: string;
+  collectionName: string;
+  expiresAt: number;
+}
+
+export declare type Message = React.ReactNode;
+
+declare const messages: {
+  deleteEmojiTitle: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  deleteEmojiDescription: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  deleteEmojiLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  addCustomEmojiLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiPlaceholder: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiNameAriaLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiChooseFileTitle: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiChooseFileScreenReaderDescription: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiSelectSkinToneButtonAriaLabelText: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiImageRequirements: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiPreviewTitle: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiPreview: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  addEmojiLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  retryLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  cancelLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  searchPlaceholder: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  searchLabel: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  categoriesSearchResults: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  frequentCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  peopleCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  natureCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  foodsCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  activityCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  placesCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  objectsCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  symbolsCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  flagsCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  productivityCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  userUploadsCustomCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  allUploadsCustomCategory: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  deleteEmojiFailed: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiInvalidImage: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiUploadFailed: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+  emojiImageTooBig: {
+    id: string;
+    defaultMessage: string;
+    description: string;
+  };
+};
+
+export declare interface OnCategory {
+  (categoryId: CategoryId | null): void;
+}
+
+export declare interface OnEmojiEvent<T = any> {
+  (
+    emojiId: EmojiId,
+    emoji: OptionalEmojiDescription,
+    event?: SyntheticEvent<T>,
+  ): void;
+}
+
+declare interface OnLifecycle {
+  (): void;
+}
+
+export declare interface OnToneSelected {
+  (variation: number): void;
+}
+
+export declare interface OnToneSelectorCancelled {
+  (): void;
+}
+
+export declare type OptionalEmojiDescription = EmojiDescription | undefined;
+
+export declare type OptionalEmojiDescriptionWithVariations =
+  | EmojiDescriptionWithVariations
+  | undefined;
+
+export declare type OptionalUser = User | undefined;
+
+declare interface PickerRefHandler {
+  (ref: any): any;
+}
+
+declare interface Props {
+  /**
+   * The emoji to render
+   */
+  emoji: EmojiDescription;
+  /**
+   * Show the emoji as selected
+   */
+  selected?: boolean;
+  /**
+   * Automatically show the emoji as selected based on mouse hover.
+   *
+   * CSS, fast, does not require a re-render, but selected state not
+   * externally controlled via props.
+   */
+  selectOnHover?: boolean;
+  /**
+   * Called when an emoji is selected
+   */
+  onSelected?: OnEmojiEvent;
+  /**
+   * Called when the mouse moved over the emoji.
+   */
+  onMouseMove?: OnEmojiEvent;
+  /**
+   * Called when an emoji is deleted
+   */
+  onDelete?: OnEmojiEvent;
+  /**
+   * Callback for if an emoji image fails to load.
+   */
+  onLoadError?: OnEmojiEvent<HTMLImageElement>;
+  /**
+   * Additional css classes, if required.
+   */
+  className?: string;
+  /**
+   * Show a tooltip on mouse hover.
+   */
+  showTooltip?: boolean;
+  /**
+   * Show a delete button on mouse hover
+   * Used only for custom emoji
+   */
+  showDelete?: boolean;
+  /**
+   * Fits emoji to height in pixels, keeping aspect ratio
+   */
+  fitToHeight?: number;
+  shouldBeInteractive?: boolean;
+}
+
+declare interface Props_10 extends BaseResourcedEmojiProps {
+  emojiProvider: EmojiResource;
+}
+
+declare interface Props_11 {
+  onMouseMove: OnEmojiEvent;
+  onSelection: OnEmojiEvent;
+  selected: boolean;
+  emoji: EmojiDescription;
+}
+
+declare interface Props_2 {
+  shortName: string;
+  size?: number;
+  showTooltip?: boolean;
+  representation?: EmojiImageRepresentation;
+}
+
+declare interface Props_3 extends Props_4 {
+  onSelection?: OnEmojiEvent;
+  onPickerRef?: PickerRefHandler;
+  hideToneSelector?: boolean;
+}
+
+declare interface Props_4 {
+  emojiProvider: Promise<EmojiProvider>;
+}
+
+declare interface Props_5 extends Props_4 {
+  onUploaderRef?: UploadRefHandler;
+  createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+
+declare interface Props_6 {
+  emojiProvider: EmojiProvider;
+  onUploaderRef?: UploadRefHandler;
+  createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+
+declare interface Props_7 extends EmojiTypeAheadBaseProps, Props_4 {
+  /** CSS selector, or target HTML element */
+  target?: string | HTMLElement;
+  position?: RelativePosition;
+  zIndex?: number | string;
+  offsetX?: number;
+  offsetY?: number;
+}
+
+declare interface Props_8 extends EmojiTypeAheadBaseProps {
+  emojiProvider: EmojiProvider;
+}
+
+declare interface Props_9 extends BaseResourcedEmojiProps, Props_4 {}
+
+/**
+ * The options used to configure a newly constructed queue.
+ */
+declare interface QueueOptions {
+  /**
+   * The maximum number of duplicates allowed per item in the queue.
+   */
+  maxDuplicates: number;
+  /**
+   * The minimum number of unique items the queue should try to contain.
+   * This number constrains the absolute size of the queue. It needs to be
+   * large enough to contain maxDuplicates * minUniqueItems.
+   */
+  minUniqueItems: number;
+}
+
+export declare const recordSelectionFailedSli: (
+  options?:
+    | {
+        createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined;
+      }
+    | undefined,
+) => (err: Error) => Promise<never>;
+
+export declare const recordSelectionSucceededSli: (
+  options?:
+    | {
+        createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined;
+      }
+    | undefined,
+) => () => void;
+
+export declare type RelativePosition = 'above' | 'below' | 'auto';
+
+declare interface ResolveReject<T> {
+  resolve(result: T): void;
+  reject(reason?: any): void;
+}
+
+export declare class ResourcedEmoji extends LoadingEmojiComponent<
+  Props_9,
+  State
+> {
+  static AsyncLoadedComponent: ComponentClass<Props_10>;
+  state: {
+    asyncLoadedComponent: React_2.ComponentClass<Props_10, any>;
+  };
+  constructor(props: Props_9);
+  componentWillUnmount(): void;
+  asyncLoadComponent(): void;
+  renderLoading(): JSX.Element;
+  renderLoaded(
+    loadedEmojiProvider: EmojiResource,
+    ResourcedEmojiComponent: ComponentClass<Props_10>,
+  ): JSX.Element;
+}
+
+declare interface Retry<T> {
+  (): Promise<T> | T;
+}
+
+export declare interface SearchOptions {
+  skinTone?: number;
+  limit?: number;
+  sort?: SearchSort;
+}
+
+export declare enum SearchSort {
+  None = 0,
+  Default = 1,
+  UsageFrequency = 2,
+}
+
+export declare const selected = 'emoji-common-selected';
+
+export declare const selectOnHover = 'emoji-common-select-on-hover';
+
+declare class SiteEmojiResource {
+  private siteServiceConfig;
+  private mediaApiToken;
+  private mediaEmojiCache;
+  protected tokenManager: TokenManager;
+  constructor(siteServiceConfig: ServiceConfig, mediaApiToken: MediaApiToken);
+  /**
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
+   */
+  generateTokenisedMediaURL(emoji: EmojiDescription): Promise<string>;
+  /**
+   * Will load media emoji, returning a new EmojiDescription if, for example,
+   * the URL has changed.
+   */
+  loadMediaEmoji(
+    emoji: EmojiDescription,
+    useAlt?: boolean,
+  ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  optimisticRendering(
+    emoji: EmojiDescription,
+    useAlt?: boolean,
+  ): boolean | Promise<boolean>;
+  uploadEmoji(
+    upload: EmojiUpload,
+    progressCallback?: EmojiProgessCallback,
+  ): Promise<EmojiDescription>;
+  /**
+   * Check if the MediaEmojiResource has been able to initialise an uploadToken. Retrieving an upload token
+   * is asynchronous so the Promise will need to resolve before the state is known. If the token retrieval
+   * completes with failure then the Promise will resolve to false.
+   */
+  hasUploadToken(): Promise<boolean>;
+  prepareForUpload(): void;
+  findEmoji(emojiId: EmojiId): Promise<OptionalEmojiDescription>;
+  /**
+   * Calls to site-scoped EmojiResource to delete emoji
+   * @param emoji media emoji to delete
+   * @returns Promise.resolve() if success and Promise.reject() for failure
+   */
+  deleteEmoji(emoji: EmojiDescription): Promise<boolean>;
+  private postToEmojiService;
+}
+
+export declare interface SpriteImageRepresentation
+  extends EmojiImageRepresentation {
+  x: number;
+  y: number;
+  xIndex: number;
+  yIndex: number;
+}
+
+/**
+ * Sprite representation exposed from the EmojiResource.
+ */
+export declare interface SpriteRepresentation
+  extends SpriteImageRepresentation {
+  sprite: SpriteSheet;
+}
+
+/**
+ * Representation returned from a sprite service.
+ */
+export declare interface SpriteServiceRepresentation
+  extends SpriteImageRepresentation {
+  /** Should match a index in a SpriteSheets */
+  spriteRef: string;
+}
+
+export declare interface SpriteSheet {
+  url: string;
+  row: number;
+  column: number;
+  height: number;
+  width: number;
+}
+
+export declare interface SpriteSheets {
+  [index: string]: SpriteSheet;
+}
+
+declare interface State {
+  loadedEmojiProvider?: EmojiProvider;
+  asyncLoadedComponent?: ComponentClass<any>;
+}
+
+export declare interface Styles {
+  [index: string]: any;
+}
+
+export declare const toEmojiId: (emoji: EmojiDescription) => EmojiId;
+
+declare class TokenManager {
+  private siteServiceConfig;
+  private tokens;
+  constructor(siteServiceConfig: ServiceConfig);
+  isValidToken(mediaApiToken: MediaApiToken): boolean;
+  addToken(type: TokenType, mediaApiToken: MediaApiToken): void;
+  getToken(type: TokenType, forceRefresh?: boolean): Promise<MediaApiToken>;
+}
+
+declare type TokenType = 'read' | 'upload';
+
+export declare type ToneSelection = number | undefined;
+
+export declare const toOptionalEmojiId: (
+  emoji: OptionalEmojiDescription,
+) => EmojiId | undefined;
+
+export declare enum UfoComponentName {
+  EMOJI = 'emoji',
+  EMOJI_PICKER = 'emoji-picker',
+  EMOJI_PROVIDER = 'emoji-provider',
+}
+
+export declare enum UfoExperienceName {
+  EMOJI_RENDERED = 'emoji-rendered',
+  EMOJI_RESOURCE_FETCHED = 'emoji-resource-fetched',
+  EMOJI_PICKER_OPENED = 'emoji-picker-opened',
+  EMOJI_SELECTION_RECORDED = 'emoji-selection-recorded',
+  EMOJI_UPLOADED = 'emoji-uploaded',
+  EMOJI_SEARCHED = 'emoji-searched',
+}
+
+export declare const ufoExperiences: {
+  'emoji-rendered': ConcurrentExperience;
+  'emoji-resource-fetched': ConcurrentExperience;
+  'emoji-picker-opened': UFOExperience;
+  'emoji-selection-recorded': UFOExperience;
+  'emoji-uploaded': UFOExperience;
+  'emoji-searched': UFOExperience;
+};
+
+export declare interface UploadingEmojiProvider extends EmojiProvider {
+  /**
+   * Returns true if upload is supported.
+   *
+   * Waits until resources have loaded before returning.
+   */
+  isUploadSupported(): Promise<boolean>;
+  /**
+   * Uploads an emoji to the configured repository.
+   *
+   * Will return a promise with the EmojiDescription once completed.
+   *
+   * The last search will be re-run to ensure the new emoji is considered in the search.
+   */
+  uploadCustomEmoji(upload: EmojiUpload): Promise<EmojiDescription>;
+  /**
+   * Allows the preloading of data (e.g. authentication tokens) to speed the uploading of emoji.
+   */
+  prepareForUpload(): Promise<void>;
+}
+
+declare interface UploadRefHandler {
+  (ref: HTMLDivElement): void;
+}
+
+/**
+ * Keeps track of the last 150 emoji usages, although limiting the maximum count for a single emoji to 25 to
+ * ensure we don't end up with only a single emoji being recorded. Usage is persisted to local storage for
+ * consistency between 'sessions'.
+ *
+ * Skin tone variations for an emoji will be 'collapsed' so they are tracked as their base emoji. Gender
+ * variations are not collapsed in this way and will be tracked per gender. This decision reflects the UI of
+ * the EmojiPicker component.
+ */
+export declare class UsageFrequencyTracker {
+  private static readonly queueOptions;
+  protected queue: DuplicateLimitedQueue<string>;
+  private gateway;
+  constructor(useStorageIfPossible?: boolean);
+  /**
+   * Record the fact that the supplied emoji was used. You should note that usage is updated asynchronously so you can not
+   * count on getOrder() reflecting this usage immediately.
+   *
+   * @param emoji the emoji who's usage is to be recorded. If the emoji has no id then no usage will be recorded
+   */
+  recordUsage(emoji: EmojiDescription): void;
+  /**
+   * Returns an array of emoji id (without skin tone variations) sorted by most used to least used. If there
+   * are no usages then an empty array will be returned.
+   */
+  getOrder(): Array<string>;
+  /**
+   * Exposed for testing only. Clear any recorded usage.
+   */
+  clear(): void;
+}
+
+export declare interface User {
+  id: string;
+}
+
+export {};
+```