@atlaskit/emoji 64.7.0 → 65.1.0

package/dist/types/components/typeahead/EmojiTypeAheadComponent.d.ts

@@ -6,14 +6,32 @@ export interface OnLifecycle {
     (): void;
 }
 export 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;
 }
 export interface Props extends EmojiTypeAheadBaseProps {
+    /**
+     * EmojiResource instance that handles fetching of emoji data.
+     */
     emojiProvider: EmojiProvider;
 }
 export interface State {

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

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T | null | undefined): T | null | undefined;

package/dist/types/index.d.ts

@@ -6,17 +6,18 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
-export { commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage, } from './components/common/styles';
+import { EmojiImage } from './components/common/EmojiImage';
+export { commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage, placeholder as emojiPlaceholder, } from './components/common/styles';
 import EmojiResource, { EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig } from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, WithSamplingUFOExperience } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
-export { AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem, };
-export type { EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig, };
+export { AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem, };
+export type { EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig, WithSamplingUFOExperience, };
 export { SearchSort, UfoExperienceName, UfoComponentName, } from './types';
 export type { CategoryId, EmojiRepresentation, EmojiServiceRepresentation, Message, OptionalEmojiDescription, OptionalEmojiDescriptionWithVariations, OptionalUser, RelativePosition, ToneSelection, AltRepresentations, CategoryDescription, EmojiDescription, EmojiDescriptionWithVariations, EmojiId, EmojiImageRepresentation, EmojiMeta, EmojiResponse, EmojiSearchResult, EmojiServiceDescription, EmojiServiceDescriptionWithVariations, EmojiServiceResponse, EmojiUpload, EmojiVariationDescription, ImageRepresentation, MediaApiRepresentation, MediaApiToken, OnCategory, OnEmojiEvent, OnToneSelected, OnToneSelectorCancelled, SearchOptions, SpriteImageRepresentation, SpriteRepresentation, SpriteServiceRepresentation, SpriteSheet, SpriteSheets, Styles, User, } from './types';
 export default EmojiPicker;

package/dist/types/types.d.ts

@@ -2,6 +2,7 @@ import { SyntheticEvent } from 'react';
 import { messages } from './components/i18n';
 import { CategoryId } from './components/picker/categories';
 import { Provider } from '@atlaskit/util-service-support/types';
