@atlaskit/emoji 64.2.0 → 64.4.0

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
@@ -9,7 +11,7 @@ import Emoji from './Emoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import { UploadStatus } from './internal-types';
 import RetryableButton from './RetryableButton';
-import * as styles from './styles';
+import { bigEmojiPreview, cancelButton, emojiPreviewErrorMessage, uploadAddRow, uploadPreview, uploadPreviewFooter, uploadPreviewText } from './styles';
 
 class EmojiUploadPreview extends PureComponent {
   render() {
@@ -39,44 +41,42 @@ class EmojiUploadPreview extends PureComponent {
         },
         searchable: true
       };
-      emojiComponent = /*#__PURE__*/React.createElement(Emoji, {
+      emojiComponent = jsx(Emoji, {
         emoji: emoji
       });
     }
 
     const uploading = uploadStatus === UploadStatus.Uploading;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadPreviewFooter
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadPreview
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadPreviewText
-    }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiPreview, {
+    return jsx("div", {
+      css: uploadPreviewFooter
+    }, jsx("div", {
+      css: uploadPreview
+    }, jsx("div", {
+      css: uploadPreviewText
+    }, jsx("h5", null, jsx(FormattedMessage, messages.emojiPreviewTitle)), jsx(FormattedMessage, _extends({}, messages.emojiPreview, {
       values: {
         emoji: emojiComponent
       }
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: styles.bigEmojiPreview
-    }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadAddRow
-    }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-      className: styles.emojiPreviewErrorMessage,
+    }))), jsx("div", {
+      css: bigEmojiPreview
+    }, emojiComponent)), jsx("div", {
+      css: uploadAddRow
+    }, !uploading && errorMessage ? jsx(EmojiErrorMessage, {
+      messageStyles: emojiPreviewErrorMessage,
       message: errorMessage,
       tooltip: true
-    }) : null, /*#__PURE__*/React.createElement(RetryableButton, {
-      className: styles.uploadEmojiButton,
-      retryClassName: styles.uploadRetryButton,
+    }) : null, jsx(RetryableButton, {
       label: formatMessage(messages.addEmojiLabel),
       onSubmit: onAddEmoji,
       appearance: "primary",
       loading: uploading,
       error: !!errorMessage
-    }), /*#__PURE__*/React.createElement(AkButton, {
+    }), jsx(AkButton, {
       onClick: onUploadCancelled,
       appearance: "subtle",
       isDisabled: uploading,
-      className: styles.cancelButton
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel))));
+      css: cancelButton
+    }, jsx(FormattedMessage, messages.cancelLabel))));
   }
 
 }

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

@@ -1,4 +1,4 @@
-import { insertionFailed, insertionSucceeded } from '../../util/analytics';
+import { recordFailed, recordSucceeded, ufoExperiences } from '../../util/analytics';
 
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always
@@ -12,7 +12,14 @@ export const createRecordSelectionDefault = (provider, onSelect, fireAnalytics)
   return (emojiId, emoji, event) => {
     try {
       if (provider.recordSelection && emoji) {
-        provider.recordSelection(emoji).then(() => fireAnalytics && fireAnalytics(insertionSucceeded)).catch(() => fireAnalytics && fireAnalytics(insertionFailed));
+        ufoExperiences['emoji-selection-recorded'].start();
+        provider.recordSelection(emoji).then(() => {
+          fireAnalytics && fireAnalytics(recordSucceeded);
+          ufoExperiences['emoji-selection-recorded'].success();
+        }).catch(() => {
+          fireAnalytics && fireAnalytics(recordFailed);
+          ufoExperiences['emoji-selection-recorded'].failure();
+        });
       }
     } finally {
       if (onSelect) {

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { defaultEmojiHeight } from '../../util/constants';
+import { defaultEmojiHeight, SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI } from '../../util/constants';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import LoadingEmojiComponent from './LoadingEmojiComponent';
+import { sampledUfoRenderedEmoji, ufoExperiences } from '../../util/analytics';
+import { UfoErrorBoundary } from './UfoErrorBoundary';
 
 const resourcedEmojiModuleLoader = () => import(
 /* webpackChunkName:"@atlaskit-internal_resourcedEmojiComponent" */
@@ -12,12 +14,25 @@ const resourcedEmojiModuleLoader = () => import(
 const resourcedEmojiComponentLoader = () => resourcedEmojiModuleLoader().then(module => module.default);
 
 export default class ResourcedEmoji extends LoadingEmojiComponent {
-  constructor(...args) {
-    super(...args);
+  // state initialised with static component to prevent
+  // rerender when the module has already been loaded
+  constructor(props) {
+    super(props, {});
 
     _defineProperty(this, "state", {
       asyncLoadedComponent: ResourcedEmoji.AsyncLoadedComponent
     });
+
+    sampledUfoRenderedEmoji(props.emojiId).start({
+      samplingRate: SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+    });
+    ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
+      source: 'resourced-emoji'
+    });
+  }
+
+  componentWillUnmount() {
+    sampledUfoRenderedEmoji(this.props.emojiId).abort();
   }
 
   asyncLoadComponent() {
@@ -45,9 +60,11 @@ export default class ResourcedEmoji extends LoadingEmojiComponent {
       emojiProvider,
       ...otherProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(ResourcedEmojiComponent, _extends({}, otherProps, {
+    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+      experiences: [ufoExperiences['emoji-rendered'].getInstance(this.props.emojiId.id || this.props.emojiId.shortName)]
+    }, /*#__PURE__*/React.createElement(ResourcedEmojiComponent, _extends({}, otherProps, {
       emojiProvider: loadedEmojiProvider
-    }));
+    })));
   }
 
 }

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

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
+import { sampledUfoRenderedEmoji } from '../../util/analytics';
 export default class ResourcedEmojiComponent extends Component {
   constructor(props) {
     super(props);
@@ -18,6 +19,14 @@ export default class ResourcedEmojiComponent extends Component {
     };
   }
 
+  getChildContext() {
+    return {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+  }
+
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
 
@@ -32,7 +41,22 @@ export default class ResourcedEmojiComponent extends Component {
             emoji,
             loaded: true
           });
+
+          if (!emoji) {
+            // emoji is undefined
+            sampledUfoRenderedEmoji(emojiId).failure({
+              metadata: {
+                reason: 'failed to find'
+              }
+            });
+          }
         }
+      }).catch(() => {
+        sampledUfoRenderedEmoji(emojiId).failure({
+          metadata: {
+            reason: 'failed to load'
+          }
+        });
       });
     } else {
       // loaded
@@ -102,18 +126,15 @@ export default class ResourcedEmojiComponent extends Component {
       id,
       fallback
     } = this.props.emojiId;
-    const emojiContextValue = {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-    return /*#__PURE__*/React.createElement(EmojiContextProvider, {
-      emojiContextValue: emojiContextValue
-    }, /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", {
       "data-emoji-id": id,
       "data-emoji-short-name": shortName,
       "data-emoji-text": fallback || shortName
-    }, element));
+    }, element);
   }
 
