@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -1,40 +1,37 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { memo } from 'react';
 import CachingEmoji from '../common/CachingEmoji';
 import { emojiItem, emojiPickerRow } from './styles';
-export default class EmojiPickerEmojiRow extends PureComponent {
-  render() {
-    const {
-      emojis,
-      onSelected,
-      onMouseMove,
-      title,
-      showDelete,
-      onDelete
-    } = this.props;
-    return jsx("div", {
-      css: emojiPickerRow
-    }, emojis.map(emoji => {
-      const {
-        shortName,
-        id
-      } = emoji;
-      const key = id ? `${id}-${title}` : `${shortName}-${title}`;
-      return jsx("span", {
-        css: emojiItem,
-        key: key
-      }, jsx(CachingEmoji, {
-        emoji: emoji,
-        selectOnHover: true,
-        onSelected: onSelected,
-        onMouseMove: onMouseMove,
-        showDelete: showDelete,
-        onDelete: onDelete,
-        placeholderSize: 24,
-        shouldBeInteractive: true
-      }));
-    }));
-  }
 
-}
+const EmojiPickerEmojiRow = ({
+  emojis,
+  onSelected,
+  onMouseMove,
+  title,
+  showDelete,
+  onDelete
+}) => jsx("div", {
+  css: emojiPickerRow
+}, emojis.map(emoji => {
+  const {
+    shortName,
+    id
+  } = emoji;
+  const key = id ? `${id}-${title}` : `${shortName}-${title}`;
+  return jsx("span", {
+    css: emojiItem,
+    key: key
+  }, jsx(CachingEmoji, {
+    emoji: emoji,
+    selectOnHover: true,
+    onSelected: onSelected,
+    onMouseMove: onMouseMove,
+    showDelete: showDelete,
+    onDelete: onDelete,
+    placeholderSize: 24,
+    shouldBeInteractive: true
+  }));
+}));
+
+export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

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

