@atlaskit/emoji 67.0.3 → 67.0.5

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

@@ -15,15 +15,14 @@ import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
 import { useEmoji } from '../../hooks/useEmoji';
 import { useCallback } from 'react';
 import { extractErrorInfo } from '../../util/analytics/analytics';
-
 /**
  * Renders an emoji from a cached image, if required.
  */
 export var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
-
+  var emoji = props.emoji;
+  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
     emojiId: emoji.id
@@ -31,51 +30,43 @@ export var CachingEmoji = function CachingEmoji(props) {
   useEffect(function () {
     if (!hasUfoMarked(sampledUfoRenderedEmoji(emoji), 'fmp')) {
       sampledUfoRenderedEmoji(emoji).markFMP();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   var emojiNode = function emojiNode() {
     if (isMediaEmoji(emoji)) {
       return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
     }
-
     return /*#__PURE__*/React.createElement(Emoji, props);
   };
-
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
   }, emojiNode());
 };
+
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
  * rendering paths depending on caching strategy.
  */
-
 export var CachingMediaEmoji = function CachingMediaEmoji(props) {
   var emoji = props.emoji,
-      placeholderSize = props.placeholderSize,
-      showTooltip = props.showTooltip,
-      fitToHeight = props.fitToHeight,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
-
+    placeholderSize = props.placeholderSize,
+    showTooltip = props.showTooltip,
+    fitToHeight = props.fitToHeight,
+    children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
   var shortName = emoji.shortName,
-      representation = emoji.representation;
-
+    representation = emoji.representation;
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      cachedEmoji = _useState2[0],
-      setCachedEmoji = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    cachedEmoji = _useState2[0],
+    setCachedEmoji = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inValidImage = _useState4[0],
-      setInvalidImage = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    inValidImage = _useState4[0],
+    setInvalidImage = _useState4[1];
   var _useEmoji = useEmoji(),
-      emojiProvider = _useEmoji.emojiProvider;
-
+    emojiProvider = _useEmoji.emojiProvider;
   var loadEmoji = useCallback(function (emojiProvider) {
     debug('Loading image via media cache', emoji.shortName);
     sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
@@ -101,7 +92,6 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
       loadEmoji(emojiProvider);
     }
   }, [emojiProvider, loadEmoji]);
-
   var handleLoadError = function handleLoadError(_emojiId) {
     sampledUfoRenderedEmoji(_emojiId).failure({
       metadata: {
@@ -112,7 +102,6 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
     });
     setInvalidImage(true);
   };
-
   if (cachedEmoji && !inValidImage) {
     return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
       showTooltip: showTooltip,
@@ -121,7 +110,6 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
       onLoadError: handleLoadError
     }));
   }
-
   return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
     size: fitToHeight || placeholderSize,
     shortName: shortName,

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

@@ -1,16 +1,16 @@
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import { emojiDeleteButton, deleteButton } from './styles';
+
 /**
  * Test id for wrapper Emoji delete button
  */
-
 export var RENDER_EMOJI_DELETE_BUTTON_TESTID = 'render-emoji-delete-button';
-
 var DeleteButton = function DeleteButton(props) {
   return jsx("span", {
     css: deleteButton,
@@ -28,5 +28,4 @@ var DeleteButton = function DeleteButton(props) {
     testId: "emoji-delete-button"
   }));
 };
-
 export default DeleteButton;

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

@@ -1,11 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { useEffect, useCallback } from 'react';
 import { jsx } from '@emotion/react';
@@ -20,85 +17,73 @@ import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperien
 import { isIntersectionObserverSupported } from '../../util/browser-support';
 import { useInView } from '../../util/useInView';
 import { hasUfoMarked } from '../../util/analytics/ufoExperiences';
-
 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;
+    onSelected = props.onSelected;
   event.preventDefault();
-
   if (onSelected && leftClick(event)) {
     onSelected(toEmojiId(emoji), emoji, event);
   }
 };
-
 var handleKeyPress = function handleKeyPress(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;
+    onSelected = props.onSelected;
   event.preventDefault();
-
   if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
     onSelected(toEmojiId(emoji), emoji, event);
   }
 };
-
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
-      onMouseMove = props.onMouseMove;
-
+    onMouseMove = props.onMouseMove;
   if (onMouseMove) {
     onMouseMove(toEmojiId(emoji), emoji, event);
   }
 };
