@atlaskit/emoji 68.0.4 → 69.0.0

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

@@ -0,0 +1,32 @@
+
+._19itidpf{border:0}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
+._dqozglyw::-moz-focus-inner{border-style:none}
+._19bvidpf{padding-left:0}
+._1at812x7>span{padding-top:var(--ds-space-075,6px)}
+._1cjo12x7>span{padding-bottom:var(--ds-space-075,6px)}
+._1cx6idpf::-moz-focus-inner{padding-right:0}
+._1e0c1o8l{display:inline-block}
+._1e0cglyw{display:none}
+._1i911tcg>span>img{height:24px}
+._1s3c1tcg>span>.emoji-common-emoji-sprite{width:24px}
+._1ye71tcg>span>img{width:24px}
+._1yg612x7>span{padding-left:var(--ds-space-075,6px)}
+._2ewlidpf::-moz-focus-inner{padding-left:0}
+._3um015vq{visibility:hidden}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._hjaq12x7>span{padding-right:var(--ds-space-075,6px)}
+._hlt21tcg>span>.emoji-common-emoji-sprite{height:24px}
+._kqswh2mm{position:relative}
+._lev4idpf::-moz-focus-inner{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._tyukidpf::-moz-focus-inner{padding-bottom:0}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._1hvw1o36:focus{outline-width:medium}
+._491113zc:focus{transition-duration:0s,.2s}
+._49pcglyw:focus{outline-style:none}
+._7ehi1r2v:focus{box-shadow:var(--_1rebzxw)}
+._nt751r31:focus{outline-color:currentColor}

package/dist/cjs/components/compiled/common/TonePreviewButton.js

@@ -0,0 +1,52 @@
+/* TonePreviewButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tonePreviewTestId = exports.default = exports.TonePreviewButton = void 0;
+require("./TonePreviewButton.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
+var _Emoji = _interopRequireDefault(require("./Emoji"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var tonePreviewTestId = exports.tonePreviewTestId = 'tone-preview';
+var emojiButton = null;
+var hidden = null;
+var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    ariaExpanded = props.ariaExpanded,
+    onSelected = props.onSelected,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+
+    "data-testid": tonePreviewTestId,
+    type: "button",
+    className: (0, _runtime.ax)(["_19itidpf _2rkosqtm _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"]),
+    style: {
+      overflow: 'hidden',
+      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }, /*#__PURE__*/React.createElement(_Emoji.default, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(TonePreviewButton);

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

@@ -0,0 +1,3 @@
+._1e0cglyw{display:none}
+._3um015vq{visibility:hidden}
+._tzy4idpf{opacity:0}

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

@@ -0,0 +1,111 @@
+/* ToneSelector.tsx generated by @compiled/babel-plugin v0.36.1 */
+"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 _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../../util/analytics");
+var _setSkinToneAriaLabelText = require("../../common/setSkinToneAriaLabelText");
+var _EmojiRadioButton = _interopRequireDefault(require("./EmojiRadioButton"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../../i18n");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 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);
+  var _useIntl = (0, _reactIntlNext.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 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.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) {
+    return /*#__PURE__*/React.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 _default = exports.default = /*#__PURE__*/(0, _react.memo)(ToneSelector);

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

@@ -0,0 +1,7 @@
+
+._2rko1l7b{border-radius:3px}._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._bfhk1v65{background-color:var(--_1kd7x7o)}
+._ca0qidpf{padding-top:0}
+._jqf61teg{label:tooltip-shortcut}
+._n3tdidpf{padding-bottom:0}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}

package/dist/cjs/components/compiled/common/ToolTipContentWithKeymap.js

@@ -0,0 +1,28 @@
+/* ToolTipContentWithKeymap.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolTipContentWithKeymap = void 0;
+require("./ToolTipContentWithKeymap.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _keymaps = require("../../../util/keymaps");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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);
+  return shortcut || description ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)(["_2rko1l7b _bfhk1v65 _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"]),
+    style: {
+      "--_1kd7x7o": (0, _runtime.ix)("var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"))
+    }
+  }, shortcut)) : null;
+});

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

@@ -15,6 +15,8 @@ var _styles = require("./styles");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// ED-26865: use compiled EmojiPreviewComponent when migrating picker to compiled css
+
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
 var emojiPickerFooterTestId = exports.emojiPickerFooterTestId = 'emoji-picker-footer';

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

@@ -36,6 +36,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// ED-26865: use compiled EmojiActions when migrating picker to compiled css
 /**
  * Test id for wrapper Emoji Picker List div
  */

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

@@ -54,7 +54,8 @@ var LoadingItem = exports.LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
         (0, _react.jsx)("div", {
           css: _styles.emojiPickerSpinner
         }, (0, _react.jsx)("div", null, (0, _react.jsx)(_spinner.default, {
-          size: "medium"
+          size: "medium",
+          interactionName: "emoji-picker-loading-item-spinner"
         })))
       );
     });

