@webiny/app-file-manager 6.3.0 → 6.4.0-beta.0

package/presentation/FileList/components/Upload/DropZone.js

@@ -0,0 +1,96 @@
+import react, { useCallback, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import { Text, cn } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+const t = i18n.ns("app-file-manager/presentation/drop-zone");
+function parseSizeToBytes(size) {
+    const num = parseFloat(size);
+    if (isNaN(num)) return 0;
+    const lower = size.toLowerCase();
+    if (lower.endsWith("gb")) return 1024 * num * 1048576;
+    if (lower.endsWith("mb")) return 1024 * num * 1024;
+    if (lower.endsWith("kb")) return 1024 * num;
+    return num;
+}
+const DropZone_DropZone = observer(function({ accept, maxFileSize, minFileSize, children }) {
+    const presenter = useFileManagerPresenter();
+    const { vm, actions } = presenter;
+    const dragCounterRef = useRef(0);
+    const filterFiles = useCallback((files)=>files.filter((file)=>{
+            if (accept && accept.length > 0) {
+                const accepted = accept.some((pattern)=>{
+                    if (pattern.endsWith("/*")) {
+                        const prefix = pattern.slice(0, -1);
+                        return file.type.startsWith(prefix);
+                    }
+                    return file.type === pattern;
+                });
+                if (!accepted) return false;
+            }
+            if (maxFileSize) {
+                const max = parseSizeToBytes(maxFileSize);
+                if (max > 0 && file.size > max) return false;
+            }
+            if (minFileSize) {
+                const min = parseSizeToBytes(minFileSize);
+                if (min > 0 && file.size < min) return false;
+            }
+            return true;
+        }), [
+        accept,
+        maxFileSize,
+        minFileSize
+    ]);
+    const handleDragEnter = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current += 1;
+    }, []);
+    const handleDragOver = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragLeave = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current -= 1;
+    }, []);
+    const handleDrop = useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        const droppedFiles = Array.from(e.dataTransfer.files);
+        if (0 === droppedFiles.length) return;
+        const validFiles = filterFiles(droppedFiles);
+        if (validFiles.length > 0) actions.upload(validFiles);
+    }, [
+        filterFiles,
+        actions
+    ]);
+    if (!vm.permissions.canCreate) return /*#__PURE__*/ react.createElement(react.Fragment, null, children);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "relative size-full",
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        "data-testid": "fm-drop-zone"
+    }, children, vm.dragging && /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "absolute inset-0 z-50",
+            "flex items-center justify-center",
+            "bg-primary-default/10",
+            "border-lg border-dashed border-primary-default",
+            "rounded-lg",
+            "pointer-events-none"
+        ]),
+        "data-testid": "fm-drop-zone-overlay"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "lg",
+        className: "text-primary-default font-semibold"
+    }, t`Drop files here to upload`)));
+});
+export { DropZone_DropZone as DropZone };
+
+//# sourceMappingURL=DropZone.js.map

