@webiny/ui 6.0.0-beta.0 → 6.0.0-rc.1

package/ImageUpload/SingleImageUpload.js

@@ -1,191 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SingleImageUpload = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
-var _FormElementMessage = require("../FormElementMessage");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Image = _interopRequireDefault(require("./Image"));
-var _ImageEditorDialog = require("./ImageEditorDialog");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var ImageUploadWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e96x95k0"
-} : {
-  target: "e96x95k0",
-  label: "ImageUploadWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}"
-} : {
-  name: "rdeqjg",
-  styles: "position:relative;.disabled{opacity:0.75;pointer-events:none;}.mdc-floating-label--float-above{transform:scale(0.75);top:10px;left:10px;color:var(--mdc-theme-text-secondary-on-background);}.mdc-text-field-helper-text{color:var(--mdc-theme-text-secondary-on-background);}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpbmdsZUltYWdlVXBsb2FkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMkIiLCJmaWxlIjoiU2luZ2xlSW1hZ2VVcGxvYWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRm9ybUNvbXBvbmVudFByb3BzIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCBCcm93c2VGaWxlcywgeyBTZWxlY3RlZEZpbGUsIEZpbGVFcnJvciB9IGZyb20gXCJyZWFjdC1idXR0ZXJmaWxlc1wiO1xuaW1wb3J0IHsgRm9ybUVsZW1lbnRNZXNzYWdlIH0gZnJvbSBcIn4vRm9ybUVsZW1lbnRNZXNzYWdlXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gXCJjbGFzc25hbWVzXCI7XG5pbXBvcnQgSW1hZ2UgZnJvbSBcIi4vSW1hZ2VcIjtcbmltcG9ydCB7IEltYWdlRWRpdG9yRGlhbG9nIH0gZnJvbSBcIi4vSW1hZ2VFZGl0b3JEaWFsb2dcIjtcblxuY29uc3QgSW1hZ2VVcGxvYWRXcmFwcGVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIFwiLmRpc2FibGVkXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC43NSxcbiAgICAgICAgcG9pbnRlckV2ZW50czogXCJub25lXCJcbiAgICB9LFxuICAgIFwiLm1kYy1mbG9hdGluZy1sYWJlbC0tZmxvYXQtYWJvdmVcIjoge1xuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMC43NSlcIixcbiAgICAgICAgdG9wOiAxMCxcbiAgICAgICAgbGVmdDogMTAsXG4gICAgICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfSxcbiAgICBcIi5tZGMtdGV4dC1maWVsZC1oZWxwZXItdGV4dFwiOiB7XG4gICAgICAgIGNvbG9yOiBcInZhcigtLW1kYy10aGVtZS10ZXh0LXNlY29uZGFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfVxufSk7XG5cbmludGVyZmFjZSBTaW5nbGVJbWFnZVVwbG9hZFByb3BzIGV4dGVuZHMgRm9ybUNvbXBvbmVudFByb3BzIHtcbiAgICAvLyBDb21wb25lbnQgbGFiZWwuXG4gICAgbGFiZWw/OiBzdHJpbmc7XG5cbiAgICAvLyBJcyBjb21wb25lbnQgZGlzYWJsZWQ/XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuXG4gICAgLy8gRGVzY3JpcHRpb24gYmVuZWF0aCB0aGUgaW1hZ2UuXG4gICAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG5cbiAgICAvLyBBIGNsYXNzTmFtZSBmb3IgdGhlIHJvb3QgZWxlbWVudC5cbiAgICBjbGFzc05hbWU/OiBzdHJpbmc7XG5cbiAgICAvLyBEZWZpbmUgYSBsaXN0IG9mIGFjY2VwdGVkIGltYWdlIHR5cGVzLlxuICAgIGFjY2VwdD86IHN0cmluZ1tdO1xuXG4gICAgLy8gRGVmaW5lIGZpbGUncyBtYXggYWxsb3dlZCBzaXplIChkZWZhdWx0IGlzIFwiMTBtYlwiKS5cbiAgICAvLyBVc2VzIFwiYnl0ZXNcIiAoaHR0cHM6Ly93d3cubnBtanMuY29tL3BhY2thZ2UvYnl0ZXMpIGxpYnJhcnkgdG8gY29udmVydCBzdHJpbmcgbm90YXRpb24gdG8gYWN0dWFsIG51bWJlci5cbiAgICBtYXhTaXplOiBzdHJpbmc7XG5cbiAgICAvLyBJbWFnZSBlZGl0b3Igb3B0aW9ucy5cbiAgICAvLyBQbGVhc2UgY2hlY2sgdGhlIGRvY3Mgb2YgSW1hZ2VFZGl0b3IgY29tcG9uZW50IGZvciB0aGUgbGlzdCBvZiBhbGwgYXZhaWxhYmxlIG9wdGlvbnMuXG4gICAgaW1hZ2VFZGl0b3I/OiB7XG4gICAgICAgIFtrZXk6IHN0cmluZ106IGFueTtcbiAgICB9O1xuXG4gICAgLy8gQ3VzdG9tIGltYWdlIHByZXZpZXcgcmVuZGVyZXIuIEJ5IGRlZmF1bHQgaW1hZ2VzIGFyZSByZW5kZXJlZCB2aWEgc2ltcGxlIDxpbWc+IGVsZW1lbnQuXG4gICAgcmVuZGVySW1hZ2VQcmV2aWV3PzogKCkgPT4gUmVhY3QuUmVhY3RFbGVtZW50PGFueT47XG5cbiAgICAvLyBTaG91bGQgcmVtb3ZlIGltYWdlIGJ1dHRvbiAodG9wIHJpZ2h0IOKclSkgYmUgc2hvd24/IERlZmF1bHQgaXMgc2V0IHRvIGB0cnVlYC5cbiAgICBzaG93UmVtb3ZlSW1hZ2VCdXR0b24/OiBib29sZWFuO1xuXG4gICAgLy8gVXNlIHRoZXNlIHRvIGN1c3RvbWl6ZSBlcnJvciBtZXNzYWdlcyAoZWcuIGlmIGkxOG4gc3VwcG9ydGVkIGlzIG5lZWRlZCkuXG4gICAgZXJyb3JNZXNzYWdlczoge1xuICAgICAgICBtYXhTaXplRXhjZWVkZWQ6IHN0cmluZztcbiAgICAgICAgdW5zdXBwb3J0ZWRGaWxlVHlwZTogc3RyaW5nO1xuICAgICAgICBkZWZhdWx0OiBzdHJpbmc7XG4gICAgICAgIG11bHRpcGxlTm90QWxsb3dlZDogc3RyaW5nO1xuICAgICAgICBtdWx0aXBsZU1heFNpemVFeGNlZWRlZDogc3RyaW5nO1xuICAgIH07XG59XG5cbmludGVyZmFjZSBTdGF0ZUltYWdlIHtcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgdHlwZTogc3RyaW5nO1xuICAgIHNpemU6IG51bWJlcjtcbiAgICBzcmM/OiBzdHJpbmc7XG59XG5pbnRlcmZhY2UgU3RhdGUge1xuICAgIGxvYWRpbmc6IGJvb2xlYW47XG4gICAgZXJyb3I6IEZpbGVFcnJvciB8IG51bGw7XG4gICAgaW1hZ2VFZGl0b3I6IHtcbiAgICAgICAgaW1hZ2U6IFN0YXRlSW1hZ2UgfCBudWxsO1xuICAgICAgICBvcGVuOiBib29sZWFuO1xuICAgIH07XG59XG5cbi8vIERvIG5vdCBhcHBseSBlZGl0aW5nIGZvciBmb2xsb3dpbmcgaW1hZ2UgdHlwZXMuXG5jb25zdCBub0ltYWdlRWRpdGluZ1R5cGVzID0gW1wiaW1hZ2Uvc3ZnK3htbFwiLCBcImltYWdlL2dpZlwiXTtcblxudHlwZSBFcnJvclR5cGUgPVxuICAgIHwgXCJtYXhTaXplRXhjZWVkZWRcIlxuICAgIHwgXCJ1bnN1cHBvcnRlZEZpbGVUeXBlXCJcbiAgICB8IFwiZGVmYXVsdFwiXG4gICAgfCBcIm11bHRpcGxlTm90QWxsb3dlZFwiXG4gICAgfCBcIm11bHRpcGxlTWF4U2l6ZUV4Y2VlZGVkXCI7XG5cbmV4cG9ydCBjbGFzcyBTaW5nbGVJbWFnZVVwbG9hZCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudDxTaW5nbGVJbWFnZVVwbG9hZFByb3BzLCBTdGF0ZT4ge1xuICAgIHN0YXRpYyBkZWZhdWx0UHJvcHM6IFBhcnRpYWw8U2luZ2xlSW1hZ2VVcGxvYWRQcm9wcz4gPSB7XG4gICAgICAgIG1heFNpemU6IFwiMTBtYlwiLFxuICAgICAgICBpbWFnZUVkaXRvcjoge30sXG4gICAgICAgIGFjY2VwdDogW1wiaW1hZ2UvanBlZ1wiLCBcImltYWdlL3BuZ1wiLCBcImltYWdlL2dpZlwiLCBcImltYWdlL3N2Zyt4bWxcIl0sXG4gICAgICAgIHNob3dSZW1vdmVJbWFnZUJ1dHRvbjogdHJ1ZSxcbiAgICAgICAgZXJyb3JNZXNzYWdlczoge1xuICAgICAgICAgICAgbWF4U2l6ZUV4Y2VlZGVkOiBcIk1heCBzaXplIGV4Y2VlZGVkLlwiLFxuICAgICAgICAgICAgbXVsdGlwbGVNYXhTaXplRXhjZWVkZWQ6IFwiU2VsZWN0ZWQgZmllbGRzIGV4Y2VlZCBtYXggZmlsZSBzaXplLlwiLFxuICAgICAgICAgICAgbXVsdGlwbGVOb3RBbGxvd2VkOiBcIk11bHRpcGxlIHNlbGVjdGlvbiBub3QgYWxsb3dlZC5cIixcbiAgICAgICAgICAgIHVuc3VwcG9ydGVkRmlsZVR5cGU6IFwiVW5zdXBwb3J0ZWQgZmlsZSB0eXBlLlwiLFxuICAgICAgICAgICAgZGVmYXVsdDogXCJBbiBlcnJvciBvY2N1cnJlZC5cIlxuICAgICAgICB9XG4gICAgfTtcblxuICAgIHB1YmxpYyBvdmVycmlkZSBzdGF0ZTogU3RhdGUgPSB7XG4gICAgICAgIGxvYWRpbmc6IGZhbHNlLFxuICAgICAgICBlcnJvcjogbnVsbCxcbiAgICAgICAgaW1hZ2VFZGl0b3I6IHtcbiAgICAgICAgICAgIG9wZW46IGZhbHNlLFxuICAgICAgICAgICAgaW1hZ2U6IG51bGxcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBoYW5kbGVGaWxlcyA9IChpbWFnZXM6IFNlbGVjdGVkRmlsZVtdKSA9PiB7XG4gICAgICAgIGNvbnN0IHsgb25DaGFuZ2UsIGltYWdlRWRpdG9yIH0gPSB0aGlzLnByb3BzO1xuICAgICAgICBjb25zdCBpbWFnZSA9IHtcbiAgICAgICAgICAgIG5hbWU6IGltYWdlc1swXS5uYW1lLFxuICAgICAgICAgICAgdHlwZTogaW1hZ2VzWzBdLnR5cGUsXG4gICAgICAgICAgICBzaXplOiBpbWFnZXNbMF0uc2l6ZSxcbiAgICAgICAgICAgIHNyYzogaW1hZ2VzWzBdLnNyYy5iYXNlNjRcbiAgICAgICAgfTtcblxuICAgICAgICB0aGlzLnNldFN0YXRlKHsgZXJyb3I6IG51bGwgfSwgKCkgPT4ge1xuICAgICAgICAgICAgaWYgKGltYWdlRWRpdG9yICYmICFub0ltYWdlRWRpdGluZ1R5cGVzLmluY2x1ZGVzKGltYWdlLnR5cGUpKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IGltYWdlRWRpdG9yOiB7IGltYWdlLCBvcGVuOiB0cnVlIH0gfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKGltYWdlKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfTtcblxuICAgIGhhbmRsZUVycm9ycyA9IChlcnJvcnM6IEZpbGVFcnJvcltdKSA9PiB7XG4gICAgICAgIGNvbnN0IFtlcnJvcl0gPSBlcnJvcnM7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoeyBlcnJvciB9KTtcbiAgICB9O1xuXG4gICAgcHVibGljIG92ZXJyaWRlIHJlbmRlcigpIHtcbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgY2xhc3NOYW1lLFxuICAgICAgICAgICAgdmFsdWUsXG4gICAgICAgICAgICB2YWxpZGF0aW9uLFxuICAgICAgICAgICAgbGFiZWwsXG4gICAgICAgICAgICBkZXNjcmlwdGlvbixcbiAgICAgICAgICAgIGFjY2VwdCxcbiAgICAgICAgICAgIG1heFNpemUsXG4gICAgICAgICAgICBvbkNoYW5nZSxcbiAgICAgICAgICAgIGltYWdlRWRpdG9yLFxuICAgICAgICAgICAgc2hvd1JlbW92ZUltYWdlQnV0dG9uLFxuICAgICAgICAgICAgcmVuZGVySW1hZ2VQcmV2aWV3XG4gICAgICAgIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICAgIGxldCBpbWFnZUVkaXRvckltYWdlU3JjID0gXCJcIjtcbiAgICAgICAgaWYgKHRoaXMuc3RhdGUuaW1hZ2VFZGl0b3IuaW1hZ2UgJiYgdGhpcy5zdGF0ZS5pbWFnZUVkaXRvci5pbWFnZS5zcmMpIHtcbiAgICAgICAgICAgIGltYWdlRWRpdG9ySW1hZ2VTcmMgPSB0aGlzLnN0YXRlLmltYWdlRWRpdG9yLmltYWdlLnNyYztcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHNyYyA9IHZhbHVlID8gdmFsdWUuc3JjIDogbnVsbDtcblxuICAgICAgICBjb25zdCBlcnJvclR5cGUgPSB0aGlzLnN0YXRlLmVycm9yID8gKHRoaXMuc3RhdGUuZXJyb3IudHlwZSBhcyBFcnJvclR5cGUpIDogbnVsbDtcblxuICAgICAgICBjb25zdCB7IGlzVmFsaWQ6IHZhbGlkYXRpb25Jc1ZhbGlkLCBtZXNzYWdlOiB2YWxpZGF0aW9uTWVzc2FnZSB9ID0gdmFsaWRhdGlvbiB8fCB7fTtcbiAgICAgICAgLyoqXG4gICAgICAgICAqIGFjY2VwdCBjYW4gYmUgc2FmZWx5IGNhc3QgYmVjYXVzZSBvZiBkZWZhdWx0IHZhbHVlXG4gICAgICAgICAqIGVycm9yVHlwZSBhcyBrZXlvZiBQcm9wc1tcImVycm9yTWVzc2FnZXNcIl0gY2FuIGJlIHNhZmVseVxuICAgICAgICAgKi9cbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxJbWFnZVVwbG9hZFdyYXBwZXIgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGNsYXNzTmFtZSl9PlxuICAgICAgICAgICAgICAgIHtsYWJlbCAmJiAhc3JjICYmIChcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJtZGMtZmxvYXRpbmctbGFiZWwgbWRjLWZsb2F0aW5nLWxhYmVsLS1mbG9hdC1hYm92ZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAge2xhYmVsfVxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAgPEltYWdlRWRpdG9yRGlhbG9nXG4gICAgICAgICAgICAgICAgICAgIG9wdGlvbnM9e2ltYWdlRWRpdG9yfVxuICAgICAgICAgICAgICAgICAgICBvcGVuPXt0aGlzLnN0YXRlLmltYWdlRWRpdG9yLm9wZW59XG4gICAgICAgICAgICAgICAgICAgIHNyYz17aW1hZ2VFZGl0b3JJbWFnZVNyY31cbiAgICAgICAgICAgICAgICAgICAgb25DbG9zZT17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZShzdGF0ZSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgc3RhdGUuaW1hZ2VFZGl0b3Iub3BlbiA9IGZhbHNlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBzdGF0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICBvbkFjY2VwdD17c3JjID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIFdlIHdyYXBwZWQgZXZlcnl0aGluZyBpbnRvIHNldFRpbWVvdXQgLSBwcmV2ZW50cyBkaWFsb2cgZnJlZXplIHdoZW4gbGFyZ2VyIGltYWdlIGlzIHNlbGVjdGVkLlxuICAgICAgICAgICAgICAgICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IGxvYWRpbmc6IHRydWUgfSwgYXN5bmMgKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZSAmJlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKGF3YWl0IG9uQ2hhbmdlKHsgLi4udGhpcy5zdGF0ZS5pbWFnZUVkaXRvci5pbWFnZSwgc3JjIH0pKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsb2FkaW5nOiBmYWxzZSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGltYWdlRWRpdG9yOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaW1hZ2U6IG51bGwsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb3BlbjogZmFsc2VcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxCcm93c2VGaWxlc1xuICAgICAgICAgICAgICAgICAgICBhY2NlcHQ9e2FjY2VwdCBhcyBzdHJpbmdbXX1cbiAgICAgICAgICAgICAgICAgICAgbWF4U2l6ZT17bWF4U2l6ZX1cbiAgICAgICAgICAgICAgICAgICAgY29udmVydFRvQmFzZTY0XG4gICAgICAgICAgICAgICAgICAgIG9uU3VjY2Vzcz17dGhpcy5oYW5kbGVGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgb25FcnJvcj17dGhpcy5oYW5kbGVFcnJvcnN9XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7KHsgYnJvd3NlRmlsZXMsIGdldERyb3Bab25lUHJvcHMgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiB7Li4uZ2V0RHJvcFpvbmVQcm9wcygpfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8SW1hZ2VcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVySW1hZ2VQcmV2aWV3PXtyZW5kZXJJbWFnZVByZXZpZXd9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxvYWRpbmc9e3RoaXMuc3RhdGUubG9hZGluZ31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICByZW1vdmVJbWFnZT17c2hvd1JlbW92ZUltYWdlQnV0dG9uID8gb25DaGFuZ2UgOiB1bmRlZmluZWR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHVwbG9hZEltYWdlPXticm93c2VGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWRpdEltYWdlPXticm93c2VGaWxlc31cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgPC9Ccm93c2VGaWxlcz5cblxuICAgICAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlIGVycm9yPnt2YWxpZGF0aW9uTWVzc2FnZX08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAge3ZhbGlkYXRpb25Jc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2U+e2Rlc2NyaXB0aW9ufTwvRm9ybUVsZW1lbnRNZXNzYWdlPlxuICAgICAgICAgICAgICAgICl9XG5cbiAgICAgICAgICAgICAgICB7dGhpcy5zdGF0ZS5lcnJvciAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxGb3JtRWxlbWVudE1lc3NhZ2UgZXJyb3I+XG4gICAgICAgICAgICAgICAgICAgICAgICB7dGhpcy5wcm9wcy5lcnJvck1lc3NhZ2VzW1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVycm9yVHlwZSBhcyBrZXlvZiBTaW5nbGVJbWFnZVVwbG9hZFByb3BzW1wiZXJyb3JNZXNzYWdlc1wiXVxuICAgICAgICAgICAgICAgICAgICAgICAgXSB8fCB0aGlzLnByb3BzLmVycm9yTWVzc2FnZXMuZGVmYXVsdH1cbiAgICAgICAgICAgICAgICAgICAgPC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvSW1hZ2VVcGxvYWRXcmFwcGVyPlxuICAgICAgICApO1xuICAgIH1cbn1cbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-// Do not apply editing for following image types.
-var noImageEditingTypes = ["image/svg+xml", "image/gif"];
-var SingleImageUpload = exports.SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  function SingleImageUpload() {
-    var _this;
-    (0, _classCallCheck2.default)(this, SingleImageUpload);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2.default)(this, SingleImageUpload, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", {
-      loading: false,
-      error: null,
-      imageEditor: {
-        open: false,
-        image: null
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleFiles", function (images) {
-      var _this$props = _this.props,
-        onChange = _this$props.onChange,
-        imageEditor = _this$props.imageEditor;
-      var image = {
-        name: images[0].name,
-        type: images[0].type,
-        size: images[0].size,
-        src: images[0].src.base64
-      };
-      _this.setState({
-        error: null
-      }, function () {
-        if (imageEditor && !noImageEditingTypes.includes(image.type)) {
-          _this.setState({
-            imageEditor: {
-              image: image,
-              open: true
-            }
-          });
-        } else {
-          onChange && onChange(image);
-        }
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleErrors", function (errors) {
-      var _errors = (0, _slicedToArray2.default)(errors, 1),
-        error = _errors[0];
-      _this.setState({
-        error: error
-      });
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(SingleImageUpload, _React$Component);
-  return (0, _createClass2.default)(SingleImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        value = _this$props2.value,
-        validation = _this$props2.validation,
-        label = _this$props2.label,
-        description = _this$props2.description,
-        accept = _this$props2.accept,
-        maxSize = _this$props2.maxSize,
-        onChange = _this$props2.onChange,
-        imageEditor = _this$props2.imageEditor,
-        showRemoveImageButton = _this$props2.showRemoveImageButton,
-        renderImagePreview = _this$props2.renderImagePreview;
-      var imageEditorImageSrc = "";
-      if (this.state.imageEditor.image && this.state.imageEditor.image.src) {
-        imageEditorImageSrc = this.state.imageEditor.image.src;
-      }
-      var src = value ? value.src : null;
-      var errorType = this.state.error ? this.state.error.type : null;
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.message;
-      /**
-       * accept can be safely cast because of default value
-       * errorType as keyof Props["errorMessages"] can be safely
-       */
-      return /*#__PURE__*/_react.default.createElement(ImageUploadWrapper, {
-        className: (0, _classnames.default)(className)
-      }, label && !src && /*#__PURE__*/_react.default.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/_react.default.createElement(_ImageEditorDialog.ImageEditorDialog, {
-        options: imageEditor,
-        open: this.state.imageEditor.open,
-        src: imageEditorImageSrc,
-        onClose: function onClose() {
-          _this2.setState(function (state) {
-            state.imageEditor.open = false;
-            return state;
-          });
-        },
-        onAccept: function onAccept(src) {
-          // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.
-          setTimeout(function () {
-            _this2.setState({
-              loading: true
-            }, async function () {
-              onChange && (await onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _this2.state.imageEditor.image), {}, {
-                src: src
-              })));
-              _this2.setState({
-                loading: false,
-                imageEditor: {
-                  image: null,
-                  open: false
-                }
-              });
-            });
-          });
-        }
-      }), /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
-        accept: accept,
-        maxSize: maxSize,
-        convertToBase64: true,
-        onSuccess: this.handleFiles,
-        onError: this.handleErrors
-      }, function (_ref2) {
-        var browseFiles = _ref2.browseFiles,
-          getDropZoneProps = _ref2.getDropZoneProps;
-        return /*#__PURE__*/_react.default.createElement("div", getDropZoneProps(), /*#__PURE__*/_react.default.createElement(_Image.default, {
-          renderImagePreview: renderImagePreview,
-          loading: _this2.state.loading,
-          value: value,
-          removeImage: showRemoveImageButton ? onChange : undefined,
-          uploadImage: browseFiles,
-          editImage: browseFiles
-        }));
-      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), this.state.error && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, this.props.errorMessages[errorType] || this.props.errorMessages.default));
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(SingleImageUpload, "defaultProps", {
-  maxSize: "10mb",
-  imageEditor: {},
-  accept: ["image/jpeg", "image/png", "image/gif", "image/svg+xml"],
-  showRemoveImageButton: true,
-  errorMessages: {
-    maxSizeExceeded: "Max size exceeded.",
-    multipleMaxSizeExceeded: "Selected fields exceed max file size.",
-    multipleNotAllowed: "Multiple selection not allowed.",
-    unsupportedFileType: "Unsupported file type.",
-    default: "An error occurred."
-  }
-});
+import React from "react";
+import { Alert } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.
+ */
+export const SingleImageUpload = ({}) => {
+  return /*#__PURE__*/React.createElement(Alert, {
+    type: "danger",
+    variant: "strong"
+  }, "Deprecated component! The original code has been moved to `@webiny/admin-ui` package.");
+};
 
 //# sourceMappingURL=SingleImageUpload.js.map

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_FormElementMessage","_classnames","_Image","_ImageEditorDialog","_EMOTION_STRINGIFIED_CSS_ERROR__","ImageUploadWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","noImageEditingTypes","SingleImageUpload","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","loading","error","imageEditor","open","image","images","_this$props","props","onChange","type","size","src","base64","setState","includes","errors","_errors","_slicedToArray2","_inherits2","_createClass2","key","value","render","_this2","_this$props2","className","validation","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","ImageEditorDialog","options","onClose","onAccept","setTimeout","_objectSpread2","convertToBase64","onSuccess","handleFiles","onError","handleErrors","_ref2","browseFiles","getDropZoneProps","removeImage","undefined","uploadImage","editImage","FormElementMessage","errorMessages","React","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport { ImageEditorDialog } from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Alert","SingleImageUpload","createElement","type","variant"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormComponentProps } from \"~/types.js\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.\n */\nexport const SingleImageUpload = ({}: SingleImageUploadProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AA4CxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC,CAAyB,CAAC,KAAK;EAC7D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/index.d.ts

@@ -1,4 +1,4 @@
-export { SingleImageUpload } from "./SingleImageUpload";
-export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
-export { ImageEditorDialog } from "./ImageEditorDialog";
+export { SingleImageUpload } from "./SingleImageUpload.js";
+export { MultiImageUpload } from "./MultiImageUpload.js";
+export { Image } from "./Image.js";
+export { ImageEditorDialog } from "./ImageEditorDialog.js";

package/ImageUpload/index.js

@@ -1,36 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function get() {
-    return _Image.default;
-  }
-});
-Object.defineProperty(exports, "ImageEditorDialog", {
-  enumerable: true,
-  get: function get() {
-    return _ImageEditorDialog.ImageEditorDialog;
-  }
-});
-Object.defineProperty(exports, "MultiImageUpload", {
-  enumerable: true,
-  get: function get() {
-    return _MultiImageUpload.MultiImageUpload;
-  }
-});
-Object.defineProperty(exports, "SingleImageUpload", {
-  enumerable: true,
-  get: function get() {
-    return _SingleImageUpload.SingleImageUpload;
-  }
-});
-var _SingleImageUpload = require("./SingleImageUpload");
-var _MultiImageUpload = require("./MultiImageUpload");
-var _Image = _interopRequireDefault(require("./Image"));
-var _ImageEditorDialog = require("./ImageEditorDialog");
+export { SingleImageUpload } from "./SingleImageUpload.js";
+export { MultiImageUpload } from "./MultiImageUpload.js";
+export { Image } from "./Image.js";
+export { ImageEditorDialog } from "./ImageEditorDialog.js";
 
 //# sourceMappingURL=index.js.map

