@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -0,0 +1,133 @@
+/* ToneSelectorInternal.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./ToneSelectorInternal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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 React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
+import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
+import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
+import { messages } from '../i18n';
+import EmojiRadioButton from './EmojiRadioButton';
+import { toneSelectorTestId } from './ToneSelector';
+import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
+var hidden = null;
+var extractAllTones = function extractAllTones(emoji) {
+  if (emoji.skinVariations) {
+    return [emoji].concat(_toConsumableArray(emoji.skinVariations));
+  }
+  return [emoji];
+};
+export var ToneSelectorInternal = function ToneSelectorInternal(props) {
+  var createAnalyticsEvent = props.createAnalyticsEvent,
+    emoji = props.emoji,
+    onToneSelected = props.onToneSelected,
+    onToneClose = props.onToneClose,
+    selectedTone = props.selectedTone,
+    isVisible = props.isVisible;
+  var isMounted = useRef(false);
+  var selectedToneRadioRef = useRef(null);
+  // Refs for all radio inputs — used for FG-gated arrow-key focus management
+  var radioRefs = useRef([]);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var emojiToneCollection = useMemo(function () {
+    var selectedToneIndex = -1;
+    var toneColletion = extractAllTones(emoji).map(function (tone, index) {
+      var isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return _objectSpread(_objectSpread({}, tone), {}, {
+        isSelected: isSelected,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneIndex: index
+      });
+    });
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
+  useEffect(function () {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 || _selectedToneRadioRef.focus();
+    }
+  }, [isVisible, selectedToneRadioRef]);
+  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
+    }
+  };
+  var _onArrowKey = useCallback(function (currentIndex, direction) {
+    var _radioRefs$current$ne;
+    var len = radioRefs.current.length;
+    var nextIndex = (currentIndex + direction + len) % len;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
+  }, []);
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    return function () {
+      if (selectedTone === toneValue && onToneClose) {
+        onToneClose();
+        return;
+      }
+      onToneSelected(toneValue);
+      var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
+      fireAnalyticsEvent(toneSelectedEvent({
+        skinToneModifier: toneList[toneValue]
+      }));
+    };
+  };
+  if (!isMounted.current) {
+    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
+  }
+  isMounted.current = true;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, emojiToneCollection.map(function (tone, renderIndex) {
+    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: function ref(el) {
+        radioRefs.current[renderIndex] = el;
+        if (tone.isSelected && selectedToneRadioRef) {
+          selectedToneRadioRef.current = el;
+        }
+      },
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      emoji: tone,
+      onArrowKey: function onArrowKey(direction) {
+        return _onArrowKey(renderIndex, direction);
+      },
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    });
+  }));
+};

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

@@ -2,7 +2,7 @@
 import "./ToolTipContentWithKeymap.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
-import { formatShortcut } from '../../util/keymaps';
+import { formatShortcut } from '../../util/format-shortcut';
 var tooltipShortcutStyle = null;
 export var ToolTipContentWithKeymap = /*#__PURE__*/React.memo(function (_ref) {
   var description = _ref.description,

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

@@ -0,0 +1,128 @@
+/* UnicodeEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { ax, ix } from "@compiled/react/runtime";
+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 React, { useEffect, useState } from 'react';
+import { defaultEmojiHeight } from '../../util/constants';
+import { isSSR } from '../../util/is-ssr';
+import { renderUnicodeEmojiToImagePath } from '../../util/renderUnicodeEmojiToImagePath';
+import { EmojiNodeWrapper, unicodeEmojiCanvasSize } from './Emoji';
+import EmojiPlaceholder from './EmojiPlaceholder';
+import { ImageEmoji } from './ImageEmoji';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles } from './styles';
+var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
+  var _useState = useState({
+      status: 'loading'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var cancelled = false;
+    var imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji: unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(function (imagePath) {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji: unicodeEmoji,
+        imagePath: imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji: unicodeEmoji
+      });
+    }).catch(function () {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji: unicodeEmoji
+        });
+      }
+    });
+    return function () {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    showTooltip = props.showTooltip;
+  var emojiText = emoji.representation.unicodeEmoji;
+  var unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  var hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        altRepresentation: undefined,
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export var UnicodeEmoji = function UnicodeEmoji(props) {
+  var emoji = props.emoji,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    fitToHeight = props.fitToHeight,
+    _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
+  var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
+  var emojiText = emoji.representation.unicodeEmoji;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
+  var style = {
+    display: 'inline-flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};

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

@@ -1,8 +1,9 @@
-import { supportsUploadFeature } from '../../api/EmojiResource';
-import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
-import { messages } from '../i18n';
+import { supportsUploadFeature } from '../../api/supportsUploadFeature';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-import { extractErrorInfo } from '../../util/analytics/analytics';
+import { uploadFailedEvent } from '../../util/analytics/uploadFailedEvent';
+import { uploadSucceededEvent } from '../../util/analytics/uploadSucceededEvent';
+import { messages } from '../i18n';
 export var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) {
   var startTime = Date.now();
   errorSetter(undefined);

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

@@ -0,0 +1,8 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+export var emojiPlaceholderTestId = function emojiPlaceholderTestId(shortName) {
+  return "emoji-placeholder-".concat(shortName);
+};

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

@@ -0,0 +1,13 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { toEmojiId } from '../../util/to-emoji-id';
+export var handleDelete = function handleDelete(props, event) {
+  var emoji = props.emoji,
+    onDelete = props.onDelete;
+  if (onDelete) {
+    onDelete(toEmojiId(emoji), emoji, event);
+  }
+};

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

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+export var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};

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

@@ -0,0 +1,7 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
+  _classCallCheck(this, AbstractItem);
+  this.props = props;
+  this.height = height;
+});

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

@@ -0,0 +1,27 @@
+/* CategoryHeadingItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { AbstractItem } from './AbstractItem';
+import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
+import { sizes } from './EmojiPickerSizes';
+export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem) {
+  function CategoryHeadingItem(props) {
+    var _this;
+    _classCallCheck(this, CategoryHeadingItem);
+    _this = _callSuper(this, CategoryHeadingItem, [props, sizes.categoryHeadingHeight]);
+    _defineProperty(_this, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, _this.props);
+    });
+    return _this;
+  }
+  _inherits(CategoryHeadingItem, _AbstractItem);
+  return _createClass(CategoryHeadingItem);
+}(AbstractItem);

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

@@ -4,16 +4,19 @@ import "./CategorySelector.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { cx } from '@atlaskit/css';
 import { useIntl } from 'react-intl';
+import { cx } from '@atlaskit/css';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { usePrevious } from '../../hooks/usePrevious';
 import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
-import { usePrevious } from '../../hooks/usePrevious';
+import { categorySelectorCategoryTestId } from './categorySelectorCategoryTestId';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
+import { sortCategories } from './sortCategories';
+import { sortCategoriesNew } from './sortCategoriesNew';
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -44,12 +47,6 @@ var categorySelector = null;
 var categorySelectorNew = null;
 var categorySelectorTablist = null;
 var categorySelectorTablistNew = null;
-export var sortCategories = function sortCategories(c1, c2) {
-  return CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
-};
-export var sortCategoriesNew = function sortCategoriesNew(c1, c2) {
-  return CategoryDescriptionMapNew[c1].order - CategoryDescriptionMapNew[c2].order;
-};
 var addNewCategories = function addNewCategories(oldCategories, newCategories) {
   if (!newCategories) {
     return oldCategories;
@@ -59,9 +56,6 @@ var addNewCategories = function addNewCategories(oldCategories, newCategories) {
   })).sort(isRefreshEmojiPickerEnabled() ? sortCategoriesNew : sortCategories);
 };
 export var categorySelectorComponentTestId = 'category-selector-component';
-export var categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {
-  return "category-selector-".concat(categoryId);
-};
 var CategorySelector = function CategorySelector(props) {
   var disableCategories = props.disableCategories,
     dynamicCategories = props.dynamicCategories,

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

@@ -1,107 +1,27 @@
-/* EmojiPicker.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["emojiProvider"];
-import "./EmojiPicker.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ufoExperiences } from '../../util/analytics';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
-import { LoadingItem } from './EmojiPickerVirtualItems';
-import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
-import { defaultEmojiPickerSize } from '../../util/constants';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
-var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
-  if (!FeatureGates.initializeCompleted()) {
-    return false;
-  }
+import { EmojiPickerInternal } from './EmojiPickerInternal';
+export var EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
+export default EmojiPicker;
 
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-var emojiPicker = null;
-var emojiPickerNew = null;
-var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
-  return import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
-};
-var emojiPickerLoader = function emojiPickerLoader() {
-  return emojiPickerModuleLoader().then(function (module) {
-    return module.default;
-  });
-};
-export var preloadEmojiPicker = function preloadEmojiPicker() {
-  emojiPickerLoader().then(function (component) {
-    EmojiPickerInternal.AsyncLoadedComponent = component;
-  });
-};
-export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
-  function EmojiPickerInternal(props) {
-    var _this;
-    _classCallCheck(this, EmojiPickerInternal);
-    _this = _callSuper(this, EmojiPickerInternal, [props, {}]);
-    _defineProperty(_this, "state", {
-      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
-    });
-    ufoExperiences['emoji-picker-opened'].start();
-    return _this;
-  }
-  _inherits(EmojiPickerInternal, _LoadingEmojiComponen);
-  return _createClass(EmojiPickerInternal, [{
-    key: "asyncLoadComponent",
-    value: function asyncLoadComponent() {
-      var _this2 = this;
-      emojiPickerLoader().then(function (component) {
-        EmojiPickerInternal.AsyncLoadedComponent = component;
-        _this2.setAsyncState(component);
-      });
-    }
-  }, {
-    key: "renderLoading",
-    value: function renderLoading() {
-      var _this3 = this;
-      var item = new LoadingItem();
-      var handlePickerRef = function handlePickerRef(ref) {
-        if (_this3.props.onPickerRef) {
-          _this3.props.onPickerRef(ref);
-        }
-      };
-      ufoExperiences['emoji-picker-opened'].markFMP();
-      return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
-        ref: handlePickerRef,
-        className: ax(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-      }, item.renderItem()) : /*#__PURE__*/React.createElement("div", {
-        ref: handlePickerRef,
-        className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-      }, item.renderItem());
-    }
-  }, {
-    key: "renderLoaded",
-    value: function renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
-      var _this$props = this.props,
-        emojiProvider = _this$props.emojiProvider,
-        otherProps = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-        experiences: [ufoExperiences['emoji-picker-opened']]
-      }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
-        emojiProvider: loadedEmojiProvider
-      }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
-    }
-  }]);
-}(LoadingEmojiComponent);
-// state initialised with static component to prevent
-// rerender when the module has already been loaded
-_defineProperty(EmojiPickerInternal, "defaultProps", {
-  size: defaultEmojiPickerSize
-});
-var EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
-export default EmojiPicker;
+/**
+ * @deprecated Use `import { preloadEmojiPicker } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { preloadEmojiPicker } from './preloadEmojiPicker';
+/**
+ * @deprecated Use `import { EmojiPickerInternal } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { EmojiPickerInternal } from './EmojiPickerInternal';
+/**
+ * @deprecated Use `import { emojiPickerModuleLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { emojiPickerModuleLoader } from './emojiPickerModuleLoader';
+/**
+ * @deprecated Use `import { emojiPickerLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { emojiPickerLoader } from './emojiPickerLoader';

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

@@ -2,9 +2,9 @@
 import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
-import { isMessagesKey } from '../../util/type-helpers';
+import Heading from '@atlaskit/heading';
+import { isMessagesKey } from '../../util/is-messages-key';
 import { messages } from '../i18n';
 var emojiCategoryTitle = null;
 

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

@@ -9,33 +9,49 @@ import { ax, ix } from "@compiled/react/runtime";
 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 FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getDocument } from '@atlaskit/browser-apis';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { getEmojiVariation } from '../../api/EmojiRepository';
-import { supportsUploadFeature } from '../../api/EmojiResource';
-import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
-import { containsEmojiId, isPromise /*, isEmojiIdEqual, isEmojiLoaded*/, isEmojiDescription } from '../../util/type-helpers';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getEmojiVariation } from '../../api/getEmojiVariation';
+import { supportsUploadFeature } from '../../api/supportsUploadFeature';
+import { useEmoji } from '../../hooks/useEmoji';
+import { useIsMounted } from '../../hooks/useIsMounted';
 import { SearchSort, SearchSourceTypes } from '../../types';
