@atlaskit/emoji 71.0.0 → 71.1.0

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

@@ -26,6 +26,8 @@ import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPicker
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
+import { defaultProductivityColor } from '../../util/productivity-colors';
+import { filterHiddenEmojis } from '../../util/hidden-emojis';
 const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)";
 const emojiPickerHeight = 295;
 const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
@@ -78,12 +80,14 @@ const EmojiPickerComponent = ({
     emojiProvider,
     isUploadSupported
   } = useEmoji();
+  const isTeamojiExperimentEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   const [filteredEmojis, setFilteredEmojis] = useState([]);
   const [searchEmojis, setSearchEmojis] = useState([]);
   const [frequentlyUsedEmojis, setFrequentlyUsedEmojis] = useState([]);
   const [query, setQuery] = useState('');
   const [dynamicCategories, setDynamicCategories] = useState([]);
   const [selectedTone, setSelectedTone] = useState(!hideToneSelector ? emojiProvider.getSelectedTone() : undefined);
+  const [selectedProductivityColor, setSelectedProductivityColor] = useState(defaultProductivityColor);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
   const [selectedEmoji, setSelectedEmoji] = useState();
@@ -100,11 +104,11 @@ const EmojiPickerComponent = ({
   const isProgrammaticScroll = useRef(false);
   const pickerRef = useRef(null);
   const setPickerRef = useCallback(el => {
-    if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+    if (isTeamojiExperimentEnabled) {
       pickerRef.current = el;
     }
     onPickerRef === null || onPickerRef === void 0 ? void 0 : onPickerRef(el);
-  }, [onPickerRef]);
+  }, [isTeamojiExperimentEnabled, onPickerRef]);
   const currentUser = useMemo(() => {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -206,7 +210,8 @@ const EmojiPickerComponent = ({
   }, [filteredEmojis.length, getDynamicCategories, onDynamicCategoryChange, selectedEmoji]);
   const onFrequentEmojiResult = useCallback(frequentEmoji => {
     // change the category of each of the featured emoji
-    const recategorised = frequentEmoji.map(emoji => {
+    const visibleFrequentEmoji = isTeamojiExperimentEnabled ? filterHiddenEmojis(frequentEmoji) : frequentEmoji;
+    const recategorised = visibleFrequentEmoji.map(emoji => {
       const clone = JSON.parse(JSON.stringify(emoji));
       clone.category = frequentCategory;
       return clone;
@@ -214,10 +219,11 @@ const EmojiPickerComponent = ({
     setStateAfterEmojiChange({
       frequentEmoji: recategorised
     });
-  }, [setStateAfterEmojiChange]);
+  }, [isTeamojiExperimentEnabled, setStateAfterEmojiChange]);
   const onSearchResult = useCallback(searchResults => {
     const frequentlyUsedEmoji = frequentlyUsedEmojis || [];
     const searchQuery = searchResults.query || '';
+    const visibleSearchEmojis = isTeamojiExperimentEnabled ? filterHiddenEmojis(searchResults.emojis) : searchResults.emojis;
 
     /**
      * If there is no user search in the EmojiPicker then it should display all emoji received from the EmojiRepository and should
@@ -226,20 +232,20 @@ const EmojiPickerComponent = ({
      */
     let emojiToRender;
     if (!frequentlyUsedEmoji.length || query) {
-      emojiToRender = searchResults.emojis;
+      emojiToRender = visibleSearchEmojis;
     } else {
-      emojiToRender = [...searchResults.emojis, ...frequentlyUsedEmoji];
+      emojiToRender = [...visibleSearchEmojis, ...frequentlyUsedEmoji];
     }
     setStateAfterEmojiChange({
       searchQuery,
       emojiToRender,
-      searchEmoji: searchResults.emojis
+      searchEmoji: visibleSearchEmojis
     });
     fireAnalytics(pickerSearchedEvent({
       queryLength: searchQuery.length,
-      numMatches: searchResults.emojis.length
+      numMatches: visibleSearchEmojis.length
     }));
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
+  }, [frequentlyUsedEmojis, isTeamojiExperimentEnabled, query, setStateAfterEmojiChange, fireAnalytics]);
   const onProviderChange = useMemo(() => {
     return {
       result: onSearchResult
@@ -282,6 +288,9 @@ const EmojiPickerComponent = ({
   const onToneSelectorCancelled = useCallback(() => {
     fireAnalytics(toneSelectorClosedEvent());
   }, [fireAnalytics]);
+  const onProductivityColorSelected = useCallback(color => {
+    setSelectedProductivityColor(color);
+  }, []);
   const onSelectWrapper = useCallback((emojiId, emoji, event) => {
     if (onSelection) {
       onSelection(emojiId, emoji, event);
@@ -312,17 +321,18 @@ const EmojiPickerComponent = ({
     emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
       if (!disableCategories) {
         let newSelectedEmoji;
-        if (emojisInCategory && emojisInCategory.length > 0) {
-          newSelectedEmoji = getEmojiVariation(emojisInCategory[0], {
+        const visibleEmojisInCategory = isTeamojiExperimentEnabled ? filterHiddenEmojis(emojisInCategory || []) : emojisInCategory || [];
+        if (visibleEmojisInCategory.length > 0) {
+          newSelectedEmoji = getEmojiVariation(visibleEmojisInCategory[0], {
             skinTone: selectedTone
           });
         }
         if (emojiPickerList.current) {
-          if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+          if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
           emojiPickerList.current.reveal(categoryId);
-          if (FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false)) {
+          if (isTeamojiExperimentEnabled) {
             // Clear the flag after the scroll animation has settled.
             setTimeout(() => {
               isProgrammaticScroll.current = false;
@@ -338,7 +348,7 @@ const EmojiPickerComponent = ({
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, isTeamojiExperimentEnabled, selectedTone, uploading, emojiToDelete]);
   const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
   const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
   const onFileChooserClicked = useCallback(() => {
@@ -580,11 +590,13 @@ const EmojiPickerComponent = ({
     onSearch: onSearch,
     query: query,
     selectedTone: selectedTone,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     loading: loading,
     ref: emojiPickerList,
     initialUploadName: query,
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
+    onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     toneEmoji: toneEmoji,
     uploading: uploading,
     emojiToDelete: emojiToDelete,

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

@@ -2,6 +2,8 @@ import { useIntl } from 'react-intl';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
+import { filterProductivityEmojisByColor, getProductivityColorPreviewEmojis } from '../../util/productivity-colors';
+import { filterHiddenEmojis } from '../../util/hidden-emojis';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
@@ -62,7 +64,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onCloseDelete,
     onFileChooserClicked,
     onOpenUpload,
-    activeCategoryId
+    onProductivityColorSelected,
+    activeCategoryId,
+    selectedProductivityColor
   } = props;
   const {
     formatMessage
@@ -74,6 +78,8 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const categoryTracker = useMemo(() => new CategoryTracker(), []);
   const [categoriesChanged, setCategoriesChanged] = useState(false);
   const isTeamojiExperimentEnabled = FeatureGates.getExperimentValue(teamojiRefreshExperimentName, 'isEnabled', false);
+  const visibleEmojis = useMemo(() => isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis, [emojis, isTeamojiExperimentEnabled]);
+  const productivityColorPreviewEmojis = useMemo(() => isTeamojiExperimentEnabled ? getProductivityColorPreviewEmojis(visibleEmojis) : {}, [isTeamojiExperimentEnabled, visibleEmojis]);
   const addToCategoryMap = useCallback((categoryToGroupMap, emoji, category) => {
     if (!categoryToGroupMap[category]) {
       const categoryDefinition = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew[category] : CategoryDescriptionMap[category];
@@ -150,16 +156,23 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   const buildEmojiGroupedByCategory = useCallback((emojis, currentUser) => {
     const categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
     setAllEmojiGroups(Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(group => {
-      if (group.category !== frequentCategory) {
+      if (isTeamojiExperimentEnabled && selectedProductivityColor) {
         var _group$subcategories;
-        group.emojis.sort(byOrder);
+        group.emojis = filterProductivityEmojisByColor(group.emojis, selectedProductivityColor);
         (_group$subcategories = group.subcategories) === null || _group$subcategories === void 0 ? void 0 : _group$subcategories.forEach(subcategory => {
+          subcategory.emojis = filterProductivityEmojisByColor(subcategory.emojis, selectedProductivityColor);
+        });
+      }
+      if (group.category !== frequentCategory) {
+        var _group$subcategories2;
+        group.emojis.sort(byOrder);
+        (_group$subcategories2 = group.subcategories) === null || _group$subcategories2 === void 0 ? void 0 : _group$subcategories2.forEach(subcategory => {
           subcategory.emojis.sort(byOrder);
         });
       }
       return group;
     }).sort(byOrder));
-  }, [groupByCategory]);
+  }, [groupByCategory, isTeamojiExperimentEnabled, selectedProductivityColor]);
   const buildEmojiRows = useCallback((items, category, title, emojis, showDelete) => {
     let remainingEmojis = emojis;
     while (remainingEmojis.length > 0) {
@@ -179,9 +192,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     }
   }, [isTeamojiExperimentEnabled, onEmojiActive, onEmojiDelete, onEmojiLeave, onEmojiSelected]);
   const buildVirtualItemFromGroup = useCallback(group => {
-    var _group$subcategories2;
+    var _group$subcategories3;
     const items = [];
-    const hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories2 = group.subcategories) !== null && _group$subcategories2 !== void 0 && _group$subcategories2.length);
+    const hasAtlassianSubcategories = isTeamojiExperimentEnabled && group.category === atlassianCategory && !!((_group$subcategories3 = group.subcategories) !== null && _group$subcategories3 !== void 0 && _group$subcategories3.length);
     if (!hasAtlassianSubcategories) {
       items.push(new CategoryHeadingItem({
         id: group.category,
@@ -226,7 +239,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     } else {
       if (query) {
         const search = isTeamojiExperimentEnabled ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
-        if (emojis.length === 0 && isTeamojiExperimentEnabled) {
+        if (visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
           // Show a "No results" category heading, then a no-results illustration below it
           items.push(new CategoryHeadingItem({
             id: searchCategory,
@@ -242,7 +255,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
           items = [...items, ...buildVirtualItemFromGroup({
             category: searchCategory,
             title: search.name,
-            emojis,
+            emojis: visibleEmojis,
             order: search.order
           })];
         }
@@ -270,7 +283,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, buildVirtualItemFromGroup, emojis, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled]);
+  }, [allEmojiGroups, buildVirtualItemFromGroup, formatMessage, isTeamojiExperimentEnabled, loading, onOpenUpload, query, uploadEnabled, visibleEmojis]);
   const findCategoryToActivate = row => {
     let category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -364,9 +377,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
   });
   useEffect(() => {
     if (!query) {
-      buildEmojiGroupedByCategory(emojis, currentUser);
+      buildEmojiGroupedByCategory(visibleEmojis, currentUser);
     }
-  }, [emojis, selectedTone, loading, query, currentUser, buildEmojiGroupedByCategory]);
+  }, [visibleEmojis, selectedTone, selectedProductivityColor, loading, query, currentUser, buildEmojiGroupedByCategory]);
   useEffect(() => {
     buildVirtualItems();
   }, [allEmojiGroups, buildVirtualItems]);
@@ -375,16 +388,17 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       onRowsRendered({
         startIndex: 0
       });
+      setCategoriesChanged(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   const virtualListHeight = useMemo(() => {
-    if (query && emojis.length === 0 && isTeamojiExperimentEnabled) {
+    if (query && visibleEmojis.length === 0 && isTeamojiExperimentEnabled) {
       // No-results state: expand the list height to fit heading + illustration without scrolling
       return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
     }
     return isTeamojiExperimentEnabled ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size, query, emojis.length, isTeamojiExperimentEnabled]);
+  }, [size, query, visibleEmojis.length, isTeamojiExperimentEnabled]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {
@@ -392,6 +406,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onToneSelected: onToneSelected,
     onToneSelectorCancelled: onToneSelectorCancelled,
     toneEmoji: toneEmoji,
+    activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
+    productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
+    selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
     uploading: uploading,
     uploadEnabled: uploadEnabled,
     emojiToDelete: emojiToDelete,
@@ -403,9 +420,10 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onDeleteEmoji: onDeleteEmoji,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
+    onProductivityColorSelected: isTeamojiExperimentEnabled ? onProductivityColorSelected : undefined,
     query: query,
     onChange: onSearch,
-    resultsCount: emojis.length
+    resultsCount: visibleEmojis.length
   }), /*#__PURE__*/React.createElement(EmojiPickerListContextProvider, {
     initialEmojisFocus: {
       rowIndex: 1,

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

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { fg } from '@atlaskit/platform-feature-flags';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
 const virtualList = null;
@@ -55,13 +56,11 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     const elemBottom = elementRect.bottom;
     const parentTop = parentRect.top;
     const parentBottom = parentRect.bottom;
-
-    // Only completely visible elements return true:
-    const isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
+    const isVisible = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? elemTop >= parentTop && elemBottom <= parentBottom : elemBottom > parentTop && elemTop < parentBottom;
     return isVisible;
   };
   const getFirstVisibleListElementIndex = useCallback(() => {
-    var _parentRef$current, _parentRef$current$fi;
+    var _parentRef$current, _parentRef$current$fi, _virtualList$;
     const virtualList = rowVirtualizer.getVirtualItems();
     const renderedElements = (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : (_parentRef$current$fi = _parentRef$current.firstChild) === null || _parentRef$current$fi === void 0 ? void 0 : _parentRef$current$fi.childNodes;
     if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
@@ -74,7 +73,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
       var _virtualList$firstVis;
       return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
     }
-    return 0;
+    return FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false) ? ((_virtualList$ = virtualList[0]) === null || _virtualList$ === void 0 ? void 0 : _virtualList$.index) || 0 : 0;
   }, [rowVirtualizer]);
 
   /**

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

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

package/dist/es2019/util/hidden-emojis.js

@@ -0,0 +1,25 @@
+const hasHiddenTag = tags => {
+  var _tags$includes;
+  return (_tags$includes = tags === null || tags === void 0 ? void 0 : tags.includes('hidden')) !== null && _tags$includes !== void 0 ? _tags$includes : false;
+};
+const hasHiddenMetadataTag = emoji => {
+  const emojiWithMetadata = emoji;
+  const {
+    metadata
+  } = emojiWithMetadata;
+  if (typeof metadata === 'string') {
+    return metadata === 'hidden';
+  }
+  if (Array.isArray(metadata)) {
+    return hasHiddenTag(metadata);
+  }
+  return hasHiddenTag(metadata === null || metadata === void 0 ? void 0 : metadata.tags) || hasHiddenTag(emojiWithMetadata.tags);
+};
+export const isHiddenEmoji = emoji => {
+  const emojiWithMetadata = emoji;
+  if (emojiWithMetadata.hidden) {
+    return true;
+  }
+  return hasHiddenMetadataTag(emoji);
+};
+export const filterHiddenEmojis = emojis => emojis.filter(emoji => !isHiddenEmoji(emoji));

package/dist/es2019/util/productivity-colors.js

@@ -0,0 +1,37 @@
+export const productivityColors = ['gray', 'magenta', 'purple', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red'];
+const productivityColorSet = new Set(productivityColors);
+const zeroSquareVariantParent = '0_zero_square_blue';
+export const defaultProductivityColor = 'blue';
+const getProductivityVariant = emoji => {
+  if (emoji.type !== 'ATLASSIAN' || !emoji.color || !productivityColorSet.has(emoji.color)) {
+    return undefined;
+  }
+  return {
+    color: emoji.color
+  };
+};
+export const getProductivityColor = emoji => {
+  var _getProductivityVaria;
+  return (_getProductivityVaria = getProductivityVariant(emoji)) === null || _getProductivityVaria === void 0 ? void 0 : _getProductivityVaria.color;
+};
+export const isProductivityNumberEmoji = emoji => getProductivityColor(emoji) !== undefined;
+export const filterProductivityEmojisByColor = (emojis, selectedColor) => {
+  return emojis.filter(emoji => {
+    const variant = getProductivityVariant(emoji);
+    return !variant || variant.color === selectedColor;
+  });
+};
+const isZeroSquareProductivityEmoji = emoji => {
+  var _emoji$variantChildre, _emoji$keywords, _emoji$variantChildre2;
+  return emoji.variantParent === zeroSquareVariantParent || ((_emoji$variantChildre = emoji.variantChildren) === null || _emoji$variantChildre === void 0 ? void 0 : _emoji$variantChildre.some(variantChild => variantChild.includes('0_zero_square_'))) || !!(emoji.variantBase && (_emoji$keywords = emoji.keywords) !== null && _emoji$keywords !== void 0 && _emoji$keywords.includes('0') && (_emoji$variantChildre2 = emoji.variantChildren) !== null && _emoji$variantChildre2 !== void 0 && _emoji$variantChildre2.some(variantChild => variantChild.includes('_square_')));
+};
+export const getProductivityColorPreviewEmojis = emojis => emojis.reduce((previewEmojis, emoji) => {
+  const color = getProductivityColor(emoji);
+  if (!color) {
+    return previewEmojis;
+  }
+  if (isZeroSquareProductivityEmoji(emoji) || !previewEmojis[color]) {
+    previewEmojis[color] = emoji;
+  }
+  return previewEmojis;
+}, {});

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

@@ -1,14 +1,16 @@
 /* Emoji.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji", "renderUnicodeEmojiAsImage"];
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+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, { useEffect, useCallback, useContext, useMemo, forwardRef } from 'react';
+import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -27,6 +29,8 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getDocument } from '@atlaskit/browser-apis';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
+import { isSSR } from '../../util/is-ssr';
+import EmojiPlaceholder from './EmojiPlaceholder';
 var emojiSpriteContainer = null;
 var emojiImageContainer = null;
 
@@ -142,15 +146,145 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     }))
   );
 };
-export var UnicodeEmoji = function UnicodeEmoji(props) {
+var unicodeEmojiCanvasSize = 128;
+var unicodeEmojiCanvasFontSize = 124;
+var unicodeEmojiCanvasTopPadding = 8;
+var renderUnicodeEmojiToImagePath = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(unicodeEmoji) {
+    var OffscreenCanvasCtor, canvas, context, blob;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          OffscreenCanvasCtor = globalThis['OffscreenCanvas'];
+          if (!(isSSR() || !OffscreenCanvasCtor || typeof URL === 'undefined')) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 1:
+          canvas = new OffscreenCanvasCtor(unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context = canvas.getContext('2d');
+          if (context) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 2:
+          context.clearRect(0, 0, unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context.textAlign = 'center';
+          context.textBaseline = 'middle';
+          context.font = "".concat(unicodeEmojiCanvasFontSize, "px sans-serif");
+          context.fillText(unicodeEmoji, unicodeEmojiCanvasSize / 2, unicodeEmojiCanvasSize / 2 + unicodeEmojiCanvasTopPadding);
+          _context.next = 3;
+          return canvas.convertToBlob({
+            type: 'image/png'
+          });
+        case 3:
+          blob = _context.sent;
+          return _context.abrupt("return", URL.createObjectURL(blob));
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function renderUnicodeEmojiToImagePath(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
+  var _useState = useState({
+      status: 'loading'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var cancelled = false;
+    var imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji: unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(function (imagePath) {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji: unicodeEmoji,
+        imagePath: imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji: unicodeEmoji
+      });
+    }).catch(function () {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji: unicodeEmoji
+        });
+      }
+    });
+    return function () {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   var emoji = props.emoji,
     fitToHeight = props.fitToHeight,
+    showTooltip = props.showTooltip;
+  var emojiText = emoji.representation.unicodeEmoji;
+  var unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  var hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export var UnicodeEmoji = function UnicodeEmoji(props) {
+  var _props$fitToHeight;
+  var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
-    className = props.className;
+    className = props.className,
+    _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight;
+  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
   var style = {
     display: 'inline-block',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -332,6 +466,7 @@ export var ImageEmoji = function ImageEmoji(props) {
   );
 };
 export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _emoji$name;
   var emoji = props.emoji,
     fitToHeight = props.fitToHeight,
     selected = props.selected,
@@ -353,10 +488,11 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     type = props.type,
     editorEmoji = props.editorEmoji,
+    renderUnicodeEmojiAsImage = props.renderUnicodeEmojiAsImage,
     other = _objectWithoutProperties(props, _excluded);
   var intl = useContext(IntlContext);
   var ariaLabel = intl && fg('platform_change_emoji_button_label') ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {
-    shortName: emoji.shortName
+    shortName: (_emoji$name = emoji.name) !== null && _emoji$name !== void 0 ? _emoji$name : emoji.shortName
   }) : editorEmoji ? undefined : emoji.shortName;
   return /*#__PURE__*/React.createElement("span", _extends({
     role: editorEmoji ? undefined : shouldBeInteractive ? 'button' : ariaLabel ? 'img' : 'presentation',

package/dist/esm/components/common/EmojiActions.compiled.css

@@ -1,9 +1,13 @@
 
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}
 ._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
 ._18u019bv{margin-left:10px}
 ._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
@@ -12,10 +16,14 @@
 ._1wpz1h6o{align-self:center}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}
 ._p12f3sup{max-width:285px}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f319bv{padding-right:10px}