@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -6,45 +6,39 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.UnicodeEmoji = exports.SpriteEmoji = exports.ImageEmoji = exports.EmojiNodeWrapper = exports.Emoji = void 0;
+exports.unicodeEmojiCanvasSize = exports.default = exports.EmojiNodeWrapper = exports.Emoji = void 0;
 require("./Emoji.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _EmojiUtils = require("../../api/EmojiUtils");
-var _constants = require("../../util/constants");
-var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
-var _mouse = require("../../util/mouse");
-var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
-var _styles = require("./styles");
-var _analytics = require("../../util/analytics");
-var _browserSupport = _interopRequireDefault(require("../../util/browser-support"));
-var _useInView3 = require("../../hooks/useInView");
+var _hasUfoMarked = require("../../util/analytics/hasUfoMarked");
+var _sampledUfoRenderedEmoji = require("../../util/analytics/sampledUfoRenderedEmoji");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
-var _DeletableEmojiTooltipContent = require("./DeletableEmojiTooltipContent");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _browserApis = require("@atlaskit/browser-apis");
+var _useSampledUFOComponentExperience = require("../../util/analytics/useSampledUFOComponentExperience");
+var _constants = require("../../util/constants");
+var _isSpriteRepresentation = require("../../util/is-sprite-representation");
+var _isUnicodeRepresentation = require("../../util/is-unicode-representation");
+var _leftClick = require("../../util/left-click");
+var _toEmojiId = require("../../util/to-emoji-id");
 var _i18n = require("../i18n");
-var _isSsr = require("../../util/is-ssr");
-var _renderUnicodeEmojiToImagePath = require("../../util/renderUnicodeEmojiToImagePath");
-var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
+var _handleDelete = require("./handleDelete");
+var _ImageEmoji = require("./ImageEmoji");
+var _SpriteEmoji = require("./SpriteEmoji");
+var _UnicodeEmoji = require("./UnicodeEmoji");
 var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji", "renderUnicodeEmojiAsImage"];
 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 emojiSpriteContainer = null;
 var emojiImageContainer = null;
 
 // Unicode emojis render as text inside a <span>, not an <img>, so they do not need
 // borderRadius (which would clip a background on hover) or the img { display: block } rule.
 var emojiUnicodeContainer = null;
-var unicodeEmojiCanvasSize = 128;
+var unicodeEmojiCanvasSize = exports.unicodeEmojiCanvasSize = 128;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
@@ -52,11 +46,11 @@ var handleMouseDown = function handleMouseDown(props, event) {
   }
   var emoji = props.emoji,
     onSelected = props.onSelected;
-  if (onSelected && (0, _mouse.leftClick)(event)) {
+  if (onSelected && (0, _leftClick.leftClick)(event)) {
     if (props.preventFocusOnMouseDown) {
       event.preventDefault();
     }
-    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+    onSelected((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
   }
 };
 var handleKeyDown = function handleKeyDown(props, event) {
@@ -69,360 +63,25 @@ var handleKeyDown = function handleKeyDown(props, event) {
     onSelected = props.onSelected,
     showDelete = props.showDelete;
   if (onSelected && (event.key === _constants.KeyboardKeys.Enter || event.key === _constants.KeyboardKeys.Space)) {
-    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+    onSelected((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
   }
   if (showDelete && event.key === _constants.KeyboardKeys.Backspace) {
-    handleDelete(props, event);
+    (0, _handleDelete.handleDelete)(props, event);
   }
 };
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
     onMouseMove = props.onMouseMove;
   if (onMouseMove) {
-    onMouseMove((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+    onMouseMove((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
   }
 };
 var handleFocus = function handleFocus(props, event) {
   var emoji = props.emoji,
     onFocus = props.onFocus;
   if (onFocus) {
-    onFocus((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
-  }
-};
-var handleDelete = function handleDelete(props, event) {
-  var emoji = props.emoji,
-    onDelete = props.onDelete;
-  if (onDelete) {
-    onDelete((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
-  }
-};
-var handleImageError = function handleImageError(props, event) {
-  var emoji = props.emoji,
-    onLoadError = props.onLoadError;
-
-  // Hide error state (but keep space for it)
-  if (event.target) {
-    var target = event.target;
-    target.style.visibility = 'hidden';
-  }
-  if (onLoadError) {
-    onLoadError((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
-  }
-};
-
-// Pure functional components are used in favour of class based components, due to the performance!
-// When rendering 1500+ emoji using class based components had a significant impact.
-// TODO: add UFO tracking for sprite emoji
-var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
-  var emoji = props.emoji,
-    fitToHeight = props.fitToHeight,
-    selected = props.selected,
-    selectOnHover = props.selectOnHover,
-    className = props.className;
-  var representation = emoji.representation;
-  var sprite = representation.sprite;
-  var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
-  var sizing = {};
-  if (fitToHeight) {
-    if ((0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true)) {
-      sizing = {
-        minHeight: "".concat(fitToHeight, "px"),
-        minWidth: "".concat(fitToHeight, "px")
-      };
-    } else {
-      sizing = {
-        width: "".concat(fitToHeight, "px"),
-        height: "".concat(fitToHeight, "px"),
-        minHeight: "".concat(fitToHeight, "px"),
-        minWidth: "".concat(fitToHeight, "px")
-      };
-    }
+    onFocus((0, _toEmojiId.toEmojiId)(emoji), emoji, event);
   }
-  var xPositionInPercent = 100 / (sprite.column - 1) * (representation.xIndex - 0);
-  var yPositionInPercent = 100 / (sprite.row - 1) * (representation.yIndex - 0);
-  var style = _objectSpread({
-    backgroundImage: "url(".concat(sprite.url, ")"),
-    backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
-    backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
-  }, sizing);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
-      type: "sprite",
-      className: classes
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: _styles.emojiSprite,
-      style: style
-    }))
-  );
-};
-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, (0, _extends2.default)({}, props, {
-      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
-        altRepresentation: undefined,
-        representation: {
-          imagePath: unicodeEmojiImage.imagePath,
-          width: unicodeEmojiCanvasSize,
-          height: 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(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
-      type: "unicode",
-      className: classes
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      style: style
-    }, emojiText))
-  );
-};
-
-// Keep as pure functional component, see renderAsSprite.
-var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
-  var emoji = props.emoji,
-    fitToHeight = props.fitToHeight,
-    selected = props.selected,
-    selectOnHover = props.selectOnHover,
-    className = props.className,
-    showDelete = props.showDelete,
-    onLoadSuccess = props.onLoadSuccess,
-    disableLazyLoad = props.disableLazyLoad,
-    autoWidth = props.autoWidth;
-  var _useInView = (0, _useInView3.useInView)({
-      triggerOnce: true
-    }),
-    _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
-    ref = _useInView2[0],
-    inView = _useInView2[1];
-  var ufoExp = (0, _react.useMemo)(function () {
-    return (0, _analytics.sampledUfoRenderedEmoji)(emoji);
-  }, [emoji]);
-  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? _styles.deletableEmoji : '');
-  var width;
-  var height;
-  var src;
-  var representation = (0, _EmojiUtils.shouldUseAltRepresentation)(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
-  if ((0, _typeHelpers.isImageRepresentation)(representation)) {
-    src = representation.imagePath;
-    width = representation.width;
-    height = representation.height;
-  } else if ((0, _typeHelpers.isMediaRepresentation)(representation)) {
-    src = representation.mediaPath;
-    width = representation.width;
-    height = representation.height;
-  }
-  var sizing = {};
-  if (fitToHeight && width && height) {
-    var sizingWidth = autoWidth ? 'auto' : fitToHeight / height * width;
-    // Presize image, to prevent reflow due to size changes after loading
-    sizing = {
-      width: sizingWidth,
-      height: fitToHeight
-    };
-  }
-  var onError = (0, _react.useCallback)(function (event) {
-    handleImageError({
-      emoji: props.emoji,
-      onLoadError: props.onLoadError
-    }, event);
-  }, [props.emoji, props.onLoadError]);
-  var onLoad = (0, _react.useCallback)(function () {
-    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
-    });
-    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
-    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
-      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
-    }
-    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === _types.UfoEmojiTimings.ONLOAD_START;
-    });
-    if (mountedMark && loadedStartMark) {
-      ufoExp.addMetadata({
-        lazyLoad: loadedStartMark.time > mountedMark.time
-      });
-    }
-    // onload_start
-    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
-      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
-    }
-    ufoExp.success({
-      metadata: {
-        IBSupported: _browserSupport.default.supportsIntersectionObserver
-      }
-    });
-    if (onLoadSuccess) {
-      onLoadSuccess(emoji);
-    }
-  }, [emoji, onLoadSuccess, ufoExp]);
-  var onBeforeLoad = (0, _react.useCallback)(function () {
-    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
-      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
-    }
-  }, [ufoExp]);
-  var onMouseOver = (0, _react.useCallback)(function (e) {
-    var _getDocument;
-    // only disable tooltip when not on focus
-    if (!((_getDocument = (0, _browserApis.getDocument)()) !== null && _getDocument !== void 0 && (_getDocument = _getDocument.activeElement) !== null && _getDocument !== void 0 && _getDocument.contains(e.target))) {
-      e.stopPropagation();
-    }
-  }, []);
-
-  // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
-  (0, _react.useEffect)(function () {
-    if (inView) {
-      onBeforeLoad();
-    }
-  }, [inView, onBeforeLoad]);
-  var emojiNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
-    loading: disableLazyLoad ? 'eager' : 'lazy',
-    src: src,
-    key: src,
-    alt: emoji.name || emoji.shortName || '',
-    "data-emoji-short-name": emoji.shortName,
-    "data-emoji-id": emoji.id,
-    "data-emoji-text": emoji.fallback || emoji.shortName
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "emoji"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      visibility: 'visible'
-    },
-    onError: onError,
-    onLoad: onLoad
-  }, sizing, {
-    "data-vc": "emoji"
-  }));
-
-  // show a tooltip for deletable emoji only on focus
-  if (showDelete) {
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-      content: /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
-      position: "right-start",
-      tag: "span"
-    }, /*#__PURE__*/_react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
-      "aria-labelledby": "screenreader-emoji-".concat(emoji.id),
-      type: "image"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: classes,
-      ref: ref,
-      showTooltip: false // avoid showing both tooltip and title
-      ,
-      onMouseOver: onMouseOver
-    }), emojiNode, /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
-      onClick: function onClick(event) {
-        return handleDelete(props, event);
-      }
-    }), /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContentForScreenReader, {
-      emoji: emoji
-    })));
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
-      type: "image",
-      className: classes,
-      ref: ref
-    }), emojiNode)
-  );
 };
 var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _emoji$name;
