@atlaskit/emoji 64.2.1 → 64.3.0

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

@@ -1,24 +1,25 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import React from 'react';
 import { PureComponent } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 export default class EmojiErrorMessage extends PureComponent {
   renderWithTooltip() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-    }, /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx("div", {
+      css: this.props.messageStyles
+    }, jsx(Tooltip, {
       content: this.props.message,
       position: "top"
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    }, jsx(ErrorIcon, {
       label: "Error",
       size: "medium"
     })));
   }
 
   renderInline() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    return jsx("div", {
+      css: this.props.messageStyles
+    }, jsx(ErrorIcon, {
       label: "Error",
       size: "small"
     }), " ", this.props.message);

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
@@ -31,13 +31,10 @@ const EmojiPlaceholder = props => {
     width: `${width}px`,
     height: `${height}px`
   };
-  const classes = {
-    [placeholder]: true,
-    [placeholderContainer]: true
-  };
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     "aria-label": shortName,
-    className: classNames(classes),
+    className: placeholder,
+    css: placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -1,16 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
-import classNames from 'classnames';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import CachingEmoji from '../../components/common/CachingEmoji';
 import EmojiButton from '../../components/common/EmojiButton';
 import { messages } from '../i18n';
-import * as styles from './styles';
 import ToneSelector from './ToneSelector';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiPreview, toneSelectorContainer } from './styles';
+import { EmojiPreviewComponent } from './EmojiPreviewComponent';
 export class EmojiPreview extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -73,13 +74,13 @@ export class EmojiPreview extends PureComponent {
       previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.toneSelectorContainer
-    }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+    return jsx("div", {
+      className: toneSelectorContainer
+    }, this.state.selectingTone && jsx(ToneSelector, {
       emoji: toneEmoji,
       onToneSelected: this.onToneSelected,
       previewEmojiId: previewEmoji.id
-    }), /*#__PURE__*/React.createElement(EmojiButton, {
+    }), jsx(EmojiButton, {
       ariaExpanded: this.state.selectingTone,
       emoji: previewEmoji,
       selectOnHover: true,
@@ -103,26 +104,9 @@ export class EmojiPreview extends PureComponent {
       return null;
     }
 
-    const previewClasses = classNames({
-      [styles.preview]: true
-    });
-    const previewTextClasses = classNames({
-      [styles.previewText]: true,
-      [styles.previewSingleLine]: !emoji.name
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: previewClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.previewImg
-    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    return jsx(EmojiPreviewComponent, {
       emoji: emoji
-    })), /*#__PURE__*/React.createElement("div", {
-      className: previewTextClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.name
-    }, emoji.name), /*#__PURE__*/React.createElement("span", {
-      className: styles.shortName
-    }, emoji.shortName)));
+    });
   } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
 
 
@@ -143,23 +127,23 @@ export class EmojiPreview extends PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.AddCustomEmoji
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
+    return jsx("div", {
+      css: addCustomEmoji
+    }, jsx(FormattedMessage, messages.addCustomEmojiLabel, label => jsx(AkButton, {
       onClick: onOpenUpload,
-      iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+      iconBefore: jsx(AddIcon, {
         label: formatMessage(messages.addCustomEmojiLabel),
         size: "small"
       }),
       appearance: "subtle",
-      className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+      css: addCustomEmojiButton,
+      className: emojiPickerAddEmoji
     }, label)));
   }
 
   render() {
-    const sectionClasses = classNames([styles.emojiPreview, styles.emojiPreviewSection]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: sectionClasses,
+    return jsx("div", {
+      css: emojiPreview,
       onMouseLeave: this.onMouseLeave
     }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
   }

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import CachingEmoji from './CachingEmoji';
+import { emojiName, emojiShortName, preview, previewImg, previewText } from './styles';
+export const EmojiPreviewComponent = ({
+  emoji
+}) => {
+  return jsx("div", {
+    css: preview
+  }, jsx("span", {
+    css: previewImg
+  }, jsx(CachingEmoji, {
+    emoji: emoji
+  })), jsx("div", {
+    css: previewText
+  }, emoji.name && jsx("div", {
+    css: emojiName
+  }, emoji.name), jsx("div", {
+    css: emojiShortName
+  }, emoji.shortName)));
+};

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/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,