-
 var handleDelete = function handleDelete(props, event) {
   var emoji = props.emoji,
-      onDelete = props.onDelete;
-
+    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)
+    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!
+};
+
+// 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,
-      showTooltip = props.showTooltip,
-      shouldBeInteractive = props.shouldBeInteractive;
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    shouldBeInteractive = props.shouldBeInteractive;
   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"),
@@ -107,16 +92,13 @@ export var SpriteEmoji = function SpriteEmoji(props) {
       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 jsx("span", {
     "data-testid": "sprite-emoji-".concat(emoji.shortName),
     "data-emoji-type": "sprite",
@@ -139,35 +121,33 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     className: emojiSprite,
     style: style
   }, "\xA0"));
-}; // Keep as pure functional component, see renderAsSprite.
+};
 
+// 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,
-      showTooltip = props.showTooltip,
-      showDelete = props.showDelete,
-      shouldBeInteractive = props.shouldBeInteractive,
-      onLoadSuccess = props.onLoadSuccess,
-      disableLazyLoad = props.disableLazyLoad,
-      autoWidth = props.autoWidth;
-
+    fitToHeight = props.fitToHeight,
+    selected = props.selected,
+    selectOnHover = props.selectOnHover,
+    className = props.className,
+    showTooltip = props.showTooltip,
+    showDelete = props.showDelete,
+    shouldBeInteractive = props.shouldBeInteractive,
+    onLoadSuccess = props.onLoadSuccess,
+    disableLazyLoad = props.disableLazyLoad,
+    autoWidth = props.autoWidth;
   var _useInView = useInView({
-    triggerOnce: true
-  }),
-      _useInView2 = _slicedToArray(_useInView, 2),
-      ref = _useInView2[0],
-      inView = _useInView2[1];
-
+      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 : '');
   var width;
   var height;
   var src;
   var representation = shouldUseAltRepresentation(emoji, fitToHeight) ? emoji.altRepresentation : emoji.representation;
-
   if (isImageRepresentation(representation)) {
     src = representation.imagePath;
     width = representation.width;
@@ -177,9 +157,7 @@ export var ImageEmoji = function ImageEmoji(props) {
     width = representation.width;
     height = representation.height;
   }
-
   var deleteButton;
-
   if (showDelete) {
     deleteButton = jsx(DeleteButton, {
       onClick: function onClick(event) {
@@ -187,9 +165,7 @@ export var ImageEmoji = function ImageEmoji(props) {
       }
     });
   }
-
   var sizing = {};
-
   if (fitToHeight && width && height) {
     // Presize image, to prevent reflow due to size changes after loading
     sizing = {
@@ -197,52 +173,45 @@ export var ImageEmoji = function ImageEmoji(props) {
       height: fitToHeight
     };
   }
-
   var onError = function onError(event) {
     handleImageError(props, event);
   };
-
   var onLoad = function onLoad() {
     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.
-
+    });
+    // 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
-
-
+    }
+    // onload_start
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_END)) {
       ufoExp.mark(UfoEmojiTimings.ONLOAD_END);
     }
-
     ufoExp.success({
       metadata: {
         IBSupported: isIntersectionObserverSupported
       }
     });
-
     if (onLoadSuccess) {
       onLoadSuccess(emoji);
     }
   };
-
   var onBeforeLoad = useCallback(function () {
     if (!hasUfoMarked(ufoExp, UfoEmojiTimings.ONLOAD_START)) {
       ufoExp.mark(UfoEmojiTimings.ONLOAD_START);
     }
-  }, [ufoExp]); // 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.
+  }, [ufoExp]);
 
+  // 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();
@@ -286,29 +255,26 @@ export var ImageEmoji = function ImageEmoji(props) {
   }, deleteButton, emojiNode);
 };
 export var Emoji = function Emoji(props) {
-  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji or CachingEmoji
-
+  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
-
+    }
+    // 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 jsx(SpriteEmoji, props);
   }
