@atlaskit/emoji 71.17.0 → 72.0.0

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

@@ -1,144 +1,18 @@
-/* ToneSelector.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toneSelectorTestId = exports.default = exports.ToneSelectorInternal = void 0;
-require("./ToneSelector.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
-var _react = _interopRequireWildcard(require("react"));
+exports.toneSelectorTestId = exports.default = exports.ToneSelector = void 0;
+var _react = require("react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("../../util/analytics");
-var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
-var _EmojiRadioButton = _interopRequireDefault(require("./EmojiRadioButton"));
-var _reactIntl = require("react-intl");
-var _i18n = require("../i18n");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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) { (0, _defineProperty2.default)(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; }
-var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
-  if (!_featureGateJsClient.default.initializeCompleted()) {
-    return false;
-  }
+var _ToneSelectorInternal = require("./ToneSelectorInternal");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-var hidden = null;
 var toneSelectorTestId = exports.toneSelectorTestId = 'tone-selector';
-var extractAllTones = function extractAllTones(emoji) {
-  if (emoji.skinVariations) {
-    return [emoji].concat((0, _toConsumableArray2.default)(emoji.skinVariations));
-  }
-  return [emoji];
-};
-var ToneSelectorInternal = exports.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 = (0, _react.useRef)(false);
-  var selectedToneRadioRef = (0, _react.useRef)(null);
-  // Refs for all radio inputs — used for FG-gated arrow-key focus management
-  var radioRefs = (0, _react.useRef)([]);
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var emojiToneCollection = (0, _react.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: (0, _setSkinToneAriaLabelText.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]);
-  (0, _react.useEffect)(function () {
-    if (isVisible) {
-      var _selectedToneRadioRef;
-      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 || _selectedToneRadioRef.focus();
-    }
-  }, [isVisible, selectedToneRadioRef]);
-  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
-    if (createAnalyticsEvent) {
-      (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
-    }
-  };
-  var _onArrowKey = (0, _react.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((0, _analytics.toneSelectedEvent)({
-        skinToneModifier: toneList[toneValue]
-      }));
-    };
-  };
-  if (!isMounted.current) {
-    fireAnalyticsEvent((0, _analytics.toneSelectorOpenedEvent)({}));
-  }
-  isMounted.current = true;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    role: "radiogroup",
-    "data-testid": toneSelectorTestId,
-    id: "emoji-picker-tone-selector",
-    "aria-label": formatMessage(_i18n.messages.emojiSelectSkinToneListAriaLabelText),
-    className: (0, _runtime.ax)([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
-  }, emojiToneCollection.map(function (tone, renderIndex) {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/_react.default.createElement(_EmojiRadioButton.default, {
-      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.default.createElement(_EmojiRadioButton.default, {
-      ref: tone.isSelected ? selectedToneRadioRef : null,
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: "".concat(tone.id),
-      emoji: tone,
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
-    });
-  }));
-};
-var ToneSelector = (0, _analyticsNext.withAnalyticsEvents)()(ToneSelectorInternal);
+var ToneSelector = exports.ToneSelector = (0, _analyticsNext.withAnalyticsEvents)()(_ToneSelectorInternal.ToneSelectorInternal);
 var _default_1 = /*#__PURE__*/(0, _react.memo)(ToneSelector);
 var _default = exports.default = _default_1;

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

@@ -0,0 +1,142 @@
+/* ToneSelectorInternal.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToneSelectorInternal = void 0;
+require("./ToneSelectorInternal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _analytics = require("../../util/analytics/analytics");
+var _toneSelectedEvent = require("../../util/analytics/toneSelectedEvent");
+var _toneSelectorOpenedEvent = require("../../util/analytics/toneSelectorOpenedEvent");
+var _i18n = require("../i18n");
+var _EmojiRadioButton = _interopRequireDefault(require("./EmojiRadioButton"));
+var _ToneSelector = require("./ToneSelector");
+var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!_featureGateJsClient.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = _featureGateJsClient.default.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((0, _toConsumableArray2.default)(emoji.skinVariations));
+  }
+  return [emoji];
+};
+var ToneSelectorInternal = exports.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 = (0, _react.useRef)(false);
+  var selectedToneRadioRef = (0, _react.useRef)(null);
+  // Refs for all radio inputs — used for FG-gated arrow-key focus management
+  var radioRefs = (0, _react.useRef)([]);
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var emojiToneCollection = (0, _react.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: (0, _setSkinToneAriaLabelText.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]);
+  (0, _react.useEffect)(function () {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 || _selectedToneRadioRef.focus();
+    }
+  }, [isVisible, selectedToneRadioRef]);
+  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
+    if (createAnalyticsEvent) {
+      (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
+    }
+  };
+  var _onArrowKey = (0, _react.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((0, _toneSelectedEvent.toneSelectedEvent)({
+        skinToneModifier: toneList[toneValue]
+      }));
+    };
+  };
+  if (!isMounted.current) {
+    fireAnalyticsEvent((0, _toneSelectorOpenedEvent.toneSelectorOpenedEvent)({}));
+  }
+  isMounted.current = true;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "radiogroup",
+    "data-testid": _ToneSelector.toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(_i18n.messages.emojiSelectSkinToneListAriaLabelText),
+    className: (0, _runtime.ax)([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, emojiToneCollection.map(function (tone, renderIndex) {
+    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/_react.default.createElement(_EmojiRadioButton.default, {
+      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.default.createElement(_EmojiRadioButton.default, {
+      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/cjs/components/common/ToolTipContentWithKeymap.js

@@ -9,14 +9,14 @@ exports.ToolTipContentWithKeymap = void 0;
 require("./ToolTipContentWithKeymap.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _keymaps = require("../../util/keymaps");
+var _formatShortcut = require("../../util/format-shortcut");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var tooltipShortcutStyle = null;
 var ToolTipContentWithKeymap = exports.ToolTipContentWithKeymap = /*#__PURE__*/_react.default.memo(function (_ref) {
   var description = _ref.description,
     shortcutOverride = _ref.shortcutOverride,
     keymap = _ref.keymap;
-  var shortcut = shortcutOverride || keymap && (0, _keymaps.formatShortcut)(keymap);
+  var shortcut = shortcutOverride || keymap && (0, _formatShortcut.formatShortcut)(keymap);
   return shortcut || description ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)(["_2rkofajl _bfhk1vck _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"])
   }, shortcut)) : null;

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

