@atlaskit/emoji 71.17.0 → 72.0.0

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

@@ -2,34 +2,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
+import React, { useEffect, useContext, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { defaultEmojiHeight, deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-import { isImageRepresentation, isMediaRepresentation, isSpriteRepresentation, isUnicodeRepresentation, toEmojiId } from '../../util/type-helpers';
 import { ProviderTypes, UfoEmojiTimings } from '../../types';
-import { leftClick } from '../../util/mouse';
-import DeleteButton from './DeleteButton';
-import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles, emojiSprite, emojiMainStyle, emojiImage, deletableEmoji } from './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 './DeletableEmojiTooltipContent';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { getDocument } from '@atlaskit/browser-apis';
+import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { useSampledUFOComponentExperience } from '../../util/analytics/useSampledUFOComponentExperience';
+import { deleteEmojiLabel, EMOJI_KEYBOARD_KEYS_SUPPORTED, KeyboardKeys, SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isSpriteRepresentation } from '../../util/is-sprite-representation';
+import { isUnicodeRepresentation } from '../../util/is-unicode-representation';
+import { leftClick } from '../../util/left-click';
+import { toEmojiId } from '../../util/to-emoji-id';
 import { messages } from '../i18n';
-import { isSSR } from '../../util/is-ssr';
-import { renderUnicodeEmojiToImagePath } from '../../util/renderUnicodeEmojiToImagePath';
-import EmojiPlaceholder from './EmojiPlaceholder';
+import { handleDelete } from './handleDelete';
+import { ImageEmoji } from './ImageEmoji';
+import { SpriteEmoji } from './SpriteEmoji';
+import { UnicodeEmoji } from './UnicodeEmoji';
 const emojiSpriteContainer = null;
 const emojiImageContainer = null;
 
 // Unicode emojis render as text inside a <span>, not an <img>, so they do not need
 // borderRadius (which would clip a background on hover) or the img { display: block } rule.
 const emojiUnicodeContainer = null;
-const unicodeEmojiCanvasSize = 128;
+export const unicodeEmojiCanvasSize = 128;
 const handleMouseDown = (props, event) => {
   // Clicked emoji delete button
   if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
@@ -82,341 +80,6 @@ const handleFocus = (props, event) => {
     onFocus(toEmojiId(emoji), emoji, event);
   }
 };
-const handleDelete = (props, event) => {
-  const {
-    emoji,
-    onDelete
-  } = props;
-  if (onDelete) {
-    onDelete(toEmojiId(emoji), emoji, event);
-  }
-};
-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);
-  }
-};
-
-// 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
-    }))
-  );
-};
-const useUnicodeEmojiImage = unicodeEmoji => {
-  const [state, setState] = useState({
-    status: 'loading'
-  });
-  useEffect(() => {
-    let cancelled = false;
-    let imagePathToRevoke;
-    setState({
-      status: 'loading',
-      unicodeEmoji
-    });
-    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(imagePath => {
-      if (cancelled) {
-        if (imagePath) {
-          URL.revokeObjectURL(imagePath);
-        }
-        return;
-      }
-      imagePathToRevoke = imagePath;
-      setState(imagePath ? {
-        status: 'ready',
-        unicodeEmoji,
-        imagePath
-      } : {
-        status: 'failed',
-        unicodeEmoji
-      });
-    }).catch(() => {
-      if (!cancelled) {
-        setState({
-          status: 'failed',
-          unicodeEmoji
-        });
-      }
-    });
-    return () => {
-      cancelled = true;
-      if (imagePathToRevoke) {
-        URL.revokeObjectURL(imagePathToRevoke);
-      }
-    };
-  }, [unicodeEmoji]);
-  return state;
-};
-const UnicodeEmojiImage = props => {
-  const {
-    emoji,
-    fitToHeight,
-    showTooltip
-  } = props;
-  const emojiText = emoji.representation.unicodeEmoji;
-  const unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
-  const hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
-  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
-    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-      shortName: emoji.shortName,
-      showTooltip: showTooltip,
-      size: fitToHeight,
-      loading: true
-    });
-  }
-  if (unicodeEmojiImage.status === 'ready') {
-    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
-      emoji: {
-        ...emoji,
-        altRepresentation: undefined,
-        representation: {
-          imagePath: unicodeEmojiImage.imagePath,
-          width: unicodeEmojiCanvasSize,
-          height: unicodeEmojiCanvasSize
-        }
-      }
-    }));
-  }
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    shortName: emoji.shortName,
-    showTooltip: showTooltip,
-    size: fitToHeight
-  });
-};
-export const UnicodeEmoji = props => {
-  const {
-    emoji,
-    selected,
-    selectOnHover,
-    className,
-    fitToHeight,
-    renderUnicodeEmojiAsImage = true
-  } = props;
-  if (renderUnicodeEmojiAsImage) {
-    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
-  }
-  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
-  const emojiText = emoji.representation.unicodeEmoji;
-  const defaultSize = `${fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight}px`;
-  const emojiSize = `var(--emoji-common-unicode-size, ${defaultSize})`;
-  const style = {
-    display: 'inline-flex',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: emojiSize,
-    alignItems: 'center',
-    aspectRatio: '1/1'
-  };
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    React.createElement(EmojiNodeWrapper, _extends({}, props, {
-      type: "unicode",
-      className: classes
-    }), /*#__PURE__*/React.createElement("span", {
-      style: style
-    }, emojiText))
-  );
-};
-
-// Keep as pure functional component, see renderAsSprite.
-export const ImageEmoji = props => {
-  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({
-    //@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-${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)
-  );
-};
 export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   var _emoji$name;
   const {

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

@@ -5,8 +5,6 @@
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
-._18u019bv{margin-left:10px}
-._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
@@ -15,9 +13,7 @@
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1pbydx66{z-index:9999}
-._1wpz1h6o{align-self:center}
 ._1xi2idpf{right:0}
-._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
@@ -28,7 +24,5 @@
 ._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
-._otyr19bv{margin-bottom:10px}
-._p12f3sup{max-width:285px}
 ._u5f312x7{padding-right:var(--ds-space-075,6px)}
 ._u5f319bv{padding-right:10px}

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

@@ -3,37 +3,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./EmojiActions.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback, useEffect } from 'react';
+import { useState, useRef, memo, useLayoutEffect, useCallback, useEffect } from 'react';
+import { injectIntl } from 'react-intl';
 import { fg } from '@atlaskit/platform-feature-flags';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { DEFAULT_TONE } from '../../util/constants';
+import { messages } from '../i18n';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
+import { AddOwnEmoji } from './AddOwnEmoji';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
-import TonePreviewButton from './TonePreviewButton';
-import ToneSelector from './ToneSelector';
+import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
 import ProductivityColorSelector, { productivityColorSelectorId } from './ProductivityColorSelector';
-import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
-import { messages } from '../i18n';
-import AkButton from '@atlaskit/button/standard-button';
-import AddIcon from '@atlaskit/icon/core/add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
-import { emojiPickerAddEmoji } from './styles';
-import { DEFAULT_TONE } from '../../util/constants';
-import { Box } from '@atlaskit/primitives/compiled';
-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 styles = {
-  icon: "_18u0r5cr _2hwx1i6y"
-};
-const addCustomEmoji = null;
-const addCustomEmojiButton = null;
+import TonePreviewButton from './TonePreviewButton';
+import ToneSelector from './ToneSelector';
 const emojiActionsWrapper = null;
 const emojiToneSelectorContainer = null;
 const productivityColorPopup = null;
@@ -97,43 +80,6 @@ const ProductivityColorPopupContent = ({
 };
 export const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
-
-// Generic Type for the wrapped functional component
-
-export const AddOwnEmoji = props => {
-  const {
-    onOpenUpload,
-    uploadEnabled
-  } = props;
-  const handleOpenUpload = useCallback(event => {
-    if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    onOpenUpload();
-  }, [onOpenUpload]);
-  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, label => /*#__PURE__*/React.createElement(AkButton, {
-    onClick: handleOpenUpload,
-    iconBefore: /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.icon
-    }, /*#__PURE__*/React.createElement(AddIcon, {
-      color: "currentColor",
-      label: ""
-    })),
-    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/design-system/no-unsafe-style-overrides
-    ,
-
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
-    className: ax(["_p12f3sup", emojiPickerAddEmoji]),
-    tabIndex: 0,
-    id: "add-custom-emoji"
-  }, label))));
-};
 const TonesWrapper = props => {
   const {
     activeCategoryId,

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

@@ -1,12 +1,13 @@
 /* EmojiPlaceholder.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
 import "./EmojiPlaceholder.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { defaultEmojiHeight, defaultDenseEmojiHeight } from '../../util/constants';
+import { emojiPlaceholderTestId } from './emojiPlaceholderTestId';
 import { placeholder } from './styles';
 const placeholderContainer = null;
-export const emojiPlaceholderTestId = shortName => `emoji-placeholder-${shortName}`;
 const EmojiPlaceholder = props => {
   const {
     shortName,
@@ -51,4 +52,9 @@ const EmojiPlaceholder = props => {
     title: showTooltip ? shortName : ''
   });
 };
-export default EmojiPlaceholder;
+export default EmojiPlaceholder;
+
+/**
+ * @deprecated Use `import { emojiPlaceholderTestId } from '@atlaskit/emoji/emoji-placeholder'` instead.
+ */
+export { emojiPlaceholderTestId } from './emojiPlaceholderTestId';