@@ -490,30 +149,30 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;
   // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
-  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+  (0, _useSampledUFOComponentExperience.useSampledUFOComponentExperience)(_ufoExperiences.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'Emoji',
     emojiId: emoji.id
   });
   (0, _react.useEffect)(function () {
-    var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
-    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, 'fmp')) {
+    var ufoExp = (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emoji);
+    if (!(0, _hasUfoMarked.hasUfoMarked)(ufoExp, 'fmp')) {
       ufoExp.markFMP();
     }
-    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
+    if (!(0, _hasUfoMarked.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
       ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
     }
-    if (emoji.type === _types.ProviderTypes.STANDARD || (0, _typeHelpers.isUnicodeRepresentation)(emoji.representation)) {
+    if (emoji.type === _types.ProviderTypes.STANDARD || (0, _isUnicodeRepresentation.isUnicodeRepresentation)(emoji.representation)) {
       (0, _expValEquals.expValEquals)('platform_use_unicode_emojis', 'isEnabled', true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  if ((0, _typeHelpers.isUnicodeRepresentation)(emoji.representation)) {
-    return /*#__PURE__*/_react.default.createElement(UnicodeEmoji, props);
+  if ((0, _isUnicodeRepresentation.isUnicodeRepresentation)(emoji.representation)) {
+    return /*#__PURE__*/_react.default.createElement(_UnicodeEmoji.UnicodeEmoji, props);
   }
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
-  if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
-    return /*#__PURE__*/_react.default.createElement(SpriteEmoji, props);
+  if ((0, _isSpriteRepresentation.isSpriteRepresentation)(emoji.representation)) {
+    return /*#__PURE__*/_react.default.createElement(_SpriteEmoji.SpriteEmoji, props);
   }
-  return /*#__PURE__*/_react.default.createElement(ImageEmoji, props);
+  return /*#__PURE__*/_react.default.createElement(_ImageEmoji.ImageEmoji, props);
 };
 var _default = exports.default = Emoji;

package/dist/cjs/components/common/EmojiActions.compiled.css

@@ -5,8 +5,6 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
-._18u019bv{margin-left:10px}
-._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
@@ -15,9 +13,7 @@
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1pbydx66{z-index:9999}
-._1wpz1h6o{align-self:center}
 ._1xi2idpf{right:0}
-._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
@@ -28,7 +24,5 @@
 ._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
-._otyr19bv{margin-bottom:10px}
-._p12f3sup{max-width:285px}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f319bv{padding-right:10px}

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

@@ -6,44 +6,27 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = exports.AddOwnEmoji = void 0;
+exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = void 0;
 require("./EmojiActions.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _reactIntl = require("react-intl");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../util/constants");
+var _i18n = require("../i18n");
+var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
+var _AddOwnEmoji = require("./AddOwnEmoji");
 var _EmojiDeletePreview = _interopRequireDefault(require("./EmojiDeletePreview"));
 var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
-var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
-var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+var _isRefreshEmojiPickerEnabled = require("./isRefreshEmojiPickerEnabled");
 var _ProductivityColorSelector = _interopRequireWildcard(require("./ProductivityColorSelector"));
-var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
-var _i18n = require("../i18n");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
-var _styles = require("./styles");
-var _constants = require("../../util/constants");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
 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 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 styles = {
-  icon: "_18u0r5cr _2hwx1i6y"
-};
-var addCustomEmoji = null;
-var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
@@ -108,43 +91,6 @@ var ProductivityColorPopupContent = function ProductivityColorPopupContent(_ref)
 };
 var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
 var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
-
-// Generic Type for the wrapped functional component
-
-var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
-  var onOpenUpload = props.onOpenUpload,
-    uploadEnabled = props.uploadEnabled;
-  var handleOpenUpload = (0, _react.useCallback)(function (event) {
-    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    onOpenUpload();
-  }, [onOpenUpload]);
-  return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
-    "data-testid": uploadEmojiTestId,
-    className: (0, _runtime.ax)(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-    return /*#__PURE__*/React.createElement(_standardButton.default, {
-      onClick: handleOpenUpload,
-      iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
-        xcss: styles.icon
-      }, /*#__PURE__*/React.createElement(_add.default, {
-        color: "currentColor",
-        label: ""
-      })),
-      appearance: "subtle"
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
-      ,
-
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
-      className: (0, _runtime.ax)(["_p12f3sup", _styles.emojiPickerAddEmoji]),
-      tabIndex: 0,
-      id: "add-custom-emoji"
-    }, label);
-  })));
-};
 var TonesWrapper = function TonesWrapper(props) {
   var activeCategoryId = props.activeCategoryId,
     activeAtlassianSubcategory = props.activeAtlassianSubcategory,
@@ -205,7 +151,7 @@ var TonesWrapper = function TonesWrapper(props) {
       openProductivityColorSelectorWithKeyboard.current = true;
     }
   }, []);
-  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)());
   if (shouldShowProductivityColorSelector) {
     var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
     if (!previewEmoji) {
@@ -283,7 +229,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     showToneSelector = _useState6[0],
     setShowToneSelector = _useState6[1];
   var wasProductivityColorSelectorOpen = (0, _react.useRef)(false);
-  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
+  var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)());
   var onToneOpenHandler = (0, _react.useCallback)(function () {
     return setShowToneSelector(true);
   }, []);
@@ -321,7 +267,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     }
   }, [shouldUseProductivityColorControl, showToneSelector]);
   if (uploading) {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+    return (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)() ? /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
       onUploadCancelled: onUploadCancelled,
@@ -346,7 +292,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     }));
   }
   if (emojiToDelete) {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+    return (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)() ? /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
     }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
       emoji: emojiToDelete,
@@ -360,7 +306,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
-  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+  return (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)() ? /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,
     onBlur: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
@@ -396,7 +342,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     onToneSelected: onToneSelectedHandler,
     onToneToggle: onToneToggleHandler,
     showToneSelector: showToneSelector
-  }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
+  }))), /*#__PURE__*/React.createElement(_AddOwnEmoji.AddOwnEmoji, props));
 };
 
 // eslint-disable-next-line @typescript-eslint/ban-types