+import { EmojiRepository } from './resource';
 export type { CategoryId } from './components/picker/categories';
 export interface EmojiProvider extends Provider<string, EmojiSearchResult, any, undefined, SearchOptions> {
     /**
@@ -106,6 +107,14 @@ export interface EmojiProvider extends Provider<string, EmojiSearchResult, any,
      * 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 interface UploadingEmojiProvider extends EmojiProvider {
     /**
@@ -121,7 +130,7 @@ export 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.
      */
@@ -306,7 +315,8 @@ export declare enum ProviderTypes {
     SITE = "SITE",
     STANDARD = "STANDARD",
     ATLASSIAN = "ATLASSIAN",
-    UNKNOWN = "UNKNOWN"
+    UNKNOWN = "UNKNOWN",
+    SINGLE = "SINGLE"
 }
 export declare enum UfoExperienceName {
     EMOJI_RENDERED = "emoji-rendered",
@@ -322,12 +332,14 @@ export declare enum UfoComponentName {
     EMOJI_PROVIDER = "emoji-provider"
 }
 export declare enum UfoEmojiTimingsKeys {
+    FMP = "fmp",
     MOUNTED = "emoji-mount",
     METADATA = "emoji-metadata",
     MEDIADATA = "emoji-media",
     ONLOAD = "emoji-onload"
 }
 export declare enum UfoEmojiTimings {
+    FMP_END = "fmp",
     MOUNTED_END = "emoji-mount_end",
     METADATA_START = "emoji-metadata_start",
     METADATA_END = "emoji-metadata_end",

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

@@ -1,5 +1,5 @@
 export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling, } from './samplingUfo';
-export type { UFOExperienceSampledRecords, WithSampling } from './samplingUfo';
+export type { UFOExperienceSampledRecords, WithSamplingUFOExperience, } from './samplingUfo';
 export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent, } from './analytics';
 export { sampledUfoRenderedEmoji, ufoExperiences } from './ufoExperiences';
 export type { EmojiInsertionAnalytic } from './analytics';

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

@@ -9,17 +9,17 @@ interface UFOExperienceSampledRecord {
     sampledInstance: SamplingInstancesRecord;
     sampled: boolean;
 }
-export declare const ufoExperiencesSampled: UFOExperienceSampledRecords;
-declare type SamplingFunc = (rate: number) => boolean;
-export declare const clearSampled: () => void;
-export declare const isExperienceSampled: (rate: number) => boolean;
-export interface WithSampling extends Omit<UFOExperience, 'start'> {
+export interface WithSamplingUFOExperience extends Omit<UFOExperience, 'start'> {
     start: (options: {
         samplingRate: number;
         samplingFunc?: SamplingFunc;
         startTime?: number;
     }) => Promise<void>;
 }
+export declare const ufoExperiencesSampled: UFOExperienceSampledRecords;
+declare type SamplingFunc = (rate: number) => boolean;
+export declare const clearSampled: () => void;
+export declare const isExperienceSampled: (rate: number) => boolean;
 /**
  * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
  *
@@ -27,5 +27,5 @@ export interface WithSampling extends Omit<UFOExperience, 'start'> {
  * @param ufoExperience
  * @returns
  */
-export declare const withSampling: (ufoExperience: UFOExperience) => WithSampling;
+export declare const withSampling: (ufoExperience: UFOExperience) => WithSamplingUFOExperience;
 export {};

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

@@ -1,5 +1,6 @@
-import { EmojiId } from '../../types';
+import { EmojiId, ProviderTypes } from '../../types';
 import { ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+import { WithSamplingUFOExperience } from './samplingUfo';
 export declare const ufoExperiences: {
     'emoji-rendered': ConcurrentExperience;
     'emoji-resource-fetched': ConcurrentExperience;
@@ -8,4 +9,6 @@ export declare const ufoExperiences: {
     'emoji-uploaded': UFOExperience;
     'emoji-searched': UFOExperience;
 };
-export declare const sampledUfoRenderedEmoji: (emojiId: EmojiId) => import("./samplingUfo").WithSampling;
+export declare const sampledUfoRenderedEmoji: (emojiId: EmojiId) => WithSamplingUFOExperience;
+export declare const hasUfoMarked: (ufoExperience: UFOExperience | WithSamplingUFOExperience, name: string) => boolean;
+export declare const sampledUfoEmojiResourceFetched: (providerType: ProviderTypes) => WithSamplingUFOExperience;

package/dist/types/util/constants.d.ts

@@ -14,6 +14,7 @@ export declare const MAX_ORDINAL = 100000;
 export declare const defaultEmojiHeight = 20;
 export declare const emojiPickerWidth = 350;
 export declare const emojiPickerHeight = 295;
+export declare const emojiPickerHeightWithPreview = 348;
 export declare const localStoragePrefix = "fabric.emoji";
 export declare const selectedToneStorageKey: string;
 export declare const defaultCategories: CategoryId[];
@@ -21,4 +22,4 @@ export declare const defaultListLimit = 50;
 export declare const migrationUserId = "hipchat_migration_emoticons";
 export declare const analyticsEmojiPrefix = "atlassian.fabric.emoji.picker";
 export declare const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05;
-export declare const SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1;
+export declare const SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = 0.01;

package/dist/types/util/useInView.d.ts

@@ -0,0 +1,4 @@
+import { IntersectionOptions } from 'react-intersection-observer';
+declare type InViewHookNotSupportedResponse = [undefined, boolean];
+export declare const useInView: (options?: IntersectionOptions | undefined) => InViewHookNotSupportedResponse | import("react-intersection-observer").InViewHookResponse;
+export {};

package/docs/0-intro.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-import { md, Example, code, AtlassianInternalWarning } from '@atlaskit/docs';
-import SectionMessage, {
-  SectionMessageAction,
-} from '@atlaskit/section-message';
+import {
+  md,
+  Example,
+  code,
+  AtlassianInternalWarning,
+  Props,
+} from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 import SimpleEmojiExample from '../examples/00-simple-emoji';
 
 const SimpleEmojiSource = require('!!raw-loader!../examples/00-simple-emoji');
+const EmojiProps = require('!!extract-react-types-loader!../src/components/common/Emoji');
 
 export default md`
   ${(<AtlassianInternalWarning />)}
@@ -20,9 +25,9 @@ export default md`
 
   ${code`
   import EmojiPicker from '@atlaskit/emoji/picker';
-  import { EmojiResource } from '@atlaskit/emoji/resource';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
 
-  const emojiProvider = new EmojiResource({
+  const config: EmojiResourceConfig = {
     providers: [
       {
         url: 'https://emoji-example/emoji/standard',
@@ -36,7 +41,9 @@ export default md`
         }),
       },
     ],
-  });
+  }
+
+  const emojiProvider = new EmojiResource(config);
 
   ReactDOM.render(
     <EmojiPicker
@@ -46,7 +53,25 @@ export default md`
       }}
     />,
     container,
-  );`}
+  );
+  `}
+
+
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="Emoji provider is required to be configured in order to use components from this package."
+      >
+        <p>
+          Please refer to `Emoji picker` section for more information on how to
+          configure emoji provider.
+        </p>
+      </SectionMessage>
+    </>
+  )}
 
   ### Other emoji components import examples
 
@@ -75,27 +100,10 @@ export default md`
     <Example
       packageName="@atlaskit/emoji"
       Component={SimpleEmojiExample}
