@atlaskit/emoji 66.0.0 → 66.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 66.0.1
+
+### Patch Changes
+
+- [`98b7ff82dae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98b7ff82dae) - [UX] To remove the unwanted styles (which is taken care in typeahead list component ED-15655)
+- [`f86e84d3cd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f86e84d3cd8) - ED-13980 Changes to make typeahead menu accessible by adding assistive text and improving keyboard navigation
+- Updated dependencies
+
 ## 66.0.0
 
 ### Major Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "66.0.0",
+	"version": "66.0.1",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "66.0.0",
+	"version": "66.0.1",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "66.0.0",
+	"version": "66.0.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "66.0.0",
+  "version": "66.0.1",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,13 +35,13 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/media-client": "^18.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
@@ -62,8 +62,8 @@
     "@atlaskit/docs": "*",
     "@atlaskit/editor-test-helpers": "^17.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/media-core": "^33.0.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/media-core": "^34.0.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/emoji"
+## API Report File for "@atlaskit/emoji".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -8,8 +10,10 @@
 import { AbstractResource } from '@atlaskit/util-service-support';
 import { Component } from 'react';
 import { ComponentClass } from 'react';
+import { ComponentType } from 'react';
 import { ConcurrentExperience } from '@atlaskit/ufo';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { Provider } from '@atlaskit/util-service-support/types';
 import { PureComponent } from 'react';
