@atlaskit/emoji 65.1.1 → 65.2.0

package/dist/es2019/components/picker/EmojiPickerEmojiRow.js

@@ -1,40 +1,37 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { memo } from 'react';
 import CachingEmoji from '../common/CachingEmoji';
 import { emojiItem, emojiPickerRow } from './styles';
-export default class EmojiPickerEmojiRow extends PureComponent {
-  render() {
-    const {
-      emojis,
-      onSelected,
-      onMouseMove,
-      title,
-      showDelete,
-      onDelete
-    } = this.props;
-    return jsx("div", {
-      css: emojiPickerRow
-    }, emojis.map(emoji => {
-      const {
-        shortName,
-        id
-      } = emoji;
-      const key = id ? `${id}-${title}` : `${shortName}-${title}`;
-      return jsx("span", {
-        css: emojiItem,
-        key: key
-      }, jsx(CachingEmoji, {
-        emoji: emoji,
-        selectOnHover: true,
-        onSelected: onSelected,
-        onMouseMove: onMouseMove,
-        showDelete: showDelete,
-        onDelete: onDelete,
-        placeholderSize: 24,
-        shouldBeInteractive: true
-      }));
-    }));
-  }
 
-}
+const EmojiPickerEmojiRow = ({
+  emojis,
+  onSelected,
+  onMouseMove,
+  title,
+  showDelete,
+  onDelete
+}) => jsx("div", {
+  css: emojiPickerRow
+}, emojis.map(emoji => {
+  const {
+    shortName,
+    id
+  } = emoji;
+  const key = id ? `${id}-${title}` : `${shortName}-${title}`;
+  return jsx("span", {
+    css: emojiItem,
+    key: key
+  }, jsx(CachingEmoji, {
+    emoji: emoji,
+    selectOnHover: true,
+    onSelected: onSelected,
+    onMouseMove: onMouseMove,
+    showDelete: showDelete,
+    onDelete: onDelete,
+    placeholderSize: 24,
+    shouldBeInteractive: true
+  }));
+}));
+
+export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

package/dist/es2019/components/picker/EmojiPickerFooter.js