-      title="Emoji"
+      title=" Simple Emoji"
       source={SimpleEmojiSource}
     />
   )}
 
-  ${(
-    <SectionMessage
-      appearance="warning"
-      title="Props can not be displayed for the time being."
-      actions={[
-        {
-          key: '1',
-          href:
-            'https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/elements/emoji/src/components/common/Emoji.tsx',
-          text: 'Emoji Props',
-        },
-      ].map(({ text, ...restAction }) => (
-        <SectionMessageAction {...restAction}>{text}</SectionMessageAction>
-      ))}
-    >
-      <p>You can still find props in the source code.</p>
-    </SectionMessage>
-  )}
+  ${(<Props props={EmojiProps} />)}
 `;

package/docs/1-resourced-emoji.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import ResourcedEmojiExample from '../examples/23-optimistic-emoji';
+
+const ResourcedEmojiSource = require('!!raw-loader!../examples/23-optimistic-emoji');
+const ResourcedEmojiProps = require('!!extract-react-types-loader!../src/components/common/ResourcedEmojiComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import { ResourcedEmoji } from '@atlaskit/emoji';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    singleEmojiApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    optimisticImageApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId/path',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer {{token}}',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+  const emojiId = { shortName: ':grimacing:', id: '1f603' };
+
+  ReactDOM.render(
+    <ResourcedEmoji
+      emojiId={emojiId}
+      emojiProvider={emojiProvider}
+      optimistic
+      optimisticImageURL={emojiProvider.getOptimisticImageURL(emojiId)}
+    />,
+    container,
+  );`}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={ResourcedEmojiExample}
+      title="Resourced Emoji"
+      source={ResourcedEmojiSource}
+    />
+  )}
+
+  ${(<Props props={ResourcedEmojiProps} />)}
+`;

package/docs/2-emoji-picker.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import EmojiPickerExample from '../examples/05-standard-emoji-picker-with-upload';
+
+const EmojiPickerSource = require('!!raw-loader!../examples/05-standard-emoji-picker-with-upload');
+const EmojiPickerProps = require('!!extract-react-types-loader!../src/components/picker/EmojiPickerComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import EmojiPicker from '@atlaskit/emoji/picker';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer token',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+
+  ReactDOM.render(
+    <EmojiPicker
+      emojiProvider={emojiProvider}
+      onSelection={emoji => {
+        /* do something */
+      }}
+    />,
+    container,
+  );
+  `}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={EmojiPickerExample}
+      title="Emoji Picker"
+      source={EmojiPickerSource}
+    />
+  )}
+
+  ${(<Props props={EmojiPickerProps} />)}
+`;

package/docs/3-typeahead.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { md, Example, Props } from '@atlaskit/docs';
+import TypeAheadiExample from '../examples/03-standard-emoji-typeahead';
+
+const TypeAheadSource = require('!!raw-loader!../examples/03-standard-emoji-typeahead');
+const TypeAheadProps = require('!!extract-react-types-loader!../src/components/typeahead/EmojiTypeAheadComponent');
+
+export default md`
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={TypeAheadiExample}
+      title="Typeahead"
+      source={TypeAheadSource}
+    />
+  )}
+
+  ${(<Props props={TypeAheadProps} />)}
+`;

package/docs/4-emoji-provider.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { md, code } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+Emoji provider mainly controls what type of emojis you want to support, how to resolve emojis, and how to upload custom emojis if enabled.
+
+This is a basic example of emoji provider, supporting standard, atlassian, and site emojis:
+
+${code`
+  const emojiProvider = new EmojiResource({
+    providers: [
+      {
+        url: '/gateway/emoji/standard',
+      },
+      {
+        url: '/gateway/emoji/atlassian',
+      },
+      {
+        url: '/gateway/emoji/{cloudId}/site',
+        securityProvider: () => ({ headers: { Authorization: 'Bearer token' }}), // not needed if session token cookie is available.
+      },
+    ],
+    allowUpload: true,
+    currentUser: { id: { uid } }
+  });`}
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="There should be only one instance of EmojiResource in your application"
+      >
+        <p>Make sure EmojiResource is initialised only once.</p>
+      </SectionMessage>
+    </>
+  )}
+
+The emoji provider plays a vital role to glue with our backend emoji service. Emoji metadata is fetched based on the url defined in providers array.
+After a successful fetch the emoji resource holds emoji data for rendering emoji in picker, single emoji or the typeahead component.
+Uploading and rendering site specific emojis is only available for Atlassian services.
+
+Initialising EmojiResource doesn't fetch emoji data on initialization. If EmojiResource is being passed into ResourcedEmoji, EmojiPicker or Typeahead no further action is required.
+Emoji meta data will be fetched on first component render. If EmojiResource is being used outside of the context of the above components, fetching meta data requires to be triggered manually.
+
+${code`
+  const emojiProvider = new EmojiResource(emojiConfig);
+  emojiProvider.fetchEmojiProvider();
+`}
+
+### Configuration options
+
+${code`
+  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;
+
+    /**
+     * 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;
+  }
+`}
+
+`;

package/local-config-example.ts

@@ -1,4 +1,5 @@
-// Copy this file to local-config.ts and customise.
+import { EmojiId } from './src/types';
+
 export default {
   recordConfig: {
     url: 'https://www.example.org/',
@@ -16,4 +17,24 @@ export default {
       }),
     },
   ],
+  singleEmojiApi: {
+    getUrl: (emojiId: EmojiId) =>
+      `https://www.example.org/emoji/${emojiId.id || emojiId.shortName}`,
+    securityProvider: () => ({
+      headers: {
+        'User-Context': '{token}',
+        Authorization: 'Bearer {token}',
+      },
+    }),
+  },
+  optimisticImageApi: {
+    getUrl: (emojiId: EmojiId) =>
+      `http://www.example.org/site-id/${emojiId.id || emojiId.shortName}/path`,
+    securityProvider: () => ({
+      headers: {
+        'User-Context': '{token}',
+        Authorization: 'Bearer {token}',
+      },
+    }),
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "64.7.0",
+  "version": "65.1.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^16.0.0",
+    "@atlaskit/media-client": "^17.1.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.1.0",
@@ -53,12 +53,12 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-test-helpers": "^17.0.0",
+    "@atlaskit/editor-test-helpers": "^17.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.10",