@atlaskit/emoji 68.0.4 → 69.0.0

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

@@ -0,0 +1,380 @@
+/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;
+require("./Emoji.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _EmojiUtils = require("../../../api/EmojiUtils");
+var _constants = require("../../../util/constants");
+var _typeHelpers = require("../../../util/type-helpers");
+var _types = require("../../../types");
+var _mouse = require("../../../util/mouse");
+var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
+var _styles = require("../../common/styles");
+var _analytics = require("../../../util/analytics");
+var _browserSupport = _interopRequireDefault(require("../../../util/browser-support"));
+var _useInView3 = require("../../../hooks/useInView");
+var _ufoExperiences = require("../../../util/analytics/ufoExperiences");
+var _DeletableEmojiTooltipContent = require("../../common/DeletableEmojiTooltipContent");
+var _isSsr = require("../../../util/is-ssr");
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (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;
+var handleMouseDown = function handleMouseDown(props, event) {
+  // Clicked emoji delete button
+  if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
+    return;
+  }
+  var emoji = props.emoji,
+    onSelected = props.onSelected;
+  if (onSelected && (0, _mouse.leftClick)(event)) {
+    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+var handleKeyDown = function handleKeyDown(props, event) {
+  if (!_constants.EMOJI_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  var emoji = props.emoji,
+    onSelected = props.onSelected,
+    showDelete = props.showDelete;
+  if (onSelected && (event.key === _constants.KeyboardKeys.Enter || event.key === _constants.KeyboardKeys.Space)) {
+    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+  if (showDelete && event.key === _constants.KeyboardKeys.Backspace) {
+    handleDelete(props, event);
+  }
+};
+var handleMouseMove = function handleMouseMove(props, event) {
+  var emoji = props.emoji,
+    onMouseMove = props.onMouseMove;
+  if (onMouseMove) {
+    onMouseMove((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+var handleFocus = function handleFocus(props, event) {
+  var emoji = props.emoji,
+    onFocus = props.onFocus;
+  if (onFocus) {
+    onFocus((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+var handleDelete = function handleDelete(props, event) {
+  var emoji = props.emoji,
+    onDelete = props.onDelete;
+  if (onDelete) {
+    onDelete((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+var handleImageError = function handleImageError(props, event) {
+  var emoji = props.emoji,
+    onLoadError = props.onLoadError;
+
+  // Hide error state (but keep space for it)
+  if (event.target) {
+    var target = event.target;
+    target.style.visibility = 'hidden';
+  }
+  if (onLoadError) {
+    onLoadError((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+
+// Pure functional components are used in favour of class based components, due to the performance!
+// When rendering 1500+ emoji using class based components had a significant impact.
+// TODO: add UFO tracking for sprite emoji
+var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className;
+  var representation = emoji.representation;
+  var sprite = representation.sprite;
+  var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
+  var sizing = {};
+  if (fitToHeight) {
+    sizing = {
+      width: "".concat(fitToHeight, "px"),
+      height: "".concat(fitToHeight, "px"),
+      minHeight: "".concat(fitToHeight, "px"),
+      minWidth: "".concat(fitToHeight, "px")
+    };
+  }
+  var xPositionInPercent = 100 / (sprite.column - 1) * (representation.xIndex - 0);
+  var yPositionInPercent = 100 / (sprite.row - 1) * (representation.yIndex - 0);
+  var style = _objectSpread({
+    backgroundImage: "url(".concat(sprite.url, ")"),
+    backgroundPosition: "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%"),
+    backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
+  }, sizing);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "sprite",
+      className: classes
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: _styles.emojiSprite,
+      style: style
+    }))
+  );
+};
+
+// Keep as pure functional component, see renderAsSprite.
+var ImageEmoji = exports.ImageEmoji = function ImageEmoji(props) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showDelete = props.showDelete,
+    onLoadSuccess = props.onLoadSuccess,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth;
+  var _useInView = (0, _useInView3.useInView)({
+      triggerOnce: true
+    }),
+    _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+    ref = _useInView2[0],
+    inView = _useInView2[1];
+  var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
+  var classes = "".concat(_styles.emojiMainStyle, " ").concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(_styles.emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? _styles.deletableEmoji : '');
+  var width;
+  var height;
+  var src;
+  var representation = (0, _EmojiUtils.shouldUseAltRepresentation)(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
+  if ((0, _typeHelpers.isImageRepresentation)(representation)) {
+    src = representation.imagePath;
+    width = representation.width;
+    height = representation.height;
+  } else if ((0, _typeHelpers.isMediaRepresentation)(representation)) {
+    src = representation.mediaPath;
+    width = representation.width;
+    height = representation.height;
+  }
+  var sizing = {};
+  if (fitToHeight && width && height) {
+    // Presize image, to prevent reflow due to size changes after loading
+    sizing = {
+      // Size of <img> needs to be deterministic when rendered on server-side. Auto will cause width to be 0 before image is loaded.
+      width: autoWidth && !(0, _isSsr.isSSR)() ? 'auto' : fitToHeight / height * width,
+      height: fitToHeight
+    };
+  }
+  var onError = (0, _react.useCallback)(function (event) {
+    handleImageError(props, event);
+  }, [props]);
+  var onLoad = (0, _react.useCallback)(function () {
+    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
+    });
+    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
+    }
+    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.ONLOAD_START;
+    });
+    if (mountedMark && loadedStartMark) {
+      ufoExp.addMetadata({
+        lazyLoad: loadedStartMark.time > mountedMark.time
+      });
+    }
+    // onload_start
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
+    }
+    ufoExp.success({
+      metadata: {
+        IBSupported: _browserSupport.default.supportsIntersectionObserver
+      }
+    });
+    if (onLoadSuccess) {
+      onLoadSuccess(emoji);
+    }
+  }, [emoji, onLoadSuccess, ufoExp]);
+  var onBeforeLoad = (0, _react.useCallback)(function () {
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START);
+    }
+  }, [ufoExp]);
+  var onMouseOver = (0, _react.useCallback)(function (e) {
+    var _document$activeEleme;
+    // only disable tooltip when not on focus
+    if (!((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.contains(e.target))) {
+      e.stopPropagation();
+    }
+  }, []);
+
+  // because of the lack of browser support of on before load natively, used IntersectionObserver helper hook to mimic the before load time mark for UFO.
+  (0, _react.useEffect)(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
+  var emojiNode = /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
+    //@ts-ignore
+    loading: disableLazyLoad ? 'eager' : 'lazy',
+    src: src,
+    key: src,
+    alt: emoji.name || emoji.shortName,
+    "data-emoji-short-name": emoji.shortName,
+    "data-emoji-id": emoji.id,
+    "data-emoji-text": emoji.fallback || emoji.shortName
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "emoji"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      visibility: 'visible'
+    },
+    onError: onError,
+    onLoad: onLoad
+  }, sizing, {
+    "data-vc": "emoji"
+  }));
+
+  // show a tooltip for deletable emoji only on focus
+  if (showDelete) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContent, null),
+      position: "right-start",
+      tag: "span"
+    }, /*#__PURE__*/_react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      "aria-labelledby": "screenreader-emoji-".concat(emoji.id),
+      type: "image"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: classes,
+      ref: ref,
+      showTooltip: false // avoid showing both tooltip and title
+      ,
+      onMouseOver: onMouseOver
+    }), emojiNode, /*#__PURE__*/_react.default.createElement(_DeleteButton.default, {
+      onClick: function onClick(event) {
+        return handleDelete(props, event);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_DeletableEmojiTooltipContent.DeletableEmojiTooltipContentForScreenReader, {
+      emoji: emoji
+    })));
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement(EmojiNodeWrapper, (0, _extends2.default)({}, props, {
+      type: "image",
+      className: classes,
+      ref: ref
+    }), emojiNode)
+  );
+};
+var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var emoji = props.emoji,
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    showDelete = props.showDelete,
+    _props$shouldBeIntera = props.shouldBeInteractive,
+    shouldBeInteractive = _props$shouldBeIntera === void 0 ? false : _props$shouldBeIntera,
+    tabIndex = props.tabIndex,
+    onSelected = props.onSelected,
+    onMouseMove = props.onMouseMove,
+    onFocus = props.onFocus,
+    onDelete = props.onDelete,
+    onLoadError = props.onLoadError,
+    onLoadSuccess = props.onLoadSuccess,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth,
+    children = props.children,
+    type = props.type,
+    editorEmoji = props.editorEmoji,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var accessibilityProps;
+  if (editorEmoji) {
+    accessibilityProps = {
+      role: undefined
+    };
+  } else if (shouldBeInteractive) {
+    accessibilityProps = {
+      role: 'button',
+      'aria-label': emoji.shortName
+    };
+  } else {
+    accessibilityProps = {
+      role: 'img',
+      'aria-label': emoji.shortName
+    };
+  }
+  return /*#__PURE__*/_react.default.createElement("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/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 _tn8j2tgk _3naf2tgk _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc" : "_2rkosqtm _19pk1n1a _2hwxidpf _otyr1n1a _18u0idpf _bfhk1j28 _1e0c1o8l _s7n4nkob _v4pn1ule _tn8j2tgk _3naf2tgk _160jewfl _1theewfl _1kogh2mm _qyp0ewfl _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", 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, {
+    style: {
+      "--_1y60f1n": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")),
+      "--_1rebzxw": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
+    }
+  }), children);
+});
+var Emoji = exports.Emoji = function Emoji(props) {
+  var emoji = props.emoji;
+  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
+  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'Emoji',
+    emojiId: emoji.id
+  });
+  (0, _react.useEffect)(function () {
+    var ufoExp = (0, _analytics.sampledUfoRenderedEmoji)(emoji);
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, 'fmp')) {
+      ufoExp.markFMP();
+    }
+    if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.MOUNTED_END)) {
+      ufoExp.mark(_types.UfoEmojiTimings.MOUNTED_END);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // 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);
+  }
+  return /*#__PURE__*/_react.default.createElement(ImageEmoji, props);
+};
+var _default = exports.default = Emoji;

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

@@ -0,0 +1,21 @@
+
+._n7zl18ew{border-bottom:var(--_m6cf7x)}._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._16qs1qod{box-shadow:var(--_p4h2oc)}
+._18u019bv{margin-left:10px}
+._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._19bvidpf{padding-left:0}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1wpz1h6o{align-self:center}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._4cvr1h6o{align-items:center}
+._ca0q1skh{padding-top:11px}
+._i0dl1wug{flex-basis:auto}
+._i0dlf1ug{flex-basis:0%}
+._n3td1crf{padding-bottom:9pt}
+._otyr19bv{margin-bottom:10px}
+._p12f3sup{max-width:285px}
+._u5f319bv{padding-right:10px}

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

@@ -0,0 +1,220 @@
+/* EmojiActions.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = void 0;
+require("./EmojiActions.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _colors = require("@atlaskit/theme/colors");
+var _reactIntlNext = require("react-intl-next");
+var _EmojiDeletePreview = _interopRequireDefault(require("./EmojiDeletePreview"));
+var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
+var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+var _EmojiPickerListSearch = require("../../picker/EmojiPickerListSearch");
+var _i18n = require("../../i18n");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/migration/add"));
+var _setSkinToneAriaLabelText = require("../../common/setSkinToneAriaLabelText");
+var _styles = require("../../common/styles");
+var _constants = require("../../../util/constants");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  icon: "_18u0r5cr _2hwx1i6y"
+};
+var addCustomEmoji = null;
+var addCustomEmojiButton = null;
+var emojiActionsWrapper = null;
+var emojiToneSelectorContainer = null;
+var previewFooter = null;
+var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
+var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
+
+// Generic Type for the wrapped functional component
+
+var AddOwnEmoji = function AddOwnEmoji(props) {
+  var onOpenUpload = props.onOpenUpload,
+    uploadEnabled = props.uploadEnabled;
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: (0, _runtime.ax)(["_1wpz1h6o _18u019bv _otyr19bv"])
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+    return /*#__PURE__*/React.createElement(_standardButton.default, {
+      onClick: onOpenUpload,
+      iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
+        xcss: styles.icon
+      }, /*#__PURE__*/React.createElement(_add.default, {
+        LEGACY_margin: "0 ".concat("var(--ds-space-025, 2px)", " 0 ", "var(--ds-space-050, 4px)"),
+        color: "currentColor",
+        label: "",
+        LEGACY_size: "small"
+      })),
+      appearance: "subtle"
+      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
+      ,
+
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)(["_p12f3sup", _styles.emojiPickerAddEmoji]),
+      tabIndex: 0,
+      id: "add-custom-emoji"
+    }, label);
+  })));
+};
+var TonesWrapper = function TonesWrapper(props) {
+  var toneEmoji = props.toneEmoji,
+    _props$selectedTone = props.selectedTone,
+    selectedTone = _props$selectedTone === void 0 ? _constants.DEFAULT_TONE : _props$selectedTone,
+    intl = props.intl,
+    onToneOpen = props.onToneOpen,
+    showToneSelector = props.showToneSelector;
+  var formatMessage = intl.formatMessage;
+  var tonePreviewButtonRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focusTonePreviewButton = _useState2[0],
+    setFocusTonePreviewButton = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (focusTonePreviewButton && !showToneSelector) {
+      var _tonePreviewButtonRef;
+      (_tonePreviewButtonRef = tonePreviewButtonRef.current) === null || _tonePreviewButtonRef === void 0 || _tonePreviewButtonRef.focus();
+    }
+    return function () {
+      setFocusTonePreviewButton(false);
+    };
+  }, [focusTonePreviewButton, showToneSelector]);
+  var onToneCloseHandler = (0, _react.useCallback)(function () {
+    var onToneClose = props.onToneClose;
+    onToneClose();
+    setFocusTonePreviewButton(true);
+  }, [props]);
+  var onToneSelectedHandler = (0, _react.useCallback)(function (toneValue) {
+    var onToneSelected = props.onToneSelected;
+    onToneSelected(toneValue);
+    setFocusTonePreviewButton(true);
+  }, [props]);
+  if (!toneEmoji) {
+    return null;
+  }
+  var previewToneEmoji = toneEmoji;
+  if (selectedTone !== _constants.DEFAULT_TONE && previewToneEmoji.skinVariations) {
+    previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
+  }, /*#__PURE__*/React.createElement(_ToneSelector.default, {
+    emoji: toneEmoji,
+    onToneSelected: onToneSelectedHandler,
+    onToneClose: onToneCloseHandler,
+    selectedTone: selectedTone,
+    isVisible: showToneSelector
+  }), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
+    ref: tonePreviewButtonRef,
+    ariaExpanded: showToneSelector,
+    emoji: previewToneEmoji,
+    selectOnHover: true,
+    onSelected: onToneOpen,
+    ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
+      selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewToneEmoji.name))
+    }),
+    isVisible: !showToneSelector
+  }));
+};
+var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
+  var onToneSelected = props.onToneSelected,
+    onToneSelectorCancelled = props.onToneSelectorCancelled,
+    initialUploadName = props.initialUploadName,
+    onUploadCancelled = props.onUploadCancelled,
+    onCloseDelete = props.onCloseDelete,
+    onDeleteEmoji = props.onDeleteEmoji,
+    onUploadEmoji = props.onUploadEmoji,
+    uploadErrorMessage = props.uploadErrorMessage,
+    uploading = props.uploading,
+    onFileChooserClicked = props.onFileChooserClicked,
+    emojiToDelete = props.emojiToDelete,
+    onChange = props.onChange,
+    query = props.query,
+    _props$resultsCount = props.resultsCount,
+    resultsCount = _props$resultsCount === void 0 ? 0 : _props$resultsCount;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showToneSelector = _useState4[0],
+    setShowToneSelector = _useState4[1];
+  var onToneOpenHandler = (0, _react.useCallback)(function () {
+    return setShowToneSelector(true);
+  }, []);
+  var onToneCloseHandler = (0, _react.useCallback)(function () {
+    return setShowToneSelector(false);
+  }, []);
+  var onToneSelectedHandler = (0, _react.useCallback)(function (toneValue) {
+    setShowToneSelector(false);
+    if (onToneSelected) {
+      onToneSelected(toneValue);
+    }
+  }, [onToneSelected]);
+  var onMouseLeaveHandler = (0, _react.useCallback)(function () {
+    if (showToneSelector && onToneSelectorCancelled) {
+      onToneSelectorCancelled();
+    }
+    setShowToneSelector(false);
+  }, [showToneSelector, onToneSelectorCancelled]);
+  if (uploading) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+      style: {
+        "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+        "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+      }
+    }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    }));
+  }
+  if (emojiToDelete) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+      style: {
+        "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+        "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+      }
+    }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiActionsTestId,
+    onMouseLeave: onMouseLeaveHandler,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
+    style: {
+      "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+      "--_p4h2oc": (0, _runtime.ix)("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_EmojiPickerListSearch.EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query,
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
+  }), /*#__PURE__*/React.createElement(TonesWrapper, (0, _extends2.default)({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiActions));

package/dist/cjs/components/compiled/common/EmojiDeletePreview.compiled.css

@@ -0,0 +1,21 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bv19bv{padding-left:10px}
+._19l3zwfg img{max-height:2pc}
+._1bah1yb4{justify-content:space-between}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
+._1txf1igg .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,bold)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1ylp{height:40px}
+._4t3i53f4{height:75pt}
+._4t3ivbgk{height:4pc}
+._ca0q19bv{padding-top:10px}
+._jwwg7vkz:first-of-type{line-height:1pc}
+._m73io7ol .emoji-submit-delete{width:84px}
+._n3td19bv{padding-bottom:10px}
+._pnmb1vvm:first-of-type{color:var(--_bbz764)}
+._rtyst9kd img{max-width:72px}
+._u5f319bv{padding-right:10px}