@atlaskit/emoji 69.2.0 → 69.3.0

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

@@ -19,22 +19,23 @@ var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEm
   ResourcedEmojiComponentRenderStatesEnum["EMOJI"] = "EMOJI";
   return ResourcedEmojiComponentRenderStatesEnum;
 }(ResourcedEmojiComponentRenderStatesEnum || {});
-export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
-  var emojiProvider = props.emojiProvider,
-    emojiId = props.emojiId,
-    _props$showTooltip = props.showTooltip,
-    showTooltip = _props$showTooltip === void 0 ? false : _props$showTooltip,
-    _props$customFallback = props.customFallback,
-    customFallback = _props$customFallback === void 0 ? undefined : _props$customFallback,
-    _props$fitToHeight = props.fitToHeight,
-    fitToHeight = _props$fitToHeight === void 0 ? defaultEmojiHeight : _props$fitToHeight,
-    _props$optimistic = props.optimistic,
-    optimistic = _props$optimistic === void 0 ? false : _props$optimistic,
-    _props$optimisticImag = props.optimisticImageURL,
-    optimisticImageURL = _props$optimisticImag === void 0 ? undefined : _props$optimisticImag,
-    editorEmoji = props.editorEmoji,
-    onEmojiLoadSuccess = props.onEmojiLoadSuccess,
-    onEmojiLoadFail = props.onEmojiLoadFail;
+export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+    _ref$customFallback = _ref.customFallback,
+    customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
+    _ref$fitToHeight = _ref.fitToHeight,
+    fitToHeight = _ref$fitToHeight === void 0 ? defaultEmojiHeight : _ref$fitToHeight,
+    _ref$optimistic = _ref.optimistic,
+    optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
+    _ref$optimisticImageU = _ref.optimisticImageURL,
+    optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
+    editorEmoji = _ref.editorEmoji,
+    placeholderXcss = _ref.placeholderXcss,
+    onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
+    onEmojiLoadFail = _ref.onEmojiLoadFail;
   var shortName = emojiId.shortName,
     id = emojiId.id,
     fallback = emojiId.fallback;
@@ -55,7 +56,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
     resolvedEmojiProvider = _useState8[0],
     setResolvedEmojiProvider = _useState8[1];
   var fetchOrGetEmoji = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
         reason,
         foundEmoji,