-import { getToneEmoji } from '../../util/filters';
-import { uploadEmoji } from '../common/UploadEmoji';
+import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
+import { categoryClickedEvent } from '../../util/analytics/categoryClickedEvent';
+import { closedPickerEvent } from '../../util/analytics/closedPickerEvent';
+import { deleteBeginEvent } from '../../util/analytics/deleteBeginEvent';
+import { deleteCancelEvent } from '../../util/analytics/deleteCancelEvent';
+import { deleteConfirmEvent } from '../../util/analytics/deleteConfirmEvent';
+import { openedPickerEvent } from '../../util/analytics/openedPickerEvent';
+import { pickerClickedEvent } from '../../util/analytics/pickerClickedEvent';
+import { pickerSearchedEvent } from '../../util/analytics/pickerSearchedEvent';
+import { selectedFileEvent } from '../../util/analytics/selectedFileEvent';
+import { toneSelectorClosedEvent } from '../../util/analytics/toneSelectorClosedEvent';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { uploadBeginButton } from '../../util/analytics/uploadBeginButton';
+import { uploadCancelButton } from '../../util/analytics/uploadCancelButton';
+import { uploadConfirmButton } from '../../util/analytics/uploadConfirmButton';
+import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
+import { containsEmojiId } from '../../util/contains-emoji-id';
+import { filterHiddenEmojis } from '../../util/filter-hidden-emojis';
+import { getToneEmoji } from '../../util/get-tone-emoji';
+import { isEmojiDescription } from '../../util/is-emoji-description';
+import { isPromise } from '../../util/is-promise';
+import { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
+import { uploadEmoji } from '../common/UploadEmoji';
+import { messages } from '../i18n';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
-import { useEmoji } from '../../hooks/useEmoji';
-import { useIsMounted } from '../../hooks/useIsMounted';
-import { messages } from '../i18n';
-import { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
-import { filterHiddenEmojis } from '../../util/hidden-emojis';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!FeatureGates.initializeCompleted()) {
     return false;