package/presentation/FileList/components/Upload/DropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Upload/DropZone.js","sources":["../../../../../src/presentation/FileList/components/Upload/DropZone.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, Text } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/drop-zone\");\n\n/**\n * Parse a size string like \"26214400\" (bytes) or \"25MB\" into bytes.\n */\nfunction parseSizeToBytes(size: string): number {\n    const num = parseFloat(size);\n    if (isNaN(num)) {\n        return 0;\n    }\n    const lower = size.toLowerCase();\n    if (lower.endsWith(\"gb\")) {\n        return num * 1024 * 1024 * 1024;\n    }\n    if (lower.endsWith(\"mb\")) {\n        return num * 1024 * 1024;\n    }\n    if (lower.endsWith(\"kb\")) {\n        return num * 1024;\n    }\n    // Assume raw bytes.\n    return num;\n}\n\ninterface DropZoneProps {\n    /** Accepted MIME types (e.g. [\"image/*\", \"application/pdf\"]). */\n    accept?: string[];\n    /** Maximum file size in bytes or human-readable string from Settings. */\n    maxFileSize?: string;\n    /** Minimum file size in bytes or human-readable string from Settings. */\n    minFileSize?: string;\n    children: React.ReactNode;\n}\n\n/**\n * Drag-and-drop upload zone that wraps the file list area.\n * Reads `vm.dragging` for overlay visibility and passes dropped files\n * to `presenter.actions.upload()`.\n */\nexport const DropZone = observer(function DropZone({\n    accept,\n    maxFileSize,\n    minFileSize,\n    children\n}: DropZoneProps) {\n    const presenter = useFileManagerPresenter();\n    const { vm, actions } = presenter;\n    const dragCounterRef = useRef(0);\n\n    // Filter files by accept list and size limits.\n    const filterFiles = useCallback(\n        (files: File[]): File[] => {\n            return files.filter(file => {\n                // Check accept filter.\n                if (accept && accept.length > 0) {\n                    const accepted = accept.some(pattern => {\n                        if (pattern.endsWith(\"/*\")) {\n                            // Wildcard match (e.g. \"image/*\").\n                            const prefix = pattern.slice(0, -1);\n                            return file.type.startsWith(prefix);\n                        }\n                        return file.type === pattern;\n                    });\n                    if (!accepted) {\n                        return false;\n                    }\n                }\n\n                // Check max file size.\n                if (maxFileSize) {\n                    const max = parseSizeToBytes(maxFileSize);\n                    if (max > 0 && file.size > max) {\n                        return false;\n                    }\n                }\n\n                // Check min file size.\n                if (minFileSize) {\n                    const min = parseSizeToBytes(minFileSize);\n                    if (min > 0 && file.size < min) {\n                        return false;\n                    }\n                }\n\n                return true;\n            });\n        },\n        [accept, maxFileSize, minFileSize]\n    );\n\n    const handleDragEnter = useCallback((e: React.DragEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        dragCounterRef.current += 1;\n    }, []);\n\n    const handleDragOver = useCallback((e: React.DragEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n    }, []);\n\n    const handleDragLeave = useCallback((e: React.DragEvent) => {\n        e.preventDefault();\n        e.stopPropagation();\n        dragCounterRef.current -= 1;\n    }, []);\n\n    const handleDrop = useCallback(\n        (e: React.DragEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            dragCounterRef.current = 0;\n\n            const droppedFiles = Array.from(e.dataTransfer.files);\n            if (droppedFiles.length === 0) {\n                return;\n            }\n\n            const validFiles = filterFiles(droppedFiles);\n            if (validFiles.length > 0) {\n                void actions.upload(validFiles);\n            }\n        },\n        [filterFiles, actions]\n    );\n\n    // Only show the drop zone when the user has create permission.\n    if (!vm.permissions.canCreate) {\n        return <>{children}</>;\n    }\n\n    return (\n        <div\n            className={\"relative size-full\"}\n            onDragEnter={handleDragEnter}\n            onDragOver={handleDragOver}\n            onDragLeave={handleDragLeave}\n            onDrop={handleDrop}\n            data-testid={\"fm-drop-zone\"}\n        >\n            {children}\n            {/* Drop overlay. */}\n            {vm.dragging && (\n                <div\n                    className={cn([\n                        \"absolute inset-0 z-50\",\n                        \"flex items-center justify-center\",\n                        \"bg-primary-default/10\",\n                        \"border-lg border-dashed border-primary-default\",\n                        \"rounded-lg\",\n                        \"pointer-events-none\"\n                    ])}\n                    data-testid={\"fm-drop-zone-overlay\"}\n                >\n                    <Text size={\"lg\"} className={\"text-primary-default font-semibold\"}>\n                        {t`Drop files here to upload`}\n                    </Text>\n                </div>\n            )}\n        </div>\n    );\n});\n"],"names":["t","i18n","parseSizeToBytes","size","num","parseFloat","isNaN","lower","DropZone","observer","accept","maxFileSize","minFileSize","children","presenter","useFileManagerPresenter","vm","actions","dragCounterRef","useRef","filterFiles","useCallback","files","file","accepted","pattern","prefix","max","min","handleDragEnter","e","handleDragOver","handleDragLeave","handleDrop","droppedFiles","Array","validFiles","cn","Text"],"mappings":";;;;;AAMA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAKlB,SAASC,iBAAiBC,IAAY;IAClC,MAAMC,MAAMC,WAAWF;IACvB,IAAIG,MAAMF,MACN,OAAO;IAEX,MAAMG,QAAQJ,KAAK,WAAW;IAC9B,IAAII,MAAM,QAAQ,CAAC,OACf,OAAOH,AAAM,OAANA,MAAAA;IAEX,IAAIG,MAAM,QAAQ,CAAC,OACf,OAAOH,AAAM,OAANA,MAAa;IAExB,IAAIG,MAAM,QAAQ,CAAC,OACf,OAAOH,AAAM,OAANA;IAGX,OAAOA;AACX;AAiBO,MAAMI,oBAAWC,SAAS,SAAkB,EAC/CC,MAAM,EACNC,WAAW,EACXC,WAAW,EACXC,QAAQ,EACI;IACZ,MAAMC,YAAYC;IAClB,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAE,GAAGH;IACxB,MAAMI,iBAAiBC,OAAO;IAG9B,MAAMC,cAAcC,YAChB,CAACC,QACUA,MAAM,MAAM,CAACC,CAAAA;YAEhB,IAAIb,UAAUA,OAAO,MAAM,GAAG,GAAG;gBAC7B,MAAMc,WAAWd,OAAO,IAAI,CAACe,CAAAA;oBACzB,IAAIA,QAAQ,QAAQ,CAAC,OAAO;wBAExB,MAAMC,SAASD,QAAQ,KAAK,CAAC,GAAG;wBAChC,OAAOF,KAAK,IAAI,CAAC,UAAU,CAACG;oBAChC;oBACA,OAAOH,KAAK,IAAI,KAAKE;gBACzB;gBACA,IAAI,CAACD,UACD,OAAO;YAEf;YAGA,IAAIb,aAAa;gBACb,MAAMgB,MAAMzB,iBAAiBS;gBAC7B,IAAIgB,MAAM,KAAKJ,KAAK,IAAI,GAAGI,KACvB,OAAO;YAEf;YAGA,IAAIf,aAAa;gBACb,MAAMgB,MAAM1B,iBAAiBU;gBAC7B,IAAIgB,MAAM,KAAKL,KAAK,IAAI,GAAGK,KACvB,OAAO;YAEf;YAEA,OAAO;QACX,IAEJ;QAAClB;QAAQC;QAAaC;KAAY;IAGtC,MAAMiB,kBAAkBR,YAAY,CAACS;QACjCA,EAAE,cAAc;QAChBA,EAAE,eAAe;QACjBZ,eAAe,OAAO,IAAI;IAC9B,GAAG,EAAE;IAEL,MAAMa,iBAAiBV,YAAY,CAACS;QAChCA,EAAE,cAAc;QAChBA,EAAE,eAAe;IACrB,GAAG,EAAE;IAEL,MAAME,kBAAkBX,YAAY,CAACS;QACjCA,EAAE,cAAc;QAChBA,EAAE,eAAe;QACjBZ,eAAe,OAAO,IAAI;IAC9B,GAAG,EAAE;IAEL,MAAMe,aAAaZ,YACf,CAACS;QACGA,EAAE,cAAc;QAChBA,EAAE,eAAe;QACjBZ,eAAe,OAAO,GAAG;QAEzB,MAAMgB,eAAeC,MAAM,IAAI,CAACL,EAAE,YAAY,CAAC,KAAK;QACpD,IAAII,AAAwB,MAAxBA,aAAa,MAAM,EACnB;QAGJ,MAAME,aAAahB,YAAYc;QAC/B,IAAIE,WAAW,MAAM,GAAG,GACfnB,QAAQ,MAAM,CAACmB;IAE5B,GACA;QAAChB;QAAaH;KAAQ;IAI1B,IAAI,CAACD,GAAG,WAAW,CAAC,SAAS,EACzB,OAAO,WAAP,GAAO,0CAAGH;IAGd,OAAO,WAAP,GACI,oBAAC;QACG,WAAW;QACX,aAAagB;QACb,YAAYE;QACZ,aAAaC;QACb,QAAQC;QACR,eAAa;OAEZpB,UAEAG,GAAG,QAAQ,IAAI,WAAJ,GACR,oBAAC;QACG,WAAWqB,GAAG;YACV;YACA;YACA;YACA;YACA;YACA;SACH;QACD,eAAa;qBAEb,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBtC,CAAC,CAAC,yBAAyB,CAAC;AAMrD"}

package/presentation/FileList/components/Upload/UploadProgress.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Upload progress indicator that reads `vm.upload` from the FileListPresenter.
+ * Reuses the original UploadStatus markup — a bottom-center bar with progress
+ * and a close button.
+ */
+export declare const UploadProgress: (() => React.JSX.Element | null) & {
+    displayName: string;
+};

package/presentation/FileList/components/Upload/UploadProgress.js

