@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/esm/components/uploader/EmojiUploadComponent.js

@@ -10,15 +10,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import classNames from 'classnames';
-import * as styles from './styles';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
+import { emojiUploadFooter, emojiUploadWidget } from './styles';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 
 var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiUploadComponent, _PureComponent);
@@ -34,6 +35,10 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "onUploadEmoji", function (upload, retry) {
       var emojiProvider = _this.props.emojiProvider;
+      ufoExperiences['emoji-uploaded'].start();
+      ufoExperiences['emoji-uploaded'].addMetadata({
+        retry: retry
+      });
 
       _this.fireAnalytics(uploadConfirmButton({
         retry: retry
@@ -95,16 +100,21 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(EmojiUploadComponent, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      ufoExperiences['emoji-uploaded'].abort();
+    }
+  }, {
     key: "render",
     value: function render() {
       var uploadErrorMessage = this.state.uploadErrorMessage;
-      var errorMessage = uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.emojiUploadWidget]),
+      var errorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+      return jsx("div", {
+        css: emojiUploadWidget,
         ref: this.props.onUploaderRef
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.emojiUploadFooter])
-      }, /*#__PURE__*/React.createElement(EmojiUploadPickerWithIntl, {
+      }, jsx("div", {
+        css: emojiUploadFooter
+      }, jsx(EmojiUploadPickerWithIntl, {
         ref: this.onUploaderRef,
         onFileChooserClicked: this.onFileChooserClicked,
         onUploadCancelled: this.onUploadCancelled,

package/dist/esm/components/uploader/styles.js

@@ -1,8 +1,8 @@
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
-import { emojiPickerWidth } from '../../util/constants'; // Uploader
+import { emojiPickerWidth } from '../../util/constants';
+import { css } from '@emotion/core'; // Uploader
 
-export var emojiUploadWidget = style({
+export var emojiUploadWidget = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -16,6 +16,6 @@ export var emojiUploadWidget = style({
   marginTop: '-16px'
 }); /// Footer
 
-export var emojiUploadFooter = style({
+export var emojiUploadFooter = css({
   flex: '0 0 auto'
 });

package/dist/esm/index.js

@@ -6,19 +6,20 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
-export { selected, selectOnHover, emojiSprite, emojiNode, emojiImage } from './components/common/styles';
+export { // renaming exports to prevent breaking changes due to renaming
+commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage } from './components/common/styles';
 import EmojiResource from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
 export { // Classes
 AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, // functions
-denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, // Constants
+denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums
-SearchSort } from './types';
+SearchSort, UfoExperienceName, UfoComponentName } from './types';
 export default EmojiPicker;

package/dist/esm/types.js

@@ -42,4 +42,23 @@ export var ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
-})(ProviderTypes || (ProviderTypes = {}));
+})(ProviderTypes || (ProviderTypes = {}));
+
+export var UfoExperienceName;
+
+(function (UfoExperienceName) {
+  UfoExperienceName["EMOJI_RENDERED"] = "emoji-rendered";
+  UfoExperienceName["EMOJI_RESOURCE_FETCHED"] = "emoji-resource-fetched";
+  UfoExperienceName["EMOJI_PICKER_OPENED"] = "emoji-picker-opened";
+  UfoExperienceName["EMOJI_SELECTION_RECORDED"] = "emoji-selection-recorded";
+  UfoExperienceName["EMOJI_UPLOADED"] = "emoji-uploaded";
+  UfoExperienceName["EMOJI_SEARCHED"] = "emoji-searched";
+})(UfoExperienceName || (UfoExperienceName = {}));
+
+export var UfoComponentName;
+
+(function (UfoComponentName) {
+  UfoComponentName["EMOJI"] = "emoji";
+  UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
+  UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
+})(UfoComponentName || (UfoComponentName = {}));

package/dist/esm/util/analytics/analytics.js

@@ -12,33 +12,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
-import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
-import { withSampling } from './samplingUfo';
-
-var createRenderExperience = function createRenderExperience(componentName) {
-  return {
-    platform: {
-      component: componentName
-    },
-    type: ExperienceTypes.Load,
-    performanceType: ExperiencePerformanceTypes.PageSegmentLoad
-  };
-}; // const createInlineExperience = (componentName: string) => {
-//   return {
-//     platform: { component: componentName },
-//     type: ExperienceTypes.Experience,
-//     performanceType: ExperiencePerformanceTypes.InlineResult,
-//   };
-// };
-
-
-export var ufoExperiences = {
-  'emoji-rendered': new ConcurrentExperience('emoji-rendered', createRenderExperience('emoji')),
-  'emoji-resource-fetched': new ConcurrentExperience('emoji-resource-fetched', createRenderExperience('emoji-provider'))
-};
-export var sampledUfoRenderedEmoji = function sampledUfoRenderedEmoji(emojiId) {
-  return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
-};
 export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 
 var createEvent = function createEvent(eventType, action, actionSubject, actionSubjectId) {
@@ -55,12 +28,12 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
   };
 };
 
-export var insertionSucceeded = function insertionSucceeded(source) {
+export var recordSucceeded = function recordSucceeded(source) {
   return createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
     source: source
   });
 };
-export var insertionFailed = function insertionFailed(source) {
+export var recordFailed = function recordFailed(source) {
   return createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
     source: source
   });
@@ -222,18 +195,20 @@ export var typeaheadRenderedEvent = function typeaheadRenderedEvent(duration, qu
   return createEvent('operational', 'rendered', 'emojiTypeahead', undefined, _objectSpread({
     duration: duration
   }, extractCommonAttributes(query, emojiList)));
-};
+}; // it's used in editor typeahead to fire success record analytics
+
 export var recordSelectionSucceededSli = function recordSelectionSucceededSli(options) {
   return function () {
     if (options && options.createAnalyticsEvent) {
-      createAndFireEvent('editor')(insertionSucceeded('typeahead'))(options.createAnalyticsEvent);
+      createAndFireEvent('editor')(recordSucceeded('typeahead'))(options.createAnalyticsEvent);
     }
   };
-};
+}; // it's used in editor typeahead to fire failure record analytics
+
 export var recordSelectionFailedSli = function recordSelectionFailedSli(options) {
   return function (err) {
     if (options && options.createAnalyticsEvent) {
-      createAndFireEvent('editor')(insertionFailed('typeahead'))(options.createAnalyticsEvent);
+      createAndFireEvent('editor')(recordFailed('typeahead'))(options.createAnalyticsEvent);
     }
 
     return Promise.reject(err);

package/dist/esm/util/analytics/index.js

@@ -1,3 +1,4 @@
 export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling } from './samplingUfo';
-export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, insertionFailed, insertionSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, sampledUfoRenderedEmoji, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, ufoExperiences, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { sampledUfoRenderedEmoji, ufoExperiences } from './ufoExperiences';
 export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

package/dist/esm/util/analytics/ufoExperiences.js

@@ -0,0 +1,35 @@
+import { UfoComponentName, UfoExperienceName } from '../../types';
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+import { withSampling } from './samplingUfo';
+
+var createRenderExperience = function createRenderExperience(componentName) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+  };
+};
+
+var createInlineExperience = function createInlineExperience(componentName) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Experience,
+    performanceType: ExperiencePerformanceTypes.InlineResult
+  };
+};
+
+export var ufoExperiences = {
+  'emoji-rendered': new ConcurrentExperience(UfoExperienceName.EMOJI_RENDERED, createRenderExperience(UfoComponentName.EMOJI)),
+  'emoji-resource-fetched': new ConcurrentExperience(UfoExperienceName.EMOJI_RESOURCE_FETCHED, createRenderExperience(UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-picker-opened': new UFOExperience(UfoExperienceName.EMOJI_PICKER_OPENED, createRenderExperience(UfoComponentName.EMOJI_PICKER)),
+  'emoji-selection-recorded': new UFOExperience(UfoExperienceName.EMOJI_SELECTION_RECORDED, createInlineExperience(UfoComponentName.EMOJI_PROVIDER)),
+  'emoji-uploaded': new UFOExperience(UfoExperienceName.EMOJI_UPLOADED, createInlineExperience(UfoComponentName.EMOJI_PICKER)),
+  'emoji-searched': new UFOExperience(UfoExperienceName.EMOJI_SEARCHED, createInlineExperience(UfoComponentName.EMOJI_PICKER))
+};
+export var sampledUfoRenderedEmoji = function sampledUfoRenderedEmoji(emojiId) {
+  return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};

package/dist/esm/version.json

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

package/dist/types/components/common/CachingEmoji.d.ts

@@ -1,8 +1,8 @@
-import React, { ContextType } from 'react';
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { EmojiDescription } from '../../types';
 import { Props as EmojiProps } from './Emoji';
-import { EmojiContext, EmojiContextType } from '../../context/EmojiContext';
+import { EmojiContext } from './internal-types';
 export interface State {
     cachedEmoji?: EmojiDescription;
     invalidImage?: boolean;
@@ -19,13 +19,15 @@ export declare const CachingEmoji: (props: CachingEmojiProps) => JSX.Element;
  * rendering paths depending on caching strategy.
  */
 export declare class CachingMediaEmoji extends PureComponent<CachingEmojiProps, State> {
+    static contextTypes: {
+        emoji: PropTypes.Requireable<any>;
+    };
     private mounted;
-    static contextType: React.Context<EmojiContextType>;
-    context: ContextType<typeof EmojiContext>;
-    constructor(props: EmojiProps, context: ContextType<typeof EmojiContext>);
+    context: EmojiContext;
+    constructor(props: EmojiProps, context: EmojiContext);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: EmojiProps, nextContext: EmojiContextType): void;
+    UNSAFE_componentWillReceiveProps(nextProps: EmojiProps, nextContext: EmojiContext): void;
     private loadEmoji;
     private handleLoadError;
     render(): JSX.Element;

package/dist/types/components/common/EmojiActions.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PureComponent } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
@@ -37,7 +36,7 @@ export declare class EmojiActions extends PureComponent<Props & WrappedComponent
     renderAddOwnEmoji(): JSX.Element | null;
     render(): JSX.Element;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/components/common/EmojiDeletePreview.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 import { EmojiDescription } from '../../types';
 export interface OnDeleteEmoji {
@@ -14,7 +14,7 @@ export interface State {
     loading: boolean;
     error: boolean;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/components/common/EmojiErrorMessage.d.ts

@@ -1,9 +1,10 @@
 import { PureComponent } from 'react';
 import { Message } from '../../types';
+import { SerializedStyles } from '@emotion/core';
 export interface Props {
     message: Message;
-    className: string;
     tooltip?: boolean;
+    messageStyles: SerializedStyles;
 }
 export default class EmojiErrorMessage extends PureComponent<Props> {
     renderWithTooltip(): JSX.Element;

package/dist/types/components/common/EmojiPreview.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PureComponent } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { EmojiDescription, EmojiDescriptionWithVariations, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
@@ -26,7 +25,7 @@ export declare class EmojiPreview extends PureComponent<Props & WrappedComponent
     renderAddOwnEmoji(): JSX.Element | null;
     render(): JSX.Element;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/components/common/EmojiPreviewComponent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { EmojiDescription } from '../../types';
+declare type Props = {
+    emoji: EmojiDescription;
+};
+export declare const EmojiPreviewComponent: ({ emoji }: Props) => JSX.Element;
+export {};

package/dist/types/components/common/EmojiUploadPreview.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
 import { Message } from '../../types';
 import { UploadStatus } from './internal-types';
@@ -10,7 +10,7 @@ export interface EmojiUploadPreviewProps {
     onUploadCancelled: () => void;
     onAddEmoji: () => void;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<EmojiUploadPreviewProps & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<EmojiUploadPreviewProps & WrappedComponentProps<"intl">>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<EmojiUploadPreviewProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<EmojiUploadPreviewProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -1,6 +1,8 @@
+import PropTypes from 'prop-types';
 import { Component } from 'react';
 import EmojiProvider from '../../api/EmojiResource';
 import { EmojiId, OptionalEmojiDescription } from '../../types';
+import { EmojiContext } from './internal-types';
 import { State as LoadingState } from './LoadingEmojiComponent';
 export interface BaseResourcedEmojiProps {
     emojiId: EmojiId;
@@ -15,8 +17,12 @@ export interface State extends LoadingState {
     loaded: boolean;
 }
 export default class ResourcedEmojiComponent extends Component<Props, State> {
+    static childContextTypes: {
+        emoji: PropTypes.Requireable<any>;
+    };
     private ready;
     constructor(props: Props);
+    getChildContext(): EmojiContext;
     private refreshEmoji;
     UNSAFE_componentWillMount(): void;
     componentWillUnmount(): void;

package/dist/types/components/common/RetryableButton.d.ts

@@ -1,7 +1,5 @@
 import { Component } from 'react';
 export interface Props {
-    className: string;
-    retryClassName: string;
     label: string;
     appearance: string;
     error: boolean;

package/dist/types/components/common/styles.d.ts

@@ -1,50 +1,50 @@
-export declare const selected = "emoji-common-selected";
-export declare const selectOnHover = "emoji-common-select-on-hover";
+export declare const commonSelectedStyles = "emoji-common-selected";
+export declare const selectOnHoverStyles = "emoji-common-select-on-hover";
 export declare const emojiSprite = "emoji-common-emoji-sprite";
-export declare const emojiNode = "emoji-common-node";
+export declare const emojiNodeStyles = "emoji-common-node";
 export declare const emojiImage = "emoji-common-emoji-image";
-export declare const deleteButton: string;
-export declare const emoji: string;
-export declare const emojiContainer: string;
+export declare const emojiDeleteButton = "emoji-common-deleteButton";
+export declare const emojiMainStyle = "emoji-common-main-styles";
+export declare const deleteButton: import("@emotion/utils").SerializedStyles;
+export declare const emojiToneSelectorContainer: import("@emotion/utils").SerializedStyles;
+export declare const emojiStyles: import("@emotion/utils").SerializedStyles;
+export declare const emojiContainer: import("@emotion/utils").SerializedStyles;
 export declare const placeholder = "emoji-common-placeholder";
-export declare const placeholderContainer: string;
-export declare const placeholderEmoji: string;
-export declare const emojiButton: string;
-export declare const hiddenToneButton: string;
+export declare const placeholderContainer: import("@emotion/utils").SerializedStyles;
+export declare const emojiButton: import("@emotion/utils").SerializedStyles;
+export declare const hiddenToneButton: import("@emotion/utils").SerializedStyles;
 export declare const buttons = "emoji-common-buttons";
-export declare const preview = "emoji-common-preview";
-export declare const previewImg = "emoji-common-preview-image";
-export declare const previewText = "emoji-common-preview-text";
-export declare const name = "emoji-common-name";
-export declare const shortName = "emoji-common-shortname";
-export declare const previewSingleLine = "emoji-common-preview-single-line";
 export declare const toneSelectorContainer = "emoji-common-tone-selector-container";
-export declare const emojiPreviewSection = "emoji-preview-section";
-export declare const emojiPreview: string;
-export declare const emojiToneSelectorContainer: string;
-export declare const emojiScrollable: string;
-export declare const emojiUpload: string;
-export declare const uploadChooseFileMessage: string;
-export declare const emojiUploadBottom: string;
-export declare const uploadChooseFileRow: string;
-export declare const uploadChooseFileEmojiName: string;
-export declare const uploadChooseFileBrowse: string;
-export declare const uploadPreviewFooter: string;
-export declare const uploadPreview: string;
-export declare const uploadPreviewText: string;
-export declare const bigEmojiPreview: string;
-export declare const uploadAddRow: string;
-export declare const AddCustomEmoji: string;
+export declare const emojiPickerAddEmoji = "emoji-picker-add-emoji";
+export declare const previewText: import("@emotion/utils").SerializedStyles;
+export declare const emojiName: import("@emotion/utils").SerializedStyles;
+export declare const emojiShortName: import("@emotion/utils").SerializedStyles;
+export declare const preview: import("@emotion/utils").SerializedStyles;
+export declare const previewImg: import("@emotion/utils").SerializedStyles;
+export declare const emojiPreview: import("@emotion/utils").SerializedStyles;
+export declare const emojiScrollable: import("@emotion/utils").SerializedStyles;
+export declare const emojiUpload: import("@emotion/utils").SerializedStyles;
+export declare const uploadChooseFileMessage: import("@emotion/utils").SerializedStyles;
+export declare const emojiUploadBottom: import("@emotion/utils").SerializedStyles;
+export declare const uploadChooseFileRow: import("@emotion/utils").SerializedStyles;
+export declare const uploadChooseFileEmojiName: import("@emotion/utils").SerializedStyles;
+export declare const uploadChooseFileBrowse: import("@emotion/utils").SerializedStyles;
+export declare const uploadPreviewFooter: import("@emotion/utils").SerializedStyles;
+export declare const uploadPreview: import("@emotion/utils").SerializedStyles;
+export declare const uploadPreviewText: import("@emotion/utils").SerializedStyles;
+export declare const bigEmojiPreview: import("@emotion/utils").SerializedStyles;
+export declare const uploadAddRow: import("@emotion/utils").SerializedStyles;
+export declare const addCustomEmoji: import("@emotion/utils").SerializedStyles;
 export declare const submitDelete = "emoji-submit-delete";
-export declare const previewButtonGroup = "emoji-preview-button-group";
-export declare const deletePreview: string;
-export declare const deleteText: string;
-export declare const deleteFooter: string;
-export declare const emojiDeleteErrorMessage: string;
-export declare const emojiChooseFileErrorMessage: string;
-export declare const emojiPreviewErrorMessage: string;
-export declare const addCustomEmojiButton: string;
-export declare const uploadRetryButton: string;
-export declare const uploadEmojiButton: string;
-export declare const cancelButton: string;
-export declare const buttonSpinner: string;
+export declare const deletePreview: import("@emotion/utils").SerializedStyles;
+export declare const deleteText: import("@emotion/utils").SerializedStyles;
+export declare const previewButtonGroup: import("@emotion/utils").SerializedStyles;
+export declare const deleteFooter: import("@emotion/utils").SerializedStyles;
+export declare const emojiDeleteErrorMessage: import("@emotion/utils").SerializedStyles;
+export declare const emojiChooseFileErrorMessage: import("@emotion/utils").SerializedStyles;
+export declare const emojiPreviewErrorMessage: import("@emotion/utils").SerializedStyles;
+export declare const addCustomEmojiButton: import("@emotion/utils").SerializedStyles;
+export declare const uploadRetryButton: import("@emotion/utils").SerializedStyles;
+export declare const uploadEmojiButton: import("@emotion/utils").SerializedStyles;
+export declare const cancelButton: import("@emotion/utils").SerializedStyles;
+export declare const buttonSpinner: import("@emotion/utils").SerializedStyles;

package/dist/types/components/picker/EmojiPicker.d.ts

@@ -1,5 +1,4 @@
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import React from 'react';
 import { ComponentClass } from 'react';
 import { EmojiProvider } from '../../api/EmojiResource';
 import { OnEmojiEvent } from '../../types';
@@ -13,12 +12,12 @@ export interface Props extends LoadingProps {
 export declare class EmojiPickerInternal extends LoadingEmojiComponent<Props & WithAnalyticsEventsProps, LoadingState> {
     static AsyncLoadedComponent?: ComponentClass<ComponentProps>;
     state: {
-        asyncLoadedComponent: React.ComponentClass<ComponentProps, any> | undefined;
+        asyncLoadedComponent: ComponentClass<ComponentProps, any> | undefined;
     };
     constructor(props: Props);
     asyncLoadComponent(): void;
     renderLoading(): JSX.Element | null;
     renderLoaded(loadedEmojiProvider: EmojiProvider, EmojiPickerComponent: ComponentClass<ComponentProps>): JSX.Element;
 }
-declare const EmojiPicker: React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps, "emojiProvider" | "onSelection" | "onPickerRef" | "hideToneSelector"> & React.RefAttributes<any>>;
+declare const EmojiPicker: import("react").ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps, "emojiProvider" | "onSelection" | "onPickerRef" | "hideToneSelector"> & import("react").RefAttributes<any>>;
 export default EmojiPicker;

package/dist/types/components/picker/EmojiPickerComponent.d.ts

@@ -1,7 +1,9 @@
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
 import { EmojiProvider } from '../../api/EmojiResource';
 import { EmojiDescription, EmojiId, OnEmojiEvent, OptionalEmojiDescription, OptionalEmojiDescriptionWithVariations, ToneSelection } from '../../types';
+import { EmojiContext } from '../common/internal-types';
 import { CategoryId } from './categories';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface PickerRefHandler {
@@ -32,11 +34,15 @@ export interface State {
     loading: boolean;
 }
 export default class EmojiPickerComponent extends PureComponent<Props, State> {
+    static childContextTypes: {
+        emoji: PropTypes.Requireable<any>;
+    };
     static defaultProps: {
         onSelection: () => void;
     };
     constructor(props: Props);
     openTime: number;
+    getChildContext(): EmojiContext;
     UNSAFE_componentWillMount(): void;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -1,5 +1,7 @@
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { EmojiDescription, EmojiDescriptionWithVariations, Message, OnCategory, OnEmojiEvent, OnToneSelected, OnToneSelectorCancelled, ToneSelection, User } from '../../types';
+import { EmojiContext } from '../common/internal-types';
 import { CategoryId } from './categories';
 import { OnUploadEmoji } from '../common/EmojiUploadPicker';
 import { OnDeleteEmoji } from '../common/EmojiDeletePreview';
@@ -35,6 +37,12 @@ export interface Props {
 export interface State {
 }
 export default class EmojiPickerVirtualList extends PureComponent<Props, State> {
+    static contextTypes: {
+        emoji: PropTypes.Requireable<any>;
+    };
+    static childContextTypes: {
+        emoji: PropTypes.Requireable<any>;
+    };
     static defaultProps: {
         onEmojiSelected: () => void;
         onEmojiActive: () => void;
@@ -46,7 +54,9 @@ export default class EmojiPickerVirtualList extends PureComponent<Props, State>
     private activeCategoryId;
     private virtualItems;
     private categoryTracker;
+    context: EmojiContext;
     constructor(props: Props);
+    getChildContext(): EmojiContext;
     UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void;
     private onEmojiMouseEnter;
     private onSearch;

package/dist/types/components/picker/styles.d.ts

@@ -1,19 +1,18 @@
-export declare const active = "emoji-picker-active";
-export declare const disable = "emoji-picker-disable";
-export declare const emojiPicker: string;
+export declare const emojiPicker: import("@emotion/utils").SerializedStyles;
 export declare const addButton = "emoji-picker-add-button";
-export declare const categorySelector: string;
-export declare const category: string;
-export declare const emojiPickerList: string;
-export declare const virtualList: string;
-export declare const searchIcon = "search-icon";
-export declare const input = "input";
-export declare const pickerSearch: string;
-export declare const emojiPickerSpinner: string;
-export declare const emojiPickerRow: string;
-export declare const emojiCategoryTitle: string;
-export declare const emojiItem: string;
-export declare const addEmoji: string;
-export declare const emojiPickerFooter: string;
-export declare const emojiPickerFooterWithTopShadow: string;
-export declare const emojiActionsContainerWithBottomShadow: string;
+export declare const categorySelector: import("@emotion/utils").SerializedStyles;
+export declare const active: import("@emotion/utils").SerializedStyles;
+export declare const disable: import("@emotion/utils").SerializedStyles;
+export declare const categoryStyles: import("@emotion/utils").SerializedStyles;
+export declare const emojiPickerList: import("@emotion/utils").SerializedStyles;
+export declare const virtualList: import("@emotion/utils").SerializedStyles;
+export declare const searchIcon: import("@emotion/utils").SerializedStyles;
+export declare const input: import("@emotion/utils").SerializedStyles;
+export declare const pickerSearch: import("@emotion/utils").SerializedStyles;
+export declare const emojiPickerSpinner: import("@emotion/utils").SerializedStyles;
+export declare const emojiPickerRow: import("@emotion/utils").SerializedStyles;
+export declare const emojiCategoryTitle: import("@emotion/utils").SerializedStyles;
+export declare const emojiItem: import("@emotion/utils").SerializedStyles;
+export declare const emojiPickerFooter: import("@emotion/utils").SerializedStyles;
+export declare const emojiPickerFooterWithTopShadow: import("@emotion/utils").SerializedStyles;
+export declare const emojiActionsContainerWithBottomShadow: import("@emotion/utils").SerializedStyles;