@atlaskit/emoji 65.1.1 → 65.2.0

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

@@ -9,20 +9,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 _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 _react = _interopRequireWildcard(require("react"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -31,65 +17,42 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 FileChooser = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(FileChooser, _PureComponent);
-
-  var _super = _createSuper(FileChooser);
-
-  function FileChooser() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, FileChooser);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var FileChooser = function FileChooser(props) {
+  var accept = props.accept,
+      ariaDescribedBy = props.ariaDescribedBy,
+      isDisabled = props.isDisabled,
+      label = props.label,
+      onChange = props.onChange,
+      onClick = props.onClick;
+  var filePickerRef = (0, _react.useRef)(null);
+
+  var handleOnChooseFile = function handleOnChooseFile() {
+    if (!filePickerRef.current) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChooseFile", function () {
-      if (_this.props.onClick) {
-        _this.props.onClick();
-      }
-
-      var chooseFile = _this.refs['chooseFile'];
-
-      if (chooseFile) {
-        chooseFile.click();
-      }
-    });
-    return _this;
-  }
+    if (onClick) {
+      onClick();
+    }
 
-  (0, _createClass2.default)(FileChooser, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          accept = _this$props.accept,
-          ariaDescribedBy = _this$props.ariaDescribedBy,
-          isDisabled = _this$props.isDisabled,
-          label = _this$props.label,
-          onChange = _this$props.onChange;
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-        onClick: this.onChooseFile,
-        isDisabled: isDisabled,
-        "aria-describedby": ariaDescribedBy
-      }, label), /*#__PURE__*/_react.default.createElement("input", {
-        className: "emojiUploadFileInput",
-        ref: "chooseFile",
-        onChange: onChange,
-        type: "file",
-        accept: accept,
-        style: {
-          display: 'none'
-        }
-      }));
+    filePickerRef.current.click();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy
+  }, label), /*#__PURE__*/_react.default.createElement("input", {
+    className: "emojiUploadFileInput",
+    ref: filePickerRef,
+    onChange: onChange,
+    type: "file",
+    accept: accept,
+    style: {
+      display: 'none'
     }
-  }]);
-  return FileChooser;
-}(_react.PureComponent);
+  }));
+};
 
-exports.default = FileChooser;
+var _default = FileChooser;
+exports.default = _default;

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

@@ -9,19 +9,7 @@ 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 _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 _react = _interopRequireWildcard(require("react"));
 