package/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SingleImageUpload","require","_MultiImageUpload","_Image","_interopRequireDefault","_ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA","ignoreList":[]}
+{"version":3,"names":["SingleImageUpload","MultiImageUpload","Image","ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload.js\";\nexport { MultiImageUpload } from \"./MultiImageUpload.js\";\nexport { Image } from \"./Image.js\";\nexport { ImageEditorDialog } from \"./ImageEditorDialog.js\";\n"],"mappings":"AAAA,SAASA,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,KAAK;AACd,SAASC,iBAAiB","ignoreList":[]}

package/Input/Input.d.ts

@@ -1,8 +1,59 @@
+import type { ReactElement } from "react";
 import React from "react";
-import { TextFieldProps } from "@rmwc/textfield";
-import { FormComponentProps } from "../types";
-import { ReactElement } from "react";
-export declare type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
+import type { FormComponentProps } from "../types.js";
+export interface TextFieldHelperTextProps {
+    /** Make the help text always visible */
+    persistent?: boolean;
+    /** Make the help a validation message style */
+    validationMsg?: boolean;
+    /** Content for the help text */
+    children: React.ReactNode;
+}
+export interface TextFieldProps {
+    /** Sets the value for controlled TextFields. */
+    value?: string | number;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode | TextFieldHelperTextProps;
+    /** Shows the character count, must be used in conjunction with maxLength. */
+    characterCount?: boolean;
+    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */
+    invalid?: boolean;
+    /** Makes the Textfield disabled. */
+    disabled?: boolean;
+    /** Makes the Textfield required. */
+    required?: boolean;
+    /** Outline the TextField. */
+    outlined?: boolean;
+    /** How to align the text inside the TextField. Defaults to 'start'. */
+    align?: "start" | "end";
+    /** A label for the input. */
+    label?: React.ReactNode;
+    /** The label floats automatically based on value, but you can use this prop for manual control. */
+    floatLabel?: boolean;
+    /** Makes a multiline TextField. */
+    textarea?: boolean;
+    /** Makes the TextField fullwidth. */
+    fullwidth?: boolean;
+    /** Add a leading icon. */
+    icon?: any;
+    /** Add a trailing icon. */
+    trailingIcon?: any;
+    /** By default, props spread to the input. These props are for the component's root container. */
+    rootProps?: any;
+    /** A reference to the native input or textarea. */
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
+    /** The type of input field to render, search, number, etc */
+    type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
+}
+export type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
     autoComplete?: string;
     rawOnChange?: boolean;
     autoFocus?: boolean;
