@atlaskit/emoji 64.2.0 → 64.4.0

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

@@ -1,10 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import React from 'react';
+import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
-import * as styles from './styles';
+import { emojiPicker } from './styles';
+import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 
 const emojiPickerModuleLoader = () => import(
 /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */
@@ -21,6 +25,8 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
     _defineProperty(this, "state", {
       asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
     });
+
+    ufoExperiences['emoji-picker-opened'].start();
   }
 
   asyncLoadComponent() {
@@ -39,8 +45,9 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       }
     };
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiPicker,
+    ufoExperiences['emoji-picker-opened'].markFMP();
+    return jsx("div", {
+      css: emojiPicker,
       ref: handlePickerRef
     }, item.renderItem());
   }
@@ -50,9 +57,11 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       emojiProvider,
       ...otherProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(EmojiPickerComponent, _extends({
+    return jsx(UfoErrorBoundary, {
+      experiences: [ufoExperiences['emoji-picker-opened']]
+    }, jsx(EmojiPickerComponent, _extends({
       emojiProvider: loadedEmojiProvider
-    }, otherProps));
+    }, otherProps)));
   }
 
 }

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

@@ -1,10 +1,10 @@
-import classnames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { emojiCategoryTitle } from './styles';
 export default class EmojiPickerCategoryHeading extends PureComponent {
   render() {
     const {
@@ -12,13 +12,13 @@ export default class EmojiPickerCategoryHeading extends PureComponent {
       title,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       id: id,
       "data-category-id": id,
-      className: classnames(className)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiCategoryTitle
-    }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
+      className: className
+    }, jsx("div", {
+      css: emojiCategoryTitle
+    }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
   }
 
 }

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import classNames from 'classnames';
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -16,9 +18,8 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
-import * as styles from './styles';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent } from '../../util/analytics';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
+import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
+import { emojiPicker } from './styles';
 const FREQUENTLY_USED_MAX = 16;
 export default class EmojiPickerComponent extends PureComponent {
   constructor(props) {
@@ -105,9 +106,19 @@ export default class EmojiPickerComponent extends PureComponent {
     });
 
     _defineProperty(this, "onSearch", query => {
-      this.updateEmojis(query, {
+      const options = {
         skinTone: this.state.selectedTone
-      });
+      };
+
+      if (query !== this.state.query) {
+        ufoExperiences['emoji-searched'].start();
+        ufoExperiences['emoji-searched'].addMetadata({
+          queryLength: query.length,
+          source: 'picker'
+        });
+      }
+
+      this.updateEmojis(query, options);
     });
 
     _defineProperty(this, "onSearchResult", searchResults => {
@@ -120,6 +131,11 @@ export default class EmojiPickerComponent extends PureComponent {
           queryLength: searchQuery.length,
           numMatches: emojiToRender.length
         }));
+        ufoExperiences['emoji-searched'].success({
+          metadata: {
+            emojisLength: emojiToRender.length
+          }
+        });
       }
 
       this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
@@ -338,12 +354,21 @@ export default class EmojiPickerComponent extends PureComponent {
     this.openTime = 0;
   }
 
