@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -1,64 +1,36 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-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; } }
-
 /** @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';
 
-var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiPickerEmojiRow, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerEmojiRow);
-
-  function EmojiPickerEmojiRow() {
-    _classCallCheck(this, EmojiPickerEmojiRow);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(EmojiPickerEmojiRow, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojis = _this$props.emojis,
-          onSelected = _this$props.onSelected,
-          onMouseMove = _this$props.onMouseMove,
-          title = _this$props.title,
-          showDelete = _this$props.showDelete,
-          onDelete = _this$props.onDelete;
-      return jsx("div", {
-        css: emojiPickerRow
-      }, emojis.map(function (emoji) {
-        var shortName = emoji.shortName,
-            id = emoji.id;
-        var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(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
-        }));
-      }));
-    }
-  }]);
-
-  return EmojiPickerEmojiRow;
-}(PureComponent);
-
-export { EmojiPickerEmojiRow as default };
+var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
+  var emojis = _ref.emojis,
+      onSelected = _ref.onSelected,
+      onMouseMove = _ref.onMouseMove,
+      title = _ref.title,
+      showDelete = _ref.showDelete,
+      onDelete = _ref.onDelete;
+  return jsx("div", {
+    css: emojiPickerRow
+  }, emojis.map(function (emoji) {
+    var shortName = emoji.shortName,
+        id = emoji.id;
+    var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(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/esm/components/picker/EmojiPickerFooter.js

@@ -1,51 +1,18 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-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; } }
-
 /** @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';
-
-var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiPickerFooter, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerFooter);
-
-  function EmojiPickerFooter() {
-    _classCallCheck(this, EmojiPickerFooter);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(EmojiPickerFooter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          selectedEmoji = _this$props.selectedEmoji,
-          isUploading = _this$props.isUploading;
-      var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
-
-      if (!selectedEmoji || isUploading) {
-        return null;
-      }
-
-      return jsx("div", {
-        css: previewFooterClassnames
-      }, selectedEmoji && jsx(EmojiPreviewComponent, {
-        emoji: selectedEmoji
-      }));
-    }
-  }]);
-
-  return EmojiPickerFooter;
-}(PureComponent);
-
-export { EmojiPickerFooter as default };
+var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
+
+var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
+  var selectedEmoji = _ref.selectedEmoji;
+  return jsx("div", {
+    css: previewFooterClassnames,
+    "data-testid": "emoji-picker-footer"
+  }, selectedEmoji && jsx(EmojiPreviewComponent, {
+    emoji: selectedEmoji
+  }));
+};
+
+export default /*#__PURE__*/memo(EmojiPickerFooter);

package/dist/esm/components/picker/styles.js

@@ -7,22 +7,24 @@ import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
-import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
+import { emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerWidth } from '../../util/constants';
 import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export var emojiPicker = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  background: token('elevation.surface.overlay', 'white'),
-  border: "".concat(emojiPickerBorderColor, " 1px solid"),
-  borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: emojiPickerBoxShadow,
-  height: "".concat(emojiPickerHeight, "px"),
-  width: "".concat(emojiPickerWidth, "px"),
-  marginBottom: '8px',
-  minWidth: "".concat(emojiPickerWidth, "px")
-}); // Level 2
+export var emojiPicker = function emojiPicker(hasPreview) {
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    background: token('elevation.surface.overlay', 'white'),
+    border: "".concat(emojiPickerBorderColor, " 1px solid"),
+    borderRadius: "".concat(borderRadius(), "px"),
+    boxShadow: emojiPickerBoxShadow,
+    height: "".concat(hasPreview ? emojiPickerHeightWithPreview : emojiPickerHeight, "px"),
+    width: "".concat(emojiPickerWidth, "px"),
+    marginBottom: '8px',
+    minWidth: "".concat(emojiPickerWidth, "px")
+  });
+}; // Level 2
 /// Category Selector
 
 export var addButton = 'emoji-picker-add-button';

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