package/dist/cjs/components/typeahead/EmojiTypeAheadItem.js

@@ -27,6 +27,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
 var EmojiTypeAheadItemInternal = /*#__PURE__*/function (_PureComponent) {
   function EmojiTypeAheadItemInternal() {
     var _this;

package/dist/cjs/components/typeahead/EmojiTypeAheadList.js

@@ -30,6 +30,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// ED-26864: use compiled Scrollable when migrating typeahead to compiled css
 function wrapIndex(emojis, index) {
   var len = emojis.length;
   var newIndex = index;
@@ -249,7 +250,8 @@ var EmojiTypeAheadList = exports.default = /*#__PURE__*/function (_PureComponent
         }, (0, _react2.jsx)("div", {
           css: _styles.emojiTypeAheadSpinner
         }, (0, _react2.jsx)(_spinner.default, {
-          size: "medium"
+          size: "medium",
+          interactionName: "empji-type-ahead-list-spinner"
         })));
       } else {
         listBody = this.renderItems(emojis);

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

@@ -25,6 +25,8 @@ var _i18n = require("../i18n");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// ED-26866: use compiled EmojiUploadPicker when migrating uploader to compiled css
+
 var EmojiUploadComponent = function EmojiUploadComponent(props) {
   var emojiProvider = props.emojiProvider,
     createAnalyticsEvent = props.createAnalyticsEvent,

package/dist/cjs/element.js

@@ -4,24 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Emoji", {
-  enumerable: true,
-  get: function get() {
-    return _Emoji.default;
-  }
-});
-Object.defineProperty(exports, "EmojiPlaceholder", {
-  enumerable: true,
-  get: function get() {
-    return _EmojiPlaceholder.default;
-  }
-});
+exports.EmojiPlaceholder = exports.Emoji = void 0;
 Object.defineProperty(exports, "ResourcedEmoji", {
   enumerable: true,
   get: function get() {
     return _ResourcedEmoji.default;
   }
 });
-var _EmojiPlaceholder = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
-var _Emoji = _interopRequireDefault(require("./components/common/Emoji"));
-var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _EmojiPlaceholder = _interopRequireDefault(require("./components/compiled/common/EmojiPlaceholder"));
+var _EmojiPlaceholder2 = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
+var _Emoji = _interopRequireDefault(require("./components/compiled/common/Emoji"));
+var _Emoji2 = _interopRequireDefault(require("./components/common/Emoji"));
+var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
+var EmojiPlaceholder = exports.EmojiPlaceholder = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiPlaceholder.default, _EmojiPlaceholder2.default);
+var Emoji = exports.Emoji = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _Emoji.default, _Emoji2.default);

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "AbstractResource", {
 Object.defineProperty(exports, "Emoji", {
   enumerable: true,
   get: function get() {
-    return _Emoji.default;
+    return _element.Emoji;
   }
 });
 Object.defineProperty(exports, "EmojiCommonProvider", {
@@ -44,7 +44,7 @@ Object.defineProperty(exports, "EmojiPicker", {
 Object.defineProperty(exports, "EmojiPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _EmojiPlaceholder.default;
+    return _element.EmojiPlaceholder;
   }
 });
 Object.defineProperty(exports, "EmojiRepository", {
@@ -229,8 +229,7 @@ Object.defineProperty(exports, "withSampling", {
   }
 });
 var _utilServiceSupport = require("@atlaskit/util-service-support");
-var _Emoji = _interopRequireDefault(require("./components/common/Emoji"));
-var _EmojiPlaceholder = _interopRequireDefault(require("./components/common/EmojiPlaceholder"));
+var _element = require("./element");
 var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
 var _EmojiPicker = _interopRequireWildcard(require("./components/picker/EmojiPicker"));
 var _EmojiUploader = _interopRequireDefault(require("./components/uploader/EmojiUploader"));

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "68.0.4"
+      packageVersion: "69.0.0"
     }, attributes)
   };
 };

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