@@ -31,10 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 getTargetNode = function getTargetNode(target) {
   if (typeof target === 'string') {
     return document.querySelector(target);
@@ -44,164 +28,131 @@ var getTargetNode = function getTargetNode(target) {
   return target;
 };
 
-/*
- * Simple implementation of popup while waiting for ak-inline-dialog
- */
-var Popup = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Popup, _PureComponent);
-
-  var _super = _createSuper(Popup);
-
-  function Popup() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Popup);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var Popup = function Popup(props) {
+  var _props$relativePositi = props.relativePosition,
+      relativePosition = _props$relativePositi === void 0 ? 'auto' : _props$relativePositi,
+      _props$offsetX = props.offsetX,
+      offsetX = _props$offsetX === void 0 ? 0 : _props$offsetX,
+      _props$offsetY = props.offsetY,
+      offsetY = _props$offsetY === void 0 ? 0 : _props$offsetY,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? 9 : _props$zIndex,
+      target = props.target,
+      children = props.children;
+  var popup = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      debounced = _useState2[0],
+      setDebounced = _useState2[1];
+
+  var applyBelowPosition = (0, _react.useCallback)(function () {
+    var targetNode = getTargetNode(target);
+
+    if (targetNode && popup.current) {
+      var box = targetNode.getBoundingClientRect();
+      var top = box.bottom + (offsetY || 0);
+      var left = box.left + (offsetX || 0);
+      popup.current.style.top = "".concat(top, "px");
+      popup.current.style.bottom = '';
+      popup.current.style.left = "".concat(left, "px");
+    }
+  }, [offsetX, offsetY, target]);
+  var applyAbovePosition = (0, _react.useCallback)(function () {
+    if (typeof window === 'undefined') {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "debounced", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function () {
-      if (_this.debounced) {
-        clearTimeout(_this.debounced);
-        _this.debounced = null;
-      }
-
-      if (typeof window === 'undefined') {
-        return;
-      } // Timeout set to 30ms as to not throttle IE11
-
+    var targetNode = getTargetNode(target);
 
-      _this.debounced = window.setTimeout(function () {
-        _this.applyAbsolutePosition();
+    if (targetNode && popup.current) {
+      var box = targetNode.getBoundingClientRect();
+      var bottom = window.innerHeight - box.top + (offsetY || 0);
+      var left = box.left + (offsetX || 0);
+      popup.current.style.top = '';
+      popup.current.style.bottom = "".concat(bottom, "px");
+      popup.current.style.left = "".concat(left, "px");
+    }
+  }, [offsetX, offsetY, target]);
+  var applyAbsolutePosition = (0, _react.useCallback)(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-        _this.debounced = null;
-      }, 30);
-    });
-    return _this;
-  }
+    if (relativePosition === 'above') {
+      applyAbovePosition();
+    } else if (relativePosition === 'below') {
+      applyBelowPosition();
+    } else {
+      var targetNode = getTargetNode(target);
 
-  (0, _createClass2.default)(Popup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.popup = document.createElement('div');
-      document.body.appendChild(this.popup);
-      this.popup.style.position = 'absolute';
+      if (targetNode) {
+        var box = targetNode.getBoundingClientRect();
+        var viewPortHeight = window.innerHeight;
 
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', this.handleResize);
+        if (box.top < viewPortHeight / 2) {
+          applyBelowPosition();
+        } else {
+          applyAbovePosition();
+        }
       }
+    }
 
-      this.applyAbsolutePosition();
-      this.renderContent();
+    if (zIndex && popup.current) {
+      popup.current.style.zIndex = "".concat(zIndex);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.applyAbsolutePosition();
-      this.renderContent();
+  }, [applyAbovePosition, applyBelowPosition, relativePosition, target, zIndex]);
+  var handleResize = (0, _react.useCallback)(function () {
+    if (debounced) {
+      clearTimeout(debounced);
+      setDebounced(null);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (typeof window === 'undefined') {
-        return;
-      }
 
-      window.removeEventListener('resize', this.handleResize);
+    if (typeof window === 'undefined') {
+      return;
+    } // Timeout set to 30ms as to not throttle IE11
 
-      if (this.popup) {
-        _reactDom.default.unmountComponentAtNode(this.popup);
 
-        document.body.removeChild(this.popup);
-      }
-    } // Internal
+    var debounceId = window.setTimeout(function () {
+      applyAbsolutePosition();
+      setDebounced(null);
+    }, 30);
+    setDebounced(debounceId);
+  }, [applyAbsolutePosition, debounced]);
+  var renderPopup = (0, _react.useCallback)(function () {
+    if (!popup.current) {
+      return;
+    }
 
-  }, {
-    key: "applyBelowPosition",
-    value: function applyBelowPosition() {
-      var targetNode = getTargetNode(this.props.target);
+    _reactDom.default.render(children, popup.current);
+  }, [children]);
+  (0, _react.useEffect)(function () {
+    popup.current = document.createElement('div');
+    document.body.appendChild(popup.current);
+    popup.current.style.position = 'absolute';
 
-      if (targetNode && this.popup) {
-        var box = targetNode.getBoundingClientRect();
-        var top = box.bottom + (this.props.offsetY || 0);
-        var left = box.left + (this.props.offsetX || 0);
-        this.popup.style.top = "".concat(top, "px");
-        this.popup.style.bottom = '';
-        this.popup.style.left = "".concat(left, "px");
-      }
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize);
     }
-  }, {
-    key: "applyAbovePosition",
-    value: function applyAbovePosition() {
+
+    applyAbsolutePosition();
+    renderPopup();
+    return function () {
       if (typeof window === 'undefined') {
         return;
       }
 
-      var targetNode = getTargetNode(this.props.target);
+      window.removeEventListener('resize', handleResize);
 
-      if (targetNode && this.popup) {
-        var box = targetNode.getBoundingClientRect();
-        var bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
-        var left = box.left + (this.props.offsetX || 0);
-        this.popup.style.top = '';
-        this.popup.style.bottom = "".concat(bottom, "px");
-        this.popup.style.left = "".concat(left, "px");
-      }
-    }
-  }, {
-    key: "applyAbsolutePosition",
-    value: function applyAbsolutePosition() {
-      if (typeof window === 'undefined') {
-        return;
-      }
+      if (popup.current) {
+        _reactDom.default.unmountComponentAtNode(popup.current);
 
-      if (this.props.relativePosition === 'above') {
-        this.applyAbovePosition();
-      } else if (this.props.relativePosition === 'below') {
-        this.applyBelowPosition();
-      } else {
-        var targetNode = getTargetNode(this.props.target);
-
-        if (targetNode) {
-          var box = targetNode.getBoundingClientRect();
-          var viewPortHeight = window.innerHeight;
-
-          if (box.top < viewPortHeight / 2) {
-            this.applyBelowPosition();
-          } else {
-            this.applyAbovePosition();
-          }
-        }
+        document.body.removeChild(popup.current);
       }
+    };
+  }, [applyAbsolutePosition, handleResize, renderPopup]);
+  return /*#__PURE__*/_react.default.createElement("div", null);
+};
 
-      if (this.props.zIndex && this.popup) {
-        this.popup.style.zIndex = "".concat(this.props.zIndex);
-      }
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      if (this.popup) {
-        _reactDom.default.render(this.props.children, this.popup);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      // inline placeholder element for react to render inplace
-      return /*#__PURE__*/_react.default.createElement("div", null);
-    }
-  }]);
-  return Popup;
-}(_react.PureComponent);
-
-exports.default = Popup;
-(0, _defineProperty2.default)(Popup, "defaultProps", {
-  relativePosition: 'auto',
-  offsetX: 0,
-  offsetY: 0,
-  zIndex: 0
-});
+var _default = Popup;
+exports.default = _default;

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

