@webiny/app-admin 5.32.0 → 5.33.0-beta.0

package/components/FileManager.js

@@ -7,144 +7,119 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FileManager = void 0;
+exports.FileManagerRenderer = exports.FileManager = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _FileManagerView = _interopRequireDefault(require("./FileManager/FileManagerView"));
+var _reactComposition = require("@webiny/react-composition");
 
-var _pick = _interopRequireDefault(require("lodash/pick"));
+var _FileManagerView = _interopRequireDefault(require("./FileManager/FileManagerView"));
 
 var _FileManagerContext = require("./FileManager/FileManagerContext");
 
-var _excluded = ["children"];
+var _excluded = ["id", "src"],
+    _excluded2 = ["onChange", "images", "accept"],
+    _excluded3 = ["children", "render", "onChange"];
 
-var FileManagerPortal = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(FileManagerPortal, _React$Component);
+function getPortalTarget() {
+  var target = window.document.getElementById("file-manager-container");
 
-  var _super = (0, _createSuper2.default)(FileManagerPortal);
+  if (!target) {
+    target = document.createElement("div");
+    target.setAttribute("id", "file-manager-container");
+    document.body && document.body.appendChild(target);
+  }
 
-  function FileManagerPortal(props) {
-    var _this;
+  return target;
+} // This jewel was taken from https://davidgomes.com/pick-omit-over-union-types-in-typescript/. Massive thanks, David!
 
-    (0, _classCallCheck2.default)(this, FileManagerPortal);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "container", null);
 
-    if (!window) {
-      return (0, _possibleConstructorReturn2.default)(_this);
-    }
+/**
+ * Convert a FileItem object to a FileManagerFileItem, which is then passed to `onChange` callback.
+ */
+var formatFileItem = function formatFileItem(_ref) {
+  var id = _ref.id,
+      src = _ref.src,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var props = rest;
+  return {
+    id: id,
+    src: src,
+    meta: Object.keys(rest).map(function (key) {
+      return {
+        key: key,
+        value: props[key]
+      };
+    })
+  };
+};
+/**
+ * If `accept` prop is not passed, and `images` prop is set, use these default mime types.
+ * Defaults can be overridden using the `createComponentPlugin` and `FileManagerRenderer` component.
+ */
 
-    _this.container = window.document.getElementById("file-manager-container");
 
-    if (!_this.container) {
-      _this.container = document.createElement("div");
+var imagesAccept = ["image/jpg", "image/jpeg", "image/tiff", "image/gif", "image/png", "image/webp", "image/bmp", "image/svg+xml"];
 
-      _this.container.setAttribute("id", "file-manager-container");
+var DefaultFileManagerRenderer = function DefaultFileManagerRenderer(props) {
+  var onChange = props.onChange,
+      images = props.images,
+      accept = props.accept,
+      forwardProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
 
-      var container = _this.container;
-      document.body && document.body.appendChild(container);
+  var handleFileOnChange = function handleFileOnChange(value) {
+    if (!onChange || !value || Array.isArray(value) && !value.length) {
+      return;
     }
 
-    return _this;
-  }
-
-  (0, _createClass2.default)(FileManagerPortal, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          onChange = _this$props.onChange,
-          onClose = _this$props.onClose,
-          accept = _this$props.accept,
-          onChangePick = _this$props.onChangePick,
-          multiple = _this$props.multiple,
-          images = _this$props.images,
-          maxSize = _this$props.maxSize,
-          multipleMaxCount = _this$props.multipleMaxCount,
-          multipleMaxSize = _this$props.multipleMaxSize,
-          onUploadCompletion = _this$props.onUploadCompletion,
-          tags = _this$props.tags,
-          scope = _this$props.scope,
-          own = _this$props.own;
-      var container = this.container;
-
-      var handleFileOnChange = function handleFileOnChange(files) {
-        if (!files || files.length === 0) {
-          return;
-        }
-
-        var fields = Array.isArray(onChangePick) ? onChangePick : ["id", "name", "key", "src", "size", "type"];
-
-        if (Array.isArray(files) === true) {
-          var items = files.map(function (file) {
-            return (0, _pick.default)(file, fields);
-          });
-          onChange && onChange(items);
-          return;
-        }
-
-        var file = (0, _pick.default)(files, fields);
-        onChange && onChange(file);
-      };
-
-      var props = {
-        onChange: typeof onChange === "function" ? handleFileOnChange : undefined,
-        onClose: onClose,
-        accept: accept,
-        multiple: multiple,
-        maxSize: maxSize,
-        multipleMaxCount: multipleMaxCount,
-        multipleMaxSize: multipleMaxSize,
-        onUploadCompletion: onUploadCompletion,
-        tags: tags,
-        scope: scope,
-        own: own
-      };
-
-      if (images) {
-        props.accept = ["image/jpg", "image/jpeg", "image/tiff", "image/gif", "image/png", "image/webp", "image/bmp", "image/svg+xml"];
-      } // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+    if (Array.isArray(value)) {
+      var finalValue = value.map(formatFileItem);
+      onChange(finalValue);
+      return;
+    }
 
+    onChange(formatFileItem(value));
+  };
+
+  var viewProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, forwardProps), {}, {
+    onChange: typeof onChange === "function" ? handleFileOnChange : undefined,
+    accept: images ? accept || imagesAccept : accept || []
+  });
+  return /*#__PURE__*/_react.default.createElement(_FileManagerContext.FileManagerProvider, {
+    accept: viewProps.accept,
+    tags: viewProps.tags || [],
+    own: viewProps.own,
+    scope: viewProps.scope
+  }, /*#__PURE__*/_react.default.createElement(_FileManagerView.default, viewProps));
+};
 