-
   return jsx(ImageEmoji, props);
 };
 export default Emoji;

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { Fragment, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -17,12 +16,14 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { addCustomEmoji, addCustomEmojiButton, emojiActionsWrapper, emojiPickerAddEmoji, emojiToneSelectorContainer } from './styles';
 import { emojiActionsContainerWithBottomShadow, emojiPickerFooter } from '../picker/styles';
 export var emojiActionsTestId = 'emoji-actions';
-export var uploadEmojiTestId = 'upload-emoji'; // Generic Type for the wrapped functional component
+export var uploadEmojiTestId = 'upload-emoji';
+
+// Generic Type for the wrapped functional component
 
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
-      uploadEnabled = props.uploadEnabled,
-      formatMessage = props.intl.formatMessage;
+    uploadEnabled = props.uploadEnabled,
+    formatMessage = props.intl.formatMessage;
   return jsx(Fragment, null, uploadEnabled && jsx("div", {
     css: addCustomEmoji,
     "data-testid": uploadEmojiTestId
@@ -39,26 +40,21 @@ var AddOwnEmoji = function AddOwnEmoji(props) {
     }, label);
   })));
 };
-
 var TonesWrapper = function TonesWrapper(props) {
   var toneEmoji = props.toneEmoji,
-      selectedTone = props.selectedTone,
-      intl = props.intl,
-      onToneSelected = props.onToneSelected,
-      onToneOpen = props.onToneOpen,
-      showToneSelector = props.showToneSelector;
+    selectedTone = props.selectedTone,
+    intl = props.intl,
+    onToneSelected = props.onToneSelected,
+    onToneOpen = props.onToneOpen,
+    showToneSelector = props.showToneSelector;
   var formatMessage = intl.formatMessage;
-
   if (!toneEmoji) {
     return null;
   }
-
   var previewEmoji = toneEmoji;
-
   if (selectedTone && previewEmoji.skinVariations) {
     previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
   }
-
   return jsx("div", {
     css: emojiToneSelectorContainer
   }, showToneSelector && jsx(ToneSelector, {
@@ -75,49 +71,40 @@ var TonesWrapper = function TonesWrapper(props) {
     })
   }));
 };
-
 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;
-
+    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;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showToneSelector = _useState2[0],
-      setShowToneSelector = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showToneSelector = _useState2[0],
+    setShowToneSelector = _useState2[1];
   var previewFooterClassnames = [emojiPickerFooter, emojiActionsContainerWithBottomShadow];
-
   var onToneOpenHandler = function onToneOpenHandler() {
     return setShowToneSelector(true);
   };
-
   var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
     setShowToneSelector(false);
-
     if (onToneSelected) {
       onToneSelected(toneValue);
     }
   };
-
   var onMouseLeaveHandler = function onMouseLeaveHandler() {
     if (showToneSelector && onToneSelectorCancelled) {
       onToneSelectorCancelled();
     }
-
     setShowToneSelector(false);
   };
-
   if (uploading) {
     return jsx("div", {
       css: previewFooterClassnames
@@ -129,7 +116,6 @@ export var EmojiActions = function EmojiActions(props) {
       initialUploadName: initialUploadName
     }));
   }
-
   if (emojiToDelete) {
     return jsx("div", {
       css: previewFooterClassnames
@@ -139,7 +125,6 @@ export var EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
-
   return jsx("div", {
     "data-testid": emojiActionsTestId,
     css: previewFooterClassnames,

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

@@ -4,31 +4,26 @@ import { jsx } from '@emotion/react';
 import { leftClick } from '../../util/mouse';
 import { emojiButton, hiddenToneButton } from './styles';
 import Emoji from './Emoji';
-
 var handleMouseDown = function handleMouseDown(props, event) {
   var onSelected = props.onSelected;
   event.preventDefault();
-
   if (onSelected && leftClick(event)) {
     onSelected();
   }
 };
-
 var handleKeyPress = function handleKeyPress(props, event) {
   var onSelected = props.onSelected;
-
   if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
     event.preventDefault();
     onSelected();
   }
 };
-
 export var EmojiButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var emoji = props.emoji,
-      selectOnHover = props.selectOnHover,
-      ariaLabelText = props.ariaLabelText,
-      ariaExpanded = props.ariaExpanded,
-      shouldHideButton = props.shouldHideButton;
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    ariaExpanded = props.ariaExpanded,
+    shouldHideButton = props.shouldHideButton;
   return jsx("button", {
     ref: ref,
     "aria-expanded": ariaExpanded,