@atlaskit/media-avatar-picker 23.2.1 → 24.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-avatar-picker
 
+## 24.0.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 24.0.0
+
+### Major Changes
+
+- [`c251c5d890c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c251c5d890c) - [MEX-1026] Migrated from styled-components library to @emotion/react in @atlaskit/media-avatar-picker
+
+## 23.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.2.1
 
 ### Patch Changes

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,15 +21,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styled = require("./styled");
+var _react = require("@emotion/react");
 
-var _styled2 = require("../predefined-avatar-view/styled");
+var _react2 = require("react");
 
-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); }
+var _styles = require("./styles");
 
-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; }
+var _smallImageAvatar = require("../predefined-avatar-view/smallImageAvatar");
 
 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); }; }
 
@@ -74,19 +70,22 @@ var AvatarList = /*#__PURE__*/function (_PureComponent) {
           selectedAvatar = _this$props.selectedAvatar;
       var cards = avatars.map(function (avatar, idx) {
         var elementKey = "predefined-avatar-".concat(idx);
-        return /*#__PURE__*/_react.default.createElement("li", {
+        return (0, _react.jsx)("li", {
           key: elementKey
-        }, /*#__PURE__*/_react.default.createElement(_styled2.SmallAvatarImage, {
+        }, (0, _react.jsx)(_smallImageAvatar.SmallAvatarImage, {
           isSelected: avatar === selectedAvatar,
           src: avatar.dataURI,
-          onClick: _this2.onItemClick(avatar)
+          onClick: _this2.onItemClick(avatar),
+          id: "small-avatar-image"
         }));
       });
-      return /*#__PURE__*/_react.default.createElement(_styled.AvatarListWrapper, null, /*#__PURE__*/_react.default.createElement("ul", null, cards));
+      return (0, _react.jsx)("div", {
+        css: _styles.avatarListWrapperStyles
+      }, (0, _react.jsx)("ul", null, cards));
     }
   }]);
   return AvatarList;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.AvatarList = AvatarList;
 (0, _defineProperty2.default)(AvatarList, "defaultProps", {

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarListWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var avatarListWrapperStyles = (0, _react.css)(_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.avatarListWrapperStyles = avatarListWrapperStyles;

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

@@ -29,6 +29,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -41,7 +43,7 @@ var _imageNavigator = _interopRequireDefault(require("../image-navigator"));
 
 var _predefinedAvatarList = require("../predefined-avatar-list");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _predefinedAvatarView = require("../predefined-avatar-view");
 
@@ -208,9 +210,10 @@ 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, {
+      return (0, _react2.jsx)("div", {
+        css: _styles.modalHeaderStyles,
         "data-test-id": "modal-header"
-      }, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
+      }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "footerContent", function () {
       var _this$props2 = _this.props,
@@ -221,14 +224,16 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
           onSaveClick = _assertThisInitialize.onSaveClick,
           isDisabled = _assertThisInitialize.isDisabled;
 
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_styled.ModalFooterButtons, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      return (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)("div", {
+        css: _styles.modalFooterButtonsStyles
+      }, (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "primary",
         onClick: onSaveClick,
         isDisabled: isDisabled
-      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.save)), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }, primaryButtonText || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.save)), (0, _react2.jsx)(_customThemeButton.default, {
         appearance: "default",
         onClick: onCancel
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel))));
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel))));
     });
     return _this;
   }
@@ -236,14 +241,15 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(AvatarPickerDialog, [{
     key: "render",
     value: function render() {
-      var content = /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+      var content = (0, _react2.jsx)(_modalDialog.default, {
         height: "".concat(_layoutConst.AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
-      }, this.headerContent(), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_styled.AvatarPickerViewWrapper, null, this.renderBody())), this.footerContent());
-
-      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      }, this.headerContent(), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+        css: _styles.avatarPickerViewWrapperStyles
+      }, this.renderBody())), this.footerContent());
+      return this.props.intl ? content : (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
     }
@@ -285,7 +291,7 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_predefinedAvatarList.PredefinedAvatarList, {
+      return (0, _react2.jsx)(_predefinedAvatarList.PredefinedAvatarList, {
         selectedAvatar: selectedAvatar,
         avatars: avatars,
         onAvatarSelected: this.setSelectedAvatarState,
@@ -307,7 +313,9 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
 
       switch (mode) {
         case _types.Mode.Cropping:
-          return /*#__PURE__*/_react.default.createElement(_styled.CroppingWrapper, null, /*#__PURE__*/_react.default.createElement(_imageNavigator.default, {
+          return (0, _react2.jsx)("div", {
+            css: _styles.croppingWrapperStyles
+          }, (0, _react2.jsx)(_imageNavigator.default, {
             imageSource: selectedImageSource,
             errorMessage: errorMessage,
             onImageLoaded: this.setSelectedImageState,
@@ -319,7 +327,7 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
           }), this.renderPredefinedAvatarList());
 
         case _types.Mode.PredefinedAvatars:
-          return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_predefinedAvatarView.PredefinedAvatarView, {
+          return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_predefinedAvatarView.PredefinedAvatarView, {
             avatars: avatars,
             onAvatarSelected: this.setSelectedAvatarState,
             onGoBack: this.onGoBack,

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalHeaderStyles = exports.modalFooterButtonsStyles = exports.croppingWrapperStyles = exports.avatarPickerViewWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var avatarPickerViewWrapperStyles = (0, _react.css)(_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.avatarPickerViewWrapperStyles = avatarPickerViewWrapperStyles;
+var modalHeaderStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 15px;\n  font-weight: 500;\n  font-size: 20px;\n"])));
+exports.modalHeaderStyles = modalHeaderStyles;
+var croppingWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
+exports.croppingWrapperStyles = croppingWrapperStyles;
+var modalFooterButtonsStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  width: 100%;\n\n  button:first-child {\n    margin-right: 3px;\n  }\n"])));
+exports.modalFooterButtonsStyles = modalFooterButtonsStyles;

package/dist/cjs/image-cropper/crop-to-data-uri.js

@@ -7,7 +7,7 @@ exports.cropToDataURI = void 0;
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _util = require("../util");
 
@@ -17,8 +17,8 @@ var cropToDataURI = function cropToDataURI(imageElement, imageRect, cropRect, sc
       width = cropRect.width,
       height = cropRect.height;
   var scaleWithDefault = scale || 1;
-  var destinationWidth = Math.max(width - _styled.CONTAINER_PADDING * 2, 0);
-  var destinationHeight = Math.max(height - _styled.CONTAINER_PADDING * 2, 0);
+  var destinationWidth = Math.max(width - _styles.CONTAINER_PADDING * 2, 0);
+  var destinationHeight = Math.max(height - _styles.CONTAINER_PADDING * 2, 0);
 
   var _getCanvas = (0, _util.getCanvas)(destinationWidth, destinationHeight),
       canvas = _getCanvas.canvas,
@@ -52,8 +52,8 @@ var cropToDataURI = function cropToDataURI(imageElement, imageRect, cropRect, sc
 
   var sourceImageWidth = imageRect.width / scaleWithDefault;
   var sourceImageHeight = imageRect.height / scaleWithDefault;
-  var sourceLeft = (_styled.CONTAINER_PADDING - left) / scaleWithDefault;
-  var sourceTop = (_styled.CONTAINER_PADDING - top) / scaleWithDefault;
+  var sourceLeft = (_styles.CONTAINER_PADDING - left) / scaleWithDefault;
+  var sourceTop = (_styles.CONTAINER_PADDING - top) / scaleWithDefault;
   var sourceWidth = destinationWidth / scaleWithDefault;
   var sourceHeight = destinationHeight / scaleWithDefault;
   var sourceRight = sourceImageWidth - sourceWidth - sourceLeft;

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

@@ -23,7 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
@@ -33,7 +35,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _isImageRemote = require("./isImageRemote");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 
@@ -126,11 +128,15 @@ var ImageCropper = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.Container, {
+      return (0, _react.jsx)("div", {
+        id: "container",
+        css: _styles.containerStyles,
         style: containerStyle
-      }, /*#__PURE__*/_react.default.createElement(_styled.ImageContainer, {
+      }, (0, _react.jsx)("div", {
+        id: "image-container",
+        css: _styles.imageContainerStyles,
         style: imageContainerStyle
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
+      }, (0, _react.jsx)(_mediaUi.MediaImage, {
         crossOrigin: crossOrigin,
         dataURI: imageSource,
         crop: false,
@@ -138,18 +144,29 @@ var ImageCropper = /*#__PURE__*/function (_Component) {
         previewOrientation: imageOrientation,
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
-      })), isCircularMask ? /*#__PURE__*/_react.default.createElement(_styled.CircularMask, null) : /*#__PURE__*/_react.default.createElement(_styled.RectMask, null), /*#__PURE__*/_react.default.createElement(_styled.DragOverlay, {
+      })), isCircularMask ? (0, _react.jsx)("div", {
+        css: _styles.circularMaskStyles
+      }) : (0, _react.jsx)("div", {
+        css: _styles.rectMaskStyles
+      }), (0, _react.jsx)("div", {
+        id: "drag-overlay",
+        css: _styles.dragOverlayStyles,
         onMouseDown: this.onDragStarted
-      }), /*#__PURE__*/_react.default.createElement(_styled.RemoveImageContainer, null, /*#__PURE__*/_react.default.createElement(_styled.RemoveImageButton, {
+      }), (0, _react.jsx)("div", {
+        id: "remove-image-container",
+        css: _styles.removeImageContainerStyles
+      }, (0, _react.jsx)("button", {
+        id: "remove-image-button",
+        css: _styles.removeImageButtonStyles,
         onClick: onRemoveImage
-      }, /*#__PURE__*/_react.default.createElement(_cross.default, {
+      }, (0, _react.jsx)(_cross.default, {
         size: "small",
         label: formatMessage(_mediaUi.messages.remove_image)
       }))));
     }
   }]);
   return ImageCropper;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ImageCropper = ImageCropper;
 (0, _defineProperty2.default)(ImageCropper, "defaultProps", {

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeImageContainerStyles = exports.removeImageButtonStyles = exports.rectMaskStyles = exports.imageContainerStyles = exports.dragOverlayStyles = exports.containerStyles = exports.circularMaskStyles = exports.CONTAINER_PADDING = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
+exports.containerStyles = containerStyles;
+var imageContainerStyles = (0, _react.css)(_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.imageContainerStyles = imageContainerStyles;
+var CONTAINER_PADDING = 28;
+exports.CONTAINER_PADDING = CONTAINER_PADDING;
+var maskStyles = (0, _react.css)(_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 rectMaskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, (0, _constants.borderRadius)());
+exports.rectMaskStyles = rectMaskStyles;
+var circularMaskStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
+exports.circularMaskStyles = circularMaskStyles;
+var dragOverlayStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"])));
+exports.dragOverlayStyles = dragOverlayStyles;
+var removeImageContainerStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
+exports.removeImageContainerStyles = removeImageContainerStyles;
+var removeImageButtonStyles = (0, _react.css)(_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.removeImageButtonStyles = removeImageButtonStyles;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragZone = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+var _excluded = ["showBorder", "isDroppingFile", "children"];
+
+var DragZone = function DragZone(_ref) {
+  var showBorder = _ref.showBorder,
+      isDroppingFile = _ref.isDroppingFile,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _styles.dragZoneStyles)({
+      showBorder: showBorder,
+      isDroppingFile: isDroppingFile
+    })
+  }, props), children);
+};
+
+exports.DragZone = DragZone;

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

@@ -31,6 +31,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -43,7 +45,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var exenv = _interopRequireWildcard(require("exenv"));
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _images = require("./images");
 
@@ -57,6 +59,8 @@ var _slider = require("./slider");
 
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 
+var _dragZone = require("./dragZone");
+
 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; }
@@ -243,21 +247,26 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       var dropZoneImageSrc = errorMessage ? _images.errorIcon : _images.uploadPlaceholder;
       var dragZoneText = errorMessage || formatMessage(_mediaUi.messages.drag_and_drop_images_here);
       var dragZoneAlt = errorMessage || formatMessage(_mediaUi.messages.upload_image);
-      return /*#__PURE__*/_react.default.createElement(_styled.DragZone, {
+      return (0, _react2.jsx)(_dragZone.DragZone, {
         showBorder: showBorder,
         isDroppingFile: isDroppingFile,
         onDragLeave: _this.onDragLeave,
         onDragEnter: _this.onDragEnter,
         onDragOver: _this.onDragOver,
         onDrop: _this.onDrop
-      }, isLoading ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      }, isLoading ? (0, _react2.jsx)(_spinner.default, {
         size: "medium"
-      }) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styled.DragZoneImage, {
+      }) : (0, _react2.jsx)("div", null, (0, _react2.jsx)("img", {
+        id: "drag-zone-image",
+        css: _styles.dragZoneImageStyles,
         src: dropZoneImageSrc,
         alt: dragZoneAlt
-      }), /*#__PURE__*/_react.default.createElement(_styled.DragZoneText, {
-        isFullSize: !!errorMessage
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+      }), (0, _react2.jsx)("div", {
+        id: "drag-zone-text",
+        css: (0, _styles.dragZoneTextStyles)({
+          isFullSize: !!errorMessage
+        })
+      }, (0, _react2.jsx)(_mediaUi.Ellipsify, {
         text: dragZoneText,
         lines: 3
       }))));
@@ -379,10 +388,17 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           errorMessage = _this$props3.errorMessage,
           isLoading = _this$props3.isLoading;
-      return /*#__PURE__*/_react.default.createElement(_styled.ImageUploader, null, this.renderDragZone(), isLoading ? null : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styled.PaddedBreak, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      return (0, _react2.jsx)("div", {
+        id: "image-uploader",
+        css: _styles.imageUploaderStyles
+      }, this.renderDragZone(), isLoading ? null : (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", {
+        id: "padded-break",
+        css: _styles.paddedBreakStyles
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_customThemeButton.default, {
         onClick: this.onUploadButtonClick,
         isDisabled: isLoading
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), /*#__PURE__*/_react.default.createElement(_styled.FileInput, {
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
+        css: _styles.fileInputStyles,
         type: "file",
         id: "image-input",
         onChange: this.onFileChange,
@@ -402,7 +418,9 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
           onImageLoaded = this.onImageLoaded,
           onRemoveImage = this.onRemoveImage;
       var itemBounds = viewport.itemBounds;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styled.ImageBg, null), /*#__PURE__*/_react.default.createElement(_imageCropper.default, {
+      return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
+        css: _styles.imageBgStyles
+      }), (0, _react2.jsx)(_imageCropper.default, {
         imageSource: dataURI,
         imageOrientation: imageOrientation,
         containerSize: _layoutConst.CONTAINER_SIZE,
@@ -415,10 +433,14 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
         onImageLoaded: onImageLoaded,
         onRemoveImage: onRemoveImage,
         onImageError: onImageError
-      }), /*#__PURE__*/_react.default.createElement(_styled.SliderContainer, null, /*#__PURE__*/_react.default.createElement(_slider.Slider, {
+      }), (0, _react2.jsx)("div", {
+        css: _styles.sliderContainerStyles
+      }, (0, _react2.jsx)(_slider.Slider, {
         value: scale,
         onChange: this.onScaleChange
-      })), isDragging ? /*#__PURE__*/_react.default.createElement(_styled.SelectionBlocker, null) : null);
+      })), isDragging ? (0, _react2.jsx)("div", {
+        css: _styles.selectionBlockerStyles
+      }) : null);
     } // We prioritize passed image rather than the one coming from the uploader
 
   }, {
@@ -436,7 +458,9 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       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 (0, _react2.jsx)("div", {
+        css: _styles.containerStyles
+      }, content);
     }
   }]);
   return ImageNavigator;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,7 +19,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _range = _interopRequireDefault(require("@atlaskit/range"));
 
@@ -31,11 +31,7 @@ var _scaleSmall = _interopRequireDefault(require("@atlaskit/icon/glyph/media-ser
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-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; }
+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); }; }
 
@@ -62,20 +58,22 @@ var Slider = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           value = _this$props.value,
           onChange = _this$props.onChange;
-      return /*#__PURE__*/_react.default.createElement(_styled.SliderWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      return (0, _react.jsx)("div", {
+        css: _styles.sliderWrapperStyles
+      }, (0, _react.jsx)(_customThemeButton.default, {
         className: "zoom_button zoom_button_small",
-        iconAfter: /*#__PURE__*/_react.default.createElement(_scaleSmall.default, {
+        iconAfter: (0, _react.jsx)(_scaleSmall.default, {
           label: "scale-small-icon"
         }),
         onClick: function onClick() {
           return onChange(0);
         }
-      }), /*#__PURE__*/_react.default.createElement(_range.default, {
+      }), (0, _react.jsx)(_range.default, {
         value: value,
         onChange: onChange
-      }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }), (0, _react.jsx)(_customThemeButton.default, {
         className: "zoom_button zoom_button_large",
-        iconAfter: /*#__PURE__*/_react.default.createElement(_scaleLarge.default, {
+        iconAfter: (0, _react.jsx)(_scaleLarge.default, {
           label: "scale-large-icon"
         }),
         onClick: function onClick() {
@@ -85,7 +83,7 @@ var Slider = /*#__PURE__*/function (_Component) {
     }
   }]);
   return Slider;
-}(_react.Component);
+}(_react2.Component);
 
 exports.Slider = Slider;
 (0, _defineProperty2.default)(Slider, "defaultProps", defaultProps);