-      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_FileManagerContext.FileManagerProvider, props, /*#__PURE__*/_react.default.createElement(_FileManagerView.default, props)), container);
-    }
-  }]);
-  return FileManagerPortal;
-}(_react.default.Component);
+var FileManagerRenderer = (0, _reactComposition.makeComposable)("FileManagerRenderer", DefaultFileManagerRenderer);
+exports.FileManagerRenderer = FileManagerRenderer;
 
-var FileManager = function FileManager(_ref) {
-  var children = _ref.children,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var FileManager = function FileManager(_ref2) {
+  var children = _ref2.children,
+      render = _ref2.render,
+      onChange = _ref2.onChange,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+  var containerRef = (0, _react.useRef)(getPortalTarget());
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       show = _useState2[0],
       setShow = _useState2[1];
 
-  var onChangeRef = (0, _react.useRef)(rest.onChange);
+  var onChangeRef = (0, _react.useRef)(onChange);
   (0, _react.useEffect)(function () {
-    onChangeRef.current = rest.onChange;
-  }, [rest.onChange]);
+    onChangeRef.current = onChange;
+  }, [onChange]);
   var showFileManager = (0, _react.useCallback)(function (onChange) {
     if (typeof onChange === "function") {
       onChangeRef.current = onChange;
@@ -152,15 +127,18 @@ var FileManager = function FileManager(_ref) {
 
     setShow(true);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show && /*#__PURE__*/_react.default.createElement(FileManagerPortal, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(FileManagerRenderer, Object.assign({
     onClose: function onClose() {
       return setShow(false);
-    }
-  }, rest, {
-    onChange: onChangeRef.current
-  })), children({
+    },
+    onChange:
+    /* TODO: figure out how to create a conditional type based on the value of `rest.multiple` */
+    onChangeRef.current
+  }, rest)), containerRef.current), children ? children({
+    showFileManager: showFileManager
+  }) : render ? render({
     showFileManager: showFileManager
-  }));
+  }) : null);
 };
 
 exports.FileManager = FileManager;

