@atlaskit/emoji 68.0.5 → 69.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/emoji
 
+## 69.0.1
+
+### Patch Changes
+
+- [#128142](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128142)
+  [`80d503f32d7aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80d503f32d7aa) -
+  Refactor emoji uploader to use compiled css in js
+- [#127999](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127999)
+  [`7811c66c76d10`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7811c66c76d10) -
+  Refactor emoji typeahead to use compiled css in js
+
+## 69.0.0
+
+### Major Changes
+
+- [#127323](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127323)
+  [`e448b4811b02a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e448b4811b02a) -
+  [ux] Migrates styles from emotion to compiled
+
 ## 68.0.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -38,6 +38,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
 		},

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

@@ -14,8 +14,11 @@ var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _Emoji = _interopRequireDefault(require("./Emoji"));
-var _EmojiFallback = _interopRequireDefault(require("./EmojiFallback"));
+var _Emoji2 = _interopRequireDefault(require("../compiled/common/Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
+var _EmojiPlaceholder2 = _interopRequireDefault(require("../compiled/common/EmojiPlaceholder"));
+var _EmojiFallback = _interopRequireDefault(require("./EmojiFallback"));
+var _EmojiFallback2 = _interopRequireDefault(require("../compiled/common/EmojiFallback"));
 var _UfoErrorBoundary = require("./UfoErrorBoundary");
 var _analytics = require("../../util/analytics");
 var _constants = require("../../util/constants");
@@ -60,9 +63,15 @@ var CachingEmoji = exports.CachingEmoji = function CachingEmoji(props) {
         emoji: emoji
       }, restProps));
     } else {
-      return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
-        emoji: emoji
-      }, restProps));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+        return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({
+          emoji: emoji
+        }, restProps));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
+          emoji: emoji
+        }, restProps));
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
@@ -80,14 +89,27 @@ var StandardEmoji = function StandardEmoji(props) {
     setImageLoadError(true);
   };
   if (imageLoadError) {
-    return /*#__PURE__*/_react.default.createElement(_EmojiFallback.default, (0, _extends2.default)({
-      emoji: emoji
+    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/_react.default.createElement(_EmojiFallback2.default, (0, _extends2.default)({
+        emoji: emoji
+      }, restProps));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_EmojiFallback.default, (0, _extends2.default)({
+        emoji: emoji
+      }, restProps));
+    }
+  }
+  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({
+      emoji: emoji,
+      onLoadError: handleLoadError
+    }, restProps));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
+      emoji: emoji,
+      onLoadError: handleLoadError
     }, restProps));
   }
-  return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({
-    emoji: emoji,
-    onLoadError: handleLoadError
-  }, restProps));
 };
 
 /**
@@ -149,18 +171,36 @@ var CachingMediaEmoji = exports.CachingMediaEmoji = function CachingMediaEmoji(p
     setInvalidImage(true);
   };
   if (cachedEmoji && !inValidImage) {
-    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+      return /*#__PURE__*/_react.default.createElement(_Emoji2.default, (0, _extends2.default)({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
+        showTooltip: showTooltip,
+        fitToHeight: fitToHeight,
+        emoji: cachedEmoji,
+        onLoadError: handleLoadError
+      }));
+    }
+  }
+  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder2.default, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
       showTooltip: showTooltip,
-      fitToHeight: fitToHeight,
-      emoji: cachedEmoji,
-      onLoadError: handleLoadError
-    }));
+      representation: representation
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+      size: fitToHeight || placeholderSize,
+      shortName: shortName,
+      showTooltip: showTooltip,
+      representation: representation
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-    size: fitToHeight || placeholderSize,
-    shortName: shortName,
-    showTooltip: showTooltip,
-    representation: representation
-  });
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CachingEmoji);

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

@@ -10,15 +10,24 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("../i18n");
 var _ToolTipContentWithKeymap = require("./ToolTipContentWithKeymap");
