@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -1,77 +1,41 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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; } }
-
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { useRef } from 'react';
 import AkButton from '@atlaskit/button/custom-theme-button';
 
-var FileChooser = /*#__PURE__*/function (_PureComponent) {
-  _inherits(FileChooser, _PureComponent);
-
-  var _super = _createSuper(FileChooser);
-
-  function FileChooser() {
-    var _this;
-
-    _classCallCheck(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 = useRef(null);
+
+  var handleOnChooseFile = function handleOnChooseFile() {
+    if (!filePickerRef.current) {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "onChooseFile", function () {
-      if (_this.props.onClick) {
-        _this.props.onClick();
-      }
-
-      var chooseFile = _this.refs['chooseFile'];
-
-      if (chooseFile) {
-        chooseFile.click();
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(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.createElement("span", null, /*#__PURE__*/React.createElement(AkButton, {
-        onClick: this.onChooseFile,
-        isDisabled: isDisabled,
-        "aria-describedby": ariaDescribedBy
-      }, label), /*#__PURE__*/React.createElement("input", {
-        className: "emojiUploadFileInput",
-        ref: "chooseFile",
-        onChange: onChange,
-        type: "file",
-        accept: accept,
-        style: {
-          display: 'none'
-        }
-      }));
+    if (onClick) {
+      onClick();
     }
-  }]);
 
-  return FileChooser;
-}(PureComponent);
+    filePickerRef.current.click();
+  };
+
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AkButton, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy
+  }, label), /*#__PURE__*/React.createElement("input", {
+    className: "emojiUploadFileInput",
+    ref: filePickerRef,
+    onChange: onChange,
+    type: "file",
+    accept: accept,
+    style: {
+      display: 'none'
+    }
+  }));
+};
 
-export { FileChooser as default };
+export default FileChooser;

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

@@ -1,17 +1,5 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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; } }
-
-import React from 'react';
-import { PureComponent } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 var getTargetNode = function getTargetNode(target) {
@@ -23,168 +11,129 @@ var getTargetNode = function getTargetNode(target) {
   return target;
 };
 
-/*
- * Simple implementation of popup while waiting for ak-inline-dialog
- */
-var Popup = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Popup, _PureComponent);
-
-  var _super = _createSuper(Popup);
-
-  function Popup() {
-    var _this;
-
-    _classCallCheck(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 = useRef();
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      debounced = _useState2[0],
+      setDebounced = _useState2[1];
+
+  var applyBelowPosition = 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 = useCallback(function () {
+    if (typeof window === 'undefined') {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "debounced", null);
-
-    _defineProperty(_assertThisInitialized(_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
-
-
-      _this.debounced = window.setTimeout(function () {
-        _this.applyAbsolutePosition();
+    var targetNode = getTargetNode(target);
 
-        _this.debounced = null;
-      }, 30);
-    });
+    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 = useCallback(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-    return _this;
-  }
+    if (relativePosition === 'above') {
+      applyAbovePosition();
+    } else if (relativePosition === 'below') {
+      applyBelowPosition();
+    } else {
+      var targetNode = getTargetNode(target);
 
-  _createClass(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 = useCallback(function () {
+    if (debounced) {
+      clearTimeout(debounced);
+      setDebounced(null);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      window.removeEventListener('resize', this.handleResize);
 
-      if (this.popup) {
-        ReactDOM.unmountComponentAtNode(this.popup);
-        document.body.removeChild(this.popup);
-      }
-    } // Internal
+    if (typeof window === 'undefined') {
+      return;
+    } // Timeout set to 30ms as to not throttle IE11
 
-  }, {
-    key: "applyBelowPosition",
-    value: function applyBelowPosition() {
-      var targetNode = getTargetNode(this.props.target);
 
-      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");
-      }
+    var debounceId = window.setTimeout(function () {
+      applyAbsolutePosition();
+      setDebounced(null);
+    }, 30);
+    setDebounced(debounceId);
+  }, [applyAbsolutePosition, debounced]);
+  var renderPopup = useCallback(function () {
+    if (!popup.current) {
+      return;
     }
-  }, {
-    key: "applyAbovePosition",
-    value: function applyAbovePosition() {
-      if (typeof window === 'undefined') {
-        return;
-      }
 
-      var targetNode = getTargetNode(this.props.target);
+    ReactDOM.render(children, popup.current);
+  }, [children]);
+  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 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");
-      }
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize);
     }
-  }, {
-    key: "applyAbsolutePosition",
-    value: function applyAbsolutePosition() {
+
+    applyAbsolutePosition();
+    renderPopup();
+    return function () {
       if (typeof window === 'undefined') {
         return;
       }
 
-      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();
-          }
-        }
-      }
+      window.removeEventListener('resize', handleResize);
 
-      if (this.props.zIndex && this.popup) {
-        this.popup.style.zIndex = "".concat(this.props.zIndex);
-      }
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      if (this.popup) {
-        ReactDOM.render(this.props.children, this.popup);
+      if (popup.current) {
+        ReactDOM.unmountComponentAtNode(popup.current);
+        document.body.removeChild(popup.current);
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      // inline placeholder element for react to render inplace
-      return /*#__PURE__*/React.createElement("div", null);
-    }
-  }]);
-
-  return Popup;
-}(PureComponent);
-
-_defineProperty(Popup, "defaultProps", {
-  relativePosition: 'auto',
-  offsetX: 0,
-  offsetY: 0,
-  zIndex: 0
-});
+    };
+  }, [applyAbsolutePosition, handleResize, renderPopup]);
+  return /*#__PURE__*/React.createElement("div", null);
+};
 