package/components/FileManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["FileManagerPortal","props","window","container","document","getElementById","createElement","setAttribute","body","appendChild","onChange","onClose","accept","onChangePick","multiple","images","maxSize","multipleMaxCount","multipleMaxSize","onUploadCompletion","tags","scope","own","handleFileOnChange","files","length","fields","Array","isArray","items","map","file","pick","undefined","ReactDOM","createPortal","React","Component","FileManager","children","rest","useState","show","setShow","onChangeRef","useRef","useEffect","current","showFileManager","useCallback"],"sources":["FileManager.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport FileManagerView, { FileManagerViewProps } from \"./FileManager/FileManagerView\";\nimport pick from \"lodash/pick\";\nimport { FileManagerProvider } from \"./FileManager/FileManagerContext\";\nimport { FileItem } from \"./FileManager/types\";\n\nexport interface ShowFileManagerCallable {\n    (onChange?: (file?: FileItem | FileItem[]) => void): void;\n}\nexport interface FileManagerPropsChildren {\n    showFileManager: ShowFileManagerCallable;\n}\n\nexport interface FileManagerProps {\n    onChange?: (files: FileItem[] | FileItem) => void;\n    onChangePick?: string[];\n    images?: boolean;\n    multiple?: boolean;\n    accept?: Array<string>;\n    tags?: Array<string>;\n    scope?: string;\n    own?: boolean;\n    children: (params: FileManagerPropsChildren) => React.ReactNode;\n    maxSize?: number | string;\n    multipleMaxCount?: number;\n    multipleMaxSize?: number | string;\n    onClose?: Function;\n    onUploadCompletion?: (files: FileItem[]) => void;\n}\n\nexport type FileManagerPortalProps = Omit<FileManagerProps, \"children\">;\n\nclass FileManagerPortal extends React.Component<FileManagerPortalProps> {\n    public container: HTMLElement | null = null;\n    constructor(props: FileManagerPortalProps) {\n        super(props);\n\n        if (!window) {\n            return;\n        }\n\n        this.container = window.document.getElementById(\"file-manager-container\");\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"file-manager-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const {\n            onChange,\n            onClose,\n            accept,\n            onChangePick,\n            multiple,\n            images,\n            maxSize,\n            multipleMaxCount,\n            multipleMaxSize,\n            onUploadCompletion,\n            tags,\n            scope,\n            own\n        } = this.props;\n\n        const container = this.container as HTMLElement;\n\n        const handleFileOnChange = (files?: FileItem[] | FileItem) => {\n            if (!files || files.length === 0) {\n                return;\n            }\n            const fields = Array.isArray(onChangePick)\n                ? onChangePick\n                : [\"id\", \"name\", \"key\", \"src\", \"size\", \"type\"];\n\n            if (Array.isArray(files) === true) {\n                const items = (files as FileItem[]).map(file => pick(file, fields));\n                onChange && onChange(items as FileItem[]);\n                return;\n            }\n            const file = pick(files as FileItem, fields);\n\n            onChange && onChange(file as FileItem);\n        };\n\n        const props: FileManagerViewProps = {\n            onChange: typeof onChange === \"function\" ? handleFileOnChange : undefined,\n            onClose,\n            accept: accept as string[],\n            multiple: multiple as boolean,\n            maxSize: maxSize as string,\n            multipleMaxCount: multipleMaxCount as number,\n            multipleMaxSize: multipleMaxSize as number,\n            onUploadCompletion,\n            tags: tags,\n            scope: scope,\n            own: own\n        };\n\n        if (images) {\n            props.accept = [\n                \"image/jpg\",\n                \"image/jpeg\",\n                \"image/tiff\",\n                \"image/gif\",\n                \"image/png\",\n                \"image/webp\",\n                \"image/bmp\",\n                \"image/svg+xml\"\n            ];\n        }\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <FileManagerProvider {...props}>\n                <FileManagerView {...props} />\n            </FileManagerProvider>,\n            container\n        );\n    }\n}\n\nexport const FileManager: React.FC<FileManagerProps> = ({ children, ...rest }) => {\n    const [show, setShow] = useState(false);\n    const onChangeRef = useRef(rest.onChange);\n\n    useEffect(() => {\n        onChangeRef.current = rest.onChange;\n    }, [rest.onChange]);\n\n    const showFileManager = useCallback(onChange => {\n        if (typeof onChange === \"function\") {\n            onChangeRef.current = onChange;\n        }\n        setShow(true);\n    }, []);\n\n    return (\n        <>\n            {show && (\n                <FileManagerPortal\n                    onClose={() => setShow(false)}\n                    {...rest}\n                    onChange={onChangeRef.current}\n                />\n            )}\n            {children({ showFileManager })}\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["getPortalTarget","target","window","document","getElementById","createElement","setAttribute","body","appendChild","formatFileItem","id","src","rest","props","meta","Object","keys","map","key","value","imagesAccept","DefaultFileManagerRenderer","onChange","images","accept","forwardProps","handleFileOnChange","Array","isArray","length","finalValue","viewProps","undefined","tags","own","scope","FileManagerRenderer","makeComposable","FileManager","children","render","containerRef","useRef","useState","show","setShow","onChangeRef","useEffect","current","showFileManager","useCallback","ReactDOM","createPortal"],"sources":["FileManager.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport FileManagerView, { FileManagerViewProps } from \"./FileManager/FileManagerView\";\nimport { FileItem } from \"./FileManager/types\";\nimport { FileManagerProvider } from \"./FileManager/FileManagerContext\";\n\ninterface OnChange<T> {\n    (value: T): void;\n}\n\n/**\n * Represents a file object managed by the File Manager.\n */\nexport interface FileManagerFileItem {\n    id: string;\n    src: string;\n    meta?: Array<FileManagerFileItemMetaItem>;\n}\n\n/**\n * With this we allow developers to add any value to file's meta via component composition, thus the `value: any`.\n */\nexport interface FileManagerFileItemMetaItem {\n    key: string;\n    value: any;\n}\n\nexport type DeprecatedFileManagerRenderPropParams = {\n    showFileManager: (onChange?: OnChange<FileManagerFileItem | FileManagerFileItem[]>) => void;\n};\n\nexport type FileManagerRenderPropParams<TValue> = {\n    showFileManager: (onChange?: OnChange<TValue>) => void;\n};\n\ninterface SingleFileRenderProp {\n    (params: FileManagerRenderPropParams<FileManagerFileItem>): React.ReactNode;\n}\n\ninterface MultiFileRenderProp {\n    (params: FileManagerRenderPropParams<FileManagerFileItem[]>): React.ReactNode;\n}\n\nexport type MultipleProps =\n    | {\n          multiple?: never;\n          multipleMaxCount?: never;\n          multipleMaxSize?: never;\n          onChange?: OnChange<FileManagerFileItem>;\n          render?: SingleFileRenderProp;\n      }\n    | {\n          multiple: true;\n          multipleMaxCount?: number;\n          multipleMaxSize?: number | string;\n          onChange?: OnChange<FileManagerFileItem[]>;\n          render?: MultiFileRenderProp;\n      };\n\nexport type FileManagerProps = {\n    accept?: Array<string>;\n    images?: boolean;\n    maxSize?: number | string;\n    /**\n     * @deprecated This prop is no longer used. The file structure was reduced to a bare minimum so picking is no longer necessary.\n     */\n    onChangePick?: string[];\n    onClose?: Function;\n    onUploadCompletion?: (files: FileManagerFileItem[]) => void;\n    own?: boolean;\n    scope?: string;\n    tags?: Array<string>;\n    /**\n     * @deprecated This prop is no longer used. Use the `render` prop to get better TS autocomplete.\n     */\n    children?: (params: DeprecatedFileManagerRenderPropParams) => React.ReactNode;\n} & MultipleProps;\n\nfunction getPortalTarget() {\n    let target = window.document.getElementById(\"file-manager-container\");\n    if (!target) {\n        target = document.createElement(\"div\");\n        target.setAttribute(\"id\", \"file-manager-container\");\n        document.body && document.body.appendChild(target);\n    }\n    return target;\n}\n\n// This jewel was taken from https://davidgomes.com/pick-omit-over-union-types-in-typescript/. Massive thanks, David!\ntype DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never;\n\nexport type FileManagerRendererProps = DistributiveOmit<FileManagerProps, \"render\" | \"children\">;\n\n/**\n * Convert a FileItem object to a FileManagerFileItem, which is then passed to `onChange` callback.\n */\nconst formatFileItem = ({ id, src, ...rest }: FileItem): FileManagerFileItem => {\n    const props: { [key: string]: any } = rest;\n\n    return {\n        id,\n        src,\n        meta: Object.keys(rest).map(key => ({ key, value: props[key] }))\n    };\n};\n\n/**\n * If `accept` prop is not passed, and `images` prop is set, use these default mime types.\n * Defaults can be overridden using the `createComponentPlugin` and `FileManagerRenderer` component.\n */\nconst imagesAccept = [\n    \"image/jpg\",\n    \"image/jpeg\",\n    \"image/tiff\",\n    \"image/gif\",\n    \"image/png\",\n    \"image/webp\",\n    \"image/bmp\",\n    \"image/svg+xml\"\n];\n\nconst DefaultFileManagerRenderer: React.FC<FileManagerRendererProps> = props => {\n    const { onChange, images, accept, ...forwardProps } = props;\n\n    const handleFileOnChange = (value?: FileItem[] | FileItem) => {\n        if (!onChange || !value || (Array.isArray(value) && !value.length)) {\n            return;\n        }\n\n        if (Array.isArray(value)) {\n            const finalValue: FileManagerFileItem[] = value.map(formatFileItem);\n            (onChange as OnChange<FileManagerFileItem[]>)(finalValue);\n            return;\n        }\n\n        (onChange as OnChange<FileManagerFileItem>)(formatFileItem(value));\n    };\n\n    const viewProps: FileManagerViewProps = {\n        ...forwardProps,\n        onChange: typeof onChange === \"function\" ? handleFileOnChange : undefined,\n        accept: images ? accept || imagesAccept : accept || []\n    };\n\n    return (\n        <FileManagerProvider\n            accept={viewProps.accept}\n            tags={viewProps.tags || []}\n            own={viewProps.own}\n            scope={viewProps.scope}\n        >\n            <FileManagerView {...viewProps} />\n        </FileManagerProvider>\n    );\n};\n\nexport const FileManagerRenderer = makeComposable(\n    \"FileManagerRenderer\",\n    DefaultFileManagerRenderer\n);\n\nexport const FileManager: React.FC<FileManagerProps> = ({\n    children,\n    render,\n    onChange,\n    ...rest\n}) => {\n    const containerRef = useRef<HTMLElement>(getPortalTarget());\n    const [show, setShow] = useState(false);\n    const onChangeRef = useRef(onChange);\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    const showFileManager = useCallback(onChange => {\n        if (typeof onChange === \"function\") {\n            onChangeRef.current = onChange;\n        }\n        setShow(true);\n    }, []);\n\n    return (\n        <>\n            {show &&\n                ReactDOM.createPortal(\n                    <FileManagerRenderer\n                        onClose={() => setShow(false)}\n                        onChange={\n                            /* TODO: figure out how to create a conditional type based on the value of `rest.multiple` */\n                            onChangeRef.current as any\n                        }\n                        {...rest}\n                    />,\n                    containerRef.current\n                )}\n            {children ? children({ showFileManager }) : render ? render({ showFileManager }) : null}\n        </>\n    );\n};\n"],"mappings":"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"}

package/components/OverlayLayout/OverlayLayout.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="web" />
 import * as React from "react";
 import { ExitHandler } from "react-transition-group/Transition";
-interface OverlayLayoutProps {
+export interface OverlayLayoutProps {
     barMiddle?: React.ReactNode;
     barLeft?: React.ReactNode;
     barRight?: React.ReactNode;

package/components/OverlayLayout/OverlayLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["OverlayLayoutWrapper","styled","position","width","height","backgroundColor","zIndex","paddingTop","top","left","noScroll","css","overflow","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayLayout","props","isVisible","document","body","classList","add","setState","OverlayView","openedViews","remove","onExited","barLeft","barMiddle","barRight","children","style","rest","state","hideComponent","React","Component","noop"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport noop from \"lodash/noop\";\n\nimport { ReactComponent as CloseIcon } from \"./icons/close.svg\";\nimport { OverlayView } from \"~/ui/views/OverlayView\";\nimport { ExitHandler } from \"react-transition-group/Transition\";\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    paddingTop: 65,\n    top: 0,\n    left: 0\n});\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nconst defaultStyle = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\ninterface OverlayLayoutProps {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n    style?: React.CSSProperties;\n}\n\ninterface OverlayLayoutState {\n    isVisible: boolean;\n}\n\nexport class OverlayLayout extends React.Component<OverlayLayoutProps, OverlayLayoutState> {\n    constructor(props: OverlayLayoutProps) {\n        super(props);\n        document.body.classList.add(noScroll);\n    }\n\n    static defaultProps: Partial<OverlayLayoutProps> = {\n        onExited: noop\n    };\n\n    public override state: OverlayLayoutState = {\n        isVisible: true\n    };\n\n    public hideComponent(): void {\n        this.setState({ isVisible: false });\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override componentWillUnmount(): void {\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override render() {\n        const { onExited, barLeft, barMiddle, barRight, children, style, ...rest } = this.props;\n\n        return (\n            <Transition in={this.state.isVisible} timeout={100} appear onExited={onExited}>\n                {state => (\n                    <OverlayLayoutWrapper\n                        {...rest}\n                        style={{ ...defaultStyle, ...style, ...transitionStyles[state] }}\n                    >\n                        <TopAppBarSecondary fixed style={{ top: 0 }}>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignStart>\n                                {barLeft}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }}>\n                                {barMiddle}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignEnd>\n                                {barRight}\n                                <IconButton\n                                    ripple={false}\n                                    onClick={() => this.hideComponent()}\n                                    icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                                />\n                            </TopAppBarSection>\n                        </TopAppBarSecondary>\n\n                        {children}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["OverlayLayoutWrapper","styled","position","width","height","backgroundColor","zIndex","paddingTop","top","left","noScroll","css","overflow","defaultStyle","transform","opacity","transitionProperty","transitionTimingFunction","transitionDuration","willChange","transitionStyles","entering","entered","OverlayLayout","props","isVisible","document","body","classList","add","setState","OverlayView","openedViews","remove","onExited","barLeft","barMiddle","barRight","children","style","rest","state","hideComponent","React","Component","noop"],"sources":["OverlayLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Transition } from \"react-transition-group\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { TopAppBarSecondary, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport noop from \"lodash/noop\";\n\nimport { ReactComponent as CloseIcon } from \"./icons/close.svg\";\nimport { OverlayView } from \"~/ui/views/OverlayView\";\nimport { ExitHandler } from \"react-transition-group/Transition\";\n\nconst OverlayLayoutWrapper = styled(\"div\")({\n    position: \"fixed\",\n    width: \"100%\",\n    height: \"100vh\",\n    backgroundColor: \"var(--mdc-theme-background)\",\n    /**\n     * Has to be higher than 5 so it's above advanced settings dialog,\n     * and below 20, so the image editor & Dialogs can be displayed above.\n     */\n    zIndex: 18,\n    paddingTop: 65,\n    top: 0,\n    left: 0\n});\n\nconst noScroll = css({\n    overflow: \"hidden\",\n    height: \"100vh\"\n});\n\nconst defaultStyle = {\n    transform: \"translateY(75vh)\",\n    opacity: 0,\n    transitionProperty: \"transform, opacity\",\n    transitionTimingFunction: \"cubic-bezier(0, 0, .2, 1)\",\n    transitionDuration: \"225ms\",\n    willChange: \"opacity, transform\"\n};\n\nconst transitionStyles: Record<string, any> = {\n    entering: {\n        transform: \"translateY(75vh)\",\n        opacity: 0\n    },\n    entered: {\n        transform: \"translateY(0px)\",\n        opacity: 1\n    }\n};\n\nexport interface OverlayLayoutProps {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n    style?: React.CSSProperties;\n}\n\ninterface OverlayLayoutState {\n    isVisible: boolean;\n}\n\nexport class OverlayLayout extends React.Component<OverlayLayoutProps, OverlayLayoutState> {\n    constructor(props: OverlayLayoutProps) {\n        super(props);\n        document.body.classList.add(noScroll);\n    }\n\n    static defaultProps: Partial<OverlayLayoutProps> = {\n        onExited: noop\n    };\n\n    public override state: OverlayLayoutState = {\n        isVisible: true\n    };\n\n    public hideComponent(): void {\n        this.setState({ isVisible: false });\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override componentWillUnmount(): void {\n        if (OverlayView.openedViews === 0) {\n            document.body.classList.remove(noScroll);\n        }\n    }\n\n    public override render() {\n        const { onExited, barLeft, barMiddle, barRight, children, style, ...rest } = this.props;\n\n        return (\n            <Transition in={this.state.isVisible} timeout={100} appear onExited={onExited}>\n                {state => (\n                    <OverlayLayoutWrapper\n                        {...rest}\n                        style={{ ...defaultStyle, ...style, ...transitionStyles[state] }}\n                    >\n                        <TopAppBarSecondary fixed style={{ top: 0 }}>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignStart>\n                                {barLeft}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }}>\n                                {barMiddle}\n                            </TopAppBarSection>\n                            <TopAppBarSection style={{ width: \"33%\" }} alignEnd>\n                                {barRight}\n                                <IconButton\n                                    ripple={false}\n                                    onClick={() => this.hideComponent()}\n                                    icon={<CloseIcon style={{ width: 24, height: 24 }} />}\n                                />\n                            </TopAppBarSection>\n                        </TopAppBarSecondary>\n\n                        {children}\n                    </OverlayLayoutWrapper>\n                )}\n            </Transition>\n        );\n    }\n}\n"],"mappings":"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"}

package/components/OverlayLayout/index.d.ts

@@ -1 +1 @@
-export { OverlayLayout } from "./OverlayLayout";
+export * from "./OverlayLayout";

package/components/OverlayLayout/index.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "OverlayLayout", {
-  enumerable: true,
-  get: function get() {
-    return _OverlayLayout.OverlayLayout;
-  }
-});
 