+var _ToolTipContentWithKeymap2 = require("../compiled/common/ToolTipContentWithKeymap");
 var _keymaps = require("../../util/keymaps");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var DeletableEmojiTooltipContent = exports.DeletableEmojiTooltipContent = function DeletableEmojiTooltipContent() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap.ToolTipContentWithKeymap, {
-    description: formatMessage(_i18n.messages.deleteEmojiTooltip),
-    keymap: _keymaps.backspace
-  });
+  if ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji')) {
+    return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap2.ToolTipContentWithKeymap, {
+      description: formatMessage(_i18n.messages.deleteEmojiTooltip),
+      keymap: _keymaps.backspace
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ToolTipContentWithKeymap.ToolTipContentWithKeymap, {
+      description: formatMessage(_i18n.messages.deleteEmojiTooltip),
+      keymap: _keymaps.backspace
+    });
+  }
 };
 var DeletableEmojiTooltipContentForScreenReader = exports.DeletableEmojiTooltipContentForScreenReader = function DeletableEmojiTooltipContentForScreenReader(_ref) {
   var emoji = _ref.emoji;

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

@@ -10,11 +10,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
-var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
-var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
-var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+var _EmojiDeletePreview = _interopRequireDefault(require("./EmojiDeletePreview"));
+var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
 var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/migration/add"));

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

@@ -19,9 +19,9 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 var _internalTypes = require("./internal-types");
-var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 var _styles = require("./styles");
 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; })(); } /**

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

@@ -15,10 +15,13 @@ var _constants = require("../../util/constants");
 var _typeHelpers = require("../../util/type-helpers");
 var _types = require("../../types");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _Emoji2 = _interopRequireDefault(require("../compiled/common/Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
+var _EmojiPlaceholder2 = _interopRequireDefault(require("../compiled/common/EmojiPlaceholder"));
 var _analytics = require("../../util/analytics");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
@@ -212,18 +215,30 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     "data-emoji-id": id,
     "data-emoji-short-name": shortName,
     "data-emoji-text": fallback || shortName
-  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+  }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder2.default, {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || _constants.defaultEmojiHeight,
     loading: true
-  }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    shortName: shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight || _constants.defaultEmojiHeight,
+    loading: true
+  })), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && ((0, _platformFeatureFlags.fg)('platform_editor_css_migrate_emoji') ? /*#__PURE__*/_react.default.createElement(_Emoji2.default, {
+    emoji: optimisticEmojiDescription,
+    onLoadError: handleOnLoadError,
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight,
+    autoWidth: !!emoji ? false : true,
+    editorEmoji: editorEmoji
+  }) : /*#__PURE__*/_react.default.createElement(_Emoji.default, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: !!emoji ? false : true,
     editorEmoji: editorEmoji
-  })));
+  }))));
 };
 var _default = exports.default = ResourcedEmojiComponent;

package/dist/cjs/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}

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

@@ -0,0 +1,52 @@
+/* DeleteButton.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.default = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = void 0;
+require("./DeleteButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/utility/migration/cross-circle"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("../../../util/constants");
+var _styles = require("../../common/styles");
+var _compiled = require("@atlaskit/primitives/compiled");
+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 styles = {
+  boxWrapperStyle: "_1bsbf6fq _4t3if6fq"
+};
+var deleteButton = null;
+
+/**
+ * Test id for wrapper Emoji delete button
+ */
+var RENDER_EMOJI_DELETE_BUTTON_TESTID = exports.RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
+var DeleteButton = function DeleteButton(props) {
+  return /*#__PURE__*/React.createElement("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_3um015vq _1e0c1txw _kqswstnw _154ix0bf _1xi2x0bf _1pbykb7n _13t3idpf", _styles.emojiDeleteButton]),
+    "data-testid": RENDER_EMOJI_DELETE_BUTTON_TESTID
+  }, /*#__PURE__*/React.createElement(_standardButton.default, {
+    iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.boxWrapperStyle
+    }, /*#__PURE__*/React.createElement(_crossCircle.default, {
+      label: _constants.deleteEmojiLabel,
+      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+      LEGACY_size: "small"
+    })),
+    onClick: props.onClick
+    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
+    ,
+    appearance: "subtle-link",
+    spacing: "none",
+    testId: "emoji-delete-button",
+    tabIndex: -1
+  }));
+};
+var _default = exports.default = DeleteButton;

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

@@ -0,0 +1,23 @@
+
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._jr50g2xd .emoji-common-emoji-sprite{background:transparent no-repeat}._109tnkob .emoji-common-emoji-sprite{vertical-align:middle}
+._160jewfl.emoji-common-select-on-hover:hover .emoji-common-deleteButton, ._1theewfl.emoji-common-selected{visibility:visible}
+._18u0idpf{margin-left:0}
+._19pk1n1a{margin-top:-1px}
+._1e0c1o8l{display:inline-block}
+._1hdcgktf .emoji-common-emoji-sprite{min-width:20px}
+._1kogh2mm.emoji-common-deletable{position:relative}
+._2hwxidpf{margin-right:0}
+._bfhk1j28{background-color:transparent}
+._otyr1n1a{margin-bottom:-1px}
+._pkaxgktf .emoji-common-emoji-sprite{min-height:20px}
+._qyp0ewfl.emoji-common-deletable:focus-within .emoji-common-deleteButton{visibility:visible}
+._s7n4nkob{vertical-align:middle}
+._v4pn1ule img{display:block}
+._ylp71o8l .emoji-common-emoji-sprite{display:inline-block}
+._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}
+._tn8j2tgk.emoji-common-select-on-hover:hover, ._3naf2tgk.emoji-common-selected{background-color:var(--_1y60f1n)}