@@ -1,18 +1,10 @@
-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";
-
-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 _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /** @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';
@@ -20,116 +12,130 @@ import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { emojiUploadFooter, emojiUploadWidget } from './styles';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { messages } from '../i18n';
 
-var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiUploadComponent, _PureComponent);
-
-  var _super = _createSuper(EmojiUploadComponent);
-
-  function EmojiUploadComponent(props) {
-    var _this;
-
-    _classCallCheck(this, EmojiUploadComponent);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "onUploadEmoji", function (upload, retry) {
-      var emojiProvider = _this.props.emojiProvider;
-      ufoExperiences['emoji-uploaded'].start();
-      ufoExperiences['emoji-uploaded'].addMetadata({
-        retry: retry
-      });
-
-      _this.fireAnalytics(uploadConfirmButton({
-        retry: retry
-      }));
-
-      var errorSetter = function errorSetter(message) {
-        _this.setState({
-          uploadErrorMessage: message
-        });
-      };
-
-      uploadEmoji(upload, emojiProvider, errorSetter, _this.prepareForUpload, _this.fireAnalytics, retry);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "prepareForUpload", function () {
-      var emojiProvider = _this.props.emojiProvider;
-
-      if (supportsUploadFeature(emojiProvider)) {
-        emojiProvider.prepareForUpload();
-      }
-
-      _this.setState({
-        uploadErrorMessage: undefined
-      });
-
-      if (_this.ref) {
-        _this.ref.clearUploadPicker();
-      }
-    });
+var EmojiUploadComponent = function EmojiUploadComponent(props) {
+  var emojiProvider = props.emojiProvider,
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      onUploaderRef = props.onUploaderRef;
 
-    _defineProperty(_assertThisInitialized(_this), "onFileChooserClicked", function () {
-      _this.fireAnalytics(selectedFileEvent());
-    });
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      uploadErrorMessage = _useState2[0],
+      setUploadErrorMessage = _useState2[1];
 
-    _defineProperty(_assertThisInitialized(_this), "onUploadCancelled", function () {
-      _this.fireAnalytics(uploadCancelButton());
-
-      _this.prepareForUpload();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onUploaderRef", function (emojiUploadPicker) {
-      _this.ref = emojiUploadPicker;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsEvent) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-
-      if (createAnalyticsEvent) {
-        createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
-      }
-    });
-
-    if (supportsUploadFeature(props.emojiProvider)) {
-      props.emojiProvider.prepareForUpload();
+  useEffect(function () {
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
     }
-
-    _this.state = {};
-    return _this;
-  }
-
-  _createClass(EmojiUploadComponent, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
+  }, [emojiProvider]);
+  useEffect(function () {
+    return function () {
       ufoExperiences['emoji-uploaded'].abort({
         metadata: {
           source: 'EmojiUploadComponent',
           reason: 'unmount'
         }
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var uploadErrorMessage = this.state.uploadErrorMessage;
-      var 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
-      })));
-    }
-  }]);
+    };
+  }, []);
+
+  var onUploadEmoji = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(upload, retry, onSuccessHandler) {
+      var errorSetter, message;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              ufoExperiences['emoji-uploaded'].start();
+              ufoExperiences['emoji-uploaded'].addMetadata({
+                retry: retry
+              });
+
+              if (!supportsUploadFeature(emojiProvider)) {
+                _context.next = 16;
+                break;
+              }
+
+              fireAnalytics(uploadConfirmButton({
+                retry: retry
+              }));
+              _context.prev = 4;
+              _context.next = 7;
+              return emojiProvider.prepareForUpload();
+
+            case 7:
+              errorSetter = function errorSetter(message) {
+                setUploadErrorMessage(message);
+              }; // internally handled error from upload callback
+
+
+              uploadEmoji(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
+              _context.next = 16;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
+              // error from upload token generation
+              message = _context.t0 instanceof Error ? _context.t0.message : 'Issue with generating upload token';
+              ufoExperiences['emoji-uploaded'].failure({
+                metadata: {
+                  source: 'EmojiUploadComponent',
+                  error: message
+                }
+              });
+              setUploadErrorMessage(messages.emojiUploadFailed);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 11]]);
+    }));
+
+    return function onUploadEmoji(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var onUploaded = function onUploaded(onSuccessHandler) {
+    return function () {
+      setUploadErrorMessage(undefined);
 
-  return EmojiUploadComponent;
-}(PureComponent);
+      if (onSuccessHandler) {
+        onSuccessHandler();
+      }
+    };
+  };
+
+  var onFileChooserClicked = function onFileChooserClicked() {
+    fireAnalytics(selectedFileEvent());
+  };
 
-export { EmojiUploadComponent as default };
+  var onUploadCancelled = function onUploadCancelled() {
+    fireAnalytics(uploadCancelButton());
+    onUploaded();
+  };
+
+  var fireAnalytics = function 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/esm/hooks/useEmojiContext.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { EmojiContext } from '../context/EmojiContext';
+export var useEmojiContext = function useEmojiContext() {
+  return useContext(EmojiContext);
+};

package/dist/esm/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/dist/esm/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/esm/util/constants.js

@@ -14,6 +14,7 @@ export var MAX_ORDINAL = 100000;
 export var defaultEmojiHeight = 20;
 export var emojiPickerWidth = 350;
 export var emojiPickerHeight = 295;
+export var emojiPickerHeightWithPreview = 348;
 export var localStoragePrefix = 'fabric.emoji';
 export var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");
 export var defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];

package/dist/esm/version.json

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

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

@@ -36,9 +36,8 @@ export interface EmojiResourceConfig {
      */
     singleEmojiApi?: SingleEmojiApiLoaderConfig;
     /**
-     * Used for fetching emoji asset and render this asset before provider has been
-     * downloaded to reduce the time the user is presented with a placeholder
-     * while downloading the emoji meta data
+     * Renders an image while the provider is being downloaded to reduce the time
+     * the user is being presented with a placeholder
      */
     optimisticImageApi?: OptimisticImageApiLoaderConfig;
 }

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

