@atlaskit/emoji 71.17.1 → 72.0.0

package/dist/es2019/api/media/MediaEmojiCache.js

@@ -1,121 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { convertMediaToImageEmoji, isMediaRepresentation, isPromise } from '../../util/type-helpers';
-import MediaImageLoader from './MediaImageLoader';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import { isPromise } from '../../util/is-promise';
 import debug from '../../util/logger';
-import { LRUMap } from 'lru_map';
-const getRequiredRepresentation = (emoji, useAlt) => useAlt ? emoji.altRepresentation : emoji.representation;
-const isUnsupportedBrowser = () => {
-  const isIE = /*@cc_on!@*/false || !!document.documentMode; // Internet Explorer 6-11
-  const isEdge = !isIE && !!window.StyleMedia; // Edge 20+
+import { BrowserCacheStrategy } from './BrowserCacheStrategy';
+import { getRequiredRepresentation } from './getRequiredRepresentation';
+import MediaImageLoader from './MediaImageLoader';
+import { MemoryCacheStrategy } from './MemoryCacheStrategy';
+export const maxImageCached = 1000;
 
-  return isIE || isEdge;
-};
-/**
- * For browsers that support caching for resources
- * regardless of originally supplied headers (basically everything but Firefox).
- */
-export class BrowserCacheStrategy {
-  constructor(mediaImageLoader) {
-    _defineProperty(this, "cachedImageUrls", new Set());
-    debug('BrowserCacheStrategy');
-    this.mediaImageLoader = mediaImageLoader;
-  }
-  loadEmoji(emoji, useAlt) {
-    const representation = getRequiredRepresentation(emoji, useAlt);
-    if (!isMediaRepresentation(representation)) {
-      return emoji;
-    }
-    const {
-      mediaPath
-    } = representation;
-    if (this.cachedImageUrls.has(mediaPath)) {
-      // Already cached
-      return emoji;
-    }
-    return this.mediaImageLoader.loadMediaImage(mediaPath).then(() => {
-      // Media is loaded, can use original URL now, so just return original emoji
-      this.cachedImageUrls.add(mediaPath);
-      return emoji;
-    }).catch(() => {
-      return undefined;
-    });
-  }
-  optimisticRendering() {
-    return true;
-  }
-  static supported(mediaPath, mediaImageLoader) {
-    // IE/Edge uses memory cache strategy else images can fail to load
-    // from a clean cache/if they are downloaded from the service
-    // TODO: fix as a part of FS-1592
-    if (isUnsupportedBrowser()) {
-      return Promise.resolve(false);
-    }
-    return mediaImageLoader.loadMediaImage(mediaPath).then(() =>
-    // Image should be cached in browser, if supported it should be accessible from the cache by an <img/>
-    // Try to load without via image to confirm this support (this fails in Firefox)
-    new Promise(resolve => {
-      const img = new Image();
-      img.addEventListener('load', () => {
-        resolve(true);
-      });
-      img.addEventListener('error', () => {
-        resolve(false);
-      });
-      img.src = mediaPath;
-    })).catch(() => false);
-  }
-}
-const maxImageCached = 1000;
 // Don't cache images large than this - dataUrl size in characters