@@ -0,0 +1,45 @@
+import react, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { IconButton, ProgressBar, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+const t = i18n.ns("app-file-manager/presentation/upload-progress");
+const UploadProgress_UploadProgress = observer(function() {
+    const { vm } = useFileManagerPresenter();
+    const { upload } = vm;
+    const [isVisible, setIsVisible] = useState(true);
+    if (0 === upload.jobs.length || !isVisible) return null;
+    const numberOfFiles = upload.jobs.length;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "p-md rounded-lg",
+            "bg-neutral-dark shadow-lg",
+            "absolute bottom-xxl left-2/4 -translate-x-1/2 z-10",
+            "flex items-center gap-sm-extra",
+            "animate-in slide-in-from-top-4 slide-in-from-left-1/2 duration-500"
+        ]),
+        "data-testid": "fm-upload-progress"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-neutral-disabled shrink-0"
+    }, t`Uploading {numberOfFiles} {label}`({
+        numberOfFiles: `${numberOfFiles}`,
+        label: 1 === numberOfFiles ? t`file` : t`files`
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "w-64"
+    }, /*#__PURE__*/ react.createElement(ProgressBar, {
+        value: upload.overallProgress.percentage,
+        valuePosition: "end",
+        className: "text-neutral-light"
+    })), /*#__PURE__*/ react.createElement(IconButton, {
+        onClick: ()=>setIsVisible(false),
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        variant: "ghost-negative",
+        size: "sm"
+    }));
+});
+export { UploadProgress_UploadProgress as UploadProgress };
+
+//# sourceMappingURL=UploadProgress.js.map

package/presentation/FileList/components/Upload/UploadProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Upload/UploadProgress.js","sources":["../../../../../src/presentation/FileList/components/Upload/UploadProgress.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, IconButton, ProgressBar, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/close.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/upload-progress\");\n\n/**\n * Upload progress indicator that reads `vm.upload` from the FileListPresenter.\n * Reuses the original UploadStatus markup — a bottom-center bar with progress\n * and a close button.\n */\nexport const UploadProgress = observer(function UploadProgress() {\n    const { vm } = useFileManagerPresenter();\n    const { upload } = vm;\n    const [isVisible, setIsVisible] = useState(true);\n\n    // Don't render when there are no jobs or the user dismissed it.\n    if (upload.jobs.length === 0 || !isVisible) {\n        return null;\n    }\n\n    const numberOfFiles = upload.jobs.length;\n\n    return (\n        <div\n            className={cn([\n                \"p-md rounded-lg\",\n                \"bg-neutral-dark shadow-lg\",\n                \"absolute bottom-xxl left-2/4 -translate-x-1/2 z-10\",\n                \"flex items-center gap-sm-extra\",\n                \"animate-in slide-in-from-top-4 slide-in-from-left-1/2 duration-500\"\n            ])}\n            data-testid={\"fm-upload-progress\"}\n        >\n            <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-disabled shrink-0\"}>\n                {t`Uploading {numberOfFiles} {label}`({\n                    numberOfFiles: `${numberOfFiles}`,\n                    label: numberOfFiles === 1 ? t`file` : t`files`\n                })}\n            </Text>\n            <div className={\"w-64\"}>\n                <ProgressBar\n                    value={upload.overallProgress.percentage}\n                    valuePosition={\"end\"}\n                    className={\"text-neutral-light\"}\n                />\n            </div>\n            <IconButton\n                onClick={() => setIsVisible(false)}\n                icon={<CloseIcon />}\n                variant={\"ghost-negative\"}\n                size={\"sm\"}\n            />\n        </div>\n    );\n});\n"],"names":["t","i18n","UploadProgress","observer","vm","useFileManagerPresenter","upload","isVisible","setIsVisible","useState","numberOfFiles","cn","Text","ProgressBar","IconButton","CloseIcon"],"mappings":";;;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAOX,MAAMC,gCAAiBC,SAAS;IACnC,MAAM,EAAEC,EAAE,EAAE,GAAGC;IACf,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAM,CAACG,WAAWC,aAAa,GAAGC,SAAS;IAG3C,IAAIH,AAAuB,MAAvBA,OAAO,IAAI,CAAC,MAAM,IAAU,CAACC,WAC7B,OAAO;IAGX,MAAMG,gBAAgBJ,OAAO,IAAI,CAAC,MAAM;IAExC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GAAG;YACV;YACA;YACA;YACA;YACA;SACH;QACD,eAAa;qBAEb,oBAACC,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnCZ,CAAC,CAAC,iCAAiC,CAAC,CAAC;QAClC,eAAe,GAAGU,eAAe;QACjC,OAAOA,AAAkB,MAAlBA,gBAAsBV,CAAC,CAAC,IAAI,CAAC,GAAGA,CAAC,CAAC,KAAK,CAAC;IACnD,mBAEJ,oBAAC;QAAI,WAAW;qBACZ,oBAACa,aAAWA;QACR,OAAOP,OAAO,eAAe,CAAC,UAAU;QACxC,eAAe;QACf,WAAW;uBAGnB,oBAACQ,YAAUA;QACP,SAAS,IAAMN,aAAa;QAC5B,oBAAM,oBAACO,gBAASA;QAChB,SAAS;QACT,MAAM;;AAItB"}

package/presentation/FileList/components/Upload/index.d.ts

@@ -0,0 +1,2 @@
+export { DropZone } from "./DropZone.js";
+export { UploadProgress } from "./UploadProgress.js";

package/presentation/FileList/components/Upload/index.js

@@ -0,0 +1,2 @@
+export { DropZone } from "./DropZone.js";
+export { UploadProgress } from "./UploadProgress.js";

package/presentation/FileList/feature.d.ts

@@ -0,0 +1,3 @@
+export declare const FileManagerPresenterFeature: import("@webiny/feature/admin").FeatureDefinition<{
+    presenter: import("./abstractions.js").IFileManagerPresenter;
+}, []>;

package/presentation/FileList/feature.js

@@ -0,0 +1,17 @@
+import { createFeature } from "@webiny/feature/admin";
+import { FileManagerPresenter } from "./abstractions.js";
+import { FileManagerPresenter as external_FileManagerPresenter_js_FileManagerPresenter } from "./FileManagerPresenter.js";
+const FileManagerPresenterFeature = createFeature({
+    name: "FileManager/FileManagerPresenter",
+    register (container) {
+        container.register(external_FileManagerPresenter_js_FileManagerPresenter).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            presenter: container.resolve(FileManagerPresenter)
+        };
+    }
+});
+export { FileManagerPresenterFeature };
+
+//# sourceMappingURL=feature.js.map

package/presentation/FileList/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/feature.js","sources":["../../../src/presentation/FileList/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { FileManagerPresenter as Abstraction } from \"./abstractions.js\";\nimport { FileManagerPresenter } from \"./FileManagerPresenter.js\";\n\nexport const FileManagerPresenterFeature = createFeature({\n    name: \"FileManager/FileManagerPresenter\",\n    register(container) {\n        container.register(FileManagerPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["FileManagerPresenterFeature","createFeature","container","FileManagerPresenter","Abstraction"],"mappings":";;;AAIO,MAAMA,8BAA8BC,cAAc;IACrD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,uDAAsB,gBAAgB;IAC7D;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ"}

