@atlaskit/emoji 70.10.14 → 70.11.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.11.0
+
+### Minor Changes
+
+- [`447e1bfc88d10`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/447e1bfc88d10) -
+  Add UnicodeEmoji component for rendering emojis using Unicode representation. Update
+  EmojiNodeWrapper to support unicode type. Add fitToHeight support to EmojiPreviewComponent,
+  EmojiRadioButton, TonePreviewButton, and EmojiPickerEmojiRow.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 70.10.14
 
 ### Patch Changes

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.EmojiNodeWrapper = exports.Emoji = void 0;
+exports.default = exports.UnicodeEmoji = exports.SpriteEmoji = exports.ImageEmoji = exports.EmojiNodeWrapper = exports.Emoji = void 0;
 require("./Emoji.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -36,6 +36,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2.default)(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; }
 var emojiSpriteContainer = null;
 var emojiImageContainer = null;
+
+// Unicode emojis render as text inside a <span>, not an <img>, so they do not need
+// borderRadius (which would clip a background on hover) or the img { display: block } rule.
+var emojiUnicodeContainer = null;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
@@ -145,6 +149,40 @@ var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
     }))
   );
 };
+var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className;
+  var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
+  var emojiText = emoji.representation.unicodeEmoji;
+  var size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.defaultEmojiHeight;
+  var style = {
+    display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "max(1em, ".concat(size, "px)"),
+    width: "max(1em, ".concat(size, "px)"),
+    height: "max(1em, ".concat(size, "px)"),
+    textAlign: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '0',
+    margin: '0',
+    padding: '0'
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};
 
 // Keep as pure functional component, see renderAsSprite.
 var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
@@ -332,7 +370,7 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
+    className: (0, _runtime.ax)([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
     onKeyDown: function onKeyDown(event) {
       return handleKeyDown(props, event);
     },
@@ -365,6 +403,9 @@ var Emoji = exports.Emoji = function Emoji(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if ((0, _typeHelpers.isUnicodeRepresentation)(emoji.representation)) {
+    return /*#__PURE__*/_react.default.createElement(UnicodeEmoji, props);
+  }
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
     return /*#__PURE__*/_react.default.createElement(SpriteEmoji, props);

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

@@ -10,6 +10,7 @@ exports.EmojiPreviewComponent = void 0;
 require("./EmojiPreviewComponent.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 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 emojiName = null;
@@ -19,13 +20,15 @@ var previewImg = null;
 var previewText = null;
 var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   var emoji = _ref.emoji;
+  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {
     className: (0, _runtime.ax)(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
   }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
     key: emoji.id || emoji.shortName,
-    emoji: emoji
+    emoji: emoji,
+    fitToHeight: fitToHeight
   })), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
   }, emoji.name && /*#__PURE__*/React.createElement("div", {

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

@@ -41,6 +41,7 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
+  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return /*#__PURE__*/_react.default.createElement("label", {
     className: (0, _runtime.ax)(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg"])
   }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, ariaLabelText), /*#__PURE__*/_react.default.createElement("input", {
@@ -64,7 +65,8 @@ var EmojiRadioButton = exports.EmojiRadioButton = /*#__PURE__*/(0, _react.forwar
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiRadioButton);

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

@@ -26,6 +26,7 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -44,7 +45,8 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -63,7 +65,8 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 var _default_1 = /*#__PURE__*/(0, _react.memo)(TonePreviewButton);

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

@@ -37,6 +37,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var fitToHeight = (0, _platformFeatureFlags.fg)('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -103,7 +104,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       "data-focus-index": "".concat(rowIndex, "-").concat(index),
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
-      shouldBeInteractive: true
+      shouldBeInteractive: true,
+      fitToHeight: fitToHeight
     }));
   }));
 };

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

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

@@ -5,8 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useCallback, useMemo, forwardRef } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
+import { defaultEmojiHeight, deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, isUnicodeRepresentation, toEmojiId } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
@@ -21,6 +21,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
 const emojiSpriteContainer = null;
 const emojiImageContainer = null;
+
+// Unicode emojis render as text inside a <span>, not an <img>, so they do not need
+// borderRadius (which would clip a background on hover) or the img { display: block } rule.
+const emojiUnicodeContainer = null;
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -145,6 +149,42 @@ export const SpriteEmoji = props => {
     }))
   );
 };