-const maxImageSize = 10000;
-
-/**
- * For browsers that do no cache images without equivalent headers (e.g. Firefox).
- *
- * Images are cached in memory in a LRU cache. Images considered too large,
- * are not cached, but retrieved each time.
- *
- * Images are still cached by the browser, but loading in asynchronous with
- * small delay noticable to the end user.
- */
-export class MemoryCacheStrategy {
-  constructor(mediaImageLoader) {
-    debug('MemoryCacheStrategy');
-    this.mediaImageLoader = mediaImageLoader;
-    this.dataURLCache = new LRUMap(maxImageCached);
-  }
-  loadEmoji(emoji, useAlt) {
-    const representation = getRequiredRepresentation(emoji, useAlt);
-    if (!isMediaRepresentation(representation)) {
-      return emoji;
-    }
-    const {
-      mediaPath
-    } = representation;
-    const dataURL = this.dataURLCache.get(mediaPath);
-    if (dataURL) {
-      // Already cached
-      return convertMediaToImageEmoji(emoji, dataURL, useAlt);
-    }
-
-    // Not cached, load
-    return this.mediaImageLoader.loadMediaImage(mediaPath).then(dataURL => {
-      const loadedEmoji = convertMediaToImageEmoji(emoji, dataURL, useAlt);
-      if (dataURL.length <= maxImageSize) {
-        // Only cache if not large than max size
-        this.dataURLCache.set(mediaPath, dataURL);
-      } else {
-        debug('No caching as image is too large', dataURL.length, dataURL.slice(0, 15), emoji.shortName);
-      }
-      return loadedEmoji;
-    }).catch(() => {
-      return undefined;
-    });
-  }
-  optimisticRendering() {
-    return false;
-  }
-}
+export const maxImageSize = 10000;
 
 /**
  * Provides a cache for Media Emoji.

package/dist/es2019/api/media/MemoryCacheStrategy.js

@@ -0,0 +1,54 @@
+import { LRUMap } from 'lru_map';
+import { convertMediaToImageEmoji } from '../../util/convert-media-to-image-emoji';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import debug from '../../util/logger';
+import { maxImageCached, maxImageSize } from './MediaEmojiCache';
+import { getRequiredRepresentation } from './getRequiredRepresentation';
+
+/**
+ * For browsers that do no cache images without equivalent headers (e.g. Firefox).
+ *
+ * Images are cached in memory in a LRU cache. Images considered too large,
+ * are not cached, but retrieved each time.
+ *
+ * Images are still cached by the browser, but loading in asynchronous with
+ * small delay noticable to the end user.
+ */
+export class MemoryCacheStrategy {
+  constructor(mediaImageLoader) {
+    debug('MemoryCacheStrategy');
+    this.mediaImageLoader = mediaImageLoader;
+    this.dataURLCache = new LRUMap(maxImageCached);
+  }
+  loadEmoji(emoji, useAlt) {
+    const representation = getRequiredRepresentation(emoji, useAlt);
+    if (!isMediaRepresentation(representation)) {
+      return emoji;
+    }
+    const {
+      mediaPath
+    } = representation;
+    const dataURL = this.dataURLCache.get(mediaPath);
+    if (dataURL) {
+      // Already cached
+      return convertMediaToImageEmoji(emoji, dataURL, useAlt);
+    }
+
+    // Not cached, load
+    return this.mediaImageLoader.loadMediaImage(mediaPath).then(dataURL => {
+      const loadedEmoji = convertMediaToImageEmoji(emoji, dataURL, useAlt);
+      if (dataURL.length <= maxImageSize) {
+        // Only cache if not large than max size
+        this.dataURLCache.set(mediaPath, dataURL);
+      } else {
+        debug('No caching as image is too large', dataURL.length, dataURL.slice(0, 15), emoji.shortName);
+      }
+      return loadedEmoji;
+    }).catch(() => {
+      return undefined;
+    });
+  }
+  optimisticRendering() {
+    return false;
+  }
+}

package/dist/es2019/api/media/SiteEmojiResource.js

@@ -1,12 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { utils as serviceUtils } from '@atlaskit/util-service-support';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { buildEmojiDescriptionWithAltRepresentation, isMediaRepresentation, isMediaEmoji, convertImageToMediaRepresentation, isLoadedMediaEmoji } from '../../util/type-helpers';
+import { utils as serviceUtils } from '@atlaskit/util-service-support';
+import { buildEmojiDescriptionWithAltRepresentation } from '../../util/build-emoji-description-with-alt-representation';
+import { convertImageToMediaRepresentation } from '../../util/convert-image-to-media-representation';
+import { isLoadedMediaEmoji } from '../../util/is-loaded-media-emoji';
+import { isMediaEmoji } from '../../util/is-media-emoji';
+import { isMediaRepresentation } from '../../util/is-media-representation';
+import debug from '../../util/logger';
+import { denormaliseEmojiServiceResponse } from '../denormaliseEmojiServiceResponse';
+import { emojiRequest } from '../emojiRequest';
+import { getAltRepresentation } from '../getAltRepresentation';
 import MediaEmojiCache from './MediaEmojiCache';
-import { denormaliseEmojiServiceResponse, emojiRequest, getAltRepresentation } from '../EmojiUtils';
 import TokenManager from './TokenManager';