@@ -1,27 +1,17 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { memo } from 'react';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
-export default class EmojiPickerFooter extends PureComponent {
-  render() {
-    const {
-      selectedEmoji,
-      isUploading
-    } = this.props;
-    const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
+const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
-    if (!selectedEmoji || isUploading) {
-      this.props.onPreviewDisplayed(false);
-      return null;
-    }
+const EmojiPickerFooter = ({
+  selectedEmoji
+}) => jsx("div", {
+  css: previewFooterClassnames,
+  "data-testid": "emoji-picker-footer"
+}, selectedEmoji && jsx(EmojiPreviewComponent, {
+  emoji: selectedEmoji
+}));
 
-    this.props.onPreviewDisplayed(true);
-    return jsx("div", {
-      css: previewFooterClassnames
-    }, selectedEmoji && jsx(EmojiPreviewComponent, {
-      emoji: selectedEmoji
-    }));
-  }
-
-}
+export default /*#__PURE__*/memo(EmojiPickerFooter);

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { useState, memo, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
@@ -10,105 +8,97 @@ import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { emojiUploadFooter, emojiUploadWidget } from './styles';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-export default class EmojiUploadComponent extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "onUploadEmoji", (upload, retry) => {
-      const {
-        emojiProvider
-      } = this.props;
-      ufoExperiences['emoji-uploaded'].start();
-      ufoExperiences['emoji-uploaded'].addMetadata({
-        retry
-      });
-      this.fireAnalytics(uploadConfirmButton({
-        retry
-      }));
-
-      const errorSetter = message => {
-        this.setState({
-          uploadErrorMessage: message
-        });
-      };
-
-      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics, retry);
-    });
-
-    _defineProperty(this, "prepareForUpload", () => {
-      const {
-        emojiProvider
-      } = this.props;
-
-      if (supportsUploadFeature(emojiProvider)) {
-        emojiProvider.prepareForUpload();
-      }
-
-      this.setState({
-        uploadErrorMessage: undefined
-      });
-
-      if (this.ref) {
-        this.ref.clearUploadPicker();
+import { messages } from '../i18n';
+
+const EmojiUploadComponent = props => {
+  const {
+    emojiProvider,
+    createAnalyticsEvent,
+    onUploaderRef
+  } = props;
+  const [uploadErrorMessage, setUploadErrorMessage] = useState();
+  useEffect(() => {
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
+  }, [emojiProvider]);
+  useEffect(() => () => {
+    ufoExperiences['emoji-uploaded'].abort({
+      metadata: {
+        source: 'EmojiUploadComponent',
+        reason: 'unmount'
       }
     });
+  }, []);
 
-    _defineProperty(this, "onFileChooserClicked", () => {
-      this.fireAnalytics(selectedFileEvent());
+  const onUploadEmoji = async (upload, retry, onSuccessHandler) => {
+    ufoExperiences['emoji-uploaded'].start();
+    ufoExperiences['emoji-uploaded'].addMetadata({
+      retry
     });
 
-    _defineProperty(this, "onUploadCancelled", () => {
-      this.fireAnalytics(uploadCancelButton());
-      this.prepareForUpload();
-    });
+    if (supportsUploadFeature(emojiProvider)) {
+      fireAnalytics(uploadConfirmButton({
+        retry
+      }));
 
-    _defineProperty(this, "onUploaderRef", emojiUploadPicker => {
-      this.ref = emojiUploadPicker;
-    });
+      try {
+        await emojiProvider.prepareForUpload();
 
-    _defineProperty(this, "fireAnalytics", analyticsEvent => {
-      const {
-        createAnalyticsEvent
-      } = this.props;
+        const errorSetter = message => {
+          setUploadErrorMessage(message);
+        }; // internally handled error from upload callback
 
-      if (createAnalyticsEvent) {
-        createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
-      }
-    });
 
-    if (supportsUploadFeature(props.emojiProvider)) {
-      props.emojiProvider.prepareForUpload();
+        uploadEmoji(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
+      } catch (error) {
+        // error from upload token generation
+        const message = error instanceof Error ? error.message : 'Issue with generating upload token';
+        ufoExperiences['emoji-uploaded'].failure({
+          metadata: {
+            source: 'EmojiUploadComponent',
+            error: message
+          }
+        });
+        setUploadErrorMessage(messages.emojiUploadFailed);
+      }
     }
+  };
 
-    this.state = {};
-  }
+  const onUploaded = onSuccessHandler => () => {
+    setUploadErrorMessage(undefined);
 
-  componentWillUnmount() {
-    ufoExperiences['emoji-uploaded'].abort({
-      metadata: {
-        source: 'EmojiUploadComponent',
-        reason: 'unmount'
-      }
-    });
-  }
+    if (onSuccessHandler) {
+      onSuccessHandler();
+    }
+  };
 
-  render() {
-    const {
-      uploadErrorMessage
-    } = this.state;
-    const errorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
-    return jsx("div", {
-      css: emojiUploadWidget,
-      ref: this.props.onUploaderRef
-    }, jsx("div", {
-      css: emojiUploadFooter
-    }, jsx(EmojiUploadPickerWithIntl, {
-      ref: this.onUploaderRef,
-      onFileChooserClicked: this.onFileChooserClicked,
-      onUploadCancelled: this.onUploadCancelled,
-      onUploadEmoji: this.onUploadEmoji,
-      errorMessage: errorMessage
-    })));
-  }
+  const onFileChooserClicked = () => {
+    fireAnalytics(selectedFileEvent());
+  };
 
-}
+  const onUploadCancelled = () => {
+    fireAnalytics(uploadCancelButton());
+    onUploaded();
+  };
+
+  const fireAnalytics = analyticsEvent => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
+    }
+  };
+
+  return jsx("div", {
+    css: emojiUploadWidget,
+    ref: onUploaderRef
+  }, jsx("div", {
+    css: emojiUploadFooter
+  }, jsx(EmojiUploadPickerWithIntl, {
+    onFileChooserClicked: onFileChooserClicked,
+    onUploadCancelled: onUploadCancelled,
+    onUploadEmoji: onUploadEmoji,
+    errorMessage: uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null
+  })));
+};
+
+export default /*#__PURE__*/memo(EmojiUploadComponent);

package/dist/es2019/hooks/useEmojiContext.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { EmojiContext } from '../context/EmojiContext';
+export const useEmojiContext = () => useContext(EmojiContext);

package/dist/es2019/index.js

@@ -17,8 +17,11 @@ import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
 import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
+import { useEmojiContext } from './hooks/useEmojiContext';
+import { EmojiContextProvider } from './context/EmojiContextProvider';
 export { // Classes
-AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, // functions
+AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, EmojiContextProvider, // hooks,
+useEmojiContext, // functions
 denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums

package/dist/es2019/version.json

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

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

@@ -1,21 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["placeholderSize"],
-    _excluded2 = ["children"];
-
-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 React, { useEffect } from 'react';
-import { PureComponent } from 'react';
+var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
+import React, { useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
@@ -24,36 +11,35 @@ import EmojiPlaceholder from './EmojiPlaceholder';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { EmojiContext } from '../../context/EmojiContext';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
+import { useEmojiContext } from '../../hooks/useEmojiContext';
+import { useCallback } from 'react';
 
 /**
  * Renders an emoji from a cached image, if required.
  */
 export var CachingEmoji = function CachingEmoji(props) {
-  // Optimisation to only render the class based CachingMediaEmoji if necessary
+  // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var placeholderSize = props.placeholderSize,
-      emojiProps = _objectWithoutProperties(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
+  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-
-  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'caching-emoji',
-    emoji: emojiProps.emoji.shortName
+    emoji: emoji.shortName
   });
   useEffect(function () {
-    if (!hasUfoMarked(sampledUfoRenderedEmoji(emojiProps.emoji), 'fmp')) {
-      sampledUfoRenderedEmoji(emojiProps.emoji).markFMP();
+    if (!hasUfoMarked(sampledUfoRenderedEmoji(emoji), 'fmp')) {
+      sampledUfoRenderedEmoji(emoji).markFMP();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
 
   var emojiNode = function emojiNode() {
-    if (isMediaEmoji(props.emoji)) {
+    if (isMediaEmoji(emoji)) {
       return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
     }
 
-    return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+    return /*#__PURE__*/React.createElement(Emoji, props);
   };
 
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -65,143 +51,87 @@ export var CachingEmoji = function CachingEmoji(props) {
  * rendering paths depending on caching strategy.
  */
 
-export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
-  _inherits(CachingMediaEmoji, _PureComponent);
-
-  var _super = _createSuper(CachingMediaEmoji);
-
-  function CachingMediaEmoji(props, context) {
-    var _this;
-
-    _classCallCheck(this, CachingMediaEmoji);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId) {
-      sampledUfoRenderedEmoji(_emojiId).failure({
+export var CachingMediaEmoji = function CachingMediaEmoji(props) {
+  var emoji = props.emoji,
+      placeholderSize = props.placeholderSize,
+      showTooltip = props.showTooltip,
+      fitToHeight = props.fitToHeight,
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var shortName = emoji.shortName,
+      representation = emoji.representation;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      cachedEmoji = _useState2[0],
+      setCachedEmoji = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inValidImage = _useState4[0],
+      setInvalidImage = _useState4[1];
+
+  var context = useEmojiContext();
+  var loadEmoji = useCallback(function (emojiProvider) {
+    debug('Loading image via media cache', emoji.shortName);
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+      setCachedEmoji(cachedEmoji);
+      setInvalidImage(false);
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
+    }).catch(function () {
+      setCachedEmoji(undefined);
+      setInvalidImage(true);
+      sampledUfoRenderedEmoji(emoji).failure({
         metadata: {
-          reason: 'load error',
+          reason: 'failed to load media emoji',
           source: 'CachingMediaEmoji',
-          emoji: {
-            id: _emojiId.id,
-            shortName: _emojiId.shortName
+          data: {
+            emoji: {
+              id: emoji.id,
+              shortName: emoji.shortName,
+              name: emoji.name
+            }
           }
         }
       });
-
-      _this.setState({
-        invalidImage: true
-      });
     });
-
-    _this.state = {
-      cachedEmoji: undefined
-    };
-
-    _this.loadEmoji(props.emoji, context);
-
-    return _this;
-  }
-
-  _createClass(CachingMediaEmoji, [{
-    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) {
-      var _this2 = this;
-
-      if (!context) {
-        return;
-      }
-
-      if (!context.emoji) {
-        return undefined;
-      }
-
-      var emojiProvider = context.emoji.emojiProvider;
-
-      if (!emojiProvider) {
-        return undefined;
-      }
-
-      debug('Loading image via media cache', emoji.shortName);
-      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
-      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
-        _this2.setState({
-          cachedEmoji: cachedEmoji,
-          invalidImage: false
-        });
-
-        sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
-      }).catch(function () {
-        _this2.setState({
-          cachedEmoji: undefined,
-          invalidImage: true
-        });
-
-        sampledUfoRenderedEmoji(emoji).failure({
-          metadata: {
-            reason: 'failed to load media emoji',
-            source: 'CachingMediaEmoji',
-            data: {
-              emoji: {
-                id: emoji.id,
-                shortName: emoji.shortName,
-                name: emoji.name
-              }
-            }
-          }
-        });
-      });
+  }, [emoji]);
+  useEffect(function () {
+    if (context && context.emoji.emojiProvider) {
+      loadEmoji(context.emoji.emojiProvider);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          cachedEmoji = _this$state.cachedEmoji,
-          invalidImage = _this$state.invalidImage;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          otherProps = _objectWithoutProperties(_this$props, _excluded2);
-
-      var emojiComponent;
-
-      if (cachedEmoji && !invalidImage) {
-        emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
-          emoji: cachedEmoji,
-          onLoadError: this.handleLoadError
-        }));
-      } else {
-        var _this$props2 = this.props,
-            emoji = _this$props2.emoji,
-            placeholderSize = _this$props2.placeholderSize,
-            showTooltip = _this$props2.showTooltip,
-            fitToHeight = _this$props2.fitToHeight;
-        var shortName = emoji.shortName,
-            representation = emoji.representation;
-        emojiComponent = /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-          size: fitToHeight || placeholderSize,
-          shortName: shortName,
-          showTooltip: showTooltip,
-          representation: representation
-        });
+  }, [context, loadEmoji]);
+
+  var handleLoadError = function handleLoadError(_emojiId) {
+    sampledUfoRenderedEmoji(_emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'CachingMediaEmoji',
+        emoji: {
+          id: _emojiId.id,
+          shortName: _emojiId.shortName
+        }
       }
+    });
+    setInvalidImage(true);
+  };
 
-      return emojiComponent;
-    }
-  }]);
-
-  return CachingMediaEmoji;
-}(PureComponent);
-
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
+  if (cachedEmoji && !inValidImage) {
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+      showTooltip: showTooltip,
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
+  }
 
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
+};
 export default CachingEmoji;

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

@@ -130,7 +130,7 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
-    onMouseMove: function onMouseMove(event) {
+    onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
@@ -263,7 +263,7 @@ export var ImageEmoji = function ImageEmoji(props) {
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
-    onMouseMove: function onMouseMove(event) {
+    onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,