+  getChildContext() {
+    return {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+  }
+
   UNSAFE_componentWillMount() {
     this.openTime = Date.now();
     this.fireAnalytics(openedPickerEvent());
   }
 
   componentDidMount() {
+    ufoExperiences['emoji-picker-opened'].success();
     const {
       emojiProvider,
       hideToneSelector
@@ -378,6 +403,9 @@ export default class EmojiPickerComponent extends PureComponent {
     this.fireAnalytics(closedPickerEvent({
       duration: this.calculateElapsedTime()
     }));
+    ufoExperiences['emoji-picker-opened'].abort();
+    ufoExperiences['emoji-searched'].abort();
+    ufoExperiences['emoji-selection-recorded'].abort();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -495,25 +523,17 @@ export default class EmojiPickerComponent extends PureComponent {
       uploadSupported
     } = this.state;
     const recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, analytic => this.fireAnalytics(analytic('picker')));
-    const formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-    const classes = [styles.emojiPicker];
-    const emojiContextValue = {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-    const picker = /*#__PURE__*/React.createElement(EmojiContextProvider, {
-      emojiContextValue: emojiContextValue
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(classes),
+    const formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+    const picker = jsx("div", {
+      css: emojiPicker,
       ref: this.handlePickerRef,
       "data-emoji-picker-container": true
-    }, /*#__PURE__*/React.createElement(CategorySelector, {
+    }, jsx(CategorySelector, {
       activeCategoryId: activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: this.onCategorySelected
-    }), /*#__PURE__*/React.createElement(EmojiPickerList, {
+    }), jsx(EmojiPickerList, {
       emojis: filteredEmojis,
       currentUser: emojiProvider.getCurrentUser(),
       onEmojiSelected: recordUsageOnSelection,
@@ -539,15 +559,19 @@ export default class EmojiPickerComponent extends PureComponent {
       onCloseDelete: this.onCloseDelete,
       onFileChooserClicked: this.onFileChooserClicked,
       onOpenUpload: this.onOpenUpload
-    }), /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+    }), jsx(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
       isUploading: uploading
-    })));
+    }));
     return picker;
   }
 
 }
 
+_defineProperty(EmojiPickerComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiPickerComponent, "defaultProps", {
   onSelection: () => {}
 });

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

@@ -1,7 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
-import * as styles from './styles';
 import CachingEmoji from '../common/CachingEmoji';
