@atlaskit/emoji 72.4.11 → 72.4.13

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/emoji
 
+## 72.4.13
+
+### Patch Changes
+
+- [`c03298c2e2f68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c03298c2e2f68) -
+  Cleanup `experiment` `platform_emoji_fetch_in_effect`. `ResourcedEmoji` now always fetches its
+  emoji from a layout effect instead of during render, so only committed renders fetch and discarded
+  renders (for example a pass that suspends) no longer trigger emoji provider lookups.
+
+## 72.4.12
+
+### Patch Changes
+
+- [`8dc7c24a6415f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8dc7c24a6415f) -
+  Add gating for Canvas emojis
+- Updated dependencies
+
 ## 72.4.11
 
 ### Patch Changes

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

@@ -14,7 +14,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
@@ -178,18 +177,12 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     }
   }, [emojiId]);
 
-  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
-  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
-  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
-  // synchronous cache-hit path from flashing the placeholder.
-  (0, _react.useMemo)(function () {
-    if (!resolvedEmojiProvider || !emojiId || (0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   (0, _react.useLayoutEffect)(function () {
-    if (!resolvedEmojiProvider || !emojiId || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

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

@@ -19,7 +19,7 @@ var createEvent = exports.createEvent = function createEvent(eventType, action,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "72.4.10"
+      packageVersion: "72.4.12"
     }, attributes)
   };
 };

package/dist/cjs/util/teamoji26RefreshEmojiPicker.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.teamoji26RefreshEmojiPickerUserIdGateName = exports.teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = exports.teamoji26RefreshEmojiPickerExperimentName = exports.isTeamoji26RefreshEmojiPickerEnabledNoExposure = exports.isTeamoji26RefreshEmojiPickerEnabled = void 0;
+exports.teamoji26RefreshEmojiPickerUserIdGateName = exports.teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = exports.teamoji26RefreshEmojiPickerExperimentName = exports.teamoji26RefreshEmojiPickerCanvasExperimentName = exports.isTeamoji26RefreshEmojiPickerEnabledNoExposure = exports.isTeamoji26RefreshEmojiPickerEnabled = void 0;
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var teamoji26RefreshEmojiPickerExperimentName = exports.teamoji26RefreshEmojiPickerExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+var teamoji26RefreshEmojiPickerCanvasExperimentName = exports.teamoji26RefreshEmojiPickerCanvasExperimentName = 'platform_teamoji_26_refresh_emoji_picker_canvas';
 var teamoji26RefreshEmojiPickerUserIdGateName = exports.teamoji26RefreshEmojiPickerUserIdGateName = 'platform_teamoji_26_refresh_emoji_picker_user_id';
 var teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = exports.teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = 'platform_bitbucket_fix_shortname_and_ordering';
 var isTeamoji26RefreshEmojiPickerEnabled = exports.isTeamoji26RefreshEmojiPickerEnabled = function isTeamoji26RefreshEmojiPickerEnabled() {
-  return (0, _isExperimentEnabled.isExperimentEnabled)(teamoji26RefreshEmojiPickerExperimentName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerUserIdGateName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return (0, _isExperimentEnabled.isExperimentEnabled)(teamoji26RefreshEmojiPickerExperimentName) || (0, _isExperimentEnabled.isExperimentEnabled)(teamoji26RefreshEmojiPickerCanvasExperimentName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerUserIdGateName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };
 var isTeamoji26RefreshEmojiPickerEnabledNoExposure = exports.isTeamoji26RefreshEmojiPickerEnabledNoExposure = function isTeamoji26RefreshEmojiPickerEnabledNoExposure() {
-  return (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || (0, _fg.fg)(teamoji26RefreshEmojiPickerUserIdGateName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)(teamoji26RefreshEmojiPickerCanvasExperimentName, 'isEnabled', false) === true || (0, _fg.fg)(teamoji26RefreshEmojiPickerUserIdGateName) || (0, _fg.fg)(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };

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

@@ -2,7 +2,6 @@
 import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
@@ -127,18 +126,12 @@ export const ResourcedEmojiComponent = ({
     }
   }, [emojiId]);
 
-  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
-  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
-  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
-  // synchronous cache-hit path from flashing the placeholder.
-  useMemo(() => {
-    if (!resolvedEmojiProvider || !emojiId || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   useLayoutEffect(() => {
-    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

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

@@ -7,7 +7,7 @@ export const createEvent = (eventType, action, actionSubject, actionSubjectId, a
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "72.4.10",
+    packageVersion: "72.4.12",
     ...attributes
   }
 });

package/dist/es2019/util/teamoji26RefreshEmojiPicker.js

@@ -2,11 +2,12 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 export const teamoji26RefreshEmojiPickerExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+export const teamoji26RefreshEmojiPickerCanvasExperimentName = 'platform_teamoji_26_refresh_emoji_picker_canvas';
 export const teamoji26RefreshEmojiPickerUserIdGateName = 'platform_teamoji_26_refresh_emoji_picker_user_id';
 export const teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = 'platform_bitbucket_fix_shortname_and_ordering';
 export const isTeamoji26RefreshEmojiPickerEnabled = () => {
-  return isExperimentEnabled(teamoji26RefreshEmojiPickerExperimentName) || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return isExperimentEnabled(teamoji26RefreshEmojiPickerExperimentName) || isExperimentEnabled(teamoji26RefreshEmojiPickerCanvasExperimentName) || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };
 export const isTeamoji26RefreshEmojiPickerEnabledNoExposure = () => {
-  return UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerCanvasExperimentName, 'isEnabled', false) === true || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };

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

@@ -8,7 +8,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
@@ -169,18 +168,12 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     }
   }, [emojiId]);
 
-  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
-  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
-  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
-  // synchronous cache-hit path from flashing the placeholder.
-  useMemo(function () {
-    if (!resolvedEmojiProvider || !emojiId || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   useLayoutEffect(function () {
-    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

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

@@ -12,7 +12,7 @@ export var createEvent = function createEvent(eventType, action, actionSubject,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "72.4.10"
+      packageVersion: "72.4.12"
     }, attributes)
   };
 };

package/dist/esm/util/teamoji26RefreshEmojiPicker.js

@@ -2,11 +2,12 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 export var teamoji26RefreshEmojiPickerExperimentName = 'platform_teamoji_26_refresh_emoji_picker';
+export var teamoji26RefreshEmojiPickerCanvasExperimentName = 'platform_teamoji_26_refresh_emoji_picker_canvas';
 export var teamoji26RefreshEmojiPickerUserIdGateName = 'platform_teamoji_26_refresh_emoji_picker_user_id';
 export var teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = 'platform_bitbucket_fix_shortname_and_ordering';
 export var isTeamoji26RefreshEmojiPickerEnabled = function isTeamoji26RefreshEmojiPickerEnabled() {
-  return isExperimentEnabled(teamoji26RefreshEmojiPickerExperimentName) || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return isExperimentEnabled(teamoji26RefreshEmojiPickerExperimentName) || isExperimentEnabled(teamoji26RefreshEmojiPickerCanvasExperimentName) || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };
 export var isTeamoji26RefreshEmojiPickerEnabledNoExposure = function isTeamoji26RefreshEmojiPickerEnabledNoExposure() {
-  return UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
+  return UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerExperimentName, 'isEnabled', false) === true || UNSAFE_expValNoExposure(teamoji26RefreshEmojiPickerCanvasExperimentName, 'isEnabled', false) === true || fg(teamoji26RefreshEmojiPickerUserIdGateName) || fg(teamoji26RefreshEmojiPickerShortNameAndOrderingGateName);
 };

package/dist/types/util/teamoji26RefreshEmojiPicker.d.ts

@@ -1,4 +1,5 @@
 export declare const teamoji26RefreshEmojiPickerExperimentName = "platform_teamoji_26_refresh_emoji_picker";
+export declare const teamoji26RefreshEmojiPickerCanvasExperimentName = "platform_teamoji_26_refresh_emoji_picker_canvas";
 export declare const teamoji26RefreshEmojiPickerUserIdGateName = "platform_teamoji_26_refresh_emoji_picker_user_id";
 export declare const teamoji26RefreshEmojiPickerShortNameAndOrderingGateName = "platform_bitbucket_fix_shortname_and_ordering";
 export declare const isTeamoji26RefreshEmojiPickerEnabled: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "72.4.11",
+	"version": "72.4.13",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.249.0",
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/form": "^17.2.0",
@@ -150,6 +150,10 @@
 		"platform_teamoji_26_refresh_emoji_picker": {
 			"param": "isEnabled",
 			"defaultValue": false
+		},
+		"platform_teamoji_26_refresh_emoji_picker_canvas": {
+			"param": "isEnabled",
+			"defaultValue": false
 		}
 	},
 	"scripts": {