@@ -0,0 +1,137 @@
+/* UnicodeEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnicodeEmoji = void 0;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../util/constants");
+var _isSsr = require("../../util/is-ssr");
+var _renderUnicodeEmojiToImagePath = require("../../util/renderUnicodeEmojiToImagePath");
+var _Emoji = require("./Emoji");
+var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
+var _ImageEmoji = require("./ImageEmoji");
+var _styles = require("./styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
+  var _useState = (0, _react.useState)({
+      status: 'loading'
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var cancelled = false;
+    var imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji: unicodeEmoji
+    });
+    void (0, _renderUnicodeEmojiToImagePath.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 ((0, _isSsr.isSSR)() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/_react.default.createElement(_ImageEmoji.ImageEmoji, (0, _extends2.default)({}, props, {
+      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        altRepresentation: undefined,
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: _Emoji.unicodeEmojiCanvasSize,
+          height: _Emoji.unicodeEmojiCanvasSize
+        }
+      })
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+var UnicodeEmoji = exports.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.default.createElement(UnicodeEmojiImage, props);
+  }
+  var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
+  var emojiText = emoji.representation.unicodeEmoji;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.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.default.createElement(_Emoji.EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};

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

@@ -4,18 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uploadEmoji = void 0;
-var _EmojiResource = require("../../api/EmojiResource");
-var _analytics = require("../../util/analytics");
-var _i18n = require("../i18n");
+var _supportsUploadFeature = require("../../api/supportsUploadFeature");
+var _extractErrorInfo = require("../../util/analytics/extractErrorInfo");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-var _analytics2 = require("../../util/analytics/analytics");
+var _uploadFailedEvent = require("../../util/analytics/uploadFailedEvent");
+var _uploadSucceededEvent = require("../../util/analytics/uploadSucceededEvent");
+var _i18n = require("../i18n");
 var uploadEmoji = exports.uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) {
   var startTime = Date.now();
   errorSetter(undefined);
-  if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+  if ((0, _supportsUploadFeature.supportsUploadFeature)(emojiProvider)) {
     _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
     emojiProvider.uploadCustomEmoji(upload, retry).then(function (emojiDescription) {
-      fireAnalytics((0, _analytics.uploadSucceededEvent)({
+      fireAnalytics((0, _uploadSucceededEvent.uploadSucceededEvent)({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
@@ -27,14 +28,14 @@ var uploadEmoji = exports.uploadEmoji = function uploadEmoji(upload, emojiProvid
 
       // eslint-disable-next-line no-console
       console.error('Unable to upload emoji', err);
-      fireAnalytics((0, _analytics.uploadFailedEvent)({
+      fireAnalytics((0, _uploadFailedEvent.uploadFailedEvent)({
         duration: Date.now() - startTime,
         reason: errMsg.defaultMessage
       }));
       _ufoExperiences.ufoExperiences['emoji-uploaded'].failure({
         metadata: {
           source: 'UploadEmoji',
-          error: (0, _analytics2.extractErrorInfo)(err)
+          error: (0, _extractErrorInfo.extractErrorInfo)(err)
         }
       });
     });

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPlaceholderTestId = void 0;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var emojiPlaceholderTestId = exports.emojiPlaceholderTestId = function emojiPlaceholderTestId(shortName) {
+  return "emoji-placeholder-".concat(shortName);
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleDelete = void 0;
+var _toEmojiId = require("../../util/to-emoji-id");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var handleDelete = exports.handleDelete = function handleDelete(props, event) {
+  var emoji = props.emoji,
+    onDelete = props.onDelete;
+  if (onDelete) {
+    onDelete((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
+  }
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isRefreshEmojiPickerEnabled = void 0;
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+var isRefreshEmojiPickerEnabled = exports.isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
+  if (!_featureGateJsClient.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AbstractItem = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var AbstractItem = exports.AbstractItem = /*#__PURE__*/(0, _createClass2.default)(function AbstractItem(props, height) {
+  (0, _classCallCheck2.default)(this, AbstractItem);
+  this.props = props;
+  this.height = height;
+});

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

@@ -0,0 +1,36 @@
+/* CategoryHeadingItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CategoryHeadingItem = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _AbstractItem2 = require("./AbstractItem");
+var _EmojiPickerCategoryHeading = _interopRequireDefault(require("./EmojiPickerCategoryHeading"));
+var _EmojiPickerSizes = require("./EmojiPickerSizes");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+var CategoryHeadingItem = exports.CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem) {
+  function CategoryHeadingItem(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, CategoryHeadingItem);
+    _this = _callSuper(this, CategoryHeadingItem, [props, _EmojiPickerSizes.sizes.categoryHeadingHeight]);
+    (0, _defineProperty2.default)(_this, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(_EmojiPickerCategoryHeading.default, _this.props);
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(CategoryHeadingItem, _AbstractItem);
+  return (0, _createClass2.default)(CategoryHeadingItem);
+}(_AbstractItem2.AbstractItem);