-export { Popup as default };
+export default Popup;

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

@@ -21,13 +21,16 @@ var ResourcedEmojiComponentRenderStatesEnum;
 export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
   var emojiProvider = _ref.emojiProvider,
       emojiId = _ref.emojiId,
-      showTooltip = _ref.showTooltip,
-      customFallback = _ref.customFallback,
+      _ref$showTooltip = _ref.showTooltip,
+      showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+      _ref$customFallback = _ref.customFallback,
+      customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
       _ref$fitToHeight = _ref.fitToHeight,
       fitToHeight = _ref$fitToHeight === void 0 ? defaultEmojiHeight : _ref$fitToHeight,
       _ref$optimistic = _ref.optimistic,
       optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
-      optimisticImageURL = _ref.optimisticImageURL;
+      _ref$optimisticImageU = _ref.optimisticImageURL,
+      optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU;
   var shortName = emojiId.shortName,
       id = emojiId.id,
       fallback = emojiId.fallback;
@@ -179,4 +182,5 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     showTooltip: showTooltip,
     fitToHeight: fitToHeight
   })));
-};
+};
+export default ResourcedEmojiComponent;

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

@@ -1,72 +1,52 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-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 AkButton from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
-import { Component } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
 import { buttonSpinner, uploadEmojiButton, uploadRetryButton } from './styles';
 
-var RetryableButton = /*#__PURE__*/function (_Component) {
-  _inherits(RetryableButton, _Component);
-
-  var _super = _createSuper(RetryableButton);
-
-  function RetryableButton(props) {
-    _classCallCheck(this, RetryableButton);
-
-    return _super.call(this, props);
+var LoadingSpinner = function LoadingSpinner() {
+  return jsx("span", {
+    css: buttonSpinner
+  }, jsx(Spinner, null));
+};
+
+var RetryButton = function RetryButton(props) {
+  var onSubmit = props.onSubmit;
+  return jsx(FormattedMessage, messages.retryLabel, function (retryLabel) {
+    return jsx(AkButton, {
+      css: uploadRetryButton,
+      appearance: "warning",
+      onClick: onSubmit
+    }, retryLabel);
+  });
+};
+
+var UploadButton = function UploadButton(props) {
+  var appearance = props.appearance,
+      onSubmit = props.onSubmit,
+      label = props.label;
+  return jsx(AkButton, {
+    css: uploadEmojiButton,
+    appearance: appearance,
+    onClick: onSubmit
+  }, label);
+};
+
+var RetryableButton = function RetryableButton(props) {
+  var loading = props.loading,
+      error = props.error;
+
+  if (loading) {
+    return jsx(LoadingSpinner, null);
   }
 
-  _createClass(RetryableButton, [{
-    key: "renderLoading",
-    value: function renderLoading() {
-      return jsx("span", {
-        css: buttonSpinner
-      }, jsx(Spinner, null));
-    }
-  }, {
-    key: "renderRetry",
-    value: function renderRetry() {
-      var _this$props = this.props,
-          loading = _this$props.loading,
-          onSubmit = _this$props.onSubmit;
-      return loading ? this.renderLoading() : jsx(FormattedMessage, messages.retryLabel, function (retryLabel) {
-        return jsx(AkButton, {
-          css: 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() : jsx(AkButton, {
-        css: uploadEmojiButton,
-        appearance: appearance,
-        onClick: onSubmit
-      }, label);
-    }
-  }]);
+  if (error) {
+    return jsx(RetryButton, props);
+  }
 
-  return RetryableButton;
-}(Component);
+  return jsx(UploadButton, props);
+};
 
-export { RetryableButton as default };
+export default RetryableButton;