-import debug from '../../util/logger';
 // Assume media is 95% of total upload time.
 export const mediaProportionOfProgress = 95 / 100;
 export default class SiteEmojiResource {

package/dist/es2019/api/media/getRequiredRepresentation.js

@@ -0,0 +1 @@
+export const getRequiredRepresentation = (emoji, useAlt) => useAlt ? emoji.altRepresentation : emoji.representation;

package/dist/es2019/api/shouldUseAltRepresentation.js

@@ -0,0 +1,3 @@
+import { getPixelRatio } from './getPixelRatio';
+const getHeight = fitToHeight => getPixelRatio() > 1 ? fitToHeight * 2 : fitToHeight;
+export const shouldUseAltRepresentation = (emoji, fitToHeight) => !!(fitToHeight && emoji.altRepresentation && emoji.representation && 'height' in emoji.representation && getHeight(fitToHeight) > emoji.representation.height);

package/dist/es2019/api/supportsUploadFeature.js

@@ -0,0 +1,11 @@
+/**
+ * Checks if the emojiProvider can support uploading at a feature level.
+ *
+ * Follow this up with an isUploadSupported() check to see if the provider is actually
+ * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
+ */
+export const supportsUploadFeature = emojiProvider => {
+  const emojiUploadProvider = emojiProvider;
+  return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
+};

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

@@ -0,0 +1,6 @@
+._18u019bv{margin-left:10px}
+._18u0r5cr{margin-left:var(--ds-space-negative-050,-4px)}
+._1wpz1h6o{align-self:center}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._otyr19bv{margin-bottom:10px}
+._p12f3sup{max-width:285px}

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

@@ -0,0 +1,53 @@
+/* AddOwnEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./AddOwnEmoji.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import AkButton from '@atlaskit/button/standard-button';
+import AddIcon from '@atlaskit/icon/core/add';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import { messages } from '../i18n';
+import { uploadEmojiTestId } from './EmojiActions';
+import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
+import { emojiPickerAddEmoji } from './styles';
+const styles = {
+  icon: "_18u0r5cr _2hwx1i6y"
+};
+const addCustomEmoji = null;
+const addCustomEmojiButton = null;
+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))));
+};

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

@@ -1,18 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useEffect, useState } from 'react';
-import { isMediaEmoji } from '../../util/type-helpers';
-import { UfoEmojiTimings } from '../../types';
-import debug from '../../util/logger';
+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 { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { isMediaEmoji } from '../../util/is-media-emoji';
+import { CachingMediaEmoji } from './CachingMediaEmoji';
 import Emoji from './Emoji';
-import EmojiPlaceholder from './EmojiPlaceholder';
 import EmojiFallback from './EmojiFallback';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
-import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
-import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
-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.
  */
@@ -69,79 +66,5 @@ const StandardEmoji = props => {
     onLoadError: handleLoadError
   }, restProps));
 };
