@atlaskit/emoji 64.7.0 → 65.1.0

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

@@ -2,13 +2,13 @@ import { supportsUploadFeature } from '../../api/EmojiResource';
 import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
 import { messages } from '../i18n';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) => {
+export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) => {
   const startTime = Date.now();
   errorSetter(undefined);
 
   if (supportsUploadFeature(emojiProvider)) {
     ufoExperiences['emoji-uploaded'].start();
-    emojiProvider.uploadCustomEmoji(upload).then(emojiDescription => {
+    emojiProvider.uploadCustomEmoji(upload, retry).then(emojiDescription => {
       fireAnalytics(uploadSucceededEvent({
         duration: Date.now() - startTime
       }));
@@ -22,7 +22,12 @@ export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireA
         duration: Date.now() - startTime,
         reason: messages.emojiUploadFailed.defaultMessage
       }));
-      ufoExperiences['emoji-uploaded'].failure();
+      ufoExperiences['emoji-uploaded'].failure({
+        metadata: {
+          source: 'UploadEmoji',
+          error: err
+        }
+      });
     });
   }
 };

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

@@ -1,9 +1,9 @@
-import { css } from '@emotion/core';
+import { css, keyframes } from '@emotion/core';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { N20, N200, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -31,7 +31,7 @@ export const emojiToneSelectorContainer = css({
   padding: '8px 10px 8px 0'
 });
 export const emojiStyles = css({
-  borderRadius: '5px',
+  borderRadius: `${borderRadius()}px`,
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -60,20 +60,41 @@ export const emojiContainer = css({
   [`.${emojiSprite}`]: {
     background: 'transparent no-repeat',
     display: 'inline-block',
-    verticalAlign: 'middle',
     minHeight: `${defaultEmojiHeight}px`,
-    minWidth: `${defaultEmojiHeight}px`
+    minWidth: `${defaultEmojiHeight}px`,
+    verticalAlign: 'middle'
   }
 });
 export const placeholder = 'emoji-common-placeholder';
 export const placeholderContainer = css({
-  // Ensure no vertical reflow
+  position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
   background: token('color.border', '#f7f7f7'),
-  borderRadius: '20%',
+  borderRadius: `${borderRadius()}px`,
+  overflow: 'hidden',
   verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  textAlign: 'center'
+});
+const easeSweep = keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+  to   {
+    transform: translateX(100%);
+  }
+`;
+export const placeholderContainerAnimated = css({
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    background: token('color.background.neutral', N20A),
+    height: '100%',
+    width: '100%',
+    animation: `${easeSweep} 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite`
+  }
 });
 export const emojiButton = css({
   backgroundColor: 'transparent',
@@ -87,7 +108,7 @@ export const emojiButton = css({
     padding: 0
   },
   '&>span': {
-    borderRadius: '5px',
+    borderRadius: `${borderRadius()}px`,
     padding: '8px',
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {

package/dist/es2019/components/picker/EmojiPickerComponent.js

@@ -81,6 +81,12 @@ export default class EmojiPickerComponent extends PureComponent {
       });
     });
 
+    _defineProperty(this, "onPreviewDisplayed", isDisplayed => {
+      this.setState({
+        isPreviewDisplayed: isDisplayed
+      });
+    });
+
     _defineProperty(this, "onFileChooserClicked", () => {
       this.fireAnalytics(selectedFileEvent());
     });
@@ -247,7 +253,7 @@ export default class EmojiPickerComponent extends PureComponent {
         this.scrollToEndOfList();
       };
 
-      uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, this.fireAnalytics);
+      uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, this.fireAnalytics, retry);
     });
 
     _defineProperty(this, "onTriggerDelete", (_emojiId, emoji) => {
@@ -353,18 +359,19 @@ export default class EmojiPickerComponent extends PureComponent {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false
+      uploading: false,
+      isPreviewDisplayed: false
     };
     this.openTime = 0;
   }
 
   UNSAFE_componentWillMount() {
+    ufoExperiences['emoji-picker-opened'].success();
     this.openTime = Date.now();
     this.fireAnalytics(openedPickerEvent());
   }
 
   componentDidMount() {
-    ufoExperiences['emoji-picker-opened'].success();
     const {
       emojiProvider,
       hideToneSelector
@@ -399,8 +406,18 @@ export default class EmojiPickerComponent extends PureComponent {
     this.fireAnalytics(closedPickerEvent({
       duration: this.calculateElapsedTime()
     }));
-    ufoExperiences['emoji-picker-opened'].abort();
-    ufoExperiences['emoji-searched'].abort();
+    ufoExperiences['emoji-picker-opened'].abort({
+      metadata: {
+        source: 'EmojiPickerComponent',
+        reason: 'unmount'
+      }
+    });
+    ufoExperiences['emoji-searched'].abort({
+      metadata: {
+        source: 'EmojiPickerComponent',
+        reason: 'unmount'
+      }
+    });
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -515,7 +532,8 @@ export default class EmojiPickerComponent extends PureComponent {
       emojiToDelete,
       uploading,
       uploadErrorMessage,
-      uploadSupported
+      uploadSupported,
+      isPreviewDisplayed
     } = this.state;
     const recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, analytic => this.fireAnalytics(analytic('picker')));
     const formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
@@ -527,7 +545,7 @@ export default class EmojiPickerComponent extends PureComponent {
     const picker = jsx(LegacyEmojiContextProvider, {
       emojiContextValue: emojiContextValue
     }, jsx("div", {
-      css: emojiPicker,
+      css: emojiPicker(isPreviewDisplayed),
       ref: this.handlePickerRef,
       "data-emoji-picker-container": true
     }, jsx(CategorySelector, {
@@ -563,7 +581,8 @@ export default class EmojiPickerComponent extends PureComponent {
       onOpenUpload: this.onOpenUpload
     }), jsx(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
-      isUploading: uploading
+      isUploading: uploading,
+      onPreviewDisplayed: this.onPreviewDisplayed
     })));
     return picker;
   }

package/dist/es2019/components/picker/EmojiPickerFooter.js

@@ -12,9 +12,11 @@ export default class EmojiPickerFooter extends PureComponent {
     const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
     if (!selectedEmoji || isUploading) {
+      this.props.onPreviewDisplayed(false);
       return null;
     }
 
+    this.props.onPreviewDisplayed(true);
     return jsx("div", {
       css: previewFooterClassnames
     }, selectedEmoji && jsx(EmojiPreviewComponent, {

package/dist/es2019/components/picker/styles.js

@@ -3,22 +3,24 @@ import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
-import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
+import { emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerWidth } from '../../util/constants';
 import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export const emojiPicker = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  background: token('elevation.surface.overlay', 'white'),
-  border: `${emojiPickerBorderColor} 1px solid`,
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: emojiPickerBoxShadow,
-  height: `${emojiPickerHeight}px`,
-  width: `${emojiPickerWidth}px`,
-  marginBottom: '8px',
-  minWidth: `${emojiPickerWidth}px`
-}); // Level 2
+export const emojiPicker = hasPreview => {
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    background: token('elevation.surface.overlay', 'white'),
+    border: `${emojiPickerBorderColor} 1px solid`,
+    borderRadius: `${borderRadius()}px`,
+    boxShadow: emojiPickerBoxShadow,
+    height: `${hasPreview ? emojiPickerHeightWithPreview : emojiPickerHeight}px`,
+    width: `${emojiPickerWidth}px`,
+    marginBottom: '8px',
+    minWidth: `${emojiPickerWidth}px`
+  });
+}; // Level 2
 /// Category Selector
 
 export const addButton = 'emoji-picker-add-button';

package/dist/es2019/components/typeahead/EmojiTypeAheadComponent.js

@@ -172,8 +172,24 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       this.fireAnalyticsEvent(typeaheadCancelledEvent(Date.now() - this.openTime, query, emojis));
     }
 
-    ufoExperiences['emoji-searched'].abort();
-    ufoExperiences['emoji-selection-recorded'].abort();
+    ufoExperiences['emoji-searched'].abort({
+      metadata: {
+        source: 'EmojiTypeAheadComponent',
+        reason: 'unmount',
+        data: {
+          query
+        }
+      }
+    });
+    ufoExperiences['emoji-selection-recorded'].abort({
+      metadata: {
+        source: 'EmojiTypeAheadComponent',
+        reason: 'unmount',
+        data: {
+          query
+        }
+      }
+    });
     this.sessionId = uuid();
     this.selected = false;
   }

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -32,7 +32,7 @@ export default class EmojiUploadComponent extends PureComponent {
         });
       };
 
-      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics);
+      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics, retry);
     });
 
     _defineProperty(this, "prepareForUpload", () => {
@@ -84,7 +84,12 @@ export default class EmojiUploadComponent extends PureComponent {
   }
 
   componentWillUnmount() {
-    ufoExperiences['emoji-uploaded'].abort();
+    ufoExperiences['emoji-uploaded'].abort({
+      metadata: {
+        source: 'EmojiUploadComponent',
+        reason: 'unmount'
+      }
+    });
   }
 
   render() {

package/dist/es2019/context/EmojiContextProvider.js

@@ -1,10 +1,18 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import { EmojiContext } from './EmojiContext';
 export const EmojiContextProvider = ({
   children,
   emojiContextValue
 }) => {
   const memoizedEmojiContextValue = useMemo(() => emojiContextValue, [emojiContextValue]);
+  useEffect(() => {
+    // trigger emoji fetching
+    async function fetchEmojiProvider() {
+      await (memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.fetchEmojiProvider());
+    }
+
+    fetchEmojiProvider();
+  }, [memoizedEmojiContextValue]);
   return /*#__PURE__*/React.createElement(EmojiContext.Provider, {
     value: memoizedEmojiContextValue
   }, children);

package/dist/es2019/hooks/index.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/dist/es2019/index.js

@@ -6,19 +6,20 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
+import { EmojiImage } from './components/common/EmojiImage';
 export { // renaming exports to prevent breaking changes due to renaming
-commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage } from './components/common/styles';
+commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage, placeholder as emojiPlaceholder } from './components/common/styles';
 import EmojiResource from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
 export { // Classes
-AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, // functions
-denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, // Constants
+AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, // functions
+denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums
 SearchSort, UfoExperienceName, UfoComponentName } from './types';

package/dist/es2019/types.js

@@ -42,6 +42,7 @@ export let ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
+  ProviderTypes["SINGLE"] = "SINGLE";
 })(ProviderTypes || (ProviderTypes = {}));
 
 export let UfoExperienceName;
@@ -66,6 +67,7 @@ export let UfoComponentName;
 export let UfoEmojiTimingsKeys;
 
 (function (UfoEmojiTimingsKeys) {
+  UfoEmojiTimingsKeys["FMP"] = "fmp";
   UfoEmojiTimingsKeys["MOUNTED"] = "emoji-mount";
   UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
   UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
@@ -75,6 +77,7 @@ export let UfoEmojiTimingsKeys;
 export let UfoEmojiTimings;
 
 (function (UfoEmojiTimings) {
+  UfoEmojiTimings["FMP_END"] = "fmp";
   UfoEmojiTimings["MOUNTED_END"] = "emoji-mount_end";
   UfoEmojiTimings["METADATA_START"] = "emoji-metadata_start";
   UfoEmojiTimings["METADATA_END"] = "emoji-metadata_end";

package/dist/es2019/util/analytics/samplingUfo.js

@@ -42,7 +42,6 @@ const hasSampledFromStart = experience => {
 
   return ufoExperiencesSampled[experience.id].sampled;
 };
-
 /**
  * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
  *
@@ -50,6 +49,8 @@ const hasSampledFromStart = experience => {
  * @param ufoExperience
  * @returns
  */
+
+
 export const withSampling = ufoExperience => {
   const init = () => {
     if (!ufoExperiencesSampled[ufoExperience.id]) {
@@ -110,6 +111,14 @@ export const withSampling = ufoExperience => {
     return ufoExperience.abort(config);
   };
 
+  const addMetadata = data => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.addMetadata(data);
+  };
+
   const mark = (name, timestamp) => {
     if (!hasSampledFromStart(ufoExperience)) {
       return;
@@ -137,6 +146,7 @@ export const withSampling = ufoExperience => {
   init();
   return { ...ufoExperience,
     start,
+    addMetadata,
     success,
     failure,
     abort,

package/dist/es2019/util/analytics/ufoExperiences.js

@@ -23,8 +23,8 @@ const createInlineExperience = componentName => {
 };
 
 const customEmojiTimings = [{
-  key: UfoEmojiTimingsKeys.MOUNTED,
-  endMark: UfoEmojiTimings.MOUNTED_END
+  key: UfoEmojiTimingsKeys.FMP,
+  endMark: UfoEmojiTimings.FMP_END
 }, {
   key: UfoEmojiTimingsKeys.METADATA,
   component: 'resourced-emoji',
@@ -35,6 +35,10 @@ const customEmojiTimings = [{
   component: 'caching-emoji',
   startMark: UfoEmojiTimings.MEDIA_START,
   endMark: UfoEmojiTimings.MEDIA_END
+}, {
+  key: UfoEmojiTimingsKeys.MOUNTED,
+  component: 'emoji',
+  endMark: UfoEmojiTimings.MOUNTED_END
 }, {
   key: UfoEmojiTimingsKeys.ONLOAD,
   startMark: UfoEmojiTimings.ONLOAD_START,
@@ -57,4 +61,10 @@ export const ufoExperiences = {
 };
 export const sampledUfoRenderedEmoji = emojiId => {
   return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};
+export const hasUfoMarked = (ufoExperience, name) => {
+  return ufoExperience.metrics.marks.some(mask => mask.name === name);
+};
+export const sampledUfoEmojiResourceFetched = providerType => {
+  return withSampling(ufoExperiences['emoji-resource-fetched'].getInstance(providerType));
 };

package/dist/es2019/util/analytics/useSampledUFOComponentExperience.js

@@ -30,8 +30,9 @@ export const useSampledUFOComponentExperience = (experience, samplingRate, metad
     withSampling(experience).start({
       samplingRate
     });
+    const isMetadataEmpty = Object.keys(experience.metadata).length === 0;
 
-    if (metadata) {
+    if (metadata && isMetadataEmpty) {
       experience.addMetadata(metadata);
     }
   });

package/dist/es2019/util/browser-support.js

@@ -1 +1 @@
-export const isIntersectionObserverSupported = typeof window === 'undefined' ? false : !!window.IntersectionObserver;
+export const isIntersectionObserverSupported = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;

package/dist/es2019/util/constants.js

@@ -14,6 +14,7 @@ export const MAX_ORDINAL = 100000;
 export const defaultEmojiHeight = 20;
 export const emojiPickerWidth = 350;
 export const emojiPickerHeight = 295;
+export const emojiPickerHeightWithPreview = 348;
 export const localStoragePrefix = 'fabric.emoji';
 export const selectedToneStorageKey = `${localStoragePrefix}.selectedTone`;
 export const defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
@@ -21,6 +22,6 @@ export const defaultListLimit = 50;
 export const migrationUserId = 'hipchat_migration_emoticons';
 export const analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker'; // This is the base sampling rate in Emoji
 
-export const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in ResourceEmoji which will be used in stead of base sampling rate above
+export const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in fetching emoji resource
 
-export const SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1; // add more sampling rate in parent components like EmojiTypeAheadItem.
+export const SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = 0.01;

package/dist/es2019/util/useInView.js

@@ -0,0 +1,12 @@
+import { useInView as useInViewLib } from 'react-intersection-observer';
+import { isIntersectionObserverSupported } from './browser-support';
+export const useInView = options => {
+  const hookResult = useInViewLib(options);
+
+  if (!isIntersectionObserverSupported) {
+    // Unsupported, return no `ref` and default `inView` true value
+    return [undefined, true];
+  }
+
+  return hookResult;
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.7.0",
+	"version": "65.1.0",
 	"sideEffects": false
 }