@@ -3,9 +3,12 @@ import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
-import Emoji from './Emoji';
-import EmojiFallback from './EmojiFallback';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { default as EmotionEmoji } from './Emoji';
+import { default as CompiledEmoji } from '../compiled/common/Emoji';
+import { default as EmotionEmojiPlaceholder } from './EmojiPlaceholder';
+import { default as CompiledEmojiPlaceholder } from '../compiled/common/EmojiPlaceholder';
+import { default as EmotionEmojiFallback } from './EmojiFallback';
+import { default as CompiledEmojiFallback } from '../compiled/common/EmojiFallback';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
@@ -48,9 +51,15 @@ export const CachingEmoji = props => {
         emoji: emoji
       }, restProps));
     } else {
-      return /*#__PURE__*/React.createElement(Emoji, _extends({
-        emoji: emoji
-      }, restProps));
+      if (fg('platform_editor_css_migrate_emoji')) {
+        return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
+          emoji: emoji
+        }, restProps));
+      } else {
+        return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
+          emoji: emoji
+        }, restProps));
+      }
     }
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
@@ -67,14 +76,27 @@ const StandardEmoji = props => {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    return /*#__PURE__*/React.createElement(EmojiFallback, _extends({
-      emoji: emoji
+    if (fg('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/React.createElement(CompiledEmojiFallback, _extends({
+        emoji: emoji
+      }, restProps));
+    } else {
+      return /*#__PURE__*/React.createElement(EmotionEmojiFallback, _extends({
+        emoji: emoji
+      }, restProps));
+    }
+  }
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({
+      emoji: emoji,
+      onLoadError: handleLoadError
+    }, restProps));
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({
+      emoji: emoji,
+      onLoadError: handleLoadError
     }, restProps));
   }
-  return /*#__PURE__*/React.createElement(Emoji, _extends({
-    emoji: emoji,
-    onLoadError: handleLoadError
-  }, restProps));
 };
 
 /**
@@ -135,18 +157,36 @@ export const CachingMediaEmoji = props => {
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+    if (fg('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/React.createElement(CompiledEmoji, _extends({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement(EmotionEmoji, _extends({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    }
+  }
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledEmojiPlaceholder, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
       showTooltip: showTooltip,
-      fitToHeight: fitToHeight,
-      emoji: cachedEmoji,
-      onLoadError: handleLoadError
-    }));
+      representation: representation
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
+      showTooltip: showTooltip,
+      representation: representation
+    });
   }
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    size: fitToHeight || placeholderSize,
-    shortName: shortName,
-    showTooltip: showTooltip,
-    representation: representation
-  });
 };
 export default /*#__PURE__*/memo(CachingEmoji);

package/dist/es2019/components/common/DeletableEmojiTooltipContent.js