package/presentation/FileList/index.d.ts

@@ -0,0 +1,5 @@
+export { FileManagerPresenterFeature } from "./feature.js";
+export { FileManagerPresenter } from "./abstractions.js";
+export type { IFileManagerPresenter, IFileManagerViewModel, IFileManagerActions, IFolderActions, IFileManagerInitConfig } from "./abstractions.js";
+export { FileManagerPresenterProvider } from "./FileManagerPresenterProvider.js";
+export { useFileManagerPresenter } from "./FileManagerPresenterProvider.js";

package/presentation/FileList/index.js

@@ -0,0 +1,3 @@
+export { FileManagerPresenterFeature } from "./feature.js";
+export { FileManagerPresenter } from "./abstractions.js";
+export { FileManagerPresenterProvider, useFileManagerPresenter } from "./FileManagerPresenterProvider.js";

package/presentation/FileManager/FileManagerRenderer.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const FileManagerRendererDecorator: (props: unknown) => React.JSX.Element;

package/presentation/FileManager/FileManagerRenderer.js

@@ -0,0 +1,33 @@
+import react from "react";
+import { FileManagerRenderer } from "@webiny/app-admin";
+import { FileManagerView } from "./FileManagerView.js";
+const formatFileItem = (file)=>({
+        id: file.id,
+        src: file.src,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        width: file.metadata?.image?.width,
+        height: file.metadata?.image?.height,
+        extensions: file.extensions,
+        metadata: file.metadata
+    });
+const FileManagerRendererDecorator = FileManagerRenderer.createDecorator(()=>function(props) {
+        const { onChange, onClose, multiple, accept, scope, overlay = true } = props;
+        const handleChange = (files)=>{
+            if (!onChange || !files.length) return;
+            multiple ? onChange(files.map(formatFileItem)) : onChange(formatFileItem(files[0]));
+            if (onClose) onClose();
+        };
+        return /*#__PURE__*/ react.createElement(FileManagerView, {
+            overlay: overlay,
+            onChange: handleChange,
+            onClose: onClose,
+            multiple: multiple,
+            accept: accept,
+            scope: scope
+        });
+    });
+export { FileManagerRendererDecorator };
+
+//# sourceMappingURL=FileManagerRenderer.js.map

package/presentation/FileManager/FileManagerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileManager/FileManagerRenderer.js","sources":["../../../src/presentation/FileManager/FileManagerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileManagerFileItem, FileManagerOnChange } from \"@webiny/app-admin\";\nimport { FileManagerRenderer as BaseFileManagerRenderer } from \"@webiny/app-admin\";\nimport type { FmFile } from \"~/features/shared/types.js\";\nimport { FileManagerView } from \"./FileManagerView.js\";\n\nconst formatFileItem = (file: FmFile): FileManagerFileItem => {\n    return {\n        id: file.id,\n        src: file.src,\n        name: file.name,\n        type: file.type,\n        size: file.size,\n        width: file.metadata?.image?.width,\n        height: file.metadata?.image?.height,\n        extensions: file.extensions,\n        metadata: file.metadata\n    };\n};\n\nexport const FileManagerRendererDecorator = BaseFileManagerRenderer.createDecorator(() => {\n    return function FileManagerRendererImpl(props) {\n        const { onChange, onClose, multiple, accept, scope, overlay = true } = props;\n\n        const handleChange = (files: FmFile[]) => {\n            if (!onChange || !files.length) {\n                return;\n            }\n\n            if (multiple) {\n                (onChange as FileManagerOnChange<FileManagerFileItem[]>)(files.map(formatFileItem));\n            } else {\n                (onChange as FileManagerOnChange<FileManagerFileItem>)(formatFileItem(files[0]));\n            }\n\n            if (onClose) {\n                onClose();\n            }\n        };\n\n        return (\n            <FileManagerView\n                overlay={overlay}\n                onChange={handleChange}\n                onClose={onClose}\n                multiple={multiple}\n                accept={accept}\n                scope={scope}\n            />\n        );\n    };\n});\n"],"names":["formatFileItem","file","FileManagerRendererDecorator","BaseFileManagerRenderer","props","onChange","onClose","multiple","accept","scope","overlay","handleChange","files","FileManagerView"],"mappings":";;;AAMA,MAAMA,iBAAiB,CAACC,OACb;QACH,IAAIA,KAAK,EAAE;QACX,KAAKA,KAAK,GAAG;QACb,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,OAAOA,KAAK,QAAQ,EAAE,OAAO;QAC7B,QAAQA,KAAK,QAAQ,EAAE,OAAO;QAC9B,YAAYA,KAAK,UAAU;QAC3B,UAAUA,KAAK,QAAQ;IAC3B;AAGG,MAAMC,+BAA+BC,oBAAAA,eAAuC,CAAC,IACzE,SAAiCC,KAAK;QACzC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,EAAEC,UAAU,IAAI,EAAE,GAAGN;QAEvE,MAAMO,eAAe,CAACC;YAClB,IAAI,CAACP,YAAY,CAACO,MAAM,MAAM,EAC1B;YAGAL,WACCF,SAAwDO,MAAM,GAAG,CAACZ,mBAElEK,SAAsDL,eAAeY,KAAK,CAAC,EAAE;YAGlF,IAAIN,SACAA;QAER;QAEA,OAAO,WAAP,GACI,oBAACO,iBAAeA;YACZ,SAASH;YACT,UAAUC;YACV,SAASL;YACT,UAAUC;YACV,QAAQC;YACR,OAAOC;;IAGnB"}

package/presentation/FileManager/FileManagerView.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { FmFile } from "../../features/shared/types.js";
+export interface FileManagerViewProps {
+    overlay?: boolean;
+    onChange?: (files: FmFile[]) => void;
+    onClose?: () => void;
+    multiple?: boolean;
+    accept?: string[];
+    scope?: string;
+    children?: React.ReactNode;
+}
+export declare const FileManagerView: (props: FileManagerViewProps) => React.JSX.Element;

package/presentation/FileManager/FileManagerView.js

