@atlaskit/emoji 69.6.6 → 69.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 69.7.1
+
+### Patch Changes
+
+- [`acf73d58208f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acf73d58208f1) -
+  If the optimisticImageURL is provided for the emoji page title, do not swap to the media reference
+  once it is loaded
+
+## 69.7.0
+
+### Minor Changes
+
+- [`fd2d25f0335ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd2d25f0335ae) -
+  clean up platform_reactions_placeholder_custom_background
+
 ## 69.6.6
 
 ### Patch Changes

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

@@ -9,7 +9,6 @@ exports.emojiPlaceholderTestId = exports.default = void 0;
 require("./EmojiPlaceholder.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../util/constants");
 var _styles = require("./styles");
 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); }
@@ -51,7 +50,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [_styles.placeholder, (0, _platformFeatureFlags.fg)('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
+    className: (0, _runtime.ax)(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [_styles.placeholder, xcss].join(' ')]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     title: showTooltip ? shortName : ''

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

@@ -43,6 +43,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     _ref$optimisticImageU = _ref.optimisticImageURL,
     optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
     editorEmoji = _ref.editorEmoji,
+    _ref$pageTitleEmoji = _ref.pageTitleEmoji,
+    pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
     placeholderXcss = _ref.placeholderXcss,
     onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
     onEmojiLoadFail = _ref.onEmojiLoadFail;
@@ -176,6 +178,22 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   var optimisticEmojiDescription = (0, _react.useMemo)(function () {
+    // reduce blast radius by targeting page title
+    if (pageTitleEmoji && optimisticImageURL && (0, _platformFeatureFlags.fg)('platform_emoji_prevent_img_src_changing')) {
+      return {
+        id: id,
+        shortName: shortName,
+        fallback: fallback,
+        type: '',
+        category: '',
+        searchable: true,
+        representation: {
+          height: fitToHeight || _constants.defaultEmojiHeight,
+          width: fitToHeight || _constants.defaultEmojiHeight,
+          imagePath: optimisticImageURL
+        }
+      };
+    }
     if (optimisticImageURL) {
       if (emoji && ((0, _typeHelpers.isImageRepresentation)(emoji.representation) || (0, _typeHelpers.isMediaRepresentation)(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
         var _emoji$representation = emoji.representation,
@@ -205,7 +223,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
       }
     }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
   var handleOnLoadError = (0, _react.useCallback)(function (emojiId) {
     setImageLoadError(true);
     var reason = 'load error';

package/dist/cjs/components/picker/CategorySelector.compiled.css

@@ -17,8 +17,8 @@
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._syaz131l{color:var(--ds-text-subtlest,#626f86)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

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

@@ -25,9 +25,9 @@ var _EmojiPickerList = require("./EmojiPickerList");
 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 styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
-  defaultCategory: "_syaz131l _30l3aqb7",
-  activeCategory: "_syazaqb7 _30l3aqb7",
-  disabledCategory: "_syaz131l"
+  defaultCategory: "_syaz1rpy _30l36x5g",
+  activeCategory: "_syaz6x5g _30l36x5g",
+  disabledCategory: "_syaz1rpy"
 };
 var categorySelector = null;
 var categorySelectorTablist = null;

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: "69.6.5"
+      packageVersion: "0.0.0-development"
     }, attributes)
   };
 };

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

@@ -2,7 +2,6 @@
 import "./EmojiPlaceholder.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultEmojiHeight } from '../../util/constants';
 import { placeholder } from './styles';
 const placeholderContainer = null;
@@ -41,7 +40,7 @@ const EmojiPlaceholder = props => {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, fg('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, xcss].join(' ')]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     title: showTooltip ? shortName : ''

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

@@ -23,6 +23,7 @@ export const ResourcedEmojiComponent = ({
   optimistic = false,
   optimisticImageURL = undefined,
   editorEmoji,
+  pageTitleEmoji = false,
   placeholderXcss,
   onEmojiLoadSuccess,
   onEmojiLoadFail
@@ -129,6 +130,22 @@ export const ResourcedEmojiComponent = ({
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   const optimisticEmojiDescription = useMemo(() => {
+    // reduce blast radius by targeting page title
+    if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
+      return {
+        id,
+        shortName,
+        fallback,
+        type: '',
+        category: '',
+        searchable: true,
+        representation: {
+          height: fitToHeight || defaultEmojiHeight,
+          width: fitToHeight || defaultEmojiHeight,
+          imagePath: optimisticImageURL
+        }
+      };
+    }
     if (optimisticImageURL) {
       if (emoji && (isImageRepresentation(emoji.representation) || isMediaRepresentation(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
         const {
@@ -160,7 +177,7 @@ export const ResourcedEmojiComponent = ({
       }
     }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
   const handleOnLoadError = useCallback(emojiId => {
     setImageLoadError(true);
     const reason = 'load error';

package/dist/es2019/components/picker/CategorySelector.compiled.css

@@ -17,8 +17,8 @@
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._syaz131l{color:var(--ds-text-subtlest,#626f86)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

package/dist/es2019/components/picker/CategorySelector.js

@@ -15,9 +15,9 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 const styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
-  defaultCategory: "_syaz131l _30l3aqb7",
-  activeCategory: "_syazaqb7 _30l3aqb7",
-  disabledCategory: "_syaz131l"
+  defaultCategory: "_syaz1rpy _30l36x5g",
+  activeCategory: "_syaz6x5g _30l36x5g",
+  disabledCategory: "_syaz1rpy"
 };
 const categorySelector = null;
 const categorySelectorTablist = null;

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

@@ -8,7 +8,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "69.6.5",
+    packageVersion: "0.0.0-development",
     ...attributes
   }
 });

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

@@ -2,7 +2,6 @@
 import "./EmojiPlaceholder.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { defaultEmojiHeight } from '../../util/constants';
 import { placeholder } from './styles';
 var placeholderContainer = null;
@@ -43,7 +42,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     "aria-label": shortName
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, fg('platform_reactions_placeholder_custom_background') ? xcss : ''].join(' ')]),
+    className: ax(["_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _2rkofajl _1reo15vq _18m915vq _kqswh2mm _1e0c1o8l _bfhkttw1 _s7n4nkob _o5721q9c _y3gn1h6o", [placeholder, xcss].join(' ')]),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     title: showTooltip ? shortName : ''

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

@@ -34,6 +34,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     _ref$optimisticImageU = _ref.optimisticImageURL,
     optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
     editorEmoji = _ref.editorEmoji,
+    _ref$pageTitleEmoji = _ref.pageTitleEmoji,
+    pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
     placeholderXcss = _ref.placeholderXcss,
     onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
     onEmojiLoadFail = _ref.onEmojiLoadFail;
@@ -167,6 +169,22 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   var optimisticEmojiDescription = useMemo(function () {
+    // reduce blast radius by targeting page title
+    if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
+      return {
+        id: id,
+        shortName: shortName,
+        fallback: fallback,
+        type: '',
+        category: '',
+        searchable: true,
+        representation: {
+          height: fitToHeight || defaultEmojiHeight,
+          width: fitToHeight || defaultEmojiHeight,
+          imagePath: optimisticImageURL
+        }
+      };
+    }
     if (optimisticImageURL) {
       if (emoji && (isImageRepresentation(emoji.representation) || isMediaRepresentation(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
         var _emoji$representation = emoji.representation,
@@ -196,7 +214,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
       }
     }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
   var handleOnLoadError = useCallback(function (emojiId) {
     setImageLoadError(true);
     var reason = 'load error';

package/dist/esm/components/picker/CategorySelector.compiled.css

@@ -17,8 +17,8 @@
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._syaz131l{color:var(--ds-text-subtlest,#626f86)}
-._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syaz6x5g{color:var(--ds-text-selected,#1868db)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}

package/dist/esm/components/picker/CategorySelector.js

@@ -16,9 +16,9 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 var styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
-  defaultCategory: "_syaz131l _30l3aqb7",
-  activeCategory: "_syazaqb7 _30l3aqb7",
-  disabledCategory: "_syaz131l"
+  defaultCategory: "_syaz1rpy _30l36x5g",
+  activeCategory: "_syaz6x5g _30l36x5g",
+  disabledCategory: "_syaz1rpy"
 };
 var categorySelector = null;
 var categorySelectorTablist = null;

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

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

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -40,6 +40,12 @@ export interface BaseResourcedEmojiProps {
      * Defaults to `undefined`.
      */
     optimisticImageURL?: string;
+    /**
+     * Indicates that this emoji is being rendered in a page title context.
+     * This is used to adjust certain behaviors to reduce TTVC issues.
+     * Defaults to `false`.
+     */
+    pageTitleEmoji?: boolean;
     /**
      * allows custom styling to the placeholder component while the emoji is loading.
      */
@@ -64,5 +70,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
 }
-export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/dist/types-ts4.5/components/common/ResourcedEmojiComponent.d.ts

@@ -40,6 +40,12 @@ export interface BaseResourcedEmojiProps {
      * Defaults to `undefined`.
      */
     optimisticImageURL?: string;
+    /**
+     * Indicates that this emoji is being rendered in a page title context.
+     * This is used to adjust certain behaviors to reduce TTVC issues.
+     * Defaults to `false`.
+     */
+    pageTitleEmoji?: boolean;
     /**
      * allows custom styling to the placeholder component while the emoji is loading.
      */
@@ -64,5 +70,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
 }
-export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.6.6",
+	"version": "69.7.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/media-client": "^35.5.0",
+		"@atlaskit/media-client": "^35.6.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.32.0",
+		"@atlaskit/tmp-editor-statsig": "^13.34.0",
 		"@atlaskit/tokens": "^8.0.0",
 		"@atlaskit/tooltip": "^20.8.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -118,14 +118,14 @@
 		"platform_index_emoji_just_in_time": {
 			"type": "boolean"
 		},
-		"platform_reactions_placeholder_custom_background": {
-			"type": "boolean"
-		},
 		"platform_emoji_ssr_width_auto_allowed": {
 			"type": "boolean"
 		},
 		"platform_emoji_width_auto_fittoheight": {
 			"type": "boolean"
+		},
+		"platform_emoji_prevent_img_src_changing": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {