@atlaskit/emoji 69.0.7 → 69.0.9

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

@@ -1,370 +0,0 @@
-/* Emoji.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
-import "./Emoji.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useEffect, useCallback, forwardRef } from 'react';
-import { B100, N30 } from '@atlaskit/theme/colors';
-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 { UfoEmojiTimings } from '../../../types';
-import { leftClick } from '../../../util/mouse';
-import DeleteButton from './DeleteButton';
-import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImage, deletableEmoji } from '../../common/styles';
-import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../../util/analytics';
-import browserSupport from '../../../util/browser-support';
-import { useInView } from '../../../hooks/useInView';
-import { hasUfoMarked } from '../../../util/analytics/ufoExperiences';
-import { DeletableEmojiTooltipContent, DeletableEmojiTooltipContentForScreenReader } from '../../common/DeletableEmojiTooltipContent';
-import { isSSR } from '../../../util/is-ssr';
-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') === deleteEmojiLabel) {
-    return;
-  }
-  var emoji = props.emoji,
-    onSelected = props.onSelected;
-  if (onSelected && leftClick(event)) {
-    onSelected(toEmojiId(emoji), emoji, event);
-  }
-};
-var handleKeyDown = function handleKeyDown(props, event) {
-  if (!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 === KeyboardKeys.Enter || event.key === KeyboardKeys.Space)) {
-    onSelected(toEmojiId(emoji), emoji, event);
-  }
-  if (showDelete && event.key === KeyboardKeys.Backspace) {
-    handleDelete(props, event);
-  }
-};
-var handleMouseMove = function handleMouseMove(props, event) {
-  var emoji = props.emoji,
-    onMouseMove = props.onMouseMove;
-  if (onMouseMove) {
-    onMouseMove(toEmojiId(emoji), emoji, event);
-  }
-};
-var handleFocus = function handleFocus(props, event) {
-  var emoji = props.emoji,
-    onFocus = props.onFocus;
-  if (onFocus) {
-    onFocus(toEmojiId(emoji), emoji, event);
-  }
-};
-var handleDelete = function handleDelete(props, event) {
-  var emoji = props.emoji,
-    onDelete = props.onDelete;
-  if (onDelete) {
-    onDelete(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(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
-export var 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(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? 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.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "sprite",
-      className: classes
-    }), /*#__PURE__*/React.createElement("span", {
-      className: emojiSprite,
-      style: style
-    }))
-  );
-};
-
-// Keep as pure functional component, see renderAsSprite.
-export var 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 = useInView({
-      triggerOnce: true
-    }),
-    _useInView2 = _slicedToArray(_useInView, 2),
-    ref = _useInView2[0],
-    inView = _useInView2[1];
-  var ufoExp = sampledUfoRenderedEmoji(emoji);
-  var classes = "".concat(emojiMainStyle, " ").concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(emojiImage, " ").concat(className ? className : '', " ").concat(showDelete ? deletableEmoji : '');
-  var width;
-  var height;
-  var src;
-  var representation = shouldUseAltRepresentation(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
-  if (isImageRepresentation(representation)) {
-    src = representation.imagePath;
-    width = representation.width;
-    height = representation.height;
-  } else if (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 && !isSSR() ? 'auto' : fitToHeight / height * width,
-      height: fitToHeight
-    };
-  }
-  var onError = useCallback(function (event) {
-    handleImageError(props, event);
-  }, [props]);
-  var onLoad = useCallback(function () {
-    var mountedMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === UfoEmojiTimings.MOUNTED_END;
-    });
-    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
-    }
-    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
-      return mark.name === UfoEmojiTimings.ONLOAD_START;
-    });
-    if (mountedMark && loadedStartMark) {
-      ufoExp.addMetadata({
-        lazyLoad: loadedStartMark.time > mountedMark.time
-      });
-    }
-    // onload_start
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_END)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_END);
-    }
-    ufoExp.success({
-      metadata: {
-        IBSupported: browserSupport.supportsIntersectionObserver
-      }
-    });
-    if (onLoadSuccess) {
-      onLoadSuccess(emoji);
-    }
-  }, [emoji, onLoadSuccess, ufoExp]);
-  var onBeforeLoad = useCallback(function () {
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
-      ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
-    }
-  }, [ufoExp]);
-  var onMouseOver = 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.
-  useEffect(function () {
-    if (inView) {
-      onBeforeLoad();
-    }
-  }, [inView, onBeforeLoad]);
-  var emojiNode = /*#__PURE__*/React.createElement("img", _extends({
-    //@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.createElement(Tooltip, {
-      content: /*#__PURE__*/React.createElement(DeletableEmojiTooltipContent, null),
-      position: "right-start",
-      tag: "span"
-    }, /*#__PURE__*/React.createElement(EmojiNodeWrapper, _extends({}, 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.createElement(DeleteButton, {
-      onClick: function onClick(event) {
-        return handleDelete(props, event);
-      }
-    }), /*#__PURE__*/React.createElement(DeletableEmojiTooltipContentForScreenReader, {
-      emoji: emoji
-    })));
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "image",
-      className: classes,
-      ref: ref
-    }), emojiNode)
-  );
-};
-export var EmojiNodeWrapper = /*#__PURE__*/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 = _objectWithoutProperties(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.createElement("span", _extends({}, 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: 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": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
-      "--_1rebzxw": ix("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")))
-    }
-  }), children);
-});
-export var Emoji = function Emoji(props) {
-  var emoji = props.emoji;
-  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
-  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'Emoji',
-    emojiId: emoji.id
-  });
-  useEffect(function () {
-    var ufoExp = sampledUfoRenderedEmoji(emoji);
-    if (!hasUfoMarked(ufoExp, 'fmp')) {
-      ufoExp.markFMP();
-    }
-    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.MOUNTED_END)) {
-      ufoExp.mark(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 (isSpriteRepresentation(emoji.representation)) {
-    return /*#__PURE__*/React.createElement(SpriteEmoji, props);
-  }
-  return /*#__PURE__*/React.createElement(ImageEmoji, props);
-};
-export default Emoji;

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

@@ -1,210 +0,0 @@
-/* EmojiActions.tsx generated by @compiled/babel-plugin v0.36.1 */
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./EmojiActions.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
-import { N30A } from '@atlaskit/theme/colors';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
-import EmojiDeletePreview from './EmojiDeletePreview';
-import EmojiUploadPicker from './EmojiUploadPicker';
-import TonePreviewButton from './TonePreviewButton';
-import ToneSelector from './ToneSelector';
-import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
-import { messages } from '../../i18n';
-import AkButton from '@atlaskit/button/standard-button';
-import AddIcon from '@atlaskit/icon/core/migration/add';
-import { setSkinToneAriaLabelText } from '../../common/setSkinToneAriaLabelText';
-import { emojiPickerAddEmoji } from '../../common/styles';
-import { DEFAULT_TONE } from '../../../util/constants';
-import { Box } from '@atlaskit/primitives/compiled';
-var styles = {
-  icon: "_18u0r5cr _2hwx1i6y"
-};
-var addCustomEmoji = null;
-var addCustomEmojiButton = null;
-var emojiActionsWrapper = null;
-var emojiToneSelectorContainer = null;
-var previewFooter = null;
-export var emojiActionsTestId = 'emoji-actions';
-export var 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(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
-    "data-testid": uploadEmojiTestId,
-    className: ax(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
-    return /*#__PURE__*/React.createElement(AkButton, {
-      onClick: onOpenUpload,
-      iconBefore: /*#__PURE__*/React.createElement(Box, {
-        xcss: styles.icon
-      }, /*#__PURE__*/React.createElement(AddIcon, {
-        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: ax(["_p12f3sup", 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 ? DEFAULT_TONE : _props$selectedTone,
-    intl = props.intl,
-    onToneOpen = props.onToneOpen,
-    showToneSelector = props.showToneSelector;
-  var formatMessage = intl.formatMessage;
-  var tonePreviewButtonRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    focusTonePreviewButton = _useState2[0],
-    setFocusTonePreviewButton = _useState2[1];
-  useLayoutEffect(function () {
-    if (focusTonePreviewButton && !showToneSelector) {
-      var _tonePreviewButtonRef;
-      (_tonePreviewButtonRef = tonePreviewButtonRef.current) === null || _tonePreviewButtonRef === void 0 || _tonePreviewButtonRef.focus();
-    }
-    return function () {
-      setFocusTonePreviewButton(false);
-    };
-  }, [focusTonePreviewButton, showToneSelector]);
-  var onToneCloseHandler = useCallback(function () {
-    var onToneClose = props.onToneClose;
-    onToneClose();
-    setFocusTonePreviewButton(true);
-  }, [props]);
-  var onToneSelectedHandler = useCallback(function (toneValue) {
-    var onToneSelected = props.onToneSelected;
-    onToneSelected(toneValue);
-    setFocusTonePreviewButton(true);
-  }, [props]);
-  if (!toneEmoji) {
-    return null;
-  }
-  var previewToneEmoji = toneEmoji;
-  if (selectedTone !== DEFAULT_TONE && previewToneEmoji.skinVariations) {
-    previewToneEmoji = previewToneEmoji.skinVariations[selectedTone - 1];
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
-  }, /*#__PURE__*/React.createElement(ToneSelector, {
-    emoji: toneEmoji,
-    onToneSelected: onToneSelectedHandler,
-    onToneClose: onToneCloseHandler,
-    selectedTone: selectedTone,
-    isVisible: showToneSelector
-  }), /*#__PURE__*/React.createElement(TonePreviewButton, {
-    ref: tonePreviewButtonRef,
-    ariaExpanded: showToneSelector,
-    emoji: previewToneEmoji,
-    selectOnHover: true,
-    onSelected: onToneOpen,
-    ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
-      selectedTone: "".concat(setSkinToneAriaLabelText(previewToneEmoji.name))
-    }),
-    isVisible: !showToneSelector
-  }));
-};
-export var 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 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showToneSelector = _useState4[0],
-    setShowToneSelector = _useState4[1];
-  var onToneOpenHandler = useCallback(function () {
-    return setShowToneSelector(true);
-  }, []);
-  var onToneCloseHandler = useCallback(function () {
-    return setShowToneSelector(false);
-  }, []);
-  var onToneSelectedHandler = useCallback(function (toneValue) {
-    setShowToneSelector(false);
-    if (onToneSelected) {
-      onToneSelected(toneValue);
-    }
-  }, [onToneSelected]);
-  var onMouseLeaveHandler = useCallback(function () {
-    if (showToneSelector && onToneSelectorCancelled) {
-      onToneSelectorCancelled();
-    }
-    setShowToneSelector(false);
-  }, [showToneSelector, onToneSelectorCancelled]);
-  if (uploading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
-      style: {
-        "--_m6cf7x": ix("2px solid ".concat("var(--ds-border, ".concat(N30A, ")"))),
-        "--_p4h2oc": ix("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
-      }
-    }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
-      onUploadCancelled: onUploadCancelled,
-      onUploadEmoji: onUploadEmoji,
-      onFileChooserClicked: onFileChooserClicked,
-      errorMessage: uploadErrorMessage,
-      initialUploadName: initialUploadName
-    }));
-  }
-  if (emojiToDelete) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
-      style: {
-        "--_m6cf7x": ix("2px solid ".concat("var(--ds-border, ".concat(N30A, ")"))),
-        "--_p4h2oc": ix("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
-      }
-    }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
-      emoji: emojiToDelete,
-      onDeleteEmoji: onDeleteEmoji,
-      onCloseDelete: onCloseDelete
-    }));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": emojiActionsTestId,
-    onMouseLeave: onMouseLeaveHandler,
-    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl18ew _16qs1qod"]),
-    style: {
-      "--_m6cf7x": ix("2px solid ".concat("var(--ds-border, ".concat(N30A, ")"))),
-      "--_p4h2oc": ix("0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
-  }, /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
-    onChange: onChange,
-    query: query,
-    resultsCount: resultsCount,
-    isVisible: !showToneSelector
-  }), /*#__PURE__*/React.createElement(TonesWrapper, _extends({}, props, {
-    onToneOpen: onToneOpenHandler,
-    onToneClose: onToneCloseHandler,
-    onToneSelected: onToneSelectedHandler,
-    showToneSelector: showToneSelector
-  }))), /*#__PURE__*/React.createElement(AddOwnEmoji, props));
-};
-export default injectIntl( /*#__PURE__*/memo(EmojiActions));