@@ -0,0 +1,242 @@
+import react, { useCallback, useEffect, useMemo } from "react";
+import { DiContainerProvider, useContainer, useFeature } from "@webiny/app";
+import { observer } from "mobx-react-lite";
+import react_butterfiles from "react-butterfiles";
+import debounce from "lodash/debounce.js";
+import { Heading, OverlayLoader, Scrollbar, Separator, useToast } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { DialogsProvider, LeftPanel, OverlayLayout, RightPanel, SplitView, useHotkeys } from "@webiny/app-admin";
+import { FoldersFeature } from "@webiny/app-aco/features/folders/feature.js";
+import { FolderTreePresenterFeature } from "@webiny/app-aco/presentation/folderTree/feature.js";
+import { FileManagerPresenterFeature } from "../FileList/feature.js";
+import { FileManagerPresenterProvider, useFileManagerPresenter } from "../FileList/FileManagerPresenterProvider.js";
+import { FileDetailsPresenterFeature } from "../FileDetails/feature.js";
+import { SharedCacheFeature } from "../../features/shared/feature.js";
+import { ListFilesFeature } from "../../features/listFiles/feature.js";
+import { GetFileFeature } from "../../features/getFile/feature.js";
+import { DeleteFileFeature } from "../../features/deleteFile/feature.js";
+import { UpdateFileFeature } from "../../features/updateFile/feature.js";
+import { FileUploaderFeature } from "../../features/fileUploader/feature.js";
+import { ListTagsFeature } from "../../features/tags/feature.js";
+import { GetSettingsFeature } from "../../features/settings/feature.js";
+import { FileManagerViewWithConfig, useFileManagerConfig } from "../config/FileManagerViewConfig.js";
+import { outputFileSelectionError } from "../config/outputFileSelectionError.js";
+import { FolderTree } from "@webiny/app-aco/presentation/folderTree/FolderTree.js";
+import { BottomInfoBar } from "../FileList/components/BottomInfoBar/index.js";
+import { BulkActionBar } from "../FileList/components/BulkActions/index.js";
+import { FileDropPlaceholder } from "../FileList/components/FileDropPlaceholder/index.js";
+import { Empty } from "../FileList/components/Empty/index.js";
+import { FileDetailsDrawer } from "../FileDetails/components/FileDetailsDrawer.js";
+import { FileGrid } from "../FileList/components/Grid/index.js";
+import { FileManagerHeader } from "../FileList/components/Header/FileManagerHeader.js";
+import { FileTable } from "../FileList/components/Table/index.js";
+import { TagsList } from "../FileList/components/TagsList/index.js";
+import { UploadProgress } from "../FileList/components/Upload/index.js";
+import { GetSettingsRepository } from "../../features/settings/abstractions.js";
+import { OverlayProvider, useOverlay } from "./OverlayContext.js";
+const t = i18n.ns("app-admin/file-manager/file-manager-view");
+const FileManagerView_FileManagerViewLayout = observer(function() {
+    const { vm, actions } = useFileManagerPresenter();
+    const { browser } = useFileManagerConfig();
+    const overlay = useOverlay();
+    const toast = useToast();
+    useHotkeys({
+        zIndex: 20,
+        keys: {
+            esc: ()=>overlay && overlay.onClose()
+        }
+    });
+    const container = useContainer();
+    const settingsRepository = useMemo(()=>container.resolve(GetSettingsRepository), [
+        container
+    ]);
+    const settings = settingsRepository.settings;
+    const uploadFiles = async (files)=>{
+        await actions.upload(files);
+        toast.showSuccessToast({
+            title: "File upload complete."
+        });
+    };
+    const loadMoreOnScroll = useCallback(debounce(async ({ scrollFrame })=>{
+        if (scrollFrame.top > 0.8) actions.loadMore();
+    }, 200), [
+        vm.list.pagination,
+        actions
+    ]);
+    if (!vm.fileModel) return /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: t`Preparing File Manager...`
+    });
+    const renderList = (browseFiles)=>{
+        if (!vm.list.pagination.loading && 0 === vm.list.rows.length) return /*#__PURE__*/ react.createElement(Empty, {
+            isSearchResult: !vm.showFolders,
+            browseFiles: browseFiles
+        });
+        if ("table" === vm.viewMode) return /*#__PURE__*/ react.createElement(FileTable, null);
+        return /*#__PURE__*/ react.createElement(FileGrid, null);
+    };
+    const content = /*#__PURE__*/ react.createElement(react_butterfiles, {
+        multiple: true,
+        maxSize: settings ? settings.uploadMaxFileSize + "b" : "1TB",
+        multipleMaxSize: "1TB",
+        accept: overlay?.accept ?? [],
+        onSuccess: (files)=>{
+            const filesToUpload = files.map((file)=>file.src.file).filter(Boolean);
+            uploadFiles(filesToUpload);
+        },
+        onError: (errors)=>{
+            const message = outputFileSelectionError(errors);
+            if (message) toast.showWarningToast({
+                title: message
+            });
+            else {
+                toast.showWarningToast({
+                    title: "Couldn't process selected files."
+                });
+                console.error(errors);
+            }
+        }
+    }, ({ getDropZoneProps, browseFiles })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FileDetailsDrawer, null), /*#__PURE__*/ react.createElement(SplitView, {
+            namespace: "fm/file/list"
+        }, /*#__PURE__*/ react.createElement(LeftPanel, {
+            span: 2
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col h-main-content"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "py-sm px-md"
+        }, /*#__PURE__*/ react.createElement(Heading, {
+            level: 5
+        }, t`File Manager`)), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
+            className: "shrink-0 overflow-y-auto max-h-[66vh]"
+        }, /*#__PURE__*/ react.createElement(FolderTree, {
+            vm: vm.folders,
+            actions: actions.folders,
+            folderActions: browser.folder.actions,
+            dropConfirmation: browser.folder.dropConfirmation,
+            enableActions: true,
+            enableCreate: true
+        })), browser.filterByTags ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
+            className: "flex-1 overflow-y-auto min-h-0"
+        }, /*#__PURE__*/ react.createElement(TagsList, {
+            loading: false,
+            activeTags: vm.list.filters["tags"] ?? [],
+            tags: vm.tags.map((tag)=>({
+                    tag: tag.tag,
+                    count: tag.count
+                })),
+            onActivatedTagsChange: (tags)=>{
+                if (tags.length > 0) actions.filter.set("tags", tags);
+                else {
+                    actions.filter.clear("tags");
+                    actions.filter.clear("tags_rule");
+                }
+            }
+        }))) : null)), /*#__PURE__*/ react.createElement(RightPanel, {
+            span: 10
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col relative",
+            style: {
+                height: "calc(100vh - 45px"
+            }
+        }, /*#__PURE__*/ react.createElement(FileManagerHeader, {
+            browseFiles: browseFiles
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "flex-1",
+            ...getDropZoneProps({
+                onDragEnter: ()=>actions.setDragging(true),
+                onDrop: ()=>actions.setDragging(false),
+                onDragLeave: (e)=>{
+                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) actions.setDragging(false);
+                }
+            }),
+            "data-testid": "fm-list-wrapper"
+        }, !overlay && /*#__PURE__*/ react.createElement(BulkActionBar, null), /*#__PURE__*/ react.createElement(Scrollbar, {
+            onScrollFrame: (scrollFrame)=>loadMoreOnScroll({
+                    scrollFrame
+                })
+        }, renderList(browseFiles)), vm.dragging && /*#__PURE__*/ react.createElement(FileDropPlaceholder, null), /*#__PURE__*/ react.createElement(UploadProgress, null)), /*#__PURE__*/ react.createElement(BottomInfoBar, {
+            accept: overlay?.accept ?? [],
+            listing: vm.list.pagination.loadingMore,
+            loading: vm.list.pagination.loading,
+            totalCount: vm.list.pagination.totalCount,
+            currentCount: vm.list.pagination.currentCount
+        }))))));
+    if (overlay) return /*#__PURE__*/ react.createElement(OverlayLayout, {
+        variant: "strong",
+        onExited: ()=>overlay.onClose()
+    }, content);
+    return content;
+});
+const FileManagerViewInner = observer(({ overlay = false, onChange, onClose, multiple, accept, scope, children })=>{
+    const { presenter } = useFeature(FileManagerPresenterFeature);
+    const overlayConfig = useMemo(()=>{
+        if (!overlay || !onChange || !onClose) return null;
+        const handleFileClick = (file)=>{
+            if (multiple) presenter.actions.selection.toggle(file.id);
+            else onChange([
+                file
+            ]);
+        };
+        const confirmSelection = ()=>{
+            const selectedIds = presenter.vm.list.selection.selectedIds;
+            const selectedFiles = presenter.vm.list.rows.filter((f)=>selectedIds.has(f.id));
+            if (selectedFiles.length > 0) onChange(selectedFiles);
+        };
+        return {
+            onFileClick: handleFileClick,
+            confirmSelection,
+            onClose,
+            accept: accept ?? [],
+            multiple: multiple ?? false
+        };
+    }, [
+        overlay,
+        onChange,
+        onClose,
+        multiple,
+        accept
+    ]);
+    useEffect(()=>{
+        presenter.init({
+            scope
+        });
+        return ()=>presenter.dispose();
+    }, [
+        presenter,
+        overlay,
+        scope
+    ]);
+    const inner = /*#__PURE__*/ react.createElement(DialogsProvider, null, /*#__PURE__*/ react.createElement(FileManagerViewWithConfig, null, /*#__PURE__*/ react.createElement(FileManagerPresenterProvider, {
+        presenter: presenter
+    }, /*#__PURE__*/ react.createElement(FileManagerView_FileManagerViewLayout, null), children)));
+    if (overlayConfig) return /*#__PURE__*/ react.createElement(OverlayProvider, {
+        config: overlayConfig
+    }, inner);
+    return inner;
+});
+const FileManagerView = (props)=>{
+    const container = useContainer();
+    const scopedContainer = useMemo(()=>{
+        const child = container.createChildContainer();
+        SharedCacheFeature.register(child);
+        FoldersFeature.register(child, {
+            type: "FmFile"
+        });
+        FolderTreePresenterFeature.register(child);
+        ListFilesFeature.register(child);
+        GetFileFeature.register(child);
+        DeleteFileFeature.register(child);
+        UpdateFileFeature.register(child);
+        FileUploaderFeature.register(child);
+        ListTagsFeature.register(child);
+        GetSettingsFeature.register(child);
+        FileDetailsPresenterFeature.register(child);
+        FileManagerPresenterFeature.register(child);
+        return child;
+    }, []);
+    return /*#__PURE__*/ react.createElement(DiContainerProvider, {
+        container: scopedContainer
+    }, /*#__PURE__*/ react.createElement(FileManagerViewInner, props));
+};
+export { FileManagerView };
+
+//# sourceMappingURL=FileManagerView.js.map