@@ -2,17 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap as EmotionToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
+import { ToolTipContentWithKeymap as CompiledToolTipContentWithKeymap } from '../compiled/common/ToolTipContentWithKeymap';
 import { backspace } from '../../util/keymaps';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const DeletableEmojiTooltipContent = () => {
   const {
     formatMessage
   } = useIntl();
-  return /*#__PURE__*/React.createElement(ToolTipContentWithKeymap, {
-    description: formatMessage(messages.deleteEmojiTooltip),
-    keymap: backspace
-  });
+  if (fg('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/React.createElement(CompiledToolTipContentWithKeymap, {
+      description: formatMessage(messages.deleteEmojiTooltip),
+      keymap: backspace
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(EmotionToolTipContentWithKeymap, {
+      description: formatMessage(messages.deleteEmojiTooltip),
+      keymap: backspace
+    });
+  }
 };
 export const DeletableEmojiTooltipContentForScreenReader = ({
   emoji

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

@@ -7,11 +7,11 @@ import { Fragment, useState, useRef, memo, useLayoutEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import EmojiDeletePreview from '../common/EmojiDeletePreview';
-import EmojiUploadPicker from '../common/EmojiUploadPicker';
-import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
-import ToneSelector from './ToneSelector';
+import EmojiDeletePreview from './EmojiDeletePreview';
+import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
+import ToneSelector from './ToneSelector';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/migration/add';

package/dist/es2019/components/common/EmojiUploadPreview.js

@@ -12,9 +12,9 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
 import { messages } from '../i18n';
 import Emoji from './Emoji';
+import RetryableButton from './RetryableButton';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import { UploadStatus } from './internal-types';
-import RetryableButton from './RetryableButton';
 import { bigEmojiPreview, emojiPreviewErrorMessage, uploadAddRow, uploadPreview, uploadPreviewFooter, uploadPreviewText } from './styles';
 export const uploadPreviewTestId = 'upload-preview';
 export const cancelUploadButtonTestId = 'cancel-upload-button';

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
-import Emoji from './Emoji';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { default as EmotionEmoji } from './Emoji';
+import { default as CompiledEmoji } from '../compiled/common/Emoji';
+import { default as EmotionEmojiPlaceholder } from './EmojiPlaceholder';
+import { default as CompiledEmojiPlaceholder } from '../compiled/common/EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
+import { fg } from '@atlaskit/platform-feature-flags';
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -168,18 +171,30 @@ export const ResourcedEmojiComponent = props => {
     "data-emoji-id": id,
     "data-emoji-short-name": shortName,
     "data-emoji-text": fallback || shortName
-  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && (fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledEmojiPlaceholder, {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || defaultEmojiHeight,
     loading: true
-  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
+  }) : /*#__PURE__*/React.createElement(EmotionEmojiPlaceholder, {
+    shortName: shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight || defaultEmojiHeight,
+    loading: true
+  })), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && (fg('platform_editor_css_migrate_emoji') ? /*#__PURE__*/React.createElement(CompiledEmoji, {
+    emoji: optimisticEmojiDescription,
+    onLoadError: handleOnLoadError,
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight,
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
+  }) : /*#__PURE__*/React.createElement(EmotionEmoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,
     editorEmoji: editorEmoji
-  })));
+  }))));
 };
 export default ResourcedEmojiComponent;

package/dist/es2019/components/common/RetryableButton.js

@@ -17,7 +17,9 @@ const LoadingSpinner = () => {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
       css: buttonSpinner
-    }, jsx(Spinner, null))
+    }, jsx(Spinner, {
+      interactionName: "emoji-retry-button-spinner"
+    }))
   );
 };
 const RetryButton = props => {

package/dist/es2019/components/compiled/common/DeleteButton.compiled.css

@@ -0,0 +1,9 @@
+._13t3idpf span{line-height:0}
+._154ix0bf{top:var(--ds-space-negative-100,-8px)}
+._1bsbf6fq{width:18px}
+._1e0c1txw{display:flex}
+._1pbykb7n{z-index:1}
+._1xi2x0bf{right:var(--ds-space-negative-100,-8px)}
+._3um015vq{visibility:hidden}
+._4t3if6fq{height:18px}
+._kqswstnw{position:absolute}