-}
+}
+
+_defineProperty(ResourcedEmojiComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});

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

@@ -1,29 +1,29 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
-import React from 'react';
 import { Component } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { buttonSpinner, uploadEmojiButton, uploadRetryButton } from './styles';
 export default class RetryableButton extends Component {
   constructor(props) {
     super(props);
   }
 
   renderLoading() {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styles.buttonSpinner
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+    return jsx("span", {
+      css: buttonSpinner
+    }, jsx(Spinner, null));
   }
 
   renderRetry() {
     const {
       loading,
-      retryClassName,
       onSubmit
     } = this.props;
-    return loading ? this.renderLoading() : /*#__PURE__*/React.createElement(FormattedMessage, messages.retryLabel, retryLabel => /*#__PURE__*/React.createElement(AkButton, {
-      className: retryClassName,
+    return loading ? this.renderLoading() : jsx(FormattedMessage, messages.retryLabel, retryLabel => jsx(AkButton, {
+      css: uploadRetryButton,
       appearance: "warning",
       onClick: onSubmit
     }, retryLabel));
@@ -33,13 +33,12 @@ export default class RetryableButton extends Component {
     const {
       loading,
       error,
-      className,
       appearance,
       onSubmit,
       label
     } = this.props;
-    return error ? this.renderRetry() : loading ? this.renderLoading() : /*#__PURE__*/React.createElement(AkButton, {
-      className: className,
+    return error ? this.renderRetry() : loading ? this.renderLoading() : jsx(AkButton, {
+      css: uploadEmojiButton,
       appearance: appearance,
       onClick: onSubmit
     }, label);

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // FIXME - FAB-1732 looking at making a shared component for this
-import classNames from 'classnames';
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { findDOMNode } from 'react-dom';
 import * as styles from './styles';
@@ -59,17 +60,12 @@ export default class Scrollable extends PureComponent {
       maxHeight,
       onMouseLeave
     } = this.props;
-    const scrollableClasses = ['emoji-scrollable', styles.emojiScrollable];
-
-    if (className) {
-      scrollableClasses.push(className);
-    }
-
     const style = maxHeight ? {
       maxHeight
     } : {};
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(scrollableClasses),
+    return jsx("div", {
+      className: `emoji-scrollable ${className}`,
+      css: styles.emojiScrollable,
       onMouseLeave: onMouseLeave,
       onScroll: this.handleScroll,
       ref: this.handleRef,

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export class UfoErrorBoundary extends React.Component {
+  componentDidCatch() {
+    this.props.experiences.forEach(e => e.failure());
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}

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

@@ -1,16 +1,19 @@
 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) => {
   const startTime = Date.now();
   errorSetter(undefined);
 
   if (supportsUploadFeature(emojiProvider)) {
+    ufoExperiences['emoji-uploaded'].start();
     emojiProvider.uploadCustomEmoji(upload).then(emojiDescription => {
       fireAnalytics(uploadSucceededEvent({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
+      ufoExperiences['emoji-uploaded'].success();
     }).catch(err => {
       errorSetter(messages.emojiUploadFailed); // eslint-disable-next-line no-console
 
@@ -19,6 +22,7 @@ export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireA
         duration: Date.now() - startTime,
         reason: messages.emojiUploadFailed.defaultMessage
       }));
+      ufoExperiences['emoji-uploaded'].failure();
     });
   }
 };