@atlaskit/emoji 64.5.0 → 64.6.0

package/dist/es2019/components/common/CachingEmoji.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-helpers';
+import { isMediaEmoji } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -48,53 +47,36 @@ export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
     super(props);
 
-    _defineProperty(this, "mounted", false);
-
-    _defineProperty(this, "handleLoadError", (_emojiId, emoji) => {
-      const {
-        invalidImage
-      } = this.state;
+    _defineProperty(this, "handleLoadError", _emojiId => {
       sampledUfoRenderedEmoji(_emojiId).failure({
         metadata: {
           reason: 'load error'
         }
       });
-
-      if (invalidImage || !emoji) {
-        // do nothing, bad image
-        return;
-      }
-
       this.setState({
-        cachedEmoji: this.loadEmoji(emoji, this.context, true)
+        invalidImage: true
       });
     });
 
     this.state = {
-      cachedEmoji: this.loadEmoji(props.emoji, context, false)
+      cachedEmoji: undefined
     };
+    this.loadEmoji(props.emoji, context);
   }
 
   componentDidMount() {
-    this.mounted = true;
     sampledUfoRenderedEmoji(this.props.emoji).markFMP();
   }
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+  componentDidUpdate() {
+    var _this$state$cachedEmo;
 
-  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-    if (nextProps.emoji !== this.props.emoji) {
-      if (this.mounted) {
-        this.setState({
-          cachedEmoji: this.loadEmoji(nextProps.emoji, nextContext, false)
-        });
-      }
+    if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
+      this.loadEmoji(this.props.emoji, this.context);
     }
   }
 
-  loadEmoji(emoji, context, forceLoad) {
+  loadEmoji(emoji, context) {
     if (!context) {
       return;
     }
@@ -111,54 +93,29 @@ export class CachingMediaEmoji extends PureComponent {
       return undefined;
     }
 
-    const {
-      fitToHeight
-    } = this.props;
-    const useAlt = shouldUseAltRepresentation(emoji, fitToHeight);
-    const optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-    if (optimisticRendering && !forceLoad) {
-      debug('Optimistic rendering', emoji.shortName);
-      return emoji;
-    }
-
     debug('Loading image via media cache', emoji.shortName);
-    const loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-    if (isPromise(loadedEmoji)) {
-      loadedEmoji.then(cachedEmoji => {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji,
-            invalidImage: !cachedEmoji
-          });
-        }
-      }).catch(() => {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji: undefined,
-            invalidImage: true
-          });
-          sampledUfoRenderedEmoji(emoji).failure({
-            metadata: {
-              reason: 'failed to load media emoji'
-            }
-          });
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
+      this.setState({
+        cachedEmoji,
+        invalidImage: false
+      });
+    }).catch(() => {
+      this.setState({
+        cachedEmoji: undefined,
+        invalidImage: true
+      });
+      sampledUfoRenderedEmoji(emoji).failure({
+        metadata: {
+          reason: 'failed to load media emoji'
         }
       });
-      return undefined;
-    }
-
-    if (isEmojiDescription(loadedEmoji)) {
-      return loadedEmoji;
-    }
-
-    return undefined;
+    });
   }
 
   render() {
     const {
-      cachedEmoji
+      cachedEmoji,
+      invalidImage
     } = this.state;
     const {
       children,
@@ -167,7 +124,7 @@ export class CachingMediaEmoji extends PureComponent {
     } = this.props;
     let emojiComponent;
 
-    if (cachedEmoji) {
+    if (cachedEmoji && !invalidImage) {
       emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
         emoji: cachedEmoji,
         onLoadError: this.handleLoadError

package/dist/es2019/version.json

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

package/dist/esm/api/EmojiResource.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,13 +9,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-support';
 import { selectedToneStorageKey } from '../util/constants';
-import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
+import { isMediaEmoji, isMediaRepresentation, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
 import { ProviderTypes } from '../types';
 import debug from '../util/logger';
@@ -27,13 +33,11 @@ import { ufoExperiences } from '../util/analytics';
  *
  * Follow this up with an isUploadSupported() check to see if the provider is actually
  * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
 export var supportsUploadFeature = function supportsUploadFeature(emojiProvider) {
-  var _ref = emojiProvider,
-      isUploadSupported = _ref.isUploadSupported,
-      prepareForUpload = _ref.prepareForUpload,
-      uploadCustomEmoji = _ref.uploadCustomEmoji;
-  return !!(isUploadSupported && prepareForUpload && uploadCustomEmoji);
+  var emojiUploadProvider = emojiProvider;
+  return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
 };
 export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   _inherits(EmojiResource, _AbstractResource);
@@ -223,6 +227,52 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
         _get(_getPrototypeOf(EmojiResource.prototype), "notifyResult", this).call(this, result);
       }
     }
+    /**
+     *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+     */
+
+  }, {
+    key: "getMediaEmojiDescriptionURLWithInlineToken",
+    value: function () {
+      var _getMediaEmojiDescriptionURLWithInlineToken = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emoji) {
+        var tokenisedMediaPath;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(this.siteEmojiResource && isMediaRepresentation(emoji.representation))) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 3;
+                return this.siteEmojiResource.generateTokenisedMediaURL(emoji);
+
+              case 3:
+                tokenisedMediaPath = _context.sent;
+                return _context.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
+                  representation: _objectSpread(_objectSpread({}, emoji.representation), {}, {
+                    mediaPath: tokenisedMediaPath
+                  })
+                }));
+
+              case 5:
+                return _context.abrupt("return", emoji);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getMediaEmojiDescriptionURLWithInlineToken(_x) {
+        return _getMediaEmojiDescriptionURLWithInlineToken.apply(this, arguments);
+      }
+
+      return getMediaEmojiDescriptionURLWithInlineToken;
+    }()
   }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {

package/dist/esm/api/media/SiteEmojiResource.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -73,12 +75,65 @@ var SiteEmojiResource = /*#__PURE__*/function () {
     this.mediaEmojiCache = new MediaEmojiCache(this.tokenManager);
   }
   /**
-   * Will load media emoji, returning a new EmojiDescription if, for example,
-   * the URL has changed.
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
    */
 
 
   _createClass(SiteEmojiResource, [{
+    key: "generateTokenisedMediaURL",
+    value: function () {
+      var _generateTokenisedMediaURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emoji) {
+        var currentMediaPathURL, currentMediaPathPARAMS, readToken;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(emoji && isMediaRepresentation(emoji.representation))) {
+                  _context.next = 9;
+                  break;
+                }
+
+                currentMediaPathURL = new URL(emoji.representation.mediaPath);
+                currentMediaPathPARAMS = currentMediaPathURL.searchParams;
+                _context.next = 5;
+                return this.tokenManager.getToken('read');
+
+              case 5:
+                readToken = _context.sent;
+
+                if (currentMediaPathPARAMS.get('token') !== readToken.jwt) {
+                  currentMediaPathPARAMS.set('token', readToken.jwt);
+                }
+
+                if (currentMediaPathPARAMS.get('client') !== readToken.clientId) {
+                  currentMediaPathPARAMS.set('client', readToken.clientId);
+                }
+
+                return _context.abrupt("return", currentMediaPathURL.toString());
+
+              case 9:
+                throw Error('Emoji resource is not of type Media Representation');
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function generateTokenisedMediaURL(_x) {
+        return _generateTokenisedMediaURL.apply(this, arguments);
+      }
+
+      return generateTokenisedMediaURL;
+    }()
+    /**
+     * Will load media emoji, returning a new EmojiDescription if, for example,
+     * the URL has changed.
+     */
+
+  }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
       if (!isMediaEmoji(emoji)) {

package/dist/esm/api/media/TokenManager.js

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import { utils as serviceUtils } from '@atlaskit/util-service-support'; // expire 30 seconds early to factor in latency, slow services, etc
 
-export var expireAdjustment = 30;
+export var EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 
 var TokenManager = /*#__PURE__*/function () {
   function TokenManager(siteServiceConfig) {
@@ -13,6 +13,18 @@ var TokenManager = /*#__PURE__*/function () {
   }
 
   _createClass(TokenManager, [{
+    key: "isValidToken",
+    value: function isValidToken(mediaApiToken) {
+      var nowInSeconds = Date.now() / 1000;
+      var expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
+
+      if (nowInSeconds < expiresAt) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
     key: "addToken",
     value: function addToken(type, mediaApiToken) {
       this.tokens.set(type, {
@@ -34,10 +46,7 @@ var TokenManager = /*#__PURE__*/function () {
           activeTokenRefresh = _tokenDetail.activeTokenRefresh;
 
       if (mediaApiToken) {
-        var nowInSeconds = Date.now() / 1000;
-        var expiresAt = mediaApiToken.expiresAt - expireAdjustment;
-
-        if (nowInSeconds < expiresAt && !forceRefresh) {
+        if (this.isValidToken(mediaApiToken) && !forceRefresh) {
           // still valid
           return Promise.resolve(mediaApiToken);
         }

package/dist/esm/components/common/CachingEmoji.js

@@ -16,8 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-helpers';
+import { isMediaEmoji } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -69,57 +68,44 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-
-    _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId, emoji) {
-      var invalidImage = _this.state.invalidImage;
+    _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId) {
       sampledUfoRenderedEmoji(_emojiId).failure({
         metadata: {
           reason: 'load error'
         }
       });
 
-      if (invalidImage || !emoji) {
-        // do nothing, bad image
-        return;
-      }
-
       _this.setState({
-        cachedEmoji: _this.loadEmoji(emoji, _this.context, true)
+        invalidImage: true
       });
     });
 
     _this.state = {
-      cachedEmoji: _this.loadEmoji(props.emoji, context, false)
+      cachedEmoji: undefined
     };
+
+    _this.loadEmoji(props.emoji, context);
+
     return _this;
   }
 
   _createClass(CachingMediaEmoji, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.mounted = true;
       sampledUfoRenderedEmoji(this.props.emoji).markFMP();
     }
   }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-      if (nextProps.emoji !== this.props.emoji) {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji: this.loadEmoji(nextProps.emoji, nextContext, false)
-          });
-        }
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$state$cachedEmo;
+
+      if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
+        this.loadEmoji(this.props.emoji, this.context);
       }
     }
   }, {
     key: "loadEmoji",
-    value: function loadEmoji(emoji, context, forceLoad) {
+    value: function loadEmoji(emoji, context) {
       var _this2 = this;
 
       if (!context) {
@@ -136,53 +122,31 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
         return undefined;
       }
 
-      var fitToHeight = this.props.fitToHeight;
-      var useAlt = shouldUseAltRepresentation(emoji, fitToHeight);
-      var optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-      if (optimisticRendering && !forceLoad) {
-        debug('Optimistic rendering', emoji.shortName);
-        return emoji;
-      }
-
       debug('Loading image via media cache', emoji.shortName);
-      var loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-      if (isPromise(loadedEmoji)) {
-        loadedEmoji.then(function (cachedEmoji) {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: cachedEmoji,
-              invalidImage: !cachedEmoji
-            });
-          }
-        }).catch(function () {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: undefined,
-              invalidImage: true
-            });
-
-            sampledUfoRenderedEmoji(emoji).failure({
-              metadata: {
-                reason: 'failed to load media emoji'
-              }
-            });
-          }
+      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+        _this2.setState({
+          cachedEmoji: cachedEmoji,
+          invalidImage: false
+        });
+      }).catch(function () {
+        _this2.setState({
+          cachedEmoji: undefined,
+          invalidImage: true
         });
-        return undefined;
-      }
-
-      if (isEmojiDescription(loadedEmoji)) {
-        return loadedEmoji;
-      }
 
-      return undefined;
+        sampledUfoRenderedEmoji(emoji).failure({
+          metadata: {
+            reason: 'failed to load media emoji'
+          }
+        });
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var cachedEmoji = this.state.cachedEmoji;
+      var _this$state = this.state,
+          cachedEmoji = _this$state.cachedEmoji,
+          invalidImage = _this$state.invalidImage;
 
       var _this$props = this.props,
           children = _this$props.children,
@@ -191,7 +155,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
       var emojiComponent;
 
-      if (cachedEmoji) {
+      if (cachedEmoji && !invalidImage) {
         emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
           emoji: cachedEmoji,
           onLoadError: this.handleLoadError

package/dist/esm/version.json

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

package/dist/types/api/EmojiResource.d.ts

@@ -43,6 +43,7 @@ export interface ResolveReject<T> {
  *
  * Follow this up with an isUploadSupported() check to see if the provider is actually
  * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
 export declare const supportsUploadFeature: (emojiProvider: EmojiProvider) => emojiProvider is UploadingEmojiProvider;
 export interface LastQuery {
@@ -68,6 +69,10 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     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;

package/dist/types/api/EmojiUtils.d.ts

@@ -15,4 +15,4 @@ export declare const denormaliseSkinEmoji: (emoji: EmojiServiceDescriptionWithVa
  * emoji with local sprite definitions.
  */
 export declare const denormaliseEmojiServiceResponse: (emojiData: EmojiServiceResponse) => EmojiResponse;
-export declare const shouldUseAltRepresentation: (emoji: EmojiDescription, fitToHeight?: import("../types").ToneSelection) => boolean;
+export declare const shouldUseAltRepresentation: (emoji: EmojiDescription, fitToHeight?: number | undefined) => boolean;

package/dist/types/api/media/SiteEmojiResource.d.ts

@@ -17,6 +17,10 @@ export default class SiteEmojiResource {
     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.

package/dist/types/api/media/TokenManager.d.ts

@@ -1,11 +1,12 @@
 import { MediaApiToken } from '../../types';
 import { ServiceConfig } from '@atlaskit/util-service-support';
-export declare const expireAdjustment = 30;
+export declare const EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 export declare type TokenType = 'read' | 'upload';
 export default 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>;
 }

package/dist/types/components/common/CachingEmoji.d.ts

@@ -19,13 +19,11 @@ export declare const CachingEmoji: (props: CachingEmojiProps) => JSX.Element;
  * rendering paths depending on caching strategy.
  */
 export declare class CachingMediaEmoji extends PureComponent<CachingEmojiProps, State> {
-    private mounted;
     static contextType: React.Context<EmojiContextType>;
     context: ContextType<typeof EmojiContext>;
     constructor(props: EmojiProps, context: ContextType<typeof EmojiContext>);
     componentDidMount(): void;
-    componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: EmojiProps, nextContext: EmojiContextType): void;
+    componentDidUpdate(): void;
     private loadEmoji;
     private handleLoadError;
     render(): JSX.Element;

package/dist/types/components/common/EmojiUploadPicker.d.ts

@@ -33,8 +33,8 @@ export declare class EmojiUploadPicker extends PureComponent<Props & WrappedComp
     clearUploadPicker: () => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Props & WrappedComponentProps<"intl">>, "children" | "errorMessage" | "onUploadCancelled" | "onUploadEmoji" | "onFileChooserClicked" | "initialUploadName"> & {
-    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+declare const _default: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<Props & WrappedComponentProps<"intl">>, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };

package/dist/types/components/common/ToneSelector.d.ts

@@ -14,5 +14,5 @@ export declare class ToneSelectorInternal extends PureComponent<Props & WithAnal
     private onToneSelectedHandler;
     render(): JSX.Element;
 }
-declare const ToneSelector: React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps, "emoji" | "onToneSelected" | "previewEmojiId"> & React.RefAttributes<any>>;
+declare const ToneSelector: React.ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default ToneSelector;

package/dist/types/components/picker/EmojiPicker.d.ts

@@ -19,5 +19,5 @@ export declare class EmojiPickerInternal extends LoadingEmojiComponent<Props & W
     renderLoading(): JSX.Element | null;
     renderLoaded(loadedEmojiProvider: EmojiProvider, EmojiPickerComponent: ComponentClass<ComponentProps>): JSX.Element;
 }
-declare const EmojiPicker: import("react").ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps, "emojiProvider" | "onSelection" | "onPickerRef" | "hideToneSelector"> & import("react").RefAttributes<any>>;
+declare const EmojiPicker: import("react").ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;
 export default EmojiPicker;

package/dist/types/components/picker/EmojiPickerComponent.d.ts

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
 import { EmojiProvider } from '../../api/EmojiResource';
-import { EmojiDescription, EmojiId, OnEmojiEvent, OptionalEmojiDescription, OptionalEmojiDescriptionWithVariations, ToneSelection } from '../../types';
+import { EmojiDescription, EmojiId, OnEmojiEvent, OptionalEmojiDescriptionWithVariations, ToneSelection } from '../../types';
 import { CategoryId } from './categories';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface PickerRefHandler {
@@ -42,7 +42,7 @@ export default class EmojiPickerComponent extends PureComponent<Props, State> {
     componentWillUnmount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(prevProps: Props): void;
-    onEmojiActive: (_emojiId: EmojiId, emoji?: OptionalEmojiDescription) => void;
+    onEmojiActive: (_emojiId: EmojiId, emoji?: EmojiDescription | undefined) => void;
     onCategoryActivated: (category: CategoryId | null) => void;
     onCategorySelected: (categoryId: CategoryId | null) => void;
     onFileChooserClicked: () => void;