package/presentation/FileManager/FileManagerView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileManager/FileManagerView.js","sources":["../../../src/presentation/FileManager/FileManagerView.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useCallback } from \"react\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { observer } from \"mobx-react-lite\";\nimport type { FilesRenderChildren } from \"react-butterfiles\";\nimport Files from \"react-butterfiles\";\nimport debounce from \"lodash/debounce.js\";\nimport type { positionValues } from \"react-custom-scrollbars\";\nimport { Heading, OverlayLoader, Scrollbar, Separator, useToast } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport {\n    LeftPanel,\n    OverlayLayout,\n    RightPanel,\n    SplitView,\n    DialogsProvider,\n    useHotkeys\n} from \"@webiny/app-admin\";\nimport { FoldersFeature } from \"@webiny/app-aco/features/folders/feature.js\";\nimport { FolderTreePresenterFeature } from \"@webiny/app-aco/presentation/folderTree/feature.js\";\nimport { FileManagerPresenterFeature } from \"~/presentation/FileList/feature.js\";\nimport {\n    FileManagerPresenterProvider,\n    useFileManagerPresenter\n} from \"~/presentation/FileList/FileManagerPresenterProvider.js\";\nimport { FileDetailsPresenterFeature } from \"~/presentation/FileDetails/feature.js\";\nimport { SharedCacheFeature } from \"~/features/shared/feature.js\";\nimport { ListFilesFeature } from \"~/features/listFiles/feature.js\";\nimport { GetFileFeature } from \"~/features/getFile/feature.js\";\nimport { DeleteFileFeature } from \"~/features/deleteFile/feature.js\";\nimport { UpdateFileFeature } from \"~/features/updateFile/feature.js\";\nimport { FileUploaderFeature } from \"~/features/fileUploader/feature.js\";\nimport { ListTagsFeature } from \"~/features/tags/feature.js\";\nimport { GetSettingsFeature } from \"~/features/settings/feature.js\";\nimport {\n    FileManagerViewWithConfig,\n    useFileManagerConfig\n} from \"~/presentation/config/FileManagerViewConfig.js\";\nimport { outputFileSelectionError } from \"~/presentation/config/outputFileSelectionError.js\";\nimport { FolderTree } from \"@webiny/app-aco/presentation/folderTree/FolderTree.js\";\nimport { BottomInfoBar } from \"~/presentation/FileList/components/BottomInfoBar/index.js\";\nimport { BulkActionBar } from \"~/presentation/FileList/components/BulkActions/index.js\";\nimport { FileDropPlaceholder } from \"~/presentation/FileList/components/FileDropPlaceholder/index.js\";\nimport { Empty } from \"~/presentation/FileList/components/Empty/index.js\";\nimport { FileDetailsDrawer } from \"~/presentation/FileDetails/components/FileDetailsDrawer.js\";\nimport { FileGrid } from \"~/presentation/FileList/components/Grid/index.js\";\nimport { FileManagerHeader } from \"~/presentation/FileList/components/Header/FileManagerHeader.js\";\nimport { FileTable } from \"~/presentation/FileList/components/Table/index.js\";\nimport { TagsList } from \"~/presentation/FileList/components/TagsList/index.js\";\nimport { UploadProgress } from \"~/presentation/FileList/components/Upload/index.js\";\nimport { GetSettingsRepository } from \"~/features/settings/abstractions.js\";\nimport { OverlayProvider, useOverlay } from \"./OverlayContext.js\";\n\nimport type { FmFile } from \"~/features/shared/types.js\";\n\nexport interface FileManagerViewProps {\n    overlay?: boolean;\n    onChange?: (files: FmFile[]) => void;\n    onClose?: () => void;\n    multiple?: boolean;\n    accept?: string[];\n    scope?: string;\n    children?: React.ReactNode;\n}\n\nconst t = i18n.ns(\"app-admin/file-manager/file-manager-view\");\n\n// ---------------------------------------------------------------------------\n// Layout — uses original UI components, wired to the presenter.\n// ---------------------------------------------------------------------------\n\nconst FileManagerViewLayout = observer(function FileManagerViewLayout() {\n    const { vm, actions } = useFileManagerPresenter();\n    const { browser } = useFileManagerConfig();\n    const overlay = useOverlay();\n    const toast = useToast();\n\n    useHotkeys({\n        zIndex: 20,\n        keys: {\n            esc: () => overlay && overlay.onClose()\n        }\n    });\n\n    const container = useContainer();\n    const settingsRepository = useMemo(() => container.resolve(GetSettingsRepository), [container]);\n    const settings = settingsRepository.settings;\n\n    const uploadFiles = async (files: File[]) => {\n        await actions.upload(files);\n        toast.showSuccessToast({ title: \"File upload complete.\" });\n    };\n\n    const loadMoreOnScroll = useCallback(\n        debounce(async ({ scrollFrame }: { scrollFrame: positionValues }) => {\n            if (scrollFrame.top > 0.8) {\n                void actions.loadMore();\n            }\n        }, 200),\n        [vm.list.pagination, actions]\n    );\n\n    if (!vm.fileModel) {\n        return <OverlayLoader text={t`Preparing File Manager...`} />;\n    }\n\n    const renderList = (browseFiles: FilesRenderChildren[\"browseFiles\"]) => {\n        if (!vm.list.pagination.loading && vm.list.rows.length === 0) {\n            return <Empty isSearchResult={!vm.showFolders} browseFiles={browseFiles} />;\n        }\n\n        if (vm.viewMode === \"table\") {\n            return <FileTable />;\n        }\n\n        return <FileGrid />;\n    };\n\n    const content = (\n        <Files\n            multiple\n            maxSize={settings ? settings.uploadMaxFileSize + \"b\" : \"1TB\"}\n            multipleMaxSize={\"1TB\"}\n            accept={overlay?.accept ?? []}\n            onSuccess={files => {\n                const filesToUpload = files.map(file => file.src.file).filter(Boolean) as File[];\n                void uploadFiles(filesToUpload);\n            }}\n            onError={errors => {\n                const message = outputFileSelectionError(errors);\n                if (message) {\n                    toast.showWarningToast({ title: message });\n                } else {\n                    toast.showWarningToast({ title: \"Couldn't process selected files.\" });\n                    console.error(errors);\n                }\n            }}\n        >\n            {({ getDropZoneProps, browseFiles }) => (\n                <>\n                    <FileDetailsDrawer />\n                    <SplitView namespace={\"fm/file/list\"}>\n                        <LeftPanel span={2}>\n                            <div className={\"flex flex-col h-main-content\"}>\n                                <div className={\"py-sm px-md\"}>\n                                    <Heading level={5}>{t`File Manager`}</Heading>\n                                </div>\n                                <Separator />\n                                <div className={\"shrink-0 overflow-y-auto max-h-[66vh]\"}>\n                                    <FolderTree\n                                        vm={vm.folders}\n                                        actions={actions.folders}\n                                        folderActions={browser.folder.actions}\n                                        dropConfirmation={browser.folder.dropConfirmation}\n                                        enableActions={true}\n                                        enableCreate={true}\n                                    />\n                                </div>\n                                {browser.filterByTags ? (\n                                    <>\n                                        <Separator />\n                                        <div className={\"flex-1 overflow-y-auto min-h-0\"}>\n                                            <TagsList\n                                                loading={false}\n                                                activeTags={\n                                                    (vm.list.filters[\"tags\"] as string[]) ?? []\n                                                }\n                                                tags={vm.tags.map(tag => ({\n                                                    tag: tag.tag,\n                                                    count: tag.count\n                                                }))}\n                                                onActivatedTagsChange={tags => {\n                                                    if (tags.length > 0) {\n                                                        actions.filter.set(\"tags\", tags);\n                                                    } else {\n                                                        actions.filter.clear(\"tags\");\n                                                        actions.filter.clear(\"tags_rule\");\n                                                    }\n                                                }}\n                                            />\n                                        </div>\n                                    </>\n                                ) : null}\n                            </div>\n                        </LeftPanel>\n                        <RightPanel span={10}>\n                            <div\n                                className={\"flex flex-col relative\"}\n                                style={{ height: \"calc(100vh - 45px\" }}\n                            >\n                                <FileManagerHeader browseFiles={browseFiles} />\n                                <div\n                                    className={\"flex-1\"}\n                                    {...getDropZoneProps({\n                                        onDragEnter: () => actions.setDragging(true),\n                                        onDrop: () => actions.setDragging(false),\n                                        onDragLeave: (e: React.DragEvent) => {\n                                            if (\n                                                !e.relatedTarget ||\n                                                !e.currentTarget.contains(e.relatedTarget as Node)\n                                            ) {\n                                                actions.setDragging(false);\n                                            }\n                                        }\n                                    })}\n                                    data-testid={\"fm-list-wrapper\"}\n                                >\n                                    {!overlay && <BulkActionBar />}\n                                    <Scrollbar\n                                        onScrollFrame={scrollFrame =>\n                                            loadMoreOnScroll({ scrollFrame })\n                                        }\n                                    >\n                                        {renderList(browseFiles)}\n                                    </Scrollbar>\n                                    {vm.dragging && <FileDropPlaceholder />}\n                                    <UploadProgress />\n                                </div>\n                                <BottomInfoBar\n                                    accept={overlay?.accept ?? []}\n                                    listing={vm.list.pagination.loadingMore}\n                                    loading={vm.list.pagination.loading}\n                                    totalCount={vm.list.pagination.totalCount}\n                                    currentCount={vm.list.pagination.currentCount}\n                                />\n                            </div>\n                        </RightPanel>\n                    </SplitView>\n                </>\n            )}\n        </Files>\n    );\n\n    if (overlay) {\n        return (\n            <OverlayLayout variant={\"strong\"} onExited={() => overlay.onClose()}>\n                {content}\n            </OverlayLayout>\n        );\n    }\n\n    return content;\n});\n\n// ---------------------------------------------------------------------------\n// Inner component that resolves the presenter from the scoped container.\n// ---------------------------------------------------------------------------\n\nconst FileManagerViewInner = observer(\n    ({\n        overlay = false,\n        onChange,\n        onClose,\n        multiple,\n        accept,\n        scope,\n        children\n    }: FileManagerViewProps) => {\n        const { presenter } = useFeature(FileManagerPresenterFeature);\n\n        const overlayConfig = useMemo(() => {\n            if (!overlay || !onChange || !onClose) {\n                return null;\n            }\n\n            const handleFileClick = (file: FmFile) => {\n                if (multiple) {\n                    presenter.actions.selection.toggle(file.id);\n                } else {\n                    onChange([file]);\n                }\n            };\n\n            const confirmSelection = () => {\n                const selectedIds = presenter.vm.list.selection.selectedIds;\n                const selectedFiles = presenter.vm.list.rows.filter(f => selectedIds.has(f.id));\n                if (selectedFiles.length > 0) {\n                    onChange(selectedFiles);\n                }\n            };\n\n            return {\n                onFileClick: handleFileClick,\n                confirmSelection,\n                onClose,\n                accept: accept ?? [],\n                multiple: multiple ?? false\n            };\n        }, [overlay, onChange, onClose, multiple, accept]);\n\n        useEffect(() => {\n            presenter.init({ scope });\n            return () => presenter.dispose();\n        }, [presenter, overlay, scope]);\n\n        const inner = (\n            <DialogsProvider>\n                <FileManagerViewWithConfig>\n                    <FileManagerPresenterProvider presenter={presenter}>\n                        <FileManagerViewLayout />\n                        {children}\n                    </FileManagerPresenterProvider>\n                </FileManagerViewWithConfig>\n            </DialogsProvider>\n        );\n\n        if (overlayConfig) {\n            return <OverlayProvider config={overlayConfig}>{inner}</OverlayProvider>;\n        }\n\n        return inner;\n    }\n);\n\n// ---------------------------------------------------------------------------\n// FileManagerView — sets up DI container and renders the inner component.\n// ---------------------------------------------------------------------------\n\nexport const FileManagerView = (props: FileManagerViewProps) => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n\n        SharedCacheFeature.register(child);\n        FoldersFeature.register(child, { type: \"FmFile\" });\n        FolderTreePresenterFeature.register(child);\n        ListFilesFeature.register(child);\n        GetFileFeature.register(child);\n        DeleteFileFeature.register(child);\n        UpdateFileFeature.register(child);\n        FileUploaderFeature.register(child);\n        ListTagsFeature.register(child);\n        GetSettingsFeature.register(child);\n        FileDetailsPresenterFeature.register(child);\n        FileManagerPresenterFeature.register(child);\n\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <FileManagerViewInner {...props} />\n        </DiContainerProvider>\n    );\n};\n"],"names":["t","i18n","FileManagerViewLayout","observer","vm","actions","useFileManagerPresenter","browser","useFileManagerConfig","overlay","useOverlay","toast","useToast","useHotkeys","container","useContainer","settingsRepository","useMemo","GetSettingsRepository","settings","uploadFiles","files","loadMoreOnScroll","useCallback","debounce","scrollFrame","OverlayLoader","renderList","browseFiles","Empty","FileTable","FileGrid","content","Files","filesToUpload","file","Boolean","errors","message","outputFileSelectionError","console","getDropZoneProps","FileDetailsDrawer","SplitView","LeftPanel","Heading","Separator","FolderTree","TagsList","tag","tags","RightPanel","FileManagerHeader","e","BulkActionBar","Scrollbar","FileDropPlaceholder","UploadProgress","BottomInfoBar","OverlayLayout","FileManagerViewInner","onChange","onClose","multiple","accept","scope","children","presenter","useFeature","FileManagerPresenterFeature","overlayConfig","handleFileClick","confirmSelection","selectedIds","selectedFiles","f","useEffect","inner","DialogsProvider","FileManagerViewWithConfig","FileManagerPresenterProvider","OverlayProvider","FileManagerView","props","scopedContainer","child","SharedCacheFeature","FoldersFeature","FolderTreePresenterFeature","ListFilesFeature","GetFileFeature","DeleteFileFeature","UpdateFileFeature","FileUploaderFeature","ListTagsFeature","GetSettingsFeature","FileDetailsPresenterFeature","DiContainerProvider"],"mappings":"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"}