-
-/**
- * Rendering a media emoji image from a cache for media emoji, with different
- * rendering paths depending on caching strategy.
- */
-export const CachingMediaEmoji = props => {
-  const {
-    emoji,
-    placeholderSize,
-    showTooltip,
-    fitToHeight,
-    children,
-    ...restProps
-  } = props;
-  const {
-    shortName,
-    representation
-  } = emoji;
-  const [cachedEmoji, setCachedEmoji] = useState();
-  const [inValidImage, setInvalidImage] = useState(false);
-  const {
-    emojiProvider
-  } = useEmoji();
-  const loadEmoji = useCallback(emojiProvider => {
-    debug('Loading image via media cache', emoji.shortName);
-    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
-    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
-      setCachedEmoji(cachedEmoji);
-      setInvalidImage(false);
-      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
-    }).catch(error => {
-      setCachedEmoji(undefined);
-      setInvalidImage(true);
-      sampledUfoRenderedEmoji(emoji).failure({
-        metadata: {
-          error: extractErrorInfo(error),
-          reason: 'failed to load media emoji',
-          source: 'CachingMediaEmoji',
-          emojiId: emoji.id
-        }
-      });
-    });
-  }, [emoji]);
-  useEffect(() => {
-    if (emojiProvider) {
-      loadEmoji(emojiProvider);
-    }
-  }, [emojiProvider, loadEmoji]);
-  const handleLoadError = _emojiId => {
-    sampledUfoRenderedEmoji(_emojiId).failure({
-      metadata: {
-        reason: 'load error',
-        source: 'CachingMediaEmoji',
-        emojiId: _emojiId.id
-      }
-    });
-    setInvalidImage(true);
-  };
-  if (cachedEmoji && !inValidImage) {
-    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
-      showTooltip: showTooltip,
-      fitToHeight: fitToHeight,
-      emoji: cachedEmoji,
-      onLoadError: handleLoadError
-    }));
-  }
-  const imageRepresentation = representation && 'height' in representation ? representation : undefined;
-  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
-    size: fitToHeight || placeholderSize,
-    shortName: shortName,
-    showTooltip: showTooltip,
-    representation: imageRepresentation
-  });
-};
 const _default_1 = /*#__PURE__*/memo(CachingEmoji);
 export default _default_1;

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

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import { useEmoji } from '../../hooks/useEmoji';
+import { UfoEmojiTimings } from '../../types';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
+import { sampledUfoRenderedEmoji } from '../../util/analytics/sampledUfoRenderedEmoji';
+import debug from '../../util/logger';
+import Emoji from './Emoji';
+import EmojiPlaceholder from './EmojiPlaceholder';
+
+/**
+ * Rendering a media emoji image from a cache for media emoji, with different
+ * rendering paths depending on caching strategy.
+ */
+export const CachingMediaEmoji = props => {
+  const {
+    emoji,
+    placeholderSize,
+    showTooltip,
+    fitToHeight,
+    children,
+    ...restProps
+  } = props;
+  const {
+    shortName,
+    representation
+  } = emoji;
+  const [cachedEmoji, setCachedEmoji] = useState();
+  const [inValidImage, setInvalidImage] = useState(false);
+  const {
+    emojiProvider
+  } = useEmoji();
+  const loadEmoji = useCallback(emojiProvider => {
+    debug('Loading image via media cache', emoji.shortName);
+    sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_START);
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
+      setCachedEmoji(cachedEmoji);
+      setInvalidImage(false);
+      sampledUfoRenderedEmoji(emoji).mark(UfoEmojiTimings.MEDIA_END);
+    }).catch(error => {
+      setCachedEmoji(undefined);
+      setInvalidImage(true);
+      sampledUfoRenderedEmoji(emoji).failure({
+        metadata: {
+          error: extractErrorInfo(error),
+          reason: 'failed to load media emoji',
+          source: 'CachingMediaEmoji',
+          emojiId: emoji.id
+        }
+      });
+    });
+  }, [emoji]);
+  useEffect(() => {
+    if (emojiProvider) {
+      loadEmoji(emojiProvider);
+    }
+  }, [emojiProvider, loadEmoji]);
+  const handleLoadError = _emojiId => {
+    sampledUfoRenderedEmoji(_emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'CachingMediaEmoji',
+        emojiId: _emojiId.id
+      }
+    });
+    setInvalidImage(true);
+  };
+  if (cachedEmoji && !inValidImage) {
+    return /*#__PURE__*/React.createElement(Emoji, _extends({}, restProps, {
+      showTooltip: showTooltip,
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
+  }
+  const imageRepresentation = representation && 'height' in representation ? representation : undefined;
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: imageRepresentation
+  });
+};

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

@@ -11,7 +11,9 @@ import { RovoIcon } from '@atlaskit/logo';
 import { Text } from '@atlaskit/primitives/compiled';
 import { generateEmojiImage } from '../../api/ai/generateEmojiImage';
 import { slugifyPrompt } from '../../util/ai-emoji';
-import { aiGenerationStartedEvent, aiGenerationCompletedEvent, aiGenerationFailedEvent } from '../../util/analytics';
+import { aiGenerationCompletedEvent } from '../../util/analytics/aiGenerationCompletedEvent';
+import { aiGenerationFailedEvent } from '../../util/analytics/aiGenerationFailedEvent';
+import { aiGenerationStartedEvent } from '../../util/analytics/aiGenerationStartedEvent';
 import { messages } from '../i18n';
 import EmojiErrorMessage from './EmojiErrorMessage';
 export const createEmojiWithRovoTestId = 'create-emoji-with-rovo';

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

@@ -1,10 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { backspace } from '../../util/keymaps';
 import { messages } from '../i18n';
 import { ToolTipContentWithKeymap } from './ToolTipContentWithKeymap';
-import { backspace } from '../../util/keymaps';
-import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 export const DeletableEmojiTooltipContent = () => {
   const {
     formatMessage
@@ -13,15 +11,4 @@ export const DeletableEmojiTooltipContent = () => {
     description: formatMessage(messages.deleteEmojiTooltip),
     keymap: backspace
   });
-};
-export const DeletableEmojiTooltipContentForScreenReader = ({
-  emoji
-}) => {
-  return /*#__PURE__*/React.createElement(VisuallyHidden, {
-    id: `screenreader-emoji-${emoji.id}`
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiTooltipForScreenreader, {
-    values: {
-      shortName: emoji.shortName
-    }
-  })));
 };

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

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
+import { messages } from '../i18n';
+export const DeletableEmojiTooltipContentForScreenReader = ({
+  emoji
+}) => {
+  return /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: `screenreader-emoji-${emoji.id}`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiTooltipForScreenreader, {
+    values: {
+      shortName: emoji.shortName
+    }
+  })));
+};