-var _OverlayLayout = require("./OverlayLayout");
+var _OverlayLayout = require("./OverlayLayout");
+
+Object.keys(_OverlayLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OverlayLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OverlayLayout[key];
+    }
+  });
+});

package/components/OverlayLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { OverlayLayout } from \"./OverlayLayout\";\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./OverlayLayout\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/RichTextEditor/RichTextEditor.js

@@ -13,10 +13,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _RichTextEditor = require("@webiny/ui/RichTextEditor");
 
-var _FileManager = require("../FileManager");
+var _ = require("./..");
 
 var RichTextEditor = function RichTextEditor(props) {
-  return /*#__PURE__*/_react.default.createElement(_FileManager.FileManager, null, function (_ref) {
+  return /*#__PURE__*/_react.default.createElement(_.FileManager, null, function (_ref) {
     var showFileManager = _ref.showFileManager;
     return /*#__PURE__*/_react.default.createElement(_RichTextEditor.RichTextEditor, Object.assign({}, props, {
       placeholder: props.placeholder || "Click here to type",

package/components/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["RichTextEditor","props","showFileManager","placeholder","context"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor as UiRichTextEditor, RichTextEditorProps } from \"@webiny/ui/RichTextEditor\";\nimport { FileManager } from \"../FileManager\";\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    return (\n        <FileManager>\n            {({ showFileManager }) => (\n                <UiRichTextEditor\n                    {...props}\n                    placeholder={props.placeholder || \"Click here to type\"}\n                    context={{ ...props.context, showFileManager }}\n                />\n            )}\n        </FileManager>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,cAA6C,GAAG,SAAhDA,cAAgD,CAAAC,KAAK,EAAI;EAClE,oBACI,6BAAC,wBAAD,QACK;IAAA,IAAGC,eAAH,QAAGA,eAAH;IAAA,oBACG,6BAAC,8BAAD,oBACQD,KADR;MAEI,WAAW,EAAEA,KAAK,CAACE,WAAN,IAAqB,oBAFtC;MAGI,OAAO,8DAAOF,KAAK,CAACG,OAAb;QAAsBF,eAAe,EAAfA;MAAtB;IAHX,GADH;EAAA,CADL,CADJ;AAWH,CAZM"}
+{"version":3,"names":["RichTextEditor","props","showFileManager","placeholder","context"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor as UiRichTextEditor, RichTextEditorProps } from \"@webiny/ui/RichTextEditor\";\nimport { FileManager } from \"~/components\";\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    return (\n        <FileManager>\n            {({ showFileManager }) => (\n                <UiRichTextEditor\n                    {...props}\n                    placeholder={props.placeholder || \"Click here to type\"}\n                    context={{ ...props.context, showFileManager }}\n                />\n            )}\n        </FileManager>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,cAA6C,GAAG,SAAhDA,cAAgD,CAAAC,KAAK,EAAI;EAClE,oBACI,6BAAC,aAAD,QACK;IAAA,IAAGC,eAAH,QAAGA,eAAH;IAAA,oBACG,6BAAC,8BAAD,oBACQD,KADR;MAEI,WAAW,EAAEA,KAAK,CAACE,WAAN,IAAqB,oBAFtC;MAGI,OAAO,8DAAOF,KAAK,CAACG,OAAb;QAAsBF,eAAe,EAAfA;MAAtB;IAHX,GADH;EAAA,CADL,CADJ;AAWH,CAZM"}

package/components/SingleImageUpload.d.ts

@@ -1,19 +1,55 @@
 import * as React from "react";
+import { FileManagerFileItem } from "./FileManager";
 import { FormComponentProps } from "@webiny/ui/types";
 export interface SingleImageUploadProps extends FormComponentProps {
+    /**
+     * Accept types
+     */
     accept?: string[];
+    /**
+     * Component label.
+     */
     label?: string;
+    /**
+     * Is component disabled?
+     */
     disabled?: boolean;
+    /**
+     * Description beneath the image.
+     */
     description?: React.ReactNode;
+    /**
+     * A className for the root element.
+     */
     className?: string;
+    /**
+     * Define file's max allowed size (default is "10mb").
+     * Uses "bytes" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.
+     */
     maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onChange?: (value: any) => void;
+    /**
+     * onChange callback when a file is set or unset.
+     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the
+     * `onChange` into its child element. In that case, that prop is not passed by the developer.
+     */
+    onChange?: (value: FileManagerFileItem | null) => void;
+    /**
+     * Optional custom props, passed to the preview image.
+     */
     imagePreviewProps?: any;
+    /**
+     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.
+     */
+    includeFileMeta?: boolean;
+    /**
+     * Is the wrapper round?
+     */
     round?: boolean;
+    /**
+     * Define the properties that are returned on file(s) selection.
+     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
+     */
     onChangePick?: string[];
 }
-export default class SingleImageUpload extends React.Component<SingleImageUploadProps> {
-    render(): JSX.Element;
-}
+declare const SingleImageUpload: React.FC<SingleImageUploadProps>;
+export default SingleImageUpload;

package/components/SingleImageUpload.js

@@ -1,22 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var React = _interopRequireWildcard(require("react"));
 
 var _Image = require("@webiny/app/components/Image");
@@ -49,71 +41,74 @@ var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   }
 });
 
-var SingleImageUpload = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(SingleImageUpload, _React$Component);
+var SingleImageUpload = function SingleImageUpload(props) {
+  var className = props.className,
+      value = props.value,
+      validation = props.validation,
+      label = props.label,
+      description = props.description,
+      accept = props.accept,
+      _props$includeFileMet = props.includeFileMeta,
+      includeFileMeta = _props$includeFileMet === void 0 ? false : _props$includeFileMet,
+      maxSize = props.maxSize,
+      imagePreviewProps = props.imagePreviewProps,
+      round = props.round;
+
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  var onChange = (0, React.useCallback)(function (value) {
+    if (!props.onChange) {
+      return;
+    }
 
-  var _super = (0, _createSuper2.default)(SingleImageUpload);
+    if (value && !includeFileMeta) {
+      props.onChange({
+        id: value.id,
+        src: value.src
+      });
+      return;
+    }
 
-  function SingleImageUpload() {
-    (0, _classCallCheck2.default)(this, SingleImageUpload);
-    return _super.apply(this, arguments);
-  }
+    if (value && includeFileMeta) {
+      props.onChange(value);
+      return;
+    }
 
-  (0, _createClass2.default)(SingleImageUpload, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          onChange = _this$props.onChange,
-          value = _this$props.value,
-          validation = _this$props.validation,
-          label = _this$props.label,
-          description = _this$props.description,
-          accept = _this$props.accept,
-          onChangePick = _this$props.onChangePick,
-          maxSize = _this$props.maxSize,
-          multipleMaxCount = _this$props.multipleMaxCount,
-          multipleMaxSize = _this$props.multipleMaxSize,
-          imagePreviewProps = _this$props.imagePreviewProps,
-          round = _this$props.round;
-
-      var _ref = validation || {},
-          validationIsValid = _ref.isValid,
-          validationMessage = _ref.message;
-
-      return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
-        className: className
-      }, label && /*#__PURE__*/React.createElement("div", {
-        className: "mdc-floating-label mdc-floating-label--float-above"
-      }, label), /*#__PURE__*/React.createElement(_FileManager.FileManager, {
-        onChange: onChange,
-        onChangePick: onChangePick,
-        accept: accept,
-        images: !accept,
-        maxSize: maxSize,
-        multipleMaxCount: multipleMaxCount,
-        multipleMaxSize: multipleMaxSize
-      }, function (_ref2) {
-        var showFileManager = _ref2.showFileManager;
-        return /*#__PURE__*/React.createElement(Ui.Image, {
-          renderImagePreview: function renderImagePreview(renderImageProps) {
-            return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
-          },
-          style: {
-            width: "100%",
-            height: "auto"
-          },
-          value: value,
-          uploadImage: showFileManager,
-          removeImage: onChange,
-          round: round
-        });
-      }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+    props.onChange(null);
+  }, [props.onChange]);
+  return /*#__PURE__*/React.createElement(ImageUploadWrapper, {
+    className: className
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "mdc-floating-label mdc-floating-label--float-above"
+  }, label), /*#__PURE__*/React.createElement(_FileManager.FileManager, {
+    onChange: onChange,
+    accept: accept,
+    images: !accept,
+    maxSize: maxSize,
+    render: function render(_ref2) {
+      var showFileManager = _ref2.showFileManager;
+      return /*#__PURE__*/React.createElement(Ui.Image, {
+        renderImagePreview: function renderImagePreview(renderImageProps) {
+          return /*#__PURE__*/React.createElement(_Image.Image, Object.assign({}, renderImageProps, imagePreviewProps));
+        },
+        style: {
+          width: "100%",
+          height: "auto"
+        },
+        value: value,
+        uploadImage: showFileManager,
+        removeImage: function removeImage() {
+          return onChange(null);
+        },
+        round: round
+      });
     }
-  }]);
-  return SingleImageUpload;
-}(React.Component);
+  }), validationIsValid === false && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/React.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
 
-exports.default = SingleImageUpload;
+var _default = SingleImageUpload;
+exports.default = _default;