package/presentation/FileManager/OverlayContext.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { FmFile } from "../../features/shared/types.js";
+export interface OverlayConfig {
+    onFileClick: (file: FmFile) => void;
+    confirmSelection: () => void;
+    onClose: () => void;
+    accept: string[];
+    multiple: boolean;
+}
+export declare const OverlayProvider: ({ config, children }: {
+    config: OverlayConfig;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare function useOverlay(): OverlayConfig | null;

package/presentation/FileManager/OverlayContext.js

@@ -0,0 +1,11 @@
+import react, { createContext, useContext } from "react";
+const OverlayCtx = /*#__PURE__*/ createContext(null);
+const OverlayProvider = ({ config, children })=>/*#__PURE__*/ react.createElement(OverlayCtx.Provider, {
+        value: config
+    }, children);
+function useOverlay() {
+    return useContext(OverlayCtx);
+}
+export { OverlayProvider, useOverlay };
+
+//# sourceMappingURL=OverlayContext.js.map

package/presentation/FileManager/OverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileManager/OverlayContext.js","sources":["../../../src/presentation/FileManager/OverlayContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { FmFile } from \"~/features/shared/types.js\";\n\nexport interface OverlayConfig {\n    onFileClick: (file: FmFile) => void;\n    confirmSelection: () => void;\n    onClose: () => void;\n    accept: string[];\n    multiple: boolean;\n}\n\nconst OverlayCtx = createContext<OverlayConfig | null>(null);\n\nexport const OverlayProvider = ({\n    config,\n    children\n}: {\n    config: OverlayConfig;\n    children: React.ReactNode;\n}) => {\n    return <OverlayCtx.Provider value={config}>{children}</OverlayCtx.Provider>;\n};\n\nexport function useOverlay(): OverlayConfig | null {\n    return useContext(OverlayCtx);\n}\n"],"names":["OverlayCtx","createContext","OverlayProvider","config","children","useOverlay","useContext"],"mappings":";AAWA,MAAMA,aAAa,WAAHA,GAAGC,cAAoC;AAEhD,MAAMC,kBAAkB,CAAC,EAC5BC,MAAM,EACNC,QAAQ,EAIX,GACU,WAAP,GAAO,oBAACJ,WAAW,QAAQ;QAAC,OAAOG;OAASC;AAGzC,SAASC;IACZ,OAAOC,WAAWN;AACtB"}