@@ -27,9 +31,41 @@ export declare interface AltRepresentations {
 }
 
 declare interface BaseResourcedEmojiProps {
+  /**
+   * Emoji to display
+   */
   emojiId: EmojiId;
+  /**
+   * Allows to show the tooltip.
+   * Defaults to `false`.
+   */
   showTooltip?: boolean;
+  /**
+   * Scales the emoji proportionally to provided hight.
+   * Defaults to `undefined`.
+   */
   fitToHeight?: number;
+  /**
+   * Optimistic will call the fetch interface first and not wait for the entire emoji collection
+   * to be available before rendering. This is useful for views or pages that show a select set of
+   * emojis.
+   * Defaults to `false`.
+   */
+  optimistic?: boolean;
+  /**
+   * Custom Fallback allows a custom element or string to be rendered if an emoji fails to be fetched or found.
+   * By default it takes the fallback or shortName inside emojiId, but if this prop is set it override the internal
+   * fallbacks
+   * customFallback<Element | string> else emojiId.fallback else emojiId.shortName.
+   * Defaults to `undefined`.
+   */
+  customFallback?: JSX.Element | string;
+  /**
+   * Will attempt to render a highly condensed version of the emoji with an image url before showing the meta version.
+   * All that is required for optimistic images to render is an emojiId, imageUrl and sizing props.
+   * Defaults to `undefined`.
+   */
+  optimisticImageURL?: string;
 }
 
 export declare interface CategoryDescription {
@@ -143,6 +179,20 @@ declare class DuplicateLimitedQueue<T> {
 
 export declare const Emoji: (props: Props) => JSX.Element;
 
+declare interface EmojiContext {
+  emoji: {
+    emojiProvider: EmojiProvider;
+  };
+}
+
+export declare const EmojiContextProvider: FC<EmojiContextProviderType>;
+
+declare type EmojiContextProviderType = {
+  emojiContextValue: EmojiContextType;
+};
+
+declare type EmojiContextType = EmojiContext | null;
+
 export declare interface EmojiDescription extends EmojiId {
   name?: string;
   order?: number;
@@ -174,6 +224,8 @@ export declare interface EmojiId {
   fallback?: string;
 }
 
+export declare const EmojiImage: FC<EmojiImageType>;
+
 export declare const emojiImage = 'emoji-common-emoji-image';
 
 export declare interface EmojiImageRepresentation {
@@ -181,6 +233,16 @@ export declare interface EmojiImageRepresentation {
   width: number;
 }
 
+declare type EmojiImageType = {
+  emojiId: EmojiId;
+  imageUrl: string;
+  showImageBeforeLoad?: boolean;
+  maxSize?: number;
+  representation?: EmojiImageRepresentation;
+  showTooltip?: boolean;
+  onImageLoadError?: () => void;
+};
+
 /**
  * Emoji providers should return JSON in the format defined by EmojiServiceResponse.
  */
@@ -217,6 +279,8 @@ export declare const emojiPickerWidth = 350;
 
 export declare const EmojiPlaceholder: (props: Props_2) => JSX.Element;
 
+export declare const emojiPlaceholder = 'emoji-common-placeholder';
+
 declare interface EmojiProgessCallback {
   (progress: EmojiProgress): void;
 }
@@ -340,6 +404,14 @@ export declare interface EmojiProvider
    * Returns the logged user passed by the Product
    */
   getCurrentUser(): OptionalUser;
+  /**
+   * Fetches and returns emojiResource
+   */
+  fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
+  /**
+   * Returns a constructed URL to fetch emoji media asset if 'optimisticImageApi' config has been provided
+   */
+  getOptimisticImageURL(emojiId: EmojiId): string | undefined;
 }
 
 export declare class EmojiRepository {
@@ -423,7 +495,10 @@ export declare class EmojiResource
   protected allowUpload: boolean;
   constructor(config: EmojiResourceConfig);
   isUploadSupported(): Promise<boolean>;
-  uploadCustomEmoji(upload: EmojiUpload): Promise<EmojiDescription>;
+  uploadCustomEmoji(
+    upload: EmojiUpload,
+    retry?: boolean,
+  ): Promise<EmojiDescription>;
   prepareForUpload(): Promise<void>;
 }
 
@@ -444,7 +519,14 @@ declare class EmojiResource_2
   protected siteEmojiResource?: SiteEmojiResource;
   protected selectedTone: ToneSelection;
   protected currentUser?: User;
+  protected isInitialised: boolean;
+  emojiProviderConfig: EmojiResourceConfig;
   constructor(config: EmojiResourceConfig);
+  fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
+  fetchByEmojiId(
+    emojiId: EmojiId,
+    optimistic: boolean,
+  ): Promise<OptionalEmojiDescriptionWithVariations>;
   private getProviderType;
   protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;
   protected initSiteEmojiResource(
@@ -452,6 +534,7 @@ declare class EmojiResource_2
     provider: ServiceConfig,
   ): Promise<void>;
   private performRetries;
+  getOptimisticImageURL: (emojiId: EmojiId) => string | undefined;
   private loadStoredTone;
   protected refreshLastFilter(): void;
   protected isLoaded: () => false | EmojiRepository | undefined;
@@ -521,6 +604,17 @@ export declare interface EmojiResourceConfig {
    * Logged user in the Product.
    */
   currentUser?: User;
+  /**
+   * This is specifically used for fetching a meta information of a single emoji.
+   * Useful for when rendering a single or a subset of emojis on a page that does not require the
+   * whole provider list to be downloaded.
+   */
+  singleEmojiApi?: SingleEmojiApiLoaderConfig;
+  /**
+   * Renders an image while the provider is being downloaded to reduce the time
+   * the user is being presented with a placeholder
+   */
+  optimisticImageApi?: OptimisticImageApiLoaderConfig;
 }
 
 export declare interface EmojiResponse {
@@ -589,10 +683,25 @@ export declare class EmojiTypeAhead extends LoadingEmojiComponent<
 }
 
 declare interface EmojiTypeAheadBaseProps {
+  /**
+   * Callback to be executed when user selects an emoji.
+   */
   onSelection?: OnEmojiEvent;
+  /**
+   * Search query.
+   */
   query?: string;
+  /**
+   * Number of results to be displayed in the search results list
+   */
   listLimit?: number;
+  /**
+   * Callback to be executed when typeahead component is being shown
+   */
   onOpen?: OnLifecycle;
+  /**
+   * Callback to be executed when typeahead component disappears
+   */
   onClose?: OnLifecycle;
   createAnalyticsEvent?: CreateUIAnalyticsEvent;
 }
@@ -622,15 +731,15 @@ declare class EmojiUploaderInternal extends LoadingEmojiComponent<
   Props_5,
   State
 > {
-  static AsyncLoadedComponent?: ComponentClass<Props_6>;
+  static AsyncLoadedComponent?: FC<Props_6>;
   state: {
-    asyncLoadedComponent: React_2.ComponentClass<Props_6, any> | undefined;
+    asyncLoadedComponent: React_2.FC<Props_6> | undefined;
   };
   constructor(props: Props_5);
   asyncLoadComponent(): void;
   renderLoaded(
     loadedEmojiProvider: EmojiProvider,
-    EmojiUploadComponent: ComponentClass<Props_6>,
+    EmojiUploadComponent: FC<Props_6>,
   ): JSX.Element;
 }
 
@@ -670,11 +779,11 @@ declare abstract class LoadingEmojiComponent<
   private loadEmojiProvider;
   private loaded;
   abstract asyncLoadComponent(): void;
-  protected setAsyncState(asyncLoadedComponent: ComponentClass<any>): void;
+  protected setAsyncState(asyncLoadedComponent: ComponentType<any>): void;
   renderLoading(): JSX.Element | null;
   abstract renderLoaded(
     loadedEmojiProvider: EmojiProvider,
-    asyncLoadedComponent: ComponentClass<any>,
+    asyncLoadedComponent: ComponentType<any>,
   ): JSX.Element | null;
   render(): JSX.Element | null;
 }
@@ -888,13 +997,17 @@ declare interface OnLifecycle {
 }
 
 export declare interface OnToneSelected {
-  (variation: number): void;
+  (variation: ToneValueType): void;
 }
 
 export declare interface OnToneSelectorCancelled {
   (): void;
 }
 
+declare interface OptimisticImageApiLoaderConfig extends ServiceConfig {
+  getUrl: (emojiId: EmojiId) => string;
+}
+
 export declare type OptionalEmojiDescription = EmojiDescription | undefined;
 
 export declare type OptionalEmojiDescriptionWithVariations =
@@ -918,7 +1031,6 @@ declare interface Props {
   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.
    */
@@ -928,7 +1040,7 @@ declare interface Props {
    */
   onSelected?: OnEmojiEvent;
   /**
-   * Called when the mouse moved over the emoji.
+   * Called when the mouse moves over the emoji.
    */
   onMouseMove?: OnEmojiEvent;
   /**
@@ -960,7 +1072,10 @@ declare interface Props {
 }
 
 declare interface Props_10 extends BaseResourcedEmojiProps {
-  emojiProvider: EmojiResource;
+  /**
+   * EmojiResource instance that handles fetching of emoji data.
+   */
+  emojiProvider: EmojiResource_2;
 }
 
 declare interface Props_11 {
@@ -975,20 +1090,32 @@ declare interface Props_2 {
   size?: number;
   showTooltip?: boolean;
   representation?: EmojiImageRepresentation;
+  loading?: boolean;
 }
 
 declare interface Props_3 extends Props_4 {
+  /**
+   * Callback to be executed on emoji selection.
+   */
   onSelection?: OnEmojiEvent;
+  /**
+   * Callback to handle picker reference.
+   */
   onPickerRef?: PickerRefHandler;
+  /**
+   * Flag to disable tone selector.
+   */
   hideToneSelector?: boolean;
 }
 
 declare interface Props_4 {
+  /**
+   * Emoji Resource instance
+   */
   emojiProvider: Promise<EmojiProvider>;
 }
 
 declare interface Props_5 extends Props_4 {
-  onUploaderRef?: UploadRefHandler;
   createAnalyticsEvent?: CreateUIAnalyticsEvent;
 }
 
@@ -1008,6 +1135,9 @@ declare interface Props_7 extends EmojiTypeAheadBaseProps, Props_4 {
 }
 
 declare interface Props_8 extends EmojiTypeAheadBaseProps {
+  /**
+   * EmojiResource instance that handles fetching of emoji data.
+   */
   emojiProvider: EmojiProvider;
 }
 
@@ -1056,9 +1186,9 @@ export declare class ResourcedEmoji extends LoadingEmojiComponent<
   Props_9,
   State
 > {
-  static AsyncLoadedComponent: ComponentClass<Props_10>;
+  static AsyncLoadedComponent: FC<Props_10>;
   state: {
-    asyncLoadedComponent: React_2.ComponentClass<Props_10, any>;
+    asyncLoadedComponent: React_2.FC<Props_10>;
   };
   constructor(props: Props_9);
   componentWillUnmount(): void;
@@ -1074,6 +1204,8 @@ declare interface Retry<T> {
   (): Promise<T> | T;
 }
 
+declare type SamplingFunc = (rate: number) => boolean;
+
 export declare interface SearchOptions {
   skinTone?: number;
   limit?: number;
@@ -1090,6 +1222,10 @@ export declare const selected = 'emoji-common-selected';
 
 export declare const selectOnHover = 'emoji-common-select-on-hover';
 
+declare interface SingleEmojiApiLoaderConfig extends ServiceConfig {
+  getUrl: (emojiId: EmojiId) => string;
+}
+
 declare class SiteEmojiResource {
   private siteServiceConfig;
   private mediaApiToken;
@@ -1114,6 +1250,7 @@ declare class SiteEmojiResource {
   ): boolean | Promise<boolean>;
   uploadEmoji(
     upload: EmojiUpload,
+    retry?: boolean,
     progressCallback?: EmojiProgessCallback,
   ): Promise<EmojiDescription>;
   /**
@@ -1172,7 +1309,7 @@ export declare interface SpriteSheets {
 
 declare interface State {
   loadedEmojiProvider?: EmojiProvider;
-  asyncLoadedComponent?: ComponentClass<any>;
+  asyncLoadedComponent?: ComponentType<any>;
 }
 
 export declare interface Styles {
@@ -1186,6 +1323,7 @@ declare class TokenManager {
   private tokens;
   constructor(siteServiceConfig: ServiceConfig);
   isValidToken(mediaApiToken: MediaApiToken): boolean;
+  fetchNewToken(type: TokenType): Promise<MediaApiToken>;
   addToken(type: TokenType, mediaApiToken: MediaApiToken): void;
   getToken(type: TokenType, forceRefresh?: boolean): Promise<MediaApiToken>;
 }
@@ -1194,6 +1332,8 @@ declare type TokenType = 'read' | 'upload';
 
 export declare type ToneSelection = number | undefined;
 
+declare type ToneValueType = number;
+
 export declare const toOptionalEmojiId: (
   emoji: OptionalEmojiDescription,
 ) => EmojiId | undefined;
@@ -1236,7 +1376,10 @@ export declare interface UploadingEmojiProvider extends EmojiProvider {
    *
    * The last search will be re-run to ensure the new emoji is considered in the search.
    */
-  uploadCustomEmoji(upload: EmojiUpload): Promise<EmojiDescription>;
+  uploadCustomEmoji(
+    upload: EmojiUpload,
+    retry?: boolean,
+  ): Promise<EmojiDescription>;
   /**
    * Allows the preloading of data (e.g. authentication tokens) to speed the uploading of emoji.
    */
@@ -1279,9 +1422,31 @@ export declare class UsageFrequencyTracker {
   clear(): void;
 }
 
+export declare const useEmojiContext: () => EmojiContextType;
+
 export declare interface User {
   id: string;
 }
 
+/**
+ * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
+ *
+ * e.g. Emoji Picker contains thousands of emojis, which means will trigger a large number of renderred events without sampling
+ * @param ufoExperience
+ * @returns
+ */
+export declare const withSampling: (
+  ufoExperience: UFOExperience,
+) => WithSamplingUFOExperience;
+
+export declare interface WithSamplingUFOExperience
+  extends Omit<UFOExperience, 'start'> {
+  start: (options: {
+    samplingRate: number;
+    samplingFunc?: SamplingFunc;
+    startTime?: number;
+  }) => Promise<void>;
+}
+
 export {};
 ```