@@ -7,82 +7,61 @@ 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 _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _react = require("react");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
 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 RetryableButton = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(RetryableButton, _Component);
-
-  var _super = _createSuper(RetryableButton);
+/** @jsx jsx */
+var LoadingSpinner = function LoadingSpinner() {
+  return (0, _core.jsx)("span", {
+    css: _styles.buttonSpinner
+  }, (0, _core.jsx)(_spinner.default, null));
+};
+
+var RetryButton = function RetryButton(props) {
+  var onSubmit = props.onSubmit;
+  return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
+    return (0, _core.jsx)(_customThemeButton.default, {
+      css: _styles.uploadRetryButton,
+      appearance: "warning",
+      onClick: onSubmit
+    }, retryLabel);
+  });
+};
+
+var UploadButton = function UploadButton(props) {
+  var appearance = props.appearance,
+      onSubmit = props.onSubmit,
+      label = props.label;
+  return (0, _core.jsx)(_customThemeButton.default, {
+    css: _styles.uploadEmojiButton,
+    appearance: appearance,
+    onClick: onSubmit
+  }, label);
+};
+
+var RetryableButton = function RetryableButton(props) {
+  var loading = props.loading,
+      error = props.error;
+
+  if (loading) {
+    return (0, _core.jsx)(LoadingSpinner, null);
+  }
 
-  function RetryableButton(props) {
-    (0, _classCallCheck2.default)(this, RetryableButton);
-    return _super.call(this, props);
+  if (error) {
+    return (0, _core.jsx)(RetryButton, props);
   }
 
-  (0, _createClass2.default)(RetryableButton, [{
-    key: "renderLoading",
-    value: function renderLoading() {
-      return (0, _core.jsx)("span", {
-        css: _styles.buttonSpinner
-      }, (0, _core.jsx)(_spinner.default, null));
-    }
-  }, {
-    key: "renderRetry",
-    value: function renderRetry() {
-      var _this$props = this.props,
-          loading = _this$props.loading,
-          onSubmit = _this$props.onSubmit;
-      return loading ? this.renderLoading() : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
-        return (0, _core.jsx)(_customThemeButton.default, {
-          css: _styles.uploadRetryButton,
-          appearance: "warning",
-          onClick: onSubmit
-        }, retryLabel);
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          loading = _this$props2.loading,
-          error = _this$props2.error,
-          appearance = _this$props2.appearance,
-          onSubmit = _this$props2.onSubmit,
-          label = _this$props2.label;
-      return error ? this.renderRetry() : loading ? this.renderLoading() : (0, _core.jsx)(_customThemeButton.default, {
-        css: _styles.uploadEmojiButton,
-        appearance: appearance,
-        onClick: onSubmit
-      }, label);
-    }
-  }]);
-  return RetryableButton;
-}(_react.Component);
-
-exports.default = RetryableButton;
+  return (0, _core.jsx)(UploadButton, props);
+};
+
+var _default = RetryableButton;
+exports.default = _default;