+export const UnicodeEmoji = props => {
+  const {
+    emoji,
+    fitToHeight,
+    selected,
+    selectOnHover,
+    className
+  } = props;
+  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
+  const emojiText = emoji.representation.unicodeEmoji;
+  const size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight;
+  const style = {
+    display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: `max(1em, ${size}px)`,
+    width: `max(1em, ${size}px)`,
+    height: `max(1em, ${size}px)`,
+    textAlign: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '0',
+    margin: '0',
+    padding: '0'
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};
 
 // Keep as pure functional component, see renderAsSprite.
 export const ImageEmoji = props => {
@@ -324,7 +364,7 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
+    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
     onKeyDown: event => handleKeyDown(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);
@@ -357,6 +397,9 @@ export const Emoji = props => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (isUnicodeRepresentation(emoji.representation)) {
+    return /*#__PURE__*/React.createElement(UnicodeEmoji, props);
+  }
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if (isSpriteRepresentation(emoji.representation)) {
     return /*#__PURE__*/React.createElement(SpriteEmoji, props);

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

@@ -2,6 +2,7 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import CachingEmoji from './CachingEmoji';
 const emojiName = null;
 const emojiShortName = null;
@@ -11,13 +12,15 @@ const previewText = null;
 export const EmojiPreviewComponent = ({
   emoji
 }) => {
+  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {
     className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
   }, /*#__PURE__*/React.createElement(CachingEmoji, {
     key: emoji.id || emoji.shortName,
-    emoji: emoji
+    emoji: emoji,
+    fitToHeight: fitToHeight
   })), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
   }, emoji.name && /*#__PURE__*/React.createElement("div", {

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

@@ -36,6 +36,7 @@ export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     ariaLabelText,
     defaultChecked
   } = props;
+  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return /*#__PURE__*/React.createElement("label", {
     className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg"])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, ariaLabelText), /*#__PURE__*/React.createElement("input", {
@@ -55,7 +56,8 @@ export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 const _default_1 = /*#__PURE__*/memo(EmojiRadioButton);

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

@@ -18,6 +18,7 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     onSelected,
     isVisible = true
   } = props;
+  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -36,7 +37,8 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -55,7 +57,8 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 const _default_1 = /*#__PURE__*/memo(TonePreviewButton);

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

@@ -31,6 +31,7 @@ const EmojiPickerEmojiRow = ({
   const {
     formatMessage
   } = useIntl();
+  const fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   const handleFocus = index => (emojiId, emoji, event) => {
     setEmojisFocus({
       rowIndex,
@@ -99,7 +100,8 @@ const EmojiPickerEmojiRow = ({
       "data-focus-index": `${rowIndex}-${index}`,
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-      shouldBeInteractive: true
+      shouldBeInteractive: true,
+      fitToHeight: fitToHeight
     }));
   }));
 };

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

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

@@ -11,8 +11,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useEffect, useCallback, useMemo, forwardRef } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, toEmojiId } from '../../util/type-helpers';
+import { defaultEmojiHeight, deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, isUnicodeRepresentation, toEmojiId } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import { leftClick } from '../../util/mouse';
 import DeleteButton from './DeleteButton';
@@ -27,6 +27,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
 var emojiSpriteContainer = null;
 var emojiImageContainer = null;
+
+// Unicode emojis render as text inside a <span>, not an <img>, so they do not need
+// borderRadius (which would clip a background on hover) or the img { display: block } rule.
+var emojiUnicodeContainer = null;
 var handleMouseDown = function handleMouseDown(props, event) {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -136,6 +140,40 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     }))
   );
 };