@@ -130,7 +131,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), [onEmojiLoadFail]);
   useEffect(function () {
@@ -215,12 +216,15 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(props) {
   }, /*#__PURE__*/React.createElement("span", {
     "data-emoji-id": id,
     "data-emoji-short-name": shortName,
-    "data-emoji-text": fallback || shortName
+    "data-emoji-text": fallback || shortName,
+    "data-ssr-placeholder": "emoji-".concat(id !== null && id !== void 0 ? id : shortName),
+    "data-ssr-placeholder-replace": "emoji-".concat(id !== null && id !== void 0 ? id : shortName)
   }, emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.INITIAL && /*#__PURE__*/React.createElement(EmojiPlaceholder, {
     shortName: shortName,
     showTooltip: showTooltip,
     size: fitToHeight || defaultEmojiHeight,
-    loading: true
+    loading: true,
+    xcss: placeholderXcss
   }), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.FALLBACK && /*#__PURE__*/React.createElement(React.Fragment, null, customFallback || fallback || shortName), emojiRenderState === ResourcedEmojiComponentRenderStatesEnum.EMOJI && optimisticEmojiDescription && /*#__PURE__*/React.createElement(Emoji, {
     emoji: optimisticEmojiDescription,
     onLoadError: handleOnLoadError,

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

@@ -74,45 +74,45 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     query = _useState8[0],
     setQuery = _useState8[1];
   var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    dynamicCategories = _useState10[0],
-    setDynamicCategories = _useState10[1];
-  var _useState11 = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined),
+    _useState0 = _slicedToArray(_useState9, 2),
+    dynamicCategories = _useState0[0],
+    setDynamicCategories = _useState0[1];
+  var _useState1 = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedTone = _useState10[0],
+    setSelectedTone = _useState10[1];
+  var _useState11 = useState(true),
     _useState12 = _slicedToArray(_useState11, 2),
-    selectedTone = _useState12[0],
-    setSelectedTone = _useState12[1];
-  var _useState13 = useState(true),
+    loading = _useState12[0],
+    setLoading = _useState12[1];
+  var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    loading = _useState14[0],
-    setLoading = _useState14[1];
-  var _useState15 = useState(false),
+    uploading = _useState14[0],
+    setUploading = _useState14[1];
+  var _useState15 = useState(),
     _useState16 = _slicedToArray(_useState15, 2),
-    uploading = _useState16[0],
-    setUploading = _useState16[1];
-  var _useState17 = useState(),
+    selectedEmoji = _useState16[0],
+    setSelectedEmoji = _useState16[1];
+  var _useState17 = useState(null),
     _useState18 = _slicedToArray(_useState17, 2),
-    selectedEmoji = _useState18[0],
-    setSelectedEmoji = _useState18[1];
-  var _useState19 = useState(null),
+    activeCategory = _useState18[0],
+    setActiveCategory = _useState18[1];
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    activeCategory = _useState20[0],
-    setActiveCategory = _useState20[1];
-  var _useState21 = useState(false),
+    disableCategories = _useState20[0],
+    setDisableCategories = _useState20[1];
+  var _useState21 = useState(),
     _useState22 = _slicedToArray(_useState21, 2),
-    disableCategories = _useState22[0],
-    setDisableCategories = _useState22[1];
+    uploadErrorMessage = _useState22[0],
+    setUploadErrorMessage = _useState22[1];
   var _useState23 = useState(),
     _useState24 = _slicedToArray(_useState23, 2),
-    uploadErrorMessage = _useState24[0],
-    setUploadErrorMessage = _useState24[1];
+    emojiToDelete = _useState24[0],
+    setEmojiToDelete = _useState24[1];
   var _useState25 = useState(),
     _useState26 = _slicedToArray(_useState25, 2),
-    emojiToDelete = _useState26[0],
-    setEmojiToDelete = _useState26[1];
-  var _useState27 = useState(),
-    _useState28 = _slicedToArray(_useState27, 2),
-    toneEmoji = _useState28[0],
-    setToneEmoji = _useState28[1];
+    toneEmoji = _useState26[0],
+    setToneEmoji = _useState26[1];
   var emojiPickerList = useMemo(function () {
     return fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/createRef() : /*#__PURE__*/createRef();
   }, []);

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.2.0"
+      packageVersion: "69.3.0"
     }, attributes)
   };
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiImageRepresentation } from '../../types';
 export interface Props {
     shortName: string;
@@ -6,6 +7,7 @@ export interface Props {
     showTooltip?: boolean;
     representation?: EmojiImageRepresentation;
     loading?: boolean;
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export declare const emojiPlaceholderTestId: (shortName: string) => string;
 declare const EmojiPlaceholder: (props: Props) => JSX.Element;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
@@ -44,6 +45,10 @@ export interface BaseResourcedEmojiProps {
      * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
      */
     editorEmoji?: true;
+    /**
+     * allows custom styling to the placeholder component while the emoji is loading.
+     */
+    placeholderXcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**
@@ -59,5 +64,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadFail?: EmojiLoadFailCallback;
 }
-export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiImageRepresentation } from '../../types';
 export interface Props {
     shortName: string;
@@ -6,6 +7,7 @@ export interface Props {
     showTooltip?: boolean;
     representation?: EmojiImageRepresentation;
     loading?: boolean;
+    xcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export declare const emojiPlaceholderTestId: (shortName: string) => string;
 declare const EmojiPlaceholder: (props: Props) => JSX.Element;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import type { EmojiLoadSuccessCallback, EmojiLoadFailCallback } from '../../api/EmojiUtils';
 import { type EmojiId } from '../../types';
@@ -44,6 +45,10 @@ export interface BaseResourcedEmojiProps {
      * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
      */
     editorEmoji?: true;
+    /**
+     * allows custom styling to the placeholder component while the emoji is loading.
+     */
+    placeholderXcss?: StrictXCSSProp<'backgroundColor', never>;
 }
 export interface Props extends BaseResourcedEmojiProps {
     /**
@@ -59,5 +64,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadFail?: EmojiLoadFailCallback;
 }
-export declare const ResourcedEmojiComponent: (props: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "69.2.0",
+	"version": "69.3.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,22 +35,22 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^26.0.0",
-		"@atlaskit/media-client": "^33.1.0",
-		"@atlaskit/media-client-react": "^4.0.0",
+		"@atlaskit/icon": "^26.4.0",
+		"@atlaskit/media-client": "^33.3.0",
+		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
-		"@atlaskit/primitives": "^14.7.0",
-		"@atlaskit/react-ufo": "^3.11.0",
+		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.8.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/tokens": "^5.0.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -138,6 +138,9 @@
 		},
 		"cc_complexit_fe_remove_emoji_animation": {
 			"type": "boolean"
+		},
+		"platform_reactions_placeholder_custom_background": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {