@atlaskit/emoji 65.1.1 → 65.2.0

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

@@ -7,16 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _core = require("@emotion/core");
 
 var _react = require("react");
@@ -25,53 +15,36 @@ var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
 
 var _styles = require("./styles");
 
-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 EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPickerEmojiRow, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerEmojiRow);
-
-  function EmojiPickerEmojiRow() {
-    (0, _classCallCheck2.default)(this, EmojiPickerEmojiRow);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(EmojiPickerEmojiRow, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojis = _this$props.emojis,
-          onSelected = _this$props.onSelected,
-          onMouseMove = _this$props.onMouseMove,
-          title = _this$props.title,
-          showDelete = _this$props.showDelete,
-          onDelete = _this$props.onDelete;
-      return (0, _core.jsx)("div", {
-        css: _styles.emojiPickerRow
-      }, emojis.map(function (emoji) {
-        var shortName = emoji.shortName,
-            id = emoji.id;
-        var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
-        return (0, _core.jsx)("span", {
-          css: _styles.emojiItem,
-          key: key
-        }, (0, _core.jsx)(_CachingEmoji.default, {
-          emoji: emoji,
-          selectOnHover: true,
-          onSelected: onSelected,
-          onMouseMove: onMouseMove,
-          showDelete: showDelete,
-          onDelete: onDelete,
-          placeholderSize: 24,
-          shouldBeInteractive: true
-        }));
-      }));
-    }
-  }]);
-  return EmojiPickerEmojiRow;
-}(_react.PureComponent);
-
-exports.default = EmojiPickerEmojiRow;
+/** @jsx jsx */
+var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
+  var emojis = _ref.emojis,
+      onSelected = _ref.onSelected,
+      onMouseMove = _ref.onMouseMove,
+      title = _ref.title,
+      showDelete = _ref.showDelete,
+      onDelete = _ref.onDelete;
+  return (0, _core.jsx)("div", {
+    css: _styles.emojiPickerRow
+  }, emojis.map(function (emoji) {
+    var shortName = emoji.shortName,
+        id = emoji.id;
+    var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
+    return (0, _core.jsx)("span", {
+      css: _styles.emojiItem,
+      key: key
+    }, (0, _core.jsx)(_CachingEmoji.default, {
+      emoji: emoji,
+      selectOnHover: true,
+      onSelected: onSelected,
+      onMouseMove: onMouseMove,
+      showDelete: showDelete,
+      onDelete: onDelete,
+      placeholderSize: 24,
+      shouldBeInteractive: true
+    }));
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiPickerEmojiRow);
+
+exports.default = _default;

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

@@ -1,22 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _core = require("@emotion/core");
 
 var _react = require("react");
@@ -25,42 +13,19 @@ var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 
 var _styles = require("./styles");
 
-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 EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPickerFooter, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerFooter);
-
-  function EmojiPickerFooter() {
-    (0, _classCallCheck2.default)(this, EmojiPickerFooter);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(EmojiPickerFooter, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          selectedEmoji = _this$props.selectedEmoji,
-          isUploading = _this$props.isUploading;
-      var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
+/** @jsx jsx */
+var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
 
-      if (!selectedEmoji || isUploading) {
-        this.props.onPreviewDisplayed(false);
-        return null;
-      }
+var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
+  var selectedEmoji = _ref.selectedEmoji;
+  return (0, _core.jsx)("div", {
+    css: previewFooterClassnames,
+    "data-testid": "emoji-picker-footer"
+  }, selectedEmoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
+    emoji: selectedEmoji
+  }));
+};
 
-      this.props.onPreviewDisplayed(true);
-      return (0, _core.jsx)("div", {
-        css: previewFooterClassnames
-      }, selectedEmoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
-        emoji: selectedEmoji
-      }));
-    }
-  }]);
-  return EmojiPickerFooter;
-}(_react.PureComponent);
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiPickerFooter);
 
-exports.default = EmojiPickerFooter;
+exports.default = _default;

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

@@ -7,19 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _core = require("@emotion/core");
 
@@ -39,113 +31,136 @@ var _styles = require("./styles");
 
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
-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 EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiUploadComponent, _PureComponent);
-
-  var _super = _createSuper(EmojiUploadComponent);
-
-  function EmojiUploadComponent(props) {
-    var _this;
+var _i18n = require("../i18n");
 
-    (0, _classCallCheck2.default)(this, EmojiUploadComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadEmoji", function (upload, retry) {
-      var emojiProvider = _this.props.emojiProvider;
+/** @jsx jsx */
+var EmojiUploadComponent = function EmojiUploadComponent(props) {
+  var emojiProvider = props.emojiProvider,
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      onUploaderRef = props.onUploaderRef;
 
-      _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      uploadErrorMessage = _useState2[0],
+      setUploadErrorMessage = _useState2[1];
 
-      _ufoExperiences.ufoExperiences['emoji-uploaded'].addMetadata({
-        retry: retry
+  (0, _react.useEffect)(function () {
+    if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
+  }, [emojiProvider]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].abort({
+        metadata: {
+          source: 'EmojiUploadComponent',
+          reason: 'unmount'
+        }
       });
+    };
+  }, []);
+
+  var onUploadEmoji = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(upload, retry, onSuccessHandler) {
+      var errorSetter, message;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
+
+              _ufoExperiences.ufoExperiences['emoji-uploaded'].addMetadata({
+                retry: retry
+              });
+
+              if (!(0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+                _context.next = 16;
+                break;
+              }
+
+              fireAnalytics((0, _analytics.uploadConfirmButton)({
+                retry: retry
+              }));
+              _context.prev = 4;
+              _context.next = 7;
+              return emojiProvider.prepareForUpload();
+
+            case 7:
+              errorSetter = function errorSetter(message) {
+                setUploadErrorMessage(message);
+              }; // internally handled error from upload callback
+
+
+              (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
+              _context.next = 16;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
+              // error from upload token generation
+              message = _context.t0 instanceof Error ? _context.t0.message : 'Issue with generating upload token';
+
+              _ufoExperiences.ufoExperiences['emoji-uploaded'].failure({
+                metadata: {
+                  source: 'EmojiUploadComponent',
+                  error: message
+                }
+              });
+
+              setUploadErrorMessage(_i18n.messages.emojiUploadFailed);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[4, 11]]);
+    }));
 
-      _this.fireAnalytics((0, _analytics.uploadConfirmButton)({
-        retry: retry
-      }));
-
-      var errorSetter = function errorSetter(message) {
-        _this.setState({
-          uploadErrorMessage: message
-        });
-      };
+    return function onUploadEmoji(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
 
-      (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, _this.prepareForUpload, _this.fireAnalytics, retry);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "prepareForUpload", function () {
-      var emojiProvider = _this.props.emojiProvider;
+  var onUploaded = function onUploaded(onSuccessHandler) {
+    return function () {
+      setUploadErrorMessage(undefined);
 
-      if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
-        emojiProvider.prepareForUpload();
+      if (onSuccessHandler) {
+        onSuccessHandler();
       }
+    };
+  };
 
-      _this.setState({
-        uploadErrorMessage: undefined
-      });
+  var onFileChooserClicked = function onFileChooserClicked() {
+    fireAnalytics((0, _analytics.selectedFileEvent)());
+  };
 
-      if (_this.ref) {
-        _this.ref.clearUploadPicker();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChooserClicked", function () {
-      _this.fireAnalytics((0, _analytics.selectedFileEvent)());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploadCancelled", function () {
-      _this.fireAnalytics((0, _analytics.uploadCancelButton)());
-
-      _this.prepareForUpload();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUploaderRef", function (emojiUploadPicker) {
-      _this.ref = emojiUploadPicker;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsEvent) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-
-      if (createAnalyticsEvent) {
-        (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
-      }
-    });
+  var onUploadCancelled = function onUploadCancelled() {
+    fireAnalytics((0, _analytics.uploadCancelButton)());
+    onUploaded();
+  };
 
-    if ((0, _EmojiResource.supportsUploadFeature)(props.emojiProvider)) {
-      props.emojiProvider.prepareForUpload();
+  var fireAnalytics = function fireAnalytics(analyticsEvent) {
+    if (createAnalyticsEvent) {
+      (0, _analytics.createAndFireEventInElementsChannel)(analyticsEvent)(createAnalyticsEvent);
     }
-
-    _this.state = {};
-    return _this;
-  }
-
-  (0, _createClass2.default)(EmojiUploadComponent, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      _ufoExperiences.ufoExperiences['emoji-uploaded'].abort({
-        metadata: {
-          source: 'EmojiUploadComponent',
-          reason: 'unmount'
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var uploadErrorMessage = this.state.uploadErrorMessage;
-      var errorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      return (0, _core.jsx)("div", {
-        css: _styles.emojiUploadWidget,
-        ref: this.props.onUploaderRef
-      }, (0, _core.jsx)("div", {
-        css: _styles.emojiUploadFooter
-      }, (0, _core.jsx)(_EmojiUploadPicker.default, {
-        ref: this.onUploaderRef,
-        onFileChooserClicked: this.onFileChooserClicked,
-        onUploadCancelled: this.onUploadCancelled,
-        onUploadEmoji: this.onUploadEmoji,
-        errorMessage: errorMessage
-      })));
-    }
-  }]);
-  return EmojiUploadComponent;
-}(_react.PureComponent);
-
-exports.default = EmojiUploadComponent;
+  };
+
+  return (0, _core.jsx)("div", {
+    css: _styles.emojiUploadWidget,
+    ref: onUploaderRef
+  }, (0, _core.jsx)("div", {
+    css: _styles.emojiUploadFooter
+  }, (0, _core.jsx)(_EmojiUploadPicker.default, {
+    onFileChooserClicked: onFileChooserClicked,
+    onUploadCancelled: onUploadCancelled,
+    onUploadEmoji: onUploadEmoji,
+    errorMessage: uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null
+  })));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiUploadComponent);
+
+exports.default = _default;

package/dist/cjs/hooks/useEmojiContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmojiContext = void 0;
+
+var _react = require("react");
+
+var _EmojiContext = require("../context/EmojiContext");
+
+var useEmojiContext = function useEmojiContext() {
+  return (0, _react.useContext)(_EmojiContext.EmojiContext);
+};
+
+exports.useEmojiContext = useEmojiContext;

package/dist/cjs/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "Emoji", {
     return _Emoji.default;
   }
 });
+Object.defineProperty(exports, "EmojiContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _EmojiContextProvider.EmojiContextProvider;
+  }
+});
 Object.defineProperty(exports, "EmojiImage", {
   enumerable: true,
   get: function get() {
@@ -198,6 +204,12 @@ Object.defineProperty(exports, "ufoExperiences", {
     return _analytics.ufoExperiences;
   }
 });
+Object.defineProperty(exports, "useEmojiContext", {
+  enumerable: true,
+  get: function get() {
+    return _useEmojiContext.useEmojiContext;
+  }
+});
 Object.defineProperty(exports, "withSampling", {
   enumerable: true,
   get: function get() {
@@ -241,6 +253,10 @@ var _constants = require("./util/constants");
 
 var _UsageFrequencyTracker = require("./api/internal/UsageFrequencyTracker");
 
+var _useEmojiContext = require("./hooks/useEmojiContext");
+
+var _EmojiContextProvider = require("./context/EmojiContextProvider");
+
 var _types = require("./types");
 
 var _default = _EmojiPicker.default;

package/dist/cjs/version.json

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