@atlaskit/emoji 64.2.1 → 64.4.1

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -10,7 +13,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import * as styles from './styles';
+import { emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 const sanitizeName = name => {
@@ -54,15 +57,15 @@ class ChooseEmojiFile extends PureComponent {
     const disableChooser = !name;
     const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id'; // Note: FileChooser.accept does not work in Electron due to a bug: https://product-fabric.atlassian.net/browse/FS-1626
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiUpload
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadChooseFileMessage
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, message => /*#__PURE__*/React.createElement("h5", null, message))), /*#__PURE__*/React.createElement("div", {
-      className: styles.uploadChooseFileRow
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.uploadChooseFileEmojiName
-    }, /*#__PURE__*/React.createElement(TextField, {
+    return jsx("div", {
+      css: emojiUpload
+    }, jsx("div", {
+      css: uploadChooseFileMessage
+    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => jsx("h5", null, message))), jsx("div", {
+      css: uploadChooseFileRow
+    }, jsx("span", {
+      css: uploadChooseFileEmojiName
+    }, jsx(TextField, {
       placeholder: formatMessage(messages.emojiPlaceholder),
       "aria-label": formatMessage(messages.emojiNameAriaLabel),
       maxLength: maxNameLength,
@@ -71,22 +74,22 @@ class ChooseEmojiFile extends PureComponent {
       value: name,
       isCompact: true,
       autoFocus: true
-    })), /*#__PURE__*/React.createElement("span", {
-      className: styles.uploadChooseFileBrowse
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    })), jsx("span", {
+      css: uploadChooseFileBrowse
+    }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, screenReaderDescription => jsx(Fragment, null, jsx("span", {
       hidden: true,
       id: fileChooserButtonDescriptionId
-    }, screenReaderDescription), /*#__PURE__*/React.createElement(FileChooser, {
+    }, screenReaderDescription), jsx(FileChooser, {
       label: formatMessage(messages.emojiChooseFileTitle),
       onChange: onChooseFile,
       onClick: onClick,
       accept: "image/png,image/jpeg,image/gif",
       ariaDescribedBy: fileChooserButtonDescriptionId,
       isDisabled: disableChooser
-    }))))), /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiUploadBottom
-    }, !errorMessage ? /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-      className: styles.emojiChooseFileErrorMessage,
+    }))))), jsx("div", {
+      css: emojiUploadBottom
+    }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
+      messageStyles: emojiChooseFileErrorMessage,
       message: errorMessage
     })));
   }
@@ -269,7 +272,7 @@ export class EmojiUploadPicker extends PureComponent {
     };
 
     if (name && previewImage) {
-      return /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+      return jsx(EmojiUploadPreview, {
         errorMessage: errorMessage,
         name: name,
         onAddEmoji: this.onAddEmoji,
@@ -279,13 +282,13 @@ export class EmojiUploadPicker extends PureComponent {
       });
     }
 
-    return /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+    return jsx(ChooseEmojiFile, {
       name: name,
       onChooseFile: this.onChooseFile,
       onClick: this.props.onFileChooserClicked,
       onNameChange: this.onNameChange,
       onUploadCancelled: cancelUpload,
-      errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+      errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
       intl: intl
     });
   }

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/ResourcedEmojiComponent.js

@@ -1,11 +1,11 @@
 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) {
@@ -19,6 +19,14 @@ export default class ResourcedEmojiComponent extends Component {
     };
   }
 
+  getChildContext() {
+    return {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+  }
+
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
 
@@ -118,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/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();
     });
   }
 };