@atlaskit/media-avatar-picker 22.1.7 → 22.3.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/media-avatar-picker
 
+## 22.3.0
+
+### Minor Changes
+
+- [`e01dd6e92ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e01dd6e92ec) - Made component ImageNavigator publicly available
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.2.0
+
+### Minor Changes
+
+- [`5e6fa1c70a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5e6fa1c70a5) - fix unit tests for modal dialog
+- [`9c0241362a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c0241362a6) - [ux] Upgrade to the latest version of @atlaskit/modal-dialog. This change includes shifting the primary button in the footer of the modal to be on the right instead of the left.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.1.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.1.7
 
 ### Patch Changes

package/dist/cjs/avatar-list/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,9 +29,13 @@ var _styled = require("./styled");
 
 var _styled2 = require("../predefined-avatar-view/styled");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 AvatarList = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(AvatarList, _PureComponent);

package/dist/cjs/avatar-list/styled.js

@@ -11,16 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ul {\n    display: flex;\n\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    li {\n      padding-right: 5px;\n      margin: 0;\n    }\n  }\n\n  /* hide tickbox and file type icon in overlay\n   * because those are not necessary for avatars */\n\n  .tickbox {\n    visibility: hidden;\n  }\n\n  .file-type-icon {\n    visibility: hidden;\n  }\n"]);
+var _templateObject;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var AvatarListWrapper = _styledComponents.default.div(_templateObject());
+var AvatarListWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ul {\n    display: flex;\n\n    padding: 0;\n    margin: 0;\n\n    list-style-type: none;\n\n    li {\n      padding-right: 5px;\n      margin: 0;\n    }\n  }\n\n  /* hide tickbox and file type icon in overlay\n   * because those are not necessary for avatars */\n\n  .tickbox {\n    visibility: hidden;\n  }\n\n  .file-type-icon {\n    visibility: hidden;\n  }\n"])));
 
 exports.AvatarListWrapper = AvatarListWrapper;

package/dist/cjs/avatar-picker-dialog/avatar-picker-dialog-loader.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +11,6 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -31,9 +31,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(AsyncAvatarPickerDialog, _React$PureComponent);
@@ -74,7 +78,7 @@ var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
                 _context.prev = 1;
                 _context.next = 4;
                 return Promise.resolve().then(function () {
-                  return (0, _interopRequireWildcard2.default)(require('.'));
+                  return _interopRequireWildcard(require('.'));
                 });
 
               case 4:

package/dist/cjs/avatar-picker-dialog/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -49,9 +49,13 @@ var _layoutConst = require("./layout-const");
 
 var _types = require("./types");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 MAX_SIZE_MB = 10;
 exports.MAX_SIZE_MB = MAX_SIZE_MB;
@@ -203,7 +207,9 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerContent", function () {
       var title = _this.props.title;
-      return /*#__PURE__*/_react.default.createElement(_styled.ModalHeader, null, title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_an_avatar));
+      return /*#__PURE__*/_react.default.createElement(_styled.ModalHeader, {
+        "data-test-id": "modal-header"
+      }, title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_an_avatar));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "footerContent", function () {
       var _this$props2 = _this.props,
@@ -232,18 +238,25 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       var content = /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
         height: "".concat(_layoutConst.AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
-        scrollBehavior: "outside",
-        components: {
-          Header: this.headerContent,
-          Footer: this.footerContent
-        },
+        shouldScrollInViewport: true,
         onClose: this.props.onCancel
-      }, /*#__PURE__*/_react.default.createElement(_styled.AvatarPickerViewWrapper, null, this.renderBody()));
+      }, this.headerContent(), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_styled.AvatarPickerViewWrapper, null, this.renderBody())), this.footerContent());
 
       return this.context.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
         locale: "en"
       }, content);
     }
+  }, {
+    key: "isDisabled",
+    get: function get() {
+      var _this$state2 = this.state,
+          selectedImage = _this$state2.selectedImage,
+          selectedAvatar = _this$state2.selectedAvatar;
+      var _this$props3 = this.props,
+          imageSource = _this$props3.imageSource,
+          isLoading = _this$props3.isLoading;
+      return isLoading || !(imageSource || selectedImage || selectedAvatar);
+    }
   }, {
     key: "getPredefinedAvatars",
     value: function getPredefinedAvatars() {
@@ -261,10 +274,10 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     key: "renderPredefinedAvatarList",
     value: function renderPredefinedAvatarList() {
       var isLoading = this.props.isLoading;
-      var _this$state2 = this.state,
-          selectedAvatar = _this$state2.selectedAvatar,
-          selectedImage = _this$state2.selectedImage,
-          selectedImageSource = _this$state2.selectedImageSource;
+      var _this$state3 = this.state,
+          selectedAvatar = _this$state3.selectedAvatar,
+          selectedImage = _this$state3.selectedImage,
+          selectedImageSource = _this$state3.selectedImageSource;
       var avatars = this.getPredefinedAvatars();
 
       if (isLoading || selectedImage || selectedImageSource || avatars.length === 0) {
@@ -281,15 +294,15 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderBody",
     value: function renderBody() {
-      var _this$props3 = this.props,
-          avatars = _this$props3.avatars,
-          isLoading = _this$props3.isLoading,
-          predefinedAvatarsText = _this$props3.predefinedAvatarsText;
-      var _this$state3 = this.state,
-          mode = _this$state3.mode,
-          selectedImageSource = _this$state3.selectedImageSource,
-          selectedAvatar = _this$state3.selectedAvatar,
-          errorMessage = _this$state3.errorMessage;
+      var _this$props4 = this.props,
+          avatars = _this$props4.avatars,
+          isLoading = _this$props4.isLoading,
+          predefinedAvatarsText = _this$props4.predefinedAvatarsText;
+      var _this$state4 = this.state,
+          mode = _this$state4.mode,
+          selectedImageSource = _this$state4.selectedImageSource,
+          selectedAvatar = _this$state4.selectedAvatar,
+          errorMessage = _this$state4.errorMessage;
 
       switch (mode) {
         case _types.Mode.Cropping:
@@ -314,17 +327,6 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
           }));
       }
     }
-  }, {
-    key: "isDisabled",
-    get: function get() {
-      var _this$state4 = this.state,
-          selectedImage = _this$state4.selectedImage,
-          selectedAvatar = _this$state4.selectedAvatar;
-      var _this$props4 = this.props,
-          imageSource = _this$props4.imageSource,
-          isLoading = _this$props4.isLoading;
-      return isLoading || !(imageSource || selectedImage || selectedAvatar);
-    }
   }]);
   return AvatarPickerDialog;
 }(_react.PureComponent);

package/dist/cjs/avatar-picker-dialog/styled.js

@@ -11,58 +11,20 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  width: 100%;\n\n  button:first-child {\n    margin-right: 3px;\n  }\n"]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  margin: 15px;\n  font-weight: 500;\n  font-size: 20px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 339px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var AvatarPickerViewWrapper = _styledComponents.default.div(_templateObject());
+var AvatarPickerViewWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 339px;\n"])));
 
 exports.AvatarPickerViewWrapper = AvatarPickerViewWrapper;
 
-var ModalHeader = _styledComponents.default.div(_templateObject2());
+var ModalHeader = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 15px;\n  font-weight: 500;\n  font-size: 20px;\n"])));
 
 exports.ModalHeader = ModalHeader;
 
-var CroppingWrapper = _styledComponents.default.div(_templateObject3());
+var CroppingWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
 
 exports.CroppingWrapper = CroppingWrapper;
 
-var ModalFooterButtons = _styledComponents.default.div(_templateObject4());
+var ModalFooterButtons = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  width: 100%;\n\n  button:first-child {\n    margin-right: 3px;\n  }\n"])));
 
 exports.ModalFooterButtons = ModalFooterButtons;

package/dist/cjs/image-cropper/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -39,9 +39,13 @@ var _avatarPickerDialog = require("../avatar-picker-dialog");
 
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 ImageCropper = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ImageCropper, _Component);

package/dist/cjs/image-cropper/styled.js

@@ -15,111 +15,33 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 500px;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.5);\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  /* Is needed so image is not selected, when dragged */\n  -webkit-user-select: none; /* Chrome all / Safari all */\n  -moz-user-select: none; /* Firefox all */\n  -ms-user-select: none; /* IE 10+ */\n  user-select: none; /* Likely future */\n  border-radius: ", "px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var Container = _styledComponents.default.div(_templateObject(), (0, _constants.borderRadius)());
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
 
 exports.Container = Container;
 
-var ImageContainer = _styledComponents.default.div(_templateObject2(), (0, _constants.borderRadius)());
+var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  /* Is needed so image is not selected, when dragged */\n  -webkit-user-select: none; /* Chrome all / Safari all */\n  -moz-user-select: none; /* Firefox all */\n  -ms-user-select: none; /* IE 10+ */\n  user-select: none; /* Likely future */\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
 
 exports.ImageContainer = ImageContainer;
 var CONTAINER_PADDING = 28;
 exports.CONTAINER_PADDING = CONTAINER_PADDING;
 
-var Mask = _styledComponents.default.div(_templateObject3(), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING);
+var Mask = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.5);\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING);
 
-var RectMask = (0, _styledComponents.default)(Mask)(_templateObject4(), (0, _constants.borderRadius)());
+var RectMask = (0, _styledComponents.default)(Mask)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
 exports.RectMask = RectMask;
-var CircularMask = (0, _styledComponents.default)(Mask)(_templateObject5());
+var CircularMask = (0, _styledComponents.default)(Mask)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 500px;\n"])));
 exports.CircularMask = CircularMask;
 
-var DragOverlay = _styledComponents.default.div(_templateObject6());
+var DragOverlay = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"])));
 
 exports.DragOverlay = DragOverlay;
 
-var RemoveImageContainer = _styledComponents.default.div(_templateObject7());
+var RemoveImageContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
 
 exports.RemoveImageContainer = RemoveImageContainer;
 
-var RemoveImageButton = _styledComponents.default.button(_templateObject8(), (0, _constants.borderRadius)(), _colors.N50A);
+var RemoveImageButton = _styledComponents.default.button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), _colors.N50A);
 
 exports.RemoveImageButton = RemoveImageButton;

package/dist/cjs/image-navigator/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -57,9 +57,13 @@ var _slider = require("./slider");
 
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 viewport = new _viewport2.Viewport(_layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_PADDING);
 exports.viewport = viewport;
@@ -414,14 +418,6 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       })), isDragging ? /*#__PURE__*/_react.default.createElement(_styled.SelectionBlocker, null) : null);
     } // We prioritize passed image rather than the one coming from the uploader
 
-  }, {
-    key: "render",
-    value: function render() {
-      var isLoading = this.props.isLoading;
-      var dataURI = this.dataURI;
-      var content = dataURI && !isLoading ? this.renderImageCropper(dataURI) : this.renderImageUploader();
-      return /*#__PURE__*/_react.default.createElement(_styled.Container, null, content);
-    }
   }, {
     key: "dataURI",
     get: function get() {
@@ -431,6 +427,14 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       var fileImageSource = this.state.fileImageSource;
       return errorMessage ? undefined : imageSource || fileImageSource;
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.props.isLoading;
+      var dataURI = this.dataURI;
+      var content = dataURI && !isLoading ? this.renderImageCropper(dataURI) : this.renderImageUploader();
+      return /*#__PURE__*/_react.default.createElement(_styled.Container, null, content);
+    }
   }]);
   return ImageNavigator;
 }(_react.Component);

package/dist/cjs/image-navigator/slider.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,9 +33,13 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _styled = require("./styled");
 
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 defaultProps = {
   value: 0