@atlaskit/emoji 71.13.3 → 71.15.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/emoji
 
+## 71.15.0
+
+### Minor Changes
+
+- [`7d37c14edffa7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7d37c14edffa7) -
+  Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
+  (Group 3)
+
+### Patch Changes
+
+- [`22c03f298a7de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22c03f298a7de) -
+  Add an optional promise cache to `EmojiLoader`, keyed by the request URL, so that loaders created
+  for the same provider config reuse a single in-flight/resolved request instead of refetching.
+  Gated behind the `cache_emoji_loader_for_the_same_config` feature flag; behaviour is unchanged
+  when the flag is off.
+
+## 71.14.0
+
+### Minor Changes
+
+- [`a86fac88f3a5e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a86fac88f3a5e) -
+  Use lazy-loaded VanillaTooltip for emoji tooltips in the editor and render an ADS Tooltip
+  positioned above the emoji in the emoji element, gated behind the
+  platform_editor_emoji_hover_show_tooltip experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 71.13.3
 
 ### Patch Changes

package/dist/cjs/api/EmojiLoader.js

@@ -7,7 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _EmojiUtils = require("./EmojiUtils");
+/**
+ * Shared cache of in-flight/resolved emoji load promises, keyed by the request URL so that
+ * multiple loaders created for the same provider config reuse a single request instead of
+ * refetching. Only consulted when `cache_emoji_loader_for_the_same_config` is enabled.
+ */
+var emojiPromiseCache = new Map();
+
 /**
  * Emoji providers should return JSON in the format defined by EmojiServiceResponse.
  */
@@ -23,8 +31,28 @@ var EmojiLoader = exports.default = /*#__PURE__*/function () {
   return (0, _createClass2.default)(EmojiLoader, [{
     key: "loadEmoji",
     value: function loadEmoji() {
-      var emojisPromise = (0, _EmojiUtils.emojiRequest)(this.config);
-      return emojisPromise.then(function (emojiServiceResponse) {
+      if ((0, _platformFeatureFlags.fg)('cache_emoji_loader_for_the_same_config')) {
+        var cacheKey = this.config.url;
+        var cachedPromise = emojiPromiseCache.get(cacheKey);
+        if (cachedPromise) {
+          return cachedPromise;
+        }
+        var emojiPromise = this.fetchEmoji();
+        // Evict on failure so a rejected promise is not cached, allowing retries to refetch.
+        emojiPromise.catch(function () {
+          if (emojiPromiseCache.get(cacheKey) === emojiPromise) {
+            emojiPromiseCache.delete(cacheKey);
+          }
+        });
+        emojiPromiseCache.set(cacheKey, emojiPromise);
+        return emojiPromise;
+      }
+      return this.fetchEmoji();
+    }
+  }, {
+    key: "fetchEmoji",
+    value: function fetchEmoji() {
+      return (0, _EmojiUtils.emojiRequest)(this.config).then(function (emojiServiceResponse) {
         return (0, _EmojiUtils.denormaliseEmojiServiceResponse)(emojiServiceResponse);
       });
     }

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

@@ -454,7 +454,8 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
   var ariaLabel = editorEmoji ? undefined : intl ? intl.formatMessage(_i18n.messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : emoji.shortName;
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+  var tooltipContent = showTooltip && (0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  var emojiSpan = /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
@@ -475,8 +476,17 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: tooltipContent,
+      isScreenReaderAnnouncementDisabled: true,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;

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: "71.13.2"
+      packageVersion: "71.14.0"
     }, attributes)
   };
 };

package/dist/es2019/api/EmojiLoader.js

@@ -1,5 +1,13 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { denormaliseEmojiServiceResponse, emojiRequest } from './EmojiUtils';
 
+/**
+ * Shared cache of in-flight/resolved emoji load promises, keyed by the request URL so that
+ * multiple loaders created for the same provider config reuse a single request instead of
+ * refetching. Only consulted when `cache_emoji_loader_for_the_same_config` is enabled.
+ */
+const emojiPromiseCache = new Map();
+
 /**
  * Emoji providers should return JSON in the format defined by EmojiServiceResponse.
  */
@@ -12,7 +20,25 @@ export default class EmojiLoader {
    * Returns a promise with an array of Emoji from all providers.
    */
   loadEmoji() {
-    const emojisPromise = emojiRequest(this.config);
-    return emojisPromise.then(emojiServiceResponse => denormaliseEmojiServiceResponse(emojiServiceResponse));
+    if (fg('cache_emoji_loader_for_the_same_config')) {
+      const cacheKey = this.config.url;
+      const cachedPromise = emojiPromiseCache.get(cacheKey);
+      if (cachedPromise) {
+        return cachedPromise;
+      }
+      const emojiPromise = this.fetchEmoji();
+      // Evict on failure so a rejected promise is not cached, allowing retries to refetch.
+      emojiPromise.catch(() => {
+        if (emojiPromiseCache.get(cacheKey) === emojiPromise) {
+          emojiPromiseCache.delete(cacheKey);
+        }
+      });
+      emojiPromiseCache.set(cacheKey, emojiPromise);
+      return emojiPromise;
+    }
+    return this.fetchEmoji();
+  }
+  fetchEmoji() {
+    return emojiRequest(this.config).then(emojiServiceResponse => denormaliseEmojiServiceResponse(emojiServiceResponse));
   }
 }

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

@@ -447,7 +447,8 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   const ariaLabel = editorEmoji ? undefined : intl ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : emoji.shortName;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  const tooltipContent = showTooltip && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  const emojiSpan = /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
@@ -466,8 +467,17 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     onFocus: event => {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      isScreenReaderAnnouncementDisabled: true,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 export const Emoji = props => {
   const {

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.13.2",
+    packageVersion: "71.14.0",
     ...attributes
   }
 });

package/dist/esm/api/EmojiLoader.js

@@ -1,7 +1,15 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { denormaliseEmojiServiceResponse, emojiRequest } from './EmojiUtils';
 
+/**
+ * Shared cache of in-flight/resolved emoji load promises, keyed by the request URL so that
+ * multiple loaders created for the same provider config reuse a single request instead of
+ * refetching. Only consulted when `cache_emoji_loader_for_the_same_config` is enabled.
+ */
+var emojiPromiseCache = new Map();
+
 /**
  * Emoji providers should return JSON in the format defined by EmojiServiceResponse.
  */
@@ -17,8 +25,28 @@ var EmojiLoader = /*#__PURE__*/function () {
   return _createClass(EmojiLoader, [{
     key: "loadEmoji",
     value: function loadEmoji() {
-      var emojisPromise = emojiRequest(this.config);
-      return emojisPromise.then(function (emojiServiceResponse) {
+      if (fg('cache_emoji_loader_for_the_same_config')) {
+        var cacheKey = this.config.url;
+        var cachedPromise = emojiPromiseCache.get(cacheKey);
+        if (cachedPromise) {
+          return cachedPromise;
+        }
+        var emojiPromise = this.fetchEmoji();
+        // Evict on failure so a rejected promise is not cached, allowing retries to refetch.
+        emojiPromise.catch(function () {
+          if (emojiPromiseCache.get(cacheKey) === emojiPromise) {
+            emojiPromiseCache.delete(cacheKey);
+          }
+        });
+        emojiPromiseCache.set(cacheKey, emojiPromise);
+        return emojiPromise;
+      }
+      return this.fetchEmoji();
+    }
+  }, {
+    key: "fetchEmoji",
+    value: function fetchEmoji() {
+      return emojiRequest(this.config).then(function (emojiServiceResponse) {
         return denormaliseEmojiServiceResponse(emojiServiceResponse);
       });
     }

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

@@ -445,7 +445,8 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = editorEmoji ? undefined : intl ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
     shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : emoji.shortName;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  var tooltipContent = showTooltip && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName || emoji.name || undefined : undefined;
+  var emojiSpan = /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',
     "aria-label": ariaLabel,
     ref: ref,
@@ -466,8 +467,17 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     onFocus: function onFocus(event) {
       handleFocus(props, event);
     },
-    title: showTooltip ? emoji.shortName : undefined // TODO: COLLAB-2351 - use @atlaskit/Tooltip in future for non-deletable emoji if enabled showTooltip
+    title: showTooltip && !expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true) ? emoji.shortName : undefined
   }, other), children);
+  if (tooltipContent) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: tooltipContent,
+      isScreenReaderAnnouncementDisabled: true,
+      position: "top",
+      tag: "span"
+    }, emojiSpan);
+  }
+  return emojiSpan;
 });
 export var Emoji = function Emoji(props) {
   var emoji = props.emoji;

package/dist/esm/util/analytics/analytics.js

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

package/dist/types/api/EmojiLoader.d.ts

@@ -10,4 +10,5 @@ export default class EmojiLoader {
      * Returns a promise with an array of Emoji from all providers.
      */
     loadEmoji(): Promise<EmojiResponse>;
+    private fetchEmoji;
 }

package/dist/types/util/productivity-colors.d.ts

@@ -1,5 +1,5 @@
 import type { EmojiDescription } from '../types';
-export declare const productivityColors: readonly ["gray", "magenta", "purple", "blue", "teal", "green", "lime", "yellow", "orange", "red"];
+export declare const productivityColors: readonly ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
 export type ProductivityColor = (typeof productivityColors)[number];
 export declare const defaultProductivityColor: ProductivityColor;
 export declare const getStoredProductivityColor: () => ProductivityColor;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.13.3",
+	"version": "71.15.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@atlaskit/afm-i18n-platform-elements-emoji": "2.196.0",
+		"@atlaskit/afm-i18n-platform-elements-emoji": "2.200.0",
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/button": "^24.3.0",
@@ -50,9 +50,9 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^134.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.2.0",
 		"@atlaskit/tokens": "^16.3.0",
-		"@atlaskit/tooltip": "^23.1.0",
+		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -142,6 +142,9 @@
 		},
 		"platform_a11y_fixes_reaction_emoji": {
 			"type": "boolean"
+		},
+		"cache_emoji_loader_for_the_same_config": {
+			"type": "boolean"
 		}
 	},
 	"platform-experiments": {