@atlaskit/emoji 64.4.0 → 64.5.1

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

@@ -1,5 +1,4 @@
 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';
@@ -7,6 +6,7 @@ import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 export default class ResourcedEmojiComponent extends Component {
   constructor(props) {
     super(props);
@@ -19,14 +19,6 @@ export default class ResourcedEmojiComponent extends Component {
     };
   }
 
-  getChildContext() {
-    return {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-  }
-
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
 
@@ -126,15 +118,18 @@ export default class ResourcedEmojiComponent extends Component {
       id,
       fallback
     } = this.props.emojiId;
-    return /*#__PURE__*/React.createElement("span", {
+    const emojiContextValue = {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+    return /*#__PURE__*/React.createElement(LegacyEmojiContextProvider, {
+      emojiContextValue: emojiContextValue
+    }, /*#__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/picker/EmojiPickerComponent.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @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';
@@ -20,6 +19,7 @@ import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 const FREQUENTLY_USED_MAX = 16;
 export default class EmojiPickerComponent extends PureComponent {
   constructor(props) {
@@ -354,14 +354,6 @@ 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());
@@ -524,7 +516,14 @@ export default class EmojiPickerComponent extends PureComponent {
     } = this.state;
     const recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, analytic => this.fireAnalytics(analytic('picker')));
     const formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
-    const picker = jsx("div", {
+    const emojiContextValue = {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+    const picker = jsx(LegacyEmojiContextProvider, {
+      emojiContextValue: emojiContextValue
+    }, jsx("div", {
       css: emojiPicker,
       ref: this.handlePickerRef,
       "data-emoji-picker-container": true
@@ -562,16 +561,12 @@ export default class EmojiPickerComponent extends PureComponent {
     }), jsx(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
       isUploading: uploading
-    }));
+    })));
     return picker;
   }
 
 }
 
-_defineProperty(EmojiPickerComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 _defineProperty(EmojiPickerComponent, "defaultProps", {
   onSelection: () => {}
 });

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @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';
@@ -198,16 +197,6 @@ 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) {
@@ -289,14 +278,6 @@ export default class EmojiPickerVirtualList extends PureComponent {
 
 }
 
-_defineProperty(EmojiPickerVirtualList, "contextTypes", {
-  emoji: PropTypes.object
-});
-
-_defineProperty(EmojiPickerVirtualList, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: () => {},
   onEmojiActive: () => {},

package/dist/es2019/components/typeahead/EmojiTypeAheadComponent.js

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import uuid from 'uuid';
-import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { defaultListLimit } from '../../util/constants';
 import { toEmojiId } from '../../util/type-helpers';
@@ -13,6 +12,7 @@ import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import EmojiList from './EmojiTypeAheadList';
 import { emojiTypeAhead } from './styles';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 
 const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 
@@ -150,14 +150,6 @@ export default class EmojiTypeAheadComponent extends PureComponent {
     this.selected = false;
   }
 
-  getChildContext() {
-    return {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-  }
-
   componentDidMount() {
     const {
       emojiProvider
@@ -265,7 +257,14 @@ export default class EmojiTypeAheadComponent extends PureComponent {
     const style = {
       display: visible ? 'block' : 'none'
     };
-    return jsx("div", {
+    const emojiContextValue = {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+    return jsx(LegacyEmojiContextProvider, {
+      emojiContextValue: emojiContextValue
+    }, jsx("div", {
       style: style,
       className: 'ak-emoji-typeahead',
       css: emojiTypeAhead
@@ -274,15 +273,11 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       onEmojiSelected: recordUsageOnSelection,
       ref: this.onEmojiListRef,
       loading: loading
-    }));
+    })));
   }
 
 }
 
-_defineProperty(EmojiTypeAheadComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 _defineProperty(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: () => {},
   onOpen: () => {},

package/dist/es2019/components/typeahead/EmojiTypeAheadItem.js

@@ -8,6 +8,7 @@ import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 export default class EmojiTypeAheadItem extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -42,7 +43,7 @@ export default class EmojiTypeAheadItem extends PureComponent {
       emoji
     } = this.props;
     const classes = [typeAheadItem, selected && selectedStyles];
-    return jsx("div", {
+    return jsx(LegacyEmojiContextProvider, null, jsx("div", {
       className: `ak-emoji-typeahead-item ${selected ? typeaheadSelected : ''}`,
       css: classes,
       onMouseDown: this.onEmojiSelected,
@@ -52,7 +53,7 @@ export default class EmojiTypeAheadItem extends PureComponent {
       css: typeAheadItemRow
     }, emoji && jsx(EmojiPreviewComponent, {
       emoji: emoji
-    })));
+    }))));
   }
 
 }

package/dist/es2019/context/EmojiContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const EmojiContext = /*#__PURE__*/createContext(null);

package/dist/es2019/context/EmojiContextProvider.js

@@ -0,0 +1,11 @@
+import React, { useMemo } from 'react';
+import { EmojiContext } from './EmojiContext';
+export const EmojiContextProvider = ({
+  children,
+  emojiContextValue
+}) => {
+  const memoizedEmojiContextValue = useMemo(() => emojiContextValue, [emojiContextValue]);
+  return /*#__PURE__*/React.createElement(EmojiContext.Provider, {
+    value: memoizedEmojiContextValue
+  }, children);
+};

package/dist/es2019/context/LegacyEmojiContextProvider.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { EmojiContextProvider } from './EmojiContextProvider';
+
+/**
+ * Legacy Context Priority Passthrough ...
+ * If component finds legacy context, then use it, otherwise use the passed through context
+ */
+export default class LegacyEmojiContextProvider extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      prioritisedContextValue: context.emoji ? context : this.props.emojiContextValue
+    };
+  }
+
+  render() {
+    if (this.state.prioritisedContextValue) {
+      return /*#__PURE__*/React.createElement(EmojiContextProvider, {
+        emojiContextValue: this.state.prioritisedContextValue
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}
+
+_defineProperty(LegacyEmojiContextProvider, "contextTypes", {
+  emoji: PropTypes.object
+});

package/dist/es2019/index.js

@@ -21,5 +21,5 @@ AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUpload
 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/es2019/types.js

@@ -42,4 +42,23 @@ export let ProviderTypes;
   ProviderTypes["STANDARD"] = "STANDARD";
   ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
   ProviderTypes["UNKNOWN"] = "UNKNOWN";
-})(ProviderTypes || (ProviderTypes = {}));
+})(ProviderTypes || (ProviderTypes = {}));
+
+export let 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 let UfoComponentName;
+
+(function (UfoComponentName) {
+  UfoComponentName["EMOJI"] = "emoji";
+  UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
+  UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
+})(UfoComponentName || (UfoComponentName = {}));

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

@@ -1,5 +1,6 @@
+import { UfoComponentName, UfoExperienceName } from '../../types';
 import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
-import { withSampling } from './samplingUfo'; // TODO: clean up as not needed
+import { withSampling } from './samplingUfo';
 
 const createRenderExperience = componentName => {
   return {
@@ -22,12 +23,12 @@ const createInlineExperience = componentName => {
 };
 
 export const ufoExperiences = {
-  'emoji-rendered': new ConcurrentExperience('emoji-rendered', createRenderExperience('emoji')),
-  'emoji-resource-fetched': new ConcurrentExperience('emoji-resource-fetched', createRenderExperience('emoji-provider')),
-  'emoji-picker-opened': new UFOExperience('emoji-picker-opened', createRenderExperience('emoji-picker')),
-  'emoji-selection-recorded': new UFOExperience('emoji-selection-recorded', createInlineExperience('emoji-picker')),
-  'emoji-uploaded': new UFOExperience('emoji-uploaded', createInlineExperience('emoji-picker')),
-  'emoji-searched': new UFOExperience('emoji-searched', createInlineExperience('emoji-picker'))
+  '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 const sampledUfoRenderedEmoji = emojiId => {
   return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));

package/dist/es2019/version.json

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

package/dist/esm/api/EmojiResource.js

@@ -27,13 +27,11 @@ import { ufoExperiences } from '../util/analytics';
  *
  * Follow this up with an isUploadSupported() check to see if the provider is actually
  * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
 export var supportsUploadFeature = function supportsUploadFeature(emojiProvider) {
-  var _ref = emojiProvider,
-      isUploadSupported = _ref.isUploadSupported,
-      prepareForUpload = _ref.prepareForUpload,
-      uploadCustomEmoji = _ref.uploadCustomEmoji;
-  return !!(isUploadSupported && prepareForUpload && uploadCustomEmoji);
+  var emojiUploadProvider = emojiProvider;
+  return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
 };
 export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   _inherits(EmojiResource, _AbstractResource);

package/dist/esm/components/common/CachingEmoji.js

@@ -14,7 +14,6 @@ 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 PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -25,6 +24,7 @@ import EmojiPlaceholder from './EmojiPlaceholder';
 import { UfoErrorBoundary } from './UfoErrorBoundary';
 import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
 import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
+import { EmojiContext } from '../../context/EmojiContext';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -67,7 +67,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _classCallCheck(this, CachingMediaEmoji);
 
-    _this = _super.call(this, props, context);
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
@@ -122,6 +122,10 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
+      if (!context) {
+        return;
+      }
+
       if (!context.emoji) {
         return undefined;
       }
@@ -215,8 +219,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   return CachingMediaEmoji;
 }(PureComponent);
 
-_defineProperty(CachingMediaEmoji, "contextTypes", {
-  emoji: PropTypes.object
-});
+_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
 
 export default CachingEmoji;

package/dist/esm/components/common/ResourcedEmojiComponent.js

@@ -10,7 +10,6 @@ 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 PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
@@ -18,6 +17,7 @@ import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 
 var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   _inherits(ResourcedEmojiComponent, _Component);
@@ -41,15 +41,6 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(ResourcedEmojiComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "refreshEmoji",
     value: function refreshEmoji(emojiProvider, emojiId) {
       var _this2 = this;
@@ -153,19 +144,22 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           shortName = _this$props$emojiId.shortName,
           id = _this$props$emojiId.id,
           fallback = _this$props$emojiId.fallback;
-      return /*#__PURE__*/React.createElement("span", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      return /*#__PURE__*/React.createElement(LegacyEmojiContextProvider, {
+        emojiContextValue: emojiContextValue
+      }, /*#__PURE__*/React.createElement("span", {
         "data-emoji-id": id,
         "data-emoji-short-name": shortName,
         "data-emoji-text": fallback || shortName
-      }, element);
+      }, element));
     }
   }]);
 
   return ResourcedEmojiComponent;
 }(Component);
 