+export var UnicodeEmoji = function UnicodeEmoji(props) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className;
+  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 style = {
+    display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: "max(1em, ".concat(size, "px)"),
+    width: "max(1em, ".concat(size, "px)"),
+    height: "max(1em, ".concat(size, "px)"),
+    textAlign: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: '0',
+    margin: '0',
+    padding: '0'
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};
 
 // Keep as pure functional component, see renderAsSprite.
 export var ImageEmoji = function ImageEmoji(props) {
@@ -323,7 +361,7 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-emoji-type": type,
     tabIndex: shouldBeInteractive ? tabIndex || 0 : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
+    className: ax([type === 'sprite' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _1e0c1o8l _jr50g2xd _ylp71o8l _pkaxgktf _1hdcgktf _109tnkob _tn8j1dpa _3naf1dpa _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : type === 'unicode' ? "_19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc" : "_2rkofajl _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j1dpa _3naf1dpa _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", className]),
     onKeyDown: function onKeyDown(event) {
       return handleKeyDown(props, event);
     },
@@ -356,6 +394,9 @@ export var Emoji = function Emoji(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (isUnicodeRepresentation(emoji.representation)) {
+    return /*#__PURE__*/React.createElement(UnicodeEmoji, props);
+  }
   // TODO: We always prefer render as image as having accessibility issues with sprite representation
   if (isSpriteRepresentation(emoji.representation)) {
     return /*#__PURE__*/React.createElement(SpriteEmoji, props);

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

@@ -2,6 +2,7 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import CachingEmoji from './CachingEmoji';
 var emojiName = null;
 var emojiShortName = null;
@@ -10,13 +11,15 @@ var previewImg = null;
 var previewText = null;
 export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   var emoji = _ref.emoji;
+  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 32 : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {
     className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
   }, /*#__PURE__*/React.createElement(CachingEmoji, {
     key: emoji.id || emoji.shortName,
-    emoji: emoji
+    emoji: emoji,
+    fitToHeight: fitToHeight
   })), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _2lx21bp4 _1wpz1h6o _19pk1i6y _18u019bv _p12f3sup _1bsb3sup _16jlkb7n _1o9zkb7n"])
   }, emoji.name && /*#__PURE__*/React.createElement("div", {

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

@@ -32,6 +32,7 @@ export var EmojiRadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
     selectOnHover = props.selectOnHover,
     ariaLabelText = props.ariaLabelText,
     defaultChecked = props.defaultChecked;
+  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return /*#__PURE__*/React.createElement("label", {
     className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg"])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, ariaLabelText), /*#__PURE__*/React.createElement("input", {
@@ -55,7 +56,8 @@ export var EmojiRadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 var _default_1 = /*#__PURE__*/memo(EmojiRadioButton);

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

@@ -17,6 +17,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -35,7 +36,8 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
@@ -54,7 +56,8 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     emoji: emoji,
     selectOnHover: selectOnHover,
     shouldBeInteractive: false,
-    "aria-hidden": true
+    "aria-hidden": true,
+    fitToHeight: fitToHeight
   }));
 });
 var _default_1 = /*#__PURE__*/memo(TonePreviewButton);

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

@@ -28,6 +28,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var rowIndex = (virtualItemContext === null || virtualItemContext === void 0 ? void 0 : virtualItemContext.index) || 0;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var fitToHeight = fg('platform_twemoji_removal_unicode_emojis') ? 24 : undefined;
   var handleFocus = function handleFocus(index) {
     return function (emojiId, emoji, event) {
       setEmojisFocus({
@@ -94,7 +95,8 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       "data-focus-index": "".concat(rowIndex, "-").concat(index),
       tabIndex: focus ? 0 : -1,
       "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-      shouldBeInteractive: true
+      shouldBeInteractive: true,
+      fitToHeight: fitToHeight
     }));
   }));
 };

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

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

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

@@ -84,9 +84,10 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
     showTooltip?: boolean;
 }
 export declare const SpriteEmoji: (props: Props) => JSX.Element;
+export declare const UnicodeEmoji: (props: Props) => JSX.Element;
 export declare const ImageEmoji: (props: Props) => JSX.Element;
 interface EmojiNodeWrapperProps extends Props {
-    type: 'sprite' | 'image';
+    type: 'sprite' | 'image' | 'unicode';
 }
 export declare const EmojiNodeWrapper: React.ForwardRefExoticComponent<EmojiNodeWrapperProps & {
     children?: React.ReactNode | undefined;

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

@@ -8,9 +8,9 @@ export interface Props {
     ariaLabelText?: string;
     defaultChecked?: boolean;
     emoji: EmojiDescription;
+    onArrowKey?: (direction: -1 | 1) => void;
     onSelected?: () => void;
     selectOnHover?: boolean;
-    onArrowKey?: (direction: -1 | 1) => void;
 }
 export declare const EmojiRadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 declare const _default_1: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>>;

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

@@ -84,9 +84,10 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
     showTooltip?: boolean;
 }
 export declare const SpriteEmoji: (props: Props) => JSX.Element;
+export declare const UnicodeEmoji: (props: Props) => JSX.Element;
 export declare const ImageEmoji: (props: Props) => JSX.Element;
 interface EmojiNodeWrapperProps extends Props {
-    type: 'sprite' | 'image';
+    type: 'sprite' | 'image' | 'unicode';
 }
 export declare const EmojiNodeWrapper: React.ForwardRefExoticComponent<EmojiNodeWrapperProps & {
     children?: React.ReactNode | undefined;

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

@@ -8,9 +8,9 @@ export interface Props {
     ariaLabelText?: string;
     defaultChecked?: boolean;
     emoji: EmojiDescription;
+    onArrowKey?: (direction: -1 | 1) => void;
     onSelected?: () => void;
     selectOnHover?: boolean;
-    onArrowKey?: (direction: -1 | 1) => void;
 }
 export declare const EmojiRadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 declare const _default_1: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.10.14",
+	"version": "70.11.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^84.3.0",
+		"@atlaskit/tmp-editor-statsig": "^84.4.0",
 		"@atlaskit/tokens": "^13.1.0",
 		"@atlaskit/tooltip": "^22.4.0",
 		"@atlaskit/ufo": "^0.5.0",