@atlaskit/emoji 67.11.0 → 67.11.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 67.11.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 67.11.1
+
+### Patch Changes
+
+- [#165681](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165681)
+  [`57716f58fccef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57716f58fccef) -
+  [ux] typography changes to text and heading
+- Updated dependencies
+
 ## 67.11.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -23,6 +23,9 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/heading/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
 		},

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

@@ -132,7 +132,7 @@ var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
     }), (0, _react2.jsx)("span", {
       className: _styles.emojiSprite,
       style: style
-    }, "\xA0"))
+    }))
   );
 };
 
@@ -322,31 +322,34 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
       'aria-label': emoji.shortName
     };
   }
-  return (0, _react2.jsx)("span", (0, _extends2.default)({}, accessibilityProps, {
-    ref: ref,
-    "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
-    "data-emoji-type": type,
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: type === 'sprite' ? _styles.emojiSpriteContainer : _styles.emojiImageContainer
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: className,
-    onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(props, event);
-    },
-    onMouseDown: function onMouseDown(event) {
-      handleMouseDown(props, event);
-    },
-    onMouseEnter: function onMouseEnter(event) {
-      handleMouseMove(props, event);
-    },
-    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
-  }, other), children);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("span", (0, _extends2.default)({}, accessibilityProps, {
+      ref: ref,
+      "data-testid": "".concat(type, "-emoji-").concat(emoji.shortName),
+      "data-emoji-type": type,
+      tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: type === 'sprite' ? _styles.emojiSpriteContainer : _styles.emojiImageContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: className,
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(props, event);
+      },
+      onMouseDown: function onMouseDown(event) {
+        handleMouseDown(props, event);
+      },
+      onMouseEnter: function onMouseEnter(event) {
+        handleMouseMove(props, event);
+      },
+      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
+    }, other), children)
+  );
 });
 var Emoji = exports.Emoji = function Emoji(props) {
   var emoji = props.emoji;

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

@@ -198,24 +198,27 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       }))
     );
   }
-  return (0, _react2.jsx)("div", {
-    "data-testid": emojiActionsTestId
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: previewFooterClassnames,
-    onMouseLeave: onMouseLeaveHandler
-  }, (0, _react2.jsx)("div", {
-    css: _styles.emojiActionsWrapper
-  }, (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
-    onChange: onChange,
-    query: query,
-    resultsCount: resultsCount,
-    isVisible: !showToneSelector
-  }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
-    onToneOpen: onToneOpenHandler,
-    onToneClose: onToneCloseHandler,
-    onToneSelected: onToneSelectedHandler,
-    showToneSelector: showToneSelector
-  }))), (0, _react2.jsx)(AddOwnEmoji, props));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("div", {
+      "data-testid": emojiActionsTestId
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+      ,
+      css: previewFooterClassnames,
+      onMouseLeave: onMouseLeaveHandler
+    }, (0, _react2.jsx)("div", {
+      css: _styles.emojiActionsWrapper
+    }, (0, _react2.jsx)(_EmojiPickerListSearch.EmojiPickerListSearch, {
+      onChange: onChange,
+      query: query,
+      resultsCount: resultsCount,
+      isVisible: !showToneSelector
+    }), (0, _react2.jsx)(TonesWrapper, (0, _extends2.default)({}, props, {
+      onToneOpen: onToneOpenHandler,
+      onToneClose: onToneCloseHandler,
+      onToneSelected: onToneSelectedHandler,
+      showToneSelector: showToneSelector
+    }))), (0, _react2.jsx)(AddOwnEmoji, props))
+  );
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiActions));

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

@@ -18,6 +18,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _i18n = require("../i18n");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
@@ -111,8 +112,8 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
         "data-testid": emojiDeletePreviewTestId
       }, (0, _react2.jsx)("div", {
         css: _styles.deleteText
-      }, (0, _react2.jsx)("h2", {
-        css: _styles.headingH5
+      }, (0, _react2.jsx)(_heading.default, {
+        size: "xxsmall"
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName

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

@@ -44,29 +44,32 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
-  return (0, _react2.jsx)("label", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: _styles.emojiButton,
-    onMouseDown: function onMouseDown(event) {
-      return handleMouseDown(props, event);
-    },
-    onKeyDown: function onKeyDown(event) {
-      return handleKeyPress(props, event);
-    }
-  }, (0, _react2.jsx)(_visuallyHidden.default, null, ariaLabelText), (0, _react2.jsx)("input", {
-    ref: ref,
-    "data-testid": ariaLabelText,
-    type: "radio",
-    name: "skin-tone"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: _styles.emojiRadio,
-    defaultChecked: defaultChecked
-  }), (0, _react2.jsx)(_Emoji.default, {
-    emoji: emoji,
-    selectOnHover: selectOnHover,
-    shouldBeInteractive: false,
-    "aria-hidden": true
-  }));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, _react2.jsx)("label", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      css: _styles.emojiButton,
+      onMouseDown: function onMouseDown(event) {
+        return handleMouseDown(props, event);
+      },
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyPress(props, event);
+      }
+    }, (0, _react2.jsx)(_visuallyHidden.default, null, ariaLabelText), (0, _react2.jsx)("input", {
+      ref: ref,
+      "data-testid": ariaLabelText,
+      type: "radio",
+      name: "skin-tone"
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: _styles.emojiRadio,
+      defaultChecked: defaultChecked
+    }), (0, _react2.jsx)(_Emoji.default, {
+      emoji: emoji,
+      selectOnHover: selectOnHover,
+      shouldBeInteractive: false,
+      "aria-hidden": true
+    }))
+  );
 });
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiRadioButton);

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

@@ -15,6 +15,7 @@ var _reactIntlNext = require("react-intl-next");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _primitives = require("@atlaskit/primitives");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 var _logger = _interopRequireDefault(require("../../util/logger"));
@@ -117,9 +118,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
       ref: inputRef,
       id: "new-emoji-name-input",
       "aria-required": true
-    })), (0, _react2.jsx)("span", {
-      css: _styles.uploadChooseFileBrowse
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
+    })), (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
       return (0, _react2.jsx)(_FileChooser.default, {
         label: emojiChooseFileTitle,
         onChange: onChooseFile,
@@ -129,9 +128,11 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
         isDisabled: disableChooser
       });
     }))), (0, _react2.jsx)("div", {
-      css: _styles.emojiUploadBottom,
       id: fileChooserButtonDescriptionId
-    }, !errorMessage ? (0, _react2.jsx)("p", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _react2.jsx)(_EmojiErrorMessage.default, {
+    }, !errorMessage ? (0, _react2.jsx)(_primitives.Text, {
+      as: "p",
+      size: "small"
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _react2.jsx)(_EmojiErrorMessage.default, {
       messageStyles: _styles.emojiChooseFileErrorMessage,
       message: errorMessage
     })))

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

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
@@ -77,7 +78,9 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           "data-testid": uploadPreviewTestId
         }, (0, _react2.jsx)("div", {
           css: _styles.uploadPreviewText
-        }, (0, _react2.jsx)("h5", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), (0, _react2.jsx)("div", {
+        }, (0, _react2.jsx)(_heading.default, {
+          size: "xsmall"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), (0, _react2.jsx)("div", {
           id: addEmojiPreviewDescriptionId
         }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
           values: {

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

@@ -83,19 +83,22 @@ var Scrollable = exports.default = /*#__PURE__*/function (_PureComponent) {
       var style = maxHeight ? {
         maxHeight: maxHeight
       } : {};
-      return (0, _react.jsx)("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: "emoji-scrollable ".concat(className)
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        css: styles.emojiScrollable,
-        onMouseLeave: onMouseLeave,
-        onScroll: this.handleScroll,
-        ref: this.handleRef
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: style
-      }, children);
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, _react.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          className: "emoji-scrollable ".concat(className)
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          ,
+          css: styles.emojiScrollable,
+          onMouseLeave: onMouseLeave,
+          onScroll: this.handleScroll,
+          ref: this.handleRef
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
+          style: style
+        }, children)
+      );
     }
   }]);
   return Scrollable;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.tooltipShortcutStyle = exports.submitDelete = exports.selectOnHoverStyles = exports.requiredSymbol = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hidden = exports.headingH5 = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSpriteContainer = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiRadio = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImageContainer = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.deletableEmoji = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadAddRow = exports.tooltipShortcutStyle = exports.submitDelete = exports.selectOnHoverStyles = exports.requiredSymbol = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hidden = exports.headingH5 = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSpriteContainer = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiRadio = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImageContainer = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.deletableEmoji = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _constants = require("../../util/constants");
@@ -337,11 +337,6 @@ var uploadChooseFileEmojiName = exports.uploadChooseFileEmojiName = (0, _react.c
   }), _input)
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var uploadChooseFileBrowse = exports.uploadChooseFileBrowse = (0, _react.css)({
-  flex: '0 0 auto'
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var uploadPreviewFooter = exports.uploadPreviewFooter = (0, _react.css)({
   display: 'flex',

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

@@ -471,80 +471,83 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     };
   }, [emojiProvider, onProviderChange]);
   var showPreview = selectedEmoji && !uploading;
-  return (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css: (0, _styles.emojiPicker)(showPreview, size),
-    ref: onPickerRef,
-    "data-emoji-picker-container": true,
-    role: "dialog",
-    "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
-    "aria-modal": true,
-    onKeyPress: suppressKeyPress,
-    onKeyUp: suppressKeyPress,
-    onKeyDown: suppressKeyPress
-  }, (0, _react2.jsx)(_CategorySelector.default, {
-    activeCategoryId: activeCategory,
-    dynamicCategories: dynamicCategories,
-    disableCategories: disableCategories,
-    onCategorySelected: onCategorySelected
-  }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
-    emojis: filteredEmojis,
-    currentUser: currentUser,
-    onEmojiSelected: recordUsageOnSelection,
-    onEmojiActive: onEmojiActive,
-    onEmojiDelete: onTriggerDelete,
-    onCategoryActivated: onCategoryActivated,
-    onSearch: onSearch,
-    query: query,
-    selectedTone: selectedTone,
-    loading: loading,
-    ref: emojiPickerList,
-    initialUploadName: query,
-    onToneSelected: onToneSelected,
-    onToneSelectorCancelled: onToneSelectorCancelled,
-    toneEmoji: toneEmoji,
-    uploading: uploading,
-    emojiToDelete: emojiToDelete,
-    uploadErrorMessage: formattedErrorMessage,
-    uploadEnabled: isUploadSupported && !uploading,
-    onUploadEmoji: onUploadEmoji,
-    onUploadCancelled: onUploadCancelled,
-    onDeleteEmoji: onDeleteEmoji,
-    onCloseDelete: onCloseDelete,
-    onFileChooserClicked: onFileChooserClicked,
-    onOpenUpload: onOpenUpload,
-    size: size,
-    activeCategoryId: activeCategory
-  }) : (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
-    emojis: filteredEmojis,
-    currentUser: currentUser,
-    onEmojiSelected: recordUsageOnSelection,
-    onEmojiActive: onEmojiActive,
-    onEmojiDelete: onTriggerDelete,
-    onCategoryActivated: onCategoryActivated,
-    onSearch: onSearch,
-    query: query,
-    selectedTone: selectedTone,
-    loading: loading,
-    ref: emojiPickerList,
-    initialUploadName: query,
-    onToneSelected: onToneSelected,
-    onToneSelectorCancelled: onToneSelectorCancelled,
-    toneEmoji: toneEmoji,
-    uploading: uploading,
-    emojiToDelete: emojiToDelete,
-    uploadErrorMessage: formattedErrorMessage,
-    uploadEnabled: isUploadSupported && !uploading,
-    onUploadEmoji: onUploadEmoji,
-    onUploadCancelled: onUploadCancelled,
-    onDeleteEmoji: onDeleteEmoji,
-    onCloseDelete: onCloseDelete,
-    onFileChooserClicked: onFileChooserClicked,
-    onOpenUpload: onOpenUpload,
-    size: size,
-    activeCategoryId: activeCategory
-  }), showPreview && (0, _react2.jsx)(_EmojiPickerFooter.default, {
-    selectedEmoji: selectedEmoji
-  }));
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, _react2.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      css: (0, _styles.emojiPicker)(showPreview, size),
+      ref: onPickerRef,
+      "data-emoji-picker-container": true,
+      role: "dialog",
+      "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
+      "aria-modal": true,
+      onKeyPress: suppressKeyPress,
+      onKeyUp: suppressKeyPress,
+      onKeyDown: suppressKeyPress
+    }, (0, _react2.jsx)(_CategorySelector.default, {
+      activeCategoryId: activeCategory,
+      dynamicCategories: dynamicCategories,
+      disableCategories: disableCategories,
+      onCategorySelected: onCategorySelected
+    }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') ? (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
+      emojis: filteredEmojis,
+      currentUser: currentUser,
+      onEmojiSelected: recordUsageOnSelection,
+      onEmojiActive: onEmojiActive,
+      onEmojiDelete: onTriggerDelete,
+      onCategoryActivated: onCategoryActivated,
+      onSearch: onSearch,
+      query: query,
+      selectedTone: selectedTone,
+      loading: loading,
+      ref: emojiPickerList,
+      initialUploadName: query,
+      onToneSelected: onToneSelected,
+      onToneSelectorCancelled: onToneSelectorCancelled,
+      toneEmoji: toneEmoji,
+      uploading: uploading,
+      emojiToDelete: emojiToDelete,
+      uploadErrorMessage: formattedErrorMessage,
+      uploadEnabled: isUploadSupported && !uploading,
+      onUploadEmoji: onUploadEmoji,
+      onUploadCancelled: onUploadCancelled,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete,
+      onFileChooserClicked: onFileChooserClicked,
+      onOpenUpload: onOpenUpload,
+      size: size,
+      activeCategoryId: activeCategory
+    }) : (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
+      emojis: filteredEmojis,
+      currentUser: currentUser,
+      onEmojiSelected: recordUsageOnSelection,
+      onEmojiActive: onEmojiActive,
+      onEmojiDelete: onTriggerDelete,
+      onCategoryActivated: onCategoryActivated,
+      onSearch: onSearch,
+      query: query,
+      selectedTone: selectedTone,
+      loading: loading,
+      ref: emojiPickerList,
+      initialUploadName: query,
+      onToneSelected: onToneSelected,
+      onToneSelectorCancelled: onToneSelectorCancelled,
+      toneEmoji: toneEmoji,
+      uploading: uploading,
+      emojiToDelete: emojiToDelete,
+      uploadErrorMessage: formattedErrorMessage,
+      uploadEnabled: isUploadSupported && !uploading,
+      onUploadEmoji: onUploadEmoji,
+      onUploadCancelled: onUploadCancelled,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete,
+      onFileChooserClicked: onFileChooserClicked,
+      onOpenUpload: onOpenUpload,
+      size: size,
+      activeCategoryId: activeCategory
+    }), showPreview && (0, _react2.jsx)(_EmojiPickerFooter.default, {
+      selectedEmoji: selectedEmoji
+    }))
+  );
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);

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

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

@@ -133,7 +133,7 @@ export const SpriteEmoji = props => {
     }), jsx("span", {
       className: emojiSprite,
       style: style
-    }, "\xA0"))
+    }))
   );
 };
 
@@ -317,29 +317,32 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-label': emoji.shortName
     };
   }
-  return jsx("span", _extends({}, accessibilityProps, {
-    ref: ref,
-    "data-testid": `${type}-emoji-${emoji.shortName}`,
-    "data-emoji-type": type,
-    tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: className,
-    onKeyDown: event => handleKeyDown(props, event),
-    onMouseDown: event => {
-      handleMouseDown(props, event);
-    },
-    onMouseEnter: event => {
-      handleMouseMove(props, event);
-    },
-    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
-  }, other), children);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("span", _extends({}, accessibilityProps, {
+      ref: ref,
+      "data-testid": `${type}-emoji-${emoji.shortName}`,
+      "data-emoji-type": type,
+      tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: type === 'sprite' ? emojiSpriteContainer : emojiImageContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: className,
+      onKeyDown: event => handleKeyDown(props, event),
+      onMouseDown: event => {
+        handleMouseDown(props, event);
+      },
+      onMouseEnter: event => {
+        handleMouseMove(props, event);
+      },
+      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
+    }, other), children)
+  );
 });
 export const Emoji = props => {
   const {