-_defineProperty(ResourcedEmojiComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 export { ResourcedEmojiComponent as default };

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

@@ -17,7 +17,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @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';
@@ -35,6 +34,7 @@ import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
+import LegacyEmojiContextProvider from '../../context/LegacyEmojiContextProvider';
 var FREQUENTLY_USED_MAX = 16;
 
 var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
@@ -378,15 +378,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(EmojiPickerComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.openTime = Date.now();
@@ -561,7 +552,14 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         return _this4.fireAnalytics(analytic('picker'));
       });
       var formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
-      var picker = jsx("div", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      var picker = jsx(LegacyEmojiContextProvider, {
+        emojiContextValue: emojiContextValue
+      }, jsx("div", {
         css: emojiPicker,
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
@@ -599,7 +597,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       }), jsx(EmojiPickerFooter, {
         selectedEmoji: selectedEmoji,
         isUploading: uploading
-      }));
+      })));
       return picker;
     }
   }]);
@@ -607,10 +605,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   return EmojiPickerComponent;
 }(PureComponent);
 
-_defineProperty(EmojiPickerComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 _defineProperty(EmojiPickerComponent, "defaultProps", {
   onSelection: function onSelection() {}
 });

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

@@ -7,17 +7,12 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 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; } }
 
 /** @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';
@@ -233,14 +228,6 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(EmojiPickerVirtualList, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      var emoji = this.context.emoji;
-      return {
-        emoji: _objectSpread({}, emoji)
-      };
-    }
-  }, {
     key: "UNSAFE_componentWillUpdate",
     value: function 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) {
@@ -328,14 +315,6 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   return EmojiPickerVirtualList;
 }(PureComponent);
 
-_defineProperty(EmojiPickerVirtualList, "contextTypes", {
-  emoji: PropTypes.object
-});
-
-_defineProperty(EmojiPickerVirtualList, "childContextTypes", {
-  emoji: PropTypes.object
-});
-
 _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},