@atlaskit/emoji 64.0.1 → 64.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/emoji
 
+## 64.2.0
+
+### Minor Changes
+
+- [`ae891ccd4c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae891ccd4c2) - Refactor legacy context providers and update tests to use react testing library
+
+### Patch Changes
+
+- [`63f11b8ade4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63f11b8ade4) - support proxy via webpack config cli
+- Updated dependencies
+
+## 64.1.1
+
+### Patch Changes
+
+- [`21e15939c73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21e15939c73) - add SSR examples for emoji
+- [`95015909035`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95015909035) - Fixed issue where some of the examples where crashing.
+
+## 64.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Task: https://a11y-internal.atlassian.net/browse/AK-97, Emoji picker: made emojis list keyboard accessible, moved tone selector and place it right after search input, placed upload/remove emoji menus above the emoji list.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Remove @atlaskit/tooltip from critical path of rendering emoji
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Upgrade js-search to v2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 64.0.1
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,3 @@
+# Emoji
+
+Documentation can be found on: https://product-fabric.atlassian.net/wiki/spaces/TWPCP/pages/3178201667/Emoji+README

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

@@ -27,8 +27,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _EmojiUtils = require("../../api/EmojiUtils");
@@ -41,6 +39,8 @@ var _Emoji = _interopRequireDefault(require("./Emoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
+var _EmojiContext = require("../../context/EmojiContext");
+
 var _excluded = ["placeholderSize"],
     _excluded2 = ["children", "placeholderSize"];
 
@@ -84,7 +84,7 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     var _this;
 
     (0, _classCallCheck2.default)(this, CachingMediaEmoji);
-    _this = _super.call(this, props, context);
+    _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId, emoji) {
       var invalidImage = _this.state.invalidImage;
@@ -130,6 +130,10 @@ 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 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.CachingMediaEmoji = CachingMediaEmoji;
-(0, _defineProperty2.default)(CachingMediaEmoji, "contextTypes", {
-  emoji: _propTypes.default.object
-});
+(0, _defineProperty2.default)(CachingMediaEmoji, "contextType", _EmojiContext.EmojiContext);
 var _default = CachingEmoji;
 exports.default = _default;

package/dist/cjs/components/common/DeleteButton.js

@@ -33,7 +33,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+      primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
       size: "small"
     }),
     onClick: props.onClick,

package/dist/cjs/components/common/Emoji.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -54,6 +52,21 @@ var handleMouseDown = function handleMouseDown(props, event) {
   }
 };
 
+var handleKeyPress = function handleKeyPress(props, event) {
+  // Clicked emoji delete button
+  if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
+    return;
+  }
+
+  var emoji = props.emoji,
+      onSelected = props.onSelected;
+  event.preventDefault();
+
+  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
       onMouseMove = props.onMouseMove;
@@ -96,7 +109,8 @@ var renderAsSprite = function renderAsSprite(props) {
       selected = props.selected,
       selectOnHover = props.selectOnHover,
       className = props.className,
-      showTooltip = props.showTooltip;
+      showTooltip = props.showTooltip,
+      shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.emojiContainer, true), (0, _defineProperty2.default)(_classes, styles.emojiNode, true), (0, _defineProperty2.default)(_classes, styles.selected, selected), (0, _defineProperty2.default)(_classes, styles.selectOnHover, selectOnHover), _classes);
@@ -129,18 +143,21 @@ var renderAsSprite = function renderAsSprite(props) {
   }, "\xA0");
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, emojiNode);
 }; // Keep as pure functional component, see renderAsSprite.
 
 
@@ -153,7 +170,8 @@ var renderAsImage = function renderAsImage(props) {
       selectOnHover = props.selectOnHover,
       className = props.className,
       showTooltip = props.showTooltip,
-      showDelete = props.showDelete;
+      showDelete = props.showDelete,
+      shouldBeInteractive = props.shouldBeInteractive;
   var classes = (_classes2 = {}, (0, _defineProperty2.default)(_classes2, styles.emoji, true), (0, _defineProperty2.default)(_classes2, styles.emojiNode, true), (0, _defineProperty2.default)(_classes2, styles.selected, selected), (0, _defineProperty2.default)(_classes2, styles.selectOnHover, selectOnHover), (0, _defineProperty2.default)(_classes2, styles.emojiImage, true), _classes2);
 
   if (className) {
@@ -221,18 +239,21 @@ var renderAsImage = function renderAsImage(props) {
   }, sizing));
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, deleteButton, showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, deleteButton, emojiNode);
 };
 
 var Emoji = function Emoji(props) {

package/dist/cjs/components/common/EmojiActions.js

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmojiActions = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
+
+var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+var footerStyles = _interopRequireWildcard(require("../picker/styles"));
+
+var _EmojiPickerListSearch = _interopRequireDefault(require("../picker/EmojiPickerListSearch"));
+
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+
+var _EmojiButton = _interopRequireDefault(require("./EmojiButton"));
+
+var _i18n = require("../i18n");
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
+
+var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var EmojiActions = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(EmojiActions, _PureComponent);
+
+  var _super = _createSuper(EmojiActions);
+
+  function EmojiActions() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, EmojiActions);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      selectingTone: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneButtonClick", function () {
+      _this.setState({
+        selectingTone: !_this.state.selectingTone
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
+      _this.setState({
+        selectingTone: false
+      });
+
+      if (_this.props.onToneSelected) {
+        _this.props.onToneSelected(toneValue);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
+      var selectingTone = _this.state.selectingTone;
+      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
+
+      if (selectingTone && onToneSelectorCancelled) {
+        onToneSelectorCancelled();
+      }
+
+      _this.setState({
+        selectingTone: false
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(EmojiActions, [{
+    key: "renderTones",
+    value: function renderTones() {
+      var _this$props = this.props,
+          toneEmoji = _this$props.toneEmoji,
+          selectedTone = _this$props.selectedTone,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!toneEmoji) {
+        return null;
+      }
+
+      var previewEmoji = toneEmoji;
+
+      if (selectedTone && previewEmoji.skinVariations) {
+        previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.emojiToneSelectorContainer
+      }, this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_ToneSelector.default, {
+        emoji: toneEmoji,
+        onToneSelected: this.onToneSelected,
+        previewEmojiId: previewEmoji.id
+      }), /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+        ariaExpanded: this.state.selectingTone,
+        emoji: previewEmoji,
+        selectOnHover: true,
+        onSelected: this.onToneButtonClick,
+        ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
+          selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
+        })
+      }));
+    } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
+
+  }, {
+    key: "renderAddOwnEmoji",
+    value: function renderAddOwnEmoji() {
+      var _this$props2 = this.props,
+          onOpenUpload = _this$props2.onOpenUpload,
+          uploadEnabled = _this$props2.uploadEnabled,
+          intl = _this$props2.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!uploadEnabled) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.AddCustomEmoji
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+        return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+          onClick: onOpenUpload,
+          iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
+            label: formatMessage(_i18n.messages.addCustomEmojiLabel),
+            size: "small"
+          }),
+          appearance: "subtle",
+          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+        }, label);
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          initialUploadName = _this$props3.initialUploadName,
+          onUploadCancelled = _this$props3.onUploadCancelled,
+          onUploadEmoji = _this$props3.onUploadEmoji,
+          onCloseDelete = _this$props3.onCloseDelete,
+          onDeleteEmoji = _this$props3.onDeleteEmoji,
+          uploadErrorMessage = _this$props3.uploadErrorMessage,
+          uploading = _this$props3.uploading,
+          onFileChooserClicked = _this$props3.onFileChooserClicked,
+          emojiToDelete = _this$props3.emojiToDelete,
+          onChange = _this$props3.onChange,
+          query = _this$props3.query;
+      var previewFooterClassnames = (0, _classnames.default)([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+
+      if (uploading) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+          onUploadCancelled: onUploadCancelled,
+          onUploadEmoji: onUploadEmoji,
+          onFileChooserClicked: onFileChooserClicked,
+          errorMessage: uploadErrorMessage,
+          initialUploadName: initialUploadName
+        }));
+      }
+
+      if (emojiToDelete) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiDeletePreview.default, {
+          emoji: emojiToDelete,
+          onDeleteEmoji: onDeleteEmoji,
+          onCloseDelete: onCloseDelete
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: previewFooterClassnames,
+        onMouseLeave: this.onMouseLeave
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center'
+        }
+      }, !this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_EmojiPickerListSearch.default, {
+        onChange: onChange,
+        query: query
+      }), this.renderTones()), this.renderAddOwnEmoji());
+    }
+  }]);
+  return EmojiActions;
+}(_react.PureComponent);
+
+exports.EmojiActions = EmojiActions;
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiActions);
+
+exports.default = _default;

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

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _styles = require("./styles");
 
 var _constants = require("../../util/constants");
@@ -50,17 +48,12 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, _styles.placeholder, true), (0, _defineProperty2.default)(_classes, _styles.placeholderContainer, true), _classes);
-
-  var placeholderNode = /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("span", {
     "aria-label": shortName,
     className: (0, _classnames.default)(classes),
-    style: style
+    style: style,
+    title: showTooltip ? shortName : ''
   });
-
-  return showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: shortName
-  }, placeholderNode) : placeholderNode;
 };
 
 var _default = EmojiPlaceholder;

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

@@ -138,7 +138,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPreview",
     value: function renderEmojiPreview() {
-      var _classNames, _classNames2;
+      var _classNames2;
 
       var selectingTone = this.state.selectingTone;
       var _this$props2 = this.props,
@@ -149,7 +149,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.preview, true), (0, _defineProperty2.default)(_classNames, styles.withToneSelector, !!this.props.toneEmoji), _classNames));
+      var previewClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.preview, true));
       var previewTextClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.previewText, true), (0, _defineProperty2.default)(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: previewClasses

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

@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../util/constants");
@@ -35,6 +33,8 @@ var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
+var _EmojiContextProvider = require("../../context/EmojiContextProvider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -62,15 +62,6 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(ResourcedEmojiComponent, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-    }
-  }, {
     key: "refreshEmoji",
     value: function refreshEmoji(emojiProvider, emojiId) {
       var _this2 = this;
@@ -159,17 +150,21 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           shortName = _this$props$emojiId.shortName,
           id = _this$props$emojiId.id,
           fallback = _this$props$emojiId.fallback;
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var emojiContextValue = {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
+        emojiContextValue: emojiContextValue
+      }, /*#__PURE__*/_react.default.createElement("span", {
         "data-emoji-id": id,
         "data-emoji-short-name": shortName,
         "data-emoji-text": fallback || shortName
-      }, element);
+      }, element));
     }
   }]);
   return ResourcedEmojiComponent;
 }(_react.Component);
 
-exports.default = ResourcedEmojiComponent;
-(0, _defineProperty2.default)(ResourcedEmojiComponent, "childContextTypes", {
-  emoji: _propTypes.default.object
-});
+exports.default = ResourcedEmojiComponent;