@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -0,0 +1,181 @@
+/* ImageEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useCallback, useMemo } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
+import Tooltip from '@atlaskit/tooltip';
+import { shouldUseAltRepresentation } from '../../api/shouldUseAltRepresentation';
+import { useInView } from '../../hooks/useInView';
+import { UfoEmojiTimings } from '../../types';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import browserSupport from '../../util/browser-support';
+import { isImageRepresentation } from '../../util/is-image-representation';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import { toEmojiId } from '../../util/to-emoji-id';
+import { DeletableEmojiTooltipContent } from './DeletableEmojiTooltipContent';
+import { DeletableEmojiTooltipContentForScreenReader } from './DeletableEmojiTooltipContentForScreenReader';
+import DeleteButton from './DeleteButton';
+import { EmojiNodeWrapper } from './Emoji';
+import { handleDelete } from './handleDelete';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiMainStyle, emojiImage, deletableEmoji } from './styles';
+const handleImageError = (props, event) => {
+  const {
+    emoji,
+    onLoadError
+  } = props;
+
+  // Hide error state (but keep space for it)
+  if (event.target) {
+    const target = event.target;
+    target.style.visibility = 'hidden';
+  }
+  if (onLoadError) {
+    onLoadError(toEmojiId(emoji), emoji, event);
+  }
+};
+
+// Keep as pure functional component, see renderAsSprite.
+export const ImageEmoji = props => {
+  const {
+    emoji,
+    fitToHeight,
+    selected,
+    selectOnHover,
+    className,
+    showDelete,
+    onLoadSuccess,
+    disableLazyLoad,
+    autoWidth
+  } = props;
+  const [ref, inView] = useInView({
+    triggerOnce: true
+  });
+  const ufoExp = useMemo(() => sampledUfoRenderedEmoji(emoji), [emoji]);
+  const classes = `${emojiMainStyle} ${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${emojiImage} ${className ? className : ''} ${showDelete ? deletableEmoji : ''}`;
+  let width;
+  let height;
+  let src;
+  const 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;
+  }
+  let sizing = {};
+  if (fitToHeight && width && height) {
+    const sizingWidth = autoWidth ? 'auto' : fitToHeight / height * width;
+    // Presize image, to prevent reflow due to size changes after loading
+    sizing = {
+      width: sizingWidth,
+      height: fitToHeight
+    };
+  }
+  const onError = useCallback(event => {
+    handleImageError({
+      emoji: props.emoji,
+      onLoadError: props.onLoadError
+    }, event);
+  }, [props.emoji, props.onLoadError]);
+  const onLoad = useCallback(() => {
+    const mountedMark = ufoExp.metrics.marks.find(mark => 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);
+    }
+    const loadedStartMark = ufoExp.metrics.marks.find(mark => 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]);
+  const onBeforeLoad = useCallback(() => {
+    if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
+      ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
+    }
+  }, [ufoExp]);
+  const onMouseOver = useCallback(e => {
+    var _getDocument, _getDocument$activeEl;
+    // only disable tooltip when not on focus
+    if (!((_getDocument = getDocument()) !== null && _getDocument !== void 0 && (_getDocument$activeEl = _getDocument.activeElement) !== null && _getDocument$activeEl !== void 0 && _getDocument$activeEl.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(() => {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
+  const emojiNode = /*#__PURE__*/React.createElement("img", _extends({
+    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-${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: event => 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)
+  );
+};

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

@@ -1,5 +1,7 @@
-import { recordFailedEmoji, recordSucceededEmoji, ufoExperiences } from '../../util/analytics';
-import { extractErrorInfo } from '../../util/analytics/analytics';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
+import { recordFailedEmoji } from '../../util/analytics/recordFailedEmoji';
+import { recordSucceededEmoji } from '../../util/analytics/recordSucceededEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always

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

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { ResourcedEmojiComponent } from './ResourcedEmojiComponent';
-import { UfoErrorBoundary } from './UfoErrorBoundary';
-import { sampledUfoRenderedEmoji, ufoExperiences } from '../../util/analytics';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { UfoErrorBoundary } from './UfoErrorBoundary';
 const ResourcedEmoji = props => {
   const {
     emojiId,

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

@@ -2,17 +2,19 @@
 import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { defaultEmojiHeight } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isPromise } from '../../util/type-helpers';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { UfoEmojiTimings } from '../../types';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { defaultEmojiHeight } from '../../util/constants';
+import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
+import { isImageRepresentation } from '../../util/is-image-representation';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import { isPromise } from '../../util/is-promise';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { sampledUfoRenderedEmoji } from '../../util/analytics';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
-import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { emojiIdToEmoji } from '../../util/emojiIdToEmoji';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 const ignoreWrapperStyles = null;
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";

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

@@ -0,0 +1,58 @@
+/* SpriteEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { EmojiNodeWrapper } from './Emoji';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite } from './styles';
+
+// 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 const SpriteEmoji = props => {
+  const {
+    emoji,
+    fitToHeight,
+    selected,
+    selectOnHover,
+    className
+  } = props;
+  const representation = emoji.representation;
+  const sprite = representation.sprite;
+  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
+  let sizing = {};
+  if (fitToHeight) {
+    if (expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true)) {
+      sizing = {
+        minHeight: `${fitToHeight}px`,
+        minWidth: `${fitToHeight}px`
+      };
+    } else {
+      sizing = {
+        width: `${fitToHeight}px`,
+        height: `${fitToHeight}px`,
+        minHeight: `${fitToHeight}px`,
+        minWidth: `${fitToHeight}px`
+      };
+    }
+  }
+  const xPositionInPercent = 100 / (sprite.column - 1) * (representation.xIndex - 0);
+  const yPositionInPercent = 100 / (sprite.row - 1) * (representation.yIndex - 0);
+  const style = {
+    backgroundImage: `url(${sprite.url})`,
+    backgroundPosition: `${xPositionInPercent}% ${yPositionInPercent}%`,
+    backgroundSize: `${sprite.column * 100}% ${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
+    }))
+  );
+};

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

@@ -1,131 +1,12 @@
-/* ToneSelector.tsx generated by @compiled/babel-plugin v2.0.0 */
-import "./ToneSelector.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
-import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import EmojiRadioButton from './EmojiRadioButton';
-import { useIntl } from 'react-intl';
-import { messages } from '../i18n';
-const isRefreshEmojiPickerEnabled = () => {
-  if (!FeatureGates.initializeCompleted()) {
-    return false;
-  }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-const hidden = null;
+import { memo } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ToneSelectorInternal } from './ToneSelectorInternal';
 export const toneSelectorTestId = 'tone-selector';
-const extractAllTones = emoji => {
-  if (emoji.skinVariations) {
-    return [emoji, ...emoji.skinVariations];
-  }
-  return [emoji];
-};
-export const ToneSelectorInternal = props => {
-  const {
-    createAnalyticsEvent,
-    emoji,
-    onToneSelected,
-    onToneClose,
-    selectedTone,
-    isVisible
-  } = props;
-  const isMounted = useRef(false);
-  const selectedToneRadioRef = useRef(null);
-  // Refs for all radio inputs — used for FG-gated arrow-key focus management
-  const radioRefs = useRef([]);
-  const {
-    formatMessage
-  } = useIntl();
-  const emojiToneCollection = useMemo(() => {
-    var selectedToneIndex = -1;
-    const toneColletion = extractAllTones(emoji).map((tone, index) => {
-      const isSelected = index === selectedTone;
-      if (isSelected) {
-        selectedToneIndex = index;
-      }
-      return {
-        ...tone,
-        isSelected: isSelected,
-        label: setSkinToneAriaLabelText(tone.name),
-        toneIndex: index
-      };
-    });
-
-    // push description of selected tone to the end of the array
-    // so that it gets rendered last/rightmost
-    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
-    return toneColletion;
-  }, [emoji, selectedTone]);
-  useEffect(() => {
-    if (isVisible) {
-      var _selectedToneRadioRef;
-      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
-    }
-  }, [isVisible, selectedToneRadioRef]);
-  const fireAnalyticsEvent = event => {
-    if (createAnalyticsEvent) {
-      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
-    }
-  };
-  const onArrowKey = useCallback((currentIndex, direction) => {
-    var _radioRefs$current$ne;
-    const len = radioRefs.current.length;
-    const nextIndex = (currentIndex + direction + len) % len;
-    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 ? void 0 : _radioRefs$current$ne.focus();
-  }, []);
-  const onToneSelectedHandler = toneValue => () => {
-    if (selectedTone === toneValue && onToneClose) {
-      onToneClose();
-      return;
-    }
-    onToneSelected(toneValue);
-    const toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
-    fireAnalyticsEvent(toneSelectedEvent({
-      skinToneModifier: toneList[toneValue]
-    }));
-  };
-  if (!isMounted.current) {
-    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
-  }
-  isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    "data-testid": toneSelectorTestId,
-    id: "emoji-picker-tone-selector",
-    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
-    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
-  }, emojiToneCollection.map((tone, renderIndex) => {
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
-      ref: el => {
-        radioRefs.current[renderIndex] = el;
-        if (tone.isSelected && selectedToneRadioRef) {
-          selectedToneRadioRef.current = el;
-        }
-      },
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: `${tone.id}`,
-      emoji: tone,
-      onArrowKey: direction => onArrowKey(renderIndex, direction),
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
-    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
-      ref: tone.isSelected ? selectedToneRadioRef : null,
-      defaultChecked: tone.isSelected,
-      ariaLabelText: tone.label,
-      key: `${tone.id}`,
-      emoji: tone,
-      onSelected: onToneSelectedHandler(tone.toneIndex),
-      selectOnHover: true
-    });
-  }));
-};
-const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
+export const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
 const _default_1 = /*#__PURE__*/memo(ToneSelector);
 export default _default_1;

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