@@ -1,8 +1,6 @@
-import React, { ContextType } from 'react';
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { EmojiDescription } from '../../types';
 import { Props as EmojiProps } from './Emoji';
-import { EmojiContext, EmojiContextType } from '../../context/EmojiContext';
 export interface State {
     cachedEmoji?: EmojiDescription;
     invalidImage?: boolean;
@@ -13,18 +11,10 @@ export interface CachingEmojiProps extends EmojiProps {
 /**
  * Renders an emoji from a cached image, if required.
  */
-export declare const CachingEmoji: (props: CachingEmojiProps) => JSX.Element;
+export declare const CachingEmoji: FC<CachingEmojiProps>;
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
  * rendering paths depending on caching strategy.
  */
-export declare class CachingMediaEmoji extends PureComponent<CachingEmojiProps, State> {
-    static contextType: React.Context<EmojiContextType>;
-    context: ContextType<typeof EmojiContext>;
-    constructor(props: EmojiProps, context: ContextType<typeof EmojiContext>);
-    componentDidUpdate(): void;
-    private loadEmoji;
-    private handleLoadError;
-    render(): JSX.Element;
-}
+export declare const CachingMediaEmoji: FC<CachingEmojiProps>;
 export default CachingEmoji;

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

@@ -11,7 +11,6 @@ export interface Props {
     selected?: boolean;
     /**
      * Automatically show the emoji as selected based on mouse hover.
-     *
      * CSS, fast, does not require a re-render, but selected state not
      * externally controlled via props.
      */
@@ -21,7 +20,7 @@ export interface Props {
      */
     onSelected?: OnEmojiEvent;
     /**
-     * Called when the mouse moved over the emoji.
+     * Called when the mouse moves over the emoji.
      */
     onMouseMove?: OnEmojiEvent;
     /**

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
 import { OnDeleteEmoji } from '../common/EmojiDeletePreview';
@@ -22,21 +22,10 @@ export interface Props {
     query?: string;
     onChange: any;
 }
-interface State {
-    selectingTone: boolean;
-}
-export declare class EmojiActions extends PureComponent<Props & WrappedComponentProps, State> {
-    state: {
-        selectingTone: boolean;
-    };
-    onToneButtonClick: () => void;
-    onToneSelected: (toneValue: number) => void;
-    onMouseLeave: () => void;
-    renderTones(): JSX.Element | null;
-    renderAddOwnEmoji(): JSX.Element | null;
-    render(): JSX.Element;
-}
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+declare type PropsWithWrappedComponentPropsType = Props & WrappedComponentProps;
+declare type EmojiActionsProps = PropsWithWrappedComponentPropsType;
+export declare const EmojiActions: FC<EmojiActionsProps>;
+declare const _default: FC<import("react-intl-next").WithIntlProps<PropsWithWrappedComponentPropsType>> & {
+    WrappedComponent: import("react").ComponentType<PropsWithWrappedComponentPropsType>;
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { Message } from '../../types';
 import { SerializedStyles } from '@emotion/core';
 export interface Props {
@@ -6,8 +6,5 @@ export interface Props {
     tooltip?: boolean;
     messageStyles: SerializedStyles;
 }
-export default class EmojiErrorMessage extends PureComponent<Props> {
-    renderWithTooltip(): JSX.Element;
-    renderInline(): JSX.Element;
-    render(): JSX.Element;
-}
+declare const EmojiErrorMessage: FC<Props>;
+export default EmojiErrorMessage;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { EmojiDescription } from '../../types';
+import { FC } from 'react';
 declare type Props = {
     emoji: EmojiDescription;
 };
-export declare const EmojiPreviewComponent: ({ emoji }: Props) => JSX.Element;
+export declare const EmojiPreviewComponent: FC<Props>;
 export {};