@@ -1,25 +1,17 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { memo } from 'react';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
-export default class EmojiPickerFooter extends PureComponent {
-  render() {
-    const {
-      selectedEmoji,
-      isUploading
-    } = this.props;
-    const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
+const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
-    if (!selectedEmoji || isUploading) {
-      return null;
-    }
+const EmojiPickerFooter = ({
+  selectedEmoji
+}) => jsx("div", {
+  css: previewFooterClassnames,
+  "data-testid": "emoji-picker-footer"
+}, selectedEmoji && jsx(EmojiPreviewComponent, {
+  emoji: selectedEmoji
+}));
 
-    return jsx("div", {
-      css: previewFooterClassnames
-    }, selectedEmoji && jsx(EmojiPreviewComponent, {
-      emoji: selectedEmoji
-    }));
-  }
-
-}
+export default /*#__PURE__*/memo(EmojiPickerFooter);

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/uploader/EmojiUploadComponent.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
+import { useState, memo, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
@@ -10,105 +8,97 @@ import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { emojiUploadFooter, emojiUploadWidget } from './styles';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-export default class EmojiUploadComponent extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "onUploadEmoji", (upload, retry) => {
-      const {
-        emojiProvider
-      } = this.props;
-      ufoExperiences['emoji-uploaded'].start();
-      ufoExperiences['emoji-uploaded'].addMetadata({
-        retry
-      });
-      this.fireAnalytics(uploadConfirmButton({
-        retry
-      }));
-
-      const errorSetter = message => {
-        this.setState({
-          uploadErrorMessage: message
-        });
-      };
-
-      uploadEmoji(upload, emojiProvider, errorSetter, this.prepareForUpload, this.fireAnalytics, retry);
-    });
-
-    _defineProperty(this, "prepareForUpload", () => {
-      const {
-        emojiProvider
-      } = this.props;
-
-      if (supportsUploadFeature(emojiProvider)) {
-        emojiProvider.prepareForUpload();
-      }
-
-      this.setState({
-        uploadErrorMessage: undefined
-      });
-
-      if (this.ref) {
-        this.ref.clearUploadPicker();
+import { messages } from '../i18n';
+
+const EmojiUploadComponent = props => {
+  const {
+    emojiProvider,
+    createAnalyticsEvent,
+    onUploaderRef
+  } = props;
+  const [uploadErrorMessage, setUploadErrorMessage] = useState();
+  useEffect(() => {
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
+  }, [emojiProvider]);
+  useEffect(() => () => {
+    ufoExperiences['emoji-uploaded'].abort({
+      metadata: {
+        source: 'EmojiUploadComponent',
+        reason: 'unmount'
       }
     });
+  }, []);
 
-    _defineProperty(this, "onFileChooserClicked", () => {
-      this.fireAnalytics(selectedFileEvent());
+  const onUploadEmoji = async (upload, retry, onSuccessHandler) => {
+    ufoExperiences['emoji-uploaded'].start();
+    ufoExperiences['emoji-uploaded'].addMetadata({
+      retry
     });
 
-    _defineProperty(this, "onUploadCancelled", () => {
-      this.fireAnalytics(uploadCancelButton());
-      this.prepareForUpload();
-    });
+    if (supportsUploadFeature(emojiProvider)) {
+      fireAnalytics(uploadConfirmButton({
+        retry
+      }));
 
-    _defineProperty(this, "onUploaderRef", emojiUploadPicker => {
-      this.ref = emojiUploadPicker;
-    });
+      try {
+        await emojiProvider.prepareForUpload();
 
-    _defineProperty(this, "fireAnalytics", analyticsEvent => {
-      const {
-        createAnalyticsEvent
-      } = this.props;
+        const errorSetter = message => {
+          setUploadErrorMessage(message);
+        }; // internally handled error from upload callback
 
-      if (createAnalyticsEvent) {
-        createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
-      }
-    });
 
-    if (supportsUploadFeature(props.emojiProvider)) {
-      props.emojiProvider.prepareForUpload();
+        uploadEmoji(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
+      } catch (error) {
+        // error from upload token generation
+        const message = error instanceof Error ? error.message : 'Issue with generating upload token';
+        ufoExperiences['emoji-uploaded'].failure({
+          metadata: {
+            source: 'EmojiUploadComponent',
+            error: message
+          }
+        });
+        setUploadErrorMessage(messages.emojiUploadFailed);
+      }
     }
+  };
 
-    this.state = {};
-  }
+  const onUploaded = onSuccessHandler => () => {
+    setUploadErrorMessage(undefined);
 
-  componentWillUnmount() {
-    ufoExperiences['emoji-uploaded'].abort({
-      metadata: {
-        source: 'EmojiUploadComponent',
-        reason: 'unmount'
-      }
-    });
-  }
+    if (onSuccessHandler) {
+      onSuccessHandler();
+    }
+  };
 
-  render() {
-    const {
-      uploadErrorMessage
-    } = this.state;
-    const errorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
-    return jsx("div", {
-      css: emojiUploadWidget,
-      ref: this.props.onUploaderRef
-    }, jsx("div", {
-      css: emojiUploadFooter
-    }, jsx(EmojiUploadPickerWithIntl, {
-      ref: this.onUploaderRef,
-      onFileChooserClicked: this.onFileChooserClicked,
-      onUploadCancelled: this.onUploadCancelled,
-      onUploadEmoji: this.onUploadEmoji,
-      errorMessage: errorMessage
-    })));
-  }
+  const onFileChooserClicked = () => {
+    fireAnalytics(selectedFileEvent());
+  };
 
-}
+  const onUploadCancelled = () => {
+    fireAnalytics(uploadCancelButton());
+    onUploaded();
+  };
+
+  const fireAnalytics = analyticsEvent => {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
+    }
+  };
+
+  return jsx("div", {
+    css: emojiUploadWidget,
+    ref: onUploaderRef
+  }, jsx("div", {
+    css: emojiUploadFooter
+  }, jsx(EmojiUploadPickerWithIntl, {
+    onFileChooserClicked: onFileChooserClicked,
+    onUploadCancelled: onUploadCancelled,
+    onUploadEmoji: onUploadEmoji,
+    errorMessage: uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null
+  })));
+};
+
+export default /*#__PURE__*/memo(EmojiUploadComponent);

package/dist/es2019/hooks/useEmojiContext.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { EmojiContext } from '../context/EmojiContext';
+export const useEmojiContext = () => useContext(EmojiContext);

package/dist/es2019/hooks/usePrevious.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

@@ -17,8 +17,11 @@ import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
 import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
+import { useEmojiContext } from './hooks/useEmojiContext';
+import { EmojiContextProvider } from './context/EmojiContextProvider';
 export { // Classes
-AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, // functions
+AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, EmojiImage, ResourcedEmoji, EmojiContextProvider, // hooks,
+useEmojiContext, // functions
 denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, withSampling, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums

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'];

package/dist/es2019/version.json

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