+import { emojiItem, emojiPickerRow } from './styles';
 export default class EmojiPickerEmojiRow extends PureComponent {
   render() {
     const {
@@ -12,18 +13,18 @@ export default class EmojiPickerEmojiRow extends PureComponent {
       showDelete,
       onDelete
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiPickerRow
+    return jsx("div", {
+      css: emojiPickerRow
     }, emojis.map(emoji => {
       const {
         shortName,
         id
       } = emoji;
       const key = id ? `${id}-${title}` : `${shortName}-${title}`;
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.emojiItem,
+      return jsx("span", {
+        css: emojiItem,
         key: key
-      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      }, jsx(CachingEmoji, {
         emoji: emoji,
         selectOnHover: true,
         onSelected: onSelected,

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

@@ -1,23 +1,23 @@
-import classNames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
-import * as styles from './styles';
-import EmojiPickerPreview from './EmojiPickerPreview';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
 export default class EmojiPickerFooter extends PureComponent {
   render() {
     const {
       selectedEmoji,
       isUploading
     } = this.props;
-    const previewFooterClassnames = classNames([styles.emojiPickerFooter, styles.emojiPickerFooterWithTopShadow]);
+    const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
     if (!selectedEmoji || isUploading) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: previewFooterClassnames
-    }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
+    return jsx("div", {
+      css: previewFooterClassnames
+    }, selectedEmoji && jsx(EmojiPreviewComponent, {
       emoji: selectedEmoji
     }));
   }

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import classNames from 'classnames';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { List as VirtualList } from 'react-virtualized/dist/commonjs/List';
@@ -8,8 +11,8 @@ import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import * as styles from './styles';
 import EmojiActions from '../common/EmojiActions';
+import { emojiPickerList, virtualList } from './styles';
 const categoryClassname = 'emoji-category';
 
 const byOrder = (orderableA, orderableB) => (orderableA.order || 0) - (orderableB.order || 0);
@@ -195,6 +198,16 @@ export default class EmojiPickerVirtualList extends PureComponent {
     this.buildVirtualItems(_props, this.state);
   }
 
+  getChildContext() {
+    const {
+      emoji
+    } = this.context;
+    return {
+      emoji: { ...emoji
+      }
+    };
+  }
+
   UNSAFE_componentWillUpdate(nextProps, nextState) {
     if (this.props.emojis !== nextProps.emojis || this.props.selectedTone !== nextProps.selectedTone || this.props.loading !== nextProps.loading || this.props.query !== nextProps.query) {
       if (!nextProps.query) {
@@ -239,11 +252,10 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onFileChooserClicked,
       onOpenUpload
     } = this.props;
-    const classes = [styles.emojiPickerList];
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       ref: "root",
-      className: classNames(classes)
-    }, /*#__PURE__*/React.createElement(EmojiActions, {
+      css: emojiPickerList
+    }, jsx(EmojiActions, {
       selectedTone: selectedTone,
       onToneSelected: onToneSelected,
       onToneSelectorCancelled: onToneSelectorCancelled,
@@ -261,7 +273,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onOpenUpload: onOpenUpload,
       query: query,
       onChange: this.onSearch
-    }), /*#__PURE__*/React.createElement(VirtualList, {
+    }), jsx(VirtualList, {
       ref: "list",
       height: sizes.listHeight,
       overscanRowCount: 5,
@@ -270,13 +282,21 @@ export default class EmojiPickerVirtualList extends PureComponent {
       rowRenderer: this.renderRow,
       scrollToAlignment: "start",
       width: sizes.listWidth,
-      className: styles.virtualList,
+      css: virtualList,
       onRowsRendered: this.checkCategoryIdChange
     }));
   }
 
 }
 
+_defineProperty(EmojiPickerVirtualList, "contextTypes", {
+  emoji: PropTypes.object
+});
+
+_defineProperty(EmojiPickerVirtualList, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: () => {},
   onEmojiActive: () => {},

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

@@ -1,10 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React, { PureComponent } from 'react';
 import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { input, pickerSearch, searchIcon } from './styles';
 
 class EmojiPickerListSearch extends PureComponent {
   constructor(...args) {
@@ -83,12 +86,12 @@ class EmojiPickerListSearch extends PureComponent {
     const {
       formatMessage
     } = intl;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.pickerSearch,
+    return jsx("div", {
+      css: pickerSearch,
       style: style
-    }, /*#__PURE__*/React.createElement(TextField, {
+    }, jsx(TextField, {
       "aria-label": formatMessage(messages.searchLabel),
-      className: styles.input,
+      css: input,
       autoComplete: "off",
       name: "search",
       placeholder: `${formatMessage(messages.searchPlaceholder)}...`,
@@ -97,9 +100,9 @@ class EmojiPickerListSearch extends PureComponent {
       ref: this.handleInputRef,
       isCompact: true,
       onBlur: this.onBlur,
-      elemBeforeInput: /*#__PURE__*/React.createElement("span", {
-        className: styles.searchIcon
-      }, /*#__PURE__*/React.createElement(SearchIcon, {
+      elemBeforeInput: jsx("span", {
+        css: searchIcon
+      }, jsx(SearchIcon, {
         label: ""
       }))
     }));

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

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import React from 'react';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
 import { sizes } from './EmojiPickerSizes';
-import * as styles from './styles';
+import { emojiPickerSpinner } from './styles';
 export class AbstractItem {
   constructor(props, height) {
     this.props = props;
@@ -16,7 +18,7 @@ export class EmojisRowItem extends AbstractItem {
   constructor(props) {
     super(props, sizes.emojiRowHeight);
 
-    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerEmojiRow, this.props));
+    _defineProperty(this, "renderItem", () => jsx(EmojiPickerEmojiRow, this.props));
   }
 
 }
@@ -24,9 +26,9 @@ export class LoadingItem extends AbstractItem {
   constructor() {
     super({}, sizes.loadingRowHeight);
 
-    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement("div", {
-      className: styles.emojiPickerSpinner
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Spinner, {
+    _defineProperty(this, "renderItem", () => jsx("div", {
+      css: emojiPickerSpinner
+    }, jsx("div", null, jsx(Spinner, {
       size: "medium"
     }))));
   }
@@ -36,7 +38,7 @@ export class CategoryHeadingItem extends AbstractItem {
   constructor(props) {
     super(props, sizes.categoryHeadingHeight);
 
-    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, this.props));
+    _defineProperty(this, "renderItem", () => jsx(EmojiPickerCategoryHeading, this.props));
   }
 
 }
@@ -51,7 +53,7 @@ export const virtualItemRenderer = (rows, context) => {
     style
   } = context;
   const row = rows[index];
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     style: style,
     key: key
   }, row.renderItem(context));