@@ -10,15 +61,16 @@ export declare type InputProps<TValue = any> = FormComponentProps<TValue> & Text
     description?: string | ReactElement;
     rows?: number;
     maxLength?: number;
-    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
-    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onBlur?: (e: React.SyntheticEvent<any>) => any;
+    onKeyDown?: (e: React.SyntheticEvent<any>) => any;
     onEnter?: () => any;
     className?: string;
     "data-testid"?: string;
     size?: "small" | "medium" | "large";
     children?: React.ReactNode;
 };
-export declare type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {
-    key?: string;
-};
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
 export declare const Input: (props: InputProps) => React.JSX.Element;

package/Input/Input.js

@@ -1,92 +1,89 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _textfield = require("@rmwc/textfield");
-var _FormElementMessage = require("../FormElementMessage");
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _styled = require("./styled");
-var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter", "size"];
+import React, { useCallback, useMemo } from "react";
+import pick from "lodash/pick.js";
+import { Input as AdminInput, Textarea as AdminTextarea } from "@webiny/admin-ui";
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
  */
 
 // IconProps directly passed to RMWC
-var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount"];
-var Input = exports.Input = function Input(props) {
-  var onChange = (0, _react.useCallback)(function (e) {
-    var onChange = props.onChange,
-      rawOnChange = props.rawOnChange;
-    if (!onChange) {
-      return;
-    }
+const rmwcProps = ["label", "type", "disabled", "readOnly", "placeholder", "onKeyDown", "onEnter", "onKeyPress", "onKeyUp", "onFocus", "className", "maxLength", "characterCount", "autoComplete", "maxLength"];
 
-    // @ts-expect-error
-    onChange(rawOnChange ? e : e.target.value);
-  }, [props.onChange, props.rawOnChange]);
-  var onBlur = (0, _react.useCallback)(async function (e) {
-    var validate = props.validate,
-      onBlur = props.onBlur;
-    if (validate) {
-      // Since we are accessing event in an async operation, we need to persist it.
-      // See https://reactjs.org/docs/events.html#event-pooling.
-      e.persist();
-      await validate();
-    }
-    onBlur && onBlur(e);
-  }, [props.validate, props.onBlur]);
-  var autoFocus = props.autoFocus,
-    value = props.value,
-    label = props.label,
-    description = props.description,
-    placeholder = props.placeholder,
-    rows = props.rows,
-    validation = props.validation,
-    icon = props.icon,
-    trailingIcon = props.trailingIcon,
-    onEnter = props.onEnter,
-    size = props.size,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var inputValue = value;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
+export const Input = props => {
+  const {
+    autoFocus,
+    value,
+    description,
+    placeholder,
+    rows,
+    validation,
+    icon,
+    trailingIcon,
+    onBlur,
+    onChange,
+    rawOnChange,
+    required,
+    inputRef,
+    ...rest
+  } = props;
+  let inputValue = value;
   if (value === null || typeof value === "undefined") {
     inputValue = "";
   }
-  var _ref = validation || {},
-    validationIsValid = _ref.isValid,
-    validationMessage = _ref.message;
-  var inputOnKeyDown = (0, _react.useCallback)(function (e) {
-    if (typeof onEnter === "function" && e.key === "Enter") {
-      onEnter();
+  const size = useMemo(() => {
+    if (props.size === "medium") {
+      return "md";
+    }
+    if (props.size === "large") {
+      return "lg";
     }
-    if (typeof rest.onKeyDown === "function") {
-      return rest.onKeyDown(e);
+    return "lg";
+  }, [props.size]);
+  const getValidIcon = useCallback(icon => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      return icon;
     }
-  }, [rest.onKeyDown, onEnter]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
-    onKeyDown: inputOnKeyDown,
+    return undefined;
+  }, []);
+  if (Boolean(rows)) {
+    return /*#__PURE__*/React.createElement(AdminTextarea, Object.assign({}, pick(rest, rmwcProps), {
+      autoFocus: autoFocus,
+      value: inputValue,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: size,
+      className: "webiny-ui-input",
+      "data-testid": props["data-testid"],
+      validation: validation,
+      description: description,
+      required: required,
+      rows: rows,
+      forwardEventOnChange: rawOnChange,
+      textareaRef: inputRef,
+      onBlur: onBlur
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AdminInput, Object.assign({}, pick(rest, rmwcProps), {
     autoFocus: autoFocus,
-    textarea: Boolean(rows),
     value: inputValue,
     onChange: onChange,
-    onBlur: onBlur,
-    label: label,
-    icon: icon,
+    startIcon: getValidIcon(icon),
+    endIcon: getValidIcon(trailingIcon),
     placeholder: placeholder,
-    trailingIcon: trailingIcon,
-    rows: rows,
-    className: (0, _classnames.default)("webiny-ui-input", _styled.webinyInputStyles, props.size ? "webiny-ui-input--size-".concat(size) : null),
-    "data-testid": props["data-testid"]
-  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    size: size,
+    className: "webiny-ui-input",
+    "data-testid": props["data-testid"],
+    validation: validation,
+    description: description,
+    required: required,
+    forwardEventOnChange: rawOnChange,
+    inputRef: inputRef,
+    onBlur: onBlur
+  }));
 };
 
 //# sourceMappingURL=Input.js.map