@atlaskit/emoji 69.0.13 → 69.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 69.1.0
+
+### Minor Changes
+
+- [#144384](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144384)
+  [`3a650f8970f01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a650f8970f01) -
+  Adding emoji load callbacks to Renderer EmojiConfig
+
 ## 69.0.13
 
 ### Patch Changes

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ResourcedEmojiComponent = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _constants = require("../../util/constants");
 var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
@@ -43,7 +42,9 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
     _props$optimisticImag = props.optimisticImageURL,
     optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
-    editorEmoji = props.editorEmoji;
+    editorEmoji = props.editorEmoji,
+    onEmojiLoadSuccess = props.onEmojiLoadSuccess,
+    onEmojiLoadFail = props.onEmojiLoadFail;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -63,22 +64,10 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     resolvedEmojiProvider = _useState8[0],
     setResolvedEmojiProvider = _useState8[1];
-  var getActiveInterationMetadata = function getActiveInterationMetadata() {
-    var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();
-    var activeInteractionMetadata = {};
-    if (activeInteraction) {
-      activeInteractionMetadata = _objectSpread(_objectSpread({}, activeInteraction.metaData['productInteractionName'] ? {
-        productInteractionName: activeInteraction.metaData['productInteractionName']
-      } : {}), activeInteraction.metaData['productInteractionType'] ? {
-        productInteractionType: activeInteraction.metaData['productInteractionType']
-      } : {});
-    }
-    return activeInteractionMetadata;
-  };
   var fetchOrGetEmoji = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
-        activeInteractionMetadata,
+        reason,
         foundEmoji,
         _args = arguments;
       return _regenerator.default.wrap(function _callee$(_context) {
@@ -86,13 +75,14 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
           case 0:
             optimisticFetch = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
             if (!_emojiProvider.fetchByEmojiId) {
-              activeInteractionMetadata = getActiveInterationMetadata();
               setEmoji(undefined);
+              reason = 'missing fetchByEmojiId interface';
+              onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
               (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
-                metadata: _objectSpread({
-                  reason: 'missing fetchByEmojiId interface',
+                metadata: {
+                  reason: reason,
                   source: 'ResourcedEmojiComponent'
-                }, activeInteractionMetadata)
+                }
               });
             }
             foundEmoji = _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
@@ -102,11 +92,12 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
               foundEmoji.then(function (emoji) {
                 setEmoji(emoji);
                 if (!emoji) {
+                  var _reason = 'failed to find';
+                  onEmojiLoadFail && onEmojiLoadFail(emojiId.id, _reason);
                   // emoji is undefined
-                  var _activeInteractionMetadata = getActiveInterationMetadata();
                   (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
-                    metadata: _objectSpread({
-                      reason: 'failed to find',
+                    metadata: {
+                      reason: _reason,
                       source: 'ResourcedEmojiComponent',
                       data: {
                         emoji: {
@@ -114,15 +105,16 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                           shortName: emojiId.shortName
                         }
                       }
-                    }, _activeInteractionMetadata)
+                    }
                   });
                 }
               }).catch(function () {
                 setEmoji(undefined);
-                var activeInteractionMetadata = getActiveInterationMetadata();
+                var reason = 'failed to load';
+                onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
                 (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
-                  metadata: _objectSpread({
-                    reason: 'failed to load',
+                  metadata: {
+                    reason: reason,
                     source: 'ResourcedEmojiComponent',
                     data: {
                       emoji: {
@@ -130,7 +122,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
                         shortName: emojiId.shortName
                       }
                     }
-                  }, activeInteractionMetadata)
+                  }
                 });
               }).finally(function () {
                 setLoaded(true);
@@ -150,7 +142,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), []);
+  }(), [onEmojiLoadFail]);
   (0, _react.useEffect)(function () {
     if (!emojiId) {
       return;
@@ -214,16 +206,20 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     return emoji;
   }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
   var handleOnLoadError = (0, _react.useCallback)(function (emojiId) {
-    var activeInteractionMetadata = getActiveInterationMetadata();
     setImageLoadError(true);
+    var reason = 'load error';
+    onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
     (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
-      metadata: _objectSpread({
-        reason: 'load error',
+      metadata: {
+        reason: reason,
         source: 'ResourcedEmojiComponent',
         emojiId: emojiId.id
-      }, activeInteractionMetadata)
+      }
     });
-  }, []);
+  }, [onEmojiLoadFail]);
+  var handleOnLoadSuccess = (0, _react.useCallback)(function (emojiId) {
+    onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
+  }, [onEmojiLoadSuccess]);
   return /*#__PURE__*/_react.default.createElement(_EmojiCommonProvider.EmojiCommonProvider, {
     emojiProvider: resolvedEmojiProvider
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -238,6 +234,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/_react.default.createElement(_Emoji.default, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
+    onLoadSuccess: handleOnLoadSuccess,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.0.13"
+      packageVersion: "69.1.0"
     }, attributes)
   };
 };

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

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
@@ -23,7 +22,9 @@ export const ResourcedEmojiComponent = props => {
     fitToHeight = defaultEmojiHeight,
     optimistic = false,
     optimisticImageURL = undefined,
-    editorEmoji
+    editorEmoji,
+    onEmojiLoadSuccess,
+    onEmojiLoadFail
   } = props;
   const {
     shortName,
@@ -34,30 +35,15 @@ export const ResourcedEmojiComponent = props => {
   const [loaded, setLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
   const [resolvedEmojiProvider, setResolvedEmojiProvider] = useState();
-  const getActiveInterationMetadata = () => {
-    const activeInteraction = getActiveInteraction();
-    let activeInteractionMetadata = {};
-    if (activeInteraction) {
-      activeInteractionMetadata = {
-        ...(activeInteraction.metaData['productInteractionName'] ? {
-          productInteractionName: activeInteraction.metaData['productInteractionName']
-        } : {}),
-        ...(activeInteraction.metaData['productInteractionType'] ? {
-          productInteractionType: activeInteraction.metaData['productInteractionType']
-        } : {})
-      };
-    }
-    return activeInteractionMetadata;
-  };
   const fetchOrGetEmoji = useCallback(async (_emojiProvider, emojiId, optimisticFetch = false) => {
     if (!_emojiProvider.fetchByEmojiId) {
-      const activeInteractionMetadata = getActiveInterationMetadata();
       setEmoji(undefined);
+      const reason = 'missing fetchByEmojiId interface';
+      onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
       sampledUfoRenderedEmoji(emojiId).failure({
         metadata: {
-          reason: 'missing fetchByEmojiId interface',
-          source: 'ResourcedEmojiComponent',
-          ...activeInteractionMetadata
+          reason,
+          source: 'ResourcedEmojiComponent'
         }
       });
     }
@@ -68,36 +54,36 @@ export const ResourcedEmojiComponent = props => {
       foundEmoji.then(emoji => {
         setEmoji(emoji);
         if (!emoji) {
+          const reason = 'failed to find';
+          onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
           // emoji is undefined
-          const activeInteractionMetadata = getActiveInterationMetadata();
           sampledUfoRenderedEmoji(emojiId).failure({
             metadata: {
-              reason: 'failed to find',
+              reason,
               source: 'ResourcedEmojiComponent',
               data: {
                 emoji: {
                   id: emojiId.id,
                   shortName: emojiId.shortName
                 }
-              },
-              ...activeInteractionMetadata
+              }
             }
           });
         }
       }).catch(() => {
         setEmoji(undefined);
-        const activeInteractionMetadata = getActiveInterationMetadata();
+        const reason = 'failed to load';
+        onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
         sampledUfoRenderedEmoji(emojiId).failure({
           metadata: {
-            reason: 'failed to load',
+            reason,
             source: 'ResourcedEmojiComponent',
             data: {
               emoji: {
                 id: emojiId.id,
                 shortName: emojiId.shortName
               }
-            },
-            ...activeInteractionMetadata
+            }
           }
         });
       }).finally(() => {
@@ -109,7 +95,7 @@ export const ResourcedEmojiComponent = props => {
       setLoaded(true);
       sampledUfoRenderedEmoji(emojiId).mark(UfoEmojiTimings.METADATA_END);
     }
-  }, []);
+  }, [onEmojiLoadFail]);
   useEffect(() => {
     if (!emojiId) {
       return;
@@ -175,17 +161,20 @@ export const ResourcedEmojiComponent = props => {
     return emoji;
   }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
   const handleOnLoadError = useCallback(emojiId => {
-    const activeInteractionMetadata = getActiveInterationMetadata();
     setImageLoadError(true);
+    const reason = 'load error';
+    onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
     sampledUfoRenderedEmoji(emojiId).failure({
       metadata: {
-        reason: 'load error',
+        reason,
         source: 'ResourcedEmojiComponent',
-        emojiId: emojiId.id,
-        ...activeInteractionMetadata
+        emojiId: emojiId.id
       }
     });
-  }, []);
+  }, [onEmojiLoadFail]);
+  const handleOnLoadSuccess = useCallback(emojiId => {
+    onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
+  }, [onEmojiLoadSuccess]);
   return /*#__PURE__*/React.createElement(EmojiCommonProvider, {
     emojiProvider: resolvedEmojiProvider
   }, /*#__PURE__*/React.createElement("span", {
@@ -200,6 +189,7 @@ export const ResourcedEmojiComponent = props => {
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
+    onLoadSuccess: handleOnLoadSuccess,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,

package/dist/es2019/util/analytics/analytics.js

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.0.13",
+    packageVersion: "69.1.0",
     ...attributes
   }
 });

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

@@ -1,11 +1,10 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
@@ -33,7 +32,9 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
     _props$optimisticImag = props.optimisticImageURL,
     optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
-    editorEmoji = props.editorEmoji;
+    editorEmoji = props.editorEmoji,
+    onEmojiLoadSuccess = props.onEmojiLoadSuccess,
+    onEmojiLoadFail = props.onEmojiLoadFail;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -53,22 +54,10 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     resolvedEmojiProvider = _useState8[0],
     setResolvedEmojiProvider = _useState8[1];
-  var getActiveInterationMetadata = function getActiveInterationMetadata() {
-    var activeInteraction = getActiveInteraction();
-    var activeInteractionMetadata = {};
-    if (activeInteraction) {
-      activeInteractionMetadata = _objectSpread(_objectSpread({}, activeInteraction.metaData['productInteractionName'] ? {
-        productInteractionName: activeInteraction.metaData['productInteractionName']
-      } : {}), activeInteraction.metaData['productInteractionType'] ? {
-        productInteractionType: activeInteraction.metaData['productInteractionType']
-      } : {});
-    }
-    return activeInteractionMetadata;
-  };
   var fetchOrGetEmoji = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
-        activeInteractionMetadata,
+        reason,
         foundEmoji,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -76,13 +65,14 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
           case 0:
             optimisticFetch = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
             if (!_emojiProvider.fetchByEmojiId) {
-              activeInteractionMetadata = getActiveInterationMetadata();
               setEmoji(undefined);
+              reason = 'missing fetchByEmojiId interface';
+              onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
               sampledUfoRenderedEmoji(emojiId).failure({
-                metadata: _objectSpread({
-                  reason: 'missing fetchByEmojiId interface',
+                metadata: {
+                  reason: reason,
                   source: 'ResourcedEmojiComponent'
-                }, activeInteractionMetadata)
+                }
               });
             }
             foundEmoji = _emojiProvider.fetchByEmojiId(emojiId, optimisticFetch);
@@ -92,11 +82,12 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
               foundEmoji.then(function (emoji) {
                 setEmoji(emoji);
                 if (!emoji) {
+                  var _reason = 'failed to find';
+                  onEmojiLoadFail && onEmojiLoadFail(emojiId.id, _reason);
                   // emoji is undefined
-                  var _activeInteractionMetadata = getActiveInterationMetadata();
                   sampledUfoRenderedEmoji(emojiId).failure({
-                    metadata: _objectSpread({
-                      reason: 'failed to find',
+                    metadata: {
+                      reason: _reason,
                       source: 'ResourcedEmojiComponent',
                       data: {
                         emoji: {
@@ -104,15 +95,16 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
                           shortName: emojiId.shortName
                         }
                       }
-                    }, _activeInteractionMetadata)
+                    }
                   });
                 }
               }).catch(function () {
                 setEmoji(undefined);
-                var activeInteractionMetadata = getActiveInterationMetadata();
+                var reason = 'failed to load';
+                onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
                 sampledUfoRenderedEmoji(emojiId).failure({
-                  metadata: _objectSpread({
-                    reason: 'failed to load',
+                  metadata: {
+                    reason: reason,
                     source: 'ResourcedEmojiComponent',
                     data: {
                       emoji: {
@@ -120,7 +112,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
                         shortName: emojiId.shortName
                       }
                     }
-                  }, activeInteractionMetadata)
+                  }
                 });
               }).finally(function () {
                 setLoaded(true);
@@ -140,7 +132,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), []);
+  }(), [onEmojiLoadFail]);
   useEffect(function () {
     if (!emojiId) {
       return;
@@ -204,16 +196,20 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     return emoji;
   }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
   var handleOnLoadError = useCallback(function (emojiId) {
-    var activeInteractionMetadata = getActiveInterationMetadata();
     setImageLoadError(true);
+    var reason = 'load error';
+    onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
     sampledUfoRenderedEmoji(emojiId).failure({
-      metadata: _objectSpread({
-        reason: 'load error',
+      metadata: {
+        reason: reason,
         source: 'ResourcedEmojiComponent',
         emojiId: emojiId.id
-      }, activeInteractionMetadata)
+      }
     });
-  }, []);
+  }, [onEmojiLoadFail]);
+  var handleOnLoadSuccess = useCallback(function (emojiId) {
+    onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
+  }, [onEmojiLoadSuccess]);
   return /*#__PURE__*/React.createElement(EmojiCommonProvider, {
     emojiProvider: resolvedEmojiProvider
   }, /*#__PURE__*/React.createElement("span", {
@@ -228,6 +224,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
+    onLoadSuccess: handleOnLoadSuccess,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,

package/dist/esm/util/analytics/analytics.js

@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "69.0.13"
+      packageVersion: "69.1.0"
     }, attributes)
   };
 };

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

@@ -3,7 +3,7 @@ import type { CategoryId } from '../components/picker/categories';
 import { type EmojiDescription, type EmojiId, type EmojiProvider, type EmojiResponse, type EmojiSearchResult, type EmojiUpload, type OptionalEmojiDescription, type OptionalEmojiDescriptionWithVariations, type OptionalUser, type SearchOptions, type ToneSelection, type UploadingEmojiProvider, type User } from '../types';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
-import type { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig } from './EmojiUtils';
+import type { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig, EmojiLoadSuccessCallback, EmojiLoadFailCallback } from './EmojiUtils';
 interface GetEmojiProviderOptions {
     /**
      * Whether fetch emoji provider at start
@@ -52,6 +52,14 @@ export interface EmojiResourceConfig {
      * the user is being presented with a placeholder
      */
     optimisticImageApi?: OptimisticImageApiLoaderConfig;
+    /**
+     * A callback triggered on emoji load success
+     */
+    onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
+    /**
+     * A callback triggered on emoji load failure
+     */
+    onEmojiLoadFail?: EmojiLoadFailCallback;
 }
 export interface OnEmojiProviderChange extends OnProviderChange<EmojiSearchResult, any, void> {
 }

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

@@ -12,6 +12,8 @@ export interface SingleEmojiApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
 export interface OptimisticImageApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
     getUrl: (emojiId: EmojiId) => string;
 }
+export type EmojiLoadSuccessCallback = (emojiId?: string) => void;
+export type EmojiLoadFailCallback = (emojiId?: string, reason?: string) => void;
 export declare const emojiRequest: (provider: EmojiLoaderConfig, options?: RequestServiceOptions) => Promise<EmojiServiceResponse>;
 export declare const getPixelRatio: () => number;
 export declare const getAltRepresentation: (reps: AltRepresentations) => EmojiServiceRepresentation;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { EmojiProvider } from '../../api/EmojiResource';
+import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
 export interface BaseResourcedEmojiProps {
     /**
@@ -49,6 +50,14 @@ export interface Props extends BaseResourcedEmojiProps {
      * EmojiResource instance that handles fetching of emoji data.
      */
     emojiProvider: Promise<EmojiProvider>;
+    /**
+     * A callback triggered on emoji load success
+     */
+    onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
+    /**
+     * A callback triggered on emoji load failure
+     */
+    onEmojiLoadFail?: EmojiLoadFailCallback;
 }
 export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/dist/types/resource.d.ts

@@ -1,5 +1,6 @@
 export { AbstractResource } from '@atlaskit/util-service-support';
 export { default as EmojiResource } from './api/EmojiResource';
 export type { EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig, OnEmojiProviderChange, } from './api/EmojiResource';
+export type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from './api/EmojiUtils';
 export { default as EmojiRepository } from './api/EmojiRepository';
 export { default as EmojiLoader } from './api/EmojiLoader';

package/dist/types-ts4.5/api/EmojiResource.d.ts

@@ -3,7 +3,7 @@ import type { CategoryId } from '../components/picker/categories';
 import { type EmojiDescription, type EmojiId, type EmojiProvider, type EmojiResponse, type EmojiSearchResult, type EmojiUpload, type OptionalEmojiDescription, type OptionalEmojiDescriptionWithVariations, type OptionalUser, type SearchOptions, type ToneSelection, type UploadingEmojiProvider, type User } from '../types';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
-import type { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig } from './EmojiUtils';
+import type { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig, EmojiLoadSuccessCallback, EmojiLoadFailCallback } from './EmojiUtils';
 interface GetEmojiProviderOptions {
     /**
      * Whether fetch emoji provider at start
@@ -52,6 +52,14 @@ export interface EmojiResourceConfig {
      * the user is being presented with a placeholder
      */
     optimisticImageApi?: OptimisticImageApiLoaderConfig;
+    /**
+     * A callback triggered on emoji load success
+     */
+    onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
+    /**
+     * A callback triggered on emoji load failure
+     */
+    onEmojiLoadFail?: EmojiLoadFailCallback;
 }
 export interface OnEmojiProviderChange extends OnProviderChange<EmojiSearchResult, any, void> {
 }

package/dist/types-ts4.5/api/EmojiUtils.d.ts

@@ -12,6 +12,8 @@ export interface SingleEmojiApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
 export interface OptimisticImageApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
     getUrl: (emojiId: EmojiId) => string;
 }
+export type EmojiLoadSuccessCallback = (emojiId?: string) => void;
+export type EmojiLoadFailCallback = (emojiId?: string, reason?: string) => void;
 export declare const emojiRequest: (provider: EmojiLoaderConfig, options?: RequestServiceOptions) => Promise<EmojiServiceResponse>;
 export declare const getPixelRatio: () => number;
 export declare const getAltRepresentation: (reps: AltRepresentations) => EmojiServiceRepresentation;

package/dist/types-ts4.5/components/common/ResourcedEmojiComponent.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { EmojiProvider } from '../../api/EmojiResource';
+import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
 export interface BaseResourcedEmojiProps {
     /**
@@ -49,6 +50,14 @@ export interface Props extends BaseResourcedEmojiProps {
      * EmojiResource instance that handles fetching of emoji data.
      */
     emojiProvider: Promise<EmojiProvider>;
+    /**
+     * A callback triggered on emoji load success
+     */
+    onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
+    /**
+     * A callback triggered on emoji load failure
+     */
+    onEmojiLoadFail?: EmojiLoadFailCallback;
 }
 export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/dist/types-ts4.5/resource.d.ts

@@ -1,5 +1,6 @@
 export { AbstractResource } from '@atlaskit/util-service-support';
 export { default as EmojiResource } from './api/EmojiResource';
 export type { EmojiProvider, UploadingEmojiProvider, EmojiResourceConfig, OnEmojiProviderChange, } from './api/EmojiResource';
+export type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from './api/EmojiUtils';
 export { default as EmojiRepository } from './api/EmojiRepository';
 export { default as EmojiLoader } from './api/EmojiLoader';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.0.13",
+	"version": "69.1.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"