@@ -0,0 +1,129 @@
+/* ToneSelectorInternal.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./ToneSelectorInternal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
+import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
+import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
+import { messages } from '../i18n';
+import EmojiRadioButton from './EmojiRadioButton';
+import { toneSelectorTestId } from './ToneSelector';
+import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+const isRefreshEmojiPickerEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
+const hidden = null;
+const extractAllTones = emoji => {
+  if (emoji.skinVariations) {
+    return [emoji, ...emoji.skinVariations];
+  }
+  return [emoji];
+};
+export const ToneSelectorInternal = props => {
+  const {
+    createAnalyticsEvent,
+    emoji,
+    onToneSelected,
+    onToneClose,
+    selectedTone,
+    isVisible
+  } = props;
+  const isMounted = useRef(false);
+  const selectedToneRadioRef = useRef(null);
+  // Refs for all radio inputs — used for FG-gated arrow-key focus management
+  const radioRefs = useRef([]);
+  const {
+    formatMessage
+  } = useIntl();
+  const emojiToneCollection = useMemo(() => {
+    var selectedToneIndex = -1;
+    const toneColletion = extractAllTones(emoji).map((tone, index) => {
+      const isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return {
+        ...tone,
+        isSelected: isSelected,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneIndex: index
+      };
+    });
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
+  useEffect(() => {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
+    }
+  }, [isVisible, selectedToneRadioRef]);
+  const fireAnalyticsEvent = event => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
+    }
+  };
+  const onArrowKey = useCallback((currentIndex, direction) => {
+    var _radioRefs$current$ne;
+    const len = radioRefs.current.length;
+    const nextIndex = (currentIndex + direction + len) % len;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 ? void 0 : _radioRefs$current$ne.focus();
+  }, []);
+  const onToneSelectedHandler = toneValue => () => {
+    if (selectedTone === toneValue && onToneClose) {
+      onToneClose();
+      return;
+    }
+    onToneSelected(toneValue);
+    const toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
+    fireAnalyticsEvent(toneSelectedEvent({
+      skinToneModifier: toneList[toneValue]
+    }));
+  };
+  if (!isMounted.current) {
+    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
+  }
+  isMounted.current = true;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, emojiToneCollection.map((tone, renderIndex) => {
+    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: el => {
+        radioRefs.current[renderIndex] = el;
+        if (tone.isSelected && selectedToneRadioRef) {
+          selectedToneRadioRef.current = el;
+        }
+      },
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: `${tone.id}`,
+      emoji: tone,
+      onArrowKey: direction => onArrowKey(renderIndex, direction),
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: `${tone.id}`,
+      emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    });
+  }));
+};

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

@@ -2,7 +2,7 @@
 import "./ToolTipContentWithKeymap.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment } from 'react';
-import { formatShortcut } from '../../util/keymaps';
+import { formatShortcut } from '../../util/format-shortcut';
 const tooltipShortcutStyle = null;
 export const ToolTipContentWithKeymap = /*#__PURE__*/React.memo(({
   description,