@iobroker/adapter-react-v5 7.2.3 → 7.2.6

package/{Components → build/Components}/FileBrowser.js

@@ -1,71 +1,39 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileBrowserClass = void 0;
 /**
  * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
  */
-const react_1 = __importStar(require("react"));
-const react_dropzone_1 = __importDefault(require("react-dropzone"));
-const material_1 = require("@mui/material");
+import React, { Component } from 'react';
+import Dropzone from 'react-dropzone';
+import { LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, CircularProgress, Toolbar, IconButton, Fab, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Input, Breadcrumbs, Box, } from '@mui/material';
 // MUI Icons
-const icons_material_1 = require("@mui/icons-material");
-const Error_1 = __importDefault(require("../Dialogs/Error"));
-const Utils_1 = __importDefault(require("./Utils"));
-const TextInput_1 = __importDefault(require("../Dialogs/TextInput"));
+import { Refresh as RefreshIcon, Close as CloseIcon, Bookmark as JsonIcon, BookmarkBorder as CssIcon, Description as HtmlIcon, Edit as EditIcon, Code as JSIcon, InsertDriveFile as FileIcon, Publish as UploadIcon, MusicNote as MusicIcon, SaveAlt as DownloadIcon, CreateNewFolder as AddFolderIcon, FolderOpen as EmptyFilterIcon, List as IconList, ViewModule as IconTile, ArrowBack as IconBack, Delete as DeleteIcon, Brightness6 as Brightness5Icon, Image as TypeIconImages, FontDownload as TypeIconTxt, AudioFile as TypeIconAudio, Videocam as TypeIconVideo, KeyboardReturn as EnterIcon, FolderSpecial as RestrictedIcon, } from '@mui/icons-material';
+import { DialogError } from '../Dialogs/Error';
+import { Utils } from './Utils';
+import { DialogTextInput } from '../Dialogs/TextInput';
 // Custom Icons
-const IconExpert_1 = __importDefault(require("../icons/IconExpert"));
-const IconClosed_1 = __importDefault(require("../icons/IconClosed"));
-const IconOpen_1 = __importDefault(require("../icons/IconOpen"));
-const IconNoIcon_1 = __importDefault(require("../icons/IconNoIcon"));
-const Icon_1 = __importDefault(require("./Icon"));
-const withWidth_1 = __importDefault(require("./withWidth"));
-const FileViewer_1 = __importStar(require("./FileViewer"));
+import { IconExpert } from '../icons/IconExpert';
+import { IconClosed } from '../icons/IconClosed';
+import { IconOpen } from '../icons/IconOpen';
+import { IconNoIcon } from '../icons/IconNoIcon';
+import { Icon } from './Icon';
+import { withWidth } from './withWidth';
+import { FileViewer, EXTENSIONS } from './FileViewer';
 const ROW_HEIGHT = 32;
 const BUTTON_WIDTH = 32;
 const TILE_HEIGHT = 120;
 const TILE_WIDTH = 64;
 const NOT_FOUND = 'Not found';
 const FILE_TYPE_ICONS = {
-    all: icons_material_1.InsertDriveFile,
-    images: icons_material_1.Image,
-    code: icons_material_1.Code,
-    txt: icons_material_1.FontDownload,
-    audio: icons_material_1.AudioFile,
-    video: icons_material_1.Videocam,
+    all: FileIcon,
+    images: TypeIconImages,
+    code: JSIcon,
+    txt: TypeIconTxt,
+    audio: TypeIconAudio,
+    video: TypeIconVideo,
 };
 const styles = {
-    dialog: (theme) => ({
-        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
-    }),
     root: {
         width: '100%',
         overflow: 'hidden',
@@ -107,10 +75,11 @@ const styles = {
         textAlign: 'center',
         opacity: 0.1,
         transition: 'opacity 1s',
-        margin: 4,
+        margin: '4px',
+        borderRadius: '4px',
         '&:hover': {
             background: theme.palette.secondary.light,
-            color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
+            color: Utils.invertColor(theme.palette.secondary.main, true),
         },
     }),
     itemNameFolderTile: {
@@ -161,7 +130,7 @@ const styles = {
     },
     itemSelected: (theme) => ({
         background: theme.palette.primary.main,
-        color: Utils_1.default.invertColor(theme.palette.primary.main, true),
+        color: Utils.invertColor(theme.palette.primary.main, true),
     }),
     itemTable: (theme) => ({
         userSelect: 'none',
@@ -171,7 +140,7 @@ const styles = {
         lineHeight: `${ROW_HEIGHT}px`,
         '&:hover': {
             background: theme.palette.secondary.light,
-            color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
+            color: Utils.invertColor(theme.palette.secondary.main, true),
         },
     }),
     itemNameTable: {
@@ -228,8 +197,8 @@ const styles = {
         opacity: 0.4,
     },
     itemFolderIconTable: (theme) => ({
-        marginTop: 1,
-        marginLeft: 8,
+        marginTop: '1px',
+        marginLeft: '8px',
         display: 'inline-block',
         width: 30,
         height: 30,
@@ -362,6 +331,9 @@ const styles = {
             background: theme.palette.primary.main,
         },
     }),
+    pathDivBreadcrumbSelected: {
+    // todo: add style
+    },
     backgroundImageLight: {
         background: 'white',
     },
@@ -387,8 +359,8 @@ function getParentDir(dir) {
     return parts.join('/');
 }
 function isFile(path) {
-    const ext = Utils_1.default.getFileExtension(path);
-    return !!((ext === null || ext === void 0 ? void 0 : ext.toLowerCase().match(/[a-z]+/)) && ext.length < 5);
+    const ext = Utils.getFileExtension(path);
+    return !!(ext?.toLowerCase().match(/[a-z]+/) && ext.length < 5);
 }
 const TABLE = 'Table';
 const TILE = 'Tile';
@@ -404,61 +376,26 @@ function sortFolders(a, b) {
     }
     return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
 }
-class FileBrowserClass extends react_1.Component {
+export class FileBrowserClass extends Component {
+    imagePrefix;
+    levelPadding;
+    mounted;
+    suppressDeleteConfirm;
+    browseList;
+    browseListRunning;
+    initialReadFinished;
+    supportSubscribes;
+    _tempTimeout;
+    limitToObjectID = null;
+    limitToPath = null;
+    lastSelect = null;
+    setOpacityTimer = null;
+    cacheFoldersTimeout = null;
+    foldersLoading = null;
+    cacheFolders = null;
+    localStorage;
     constructor(props) {
         super(props);
-        this.limitToObjectID = null;
-        this.limitToPath = null;
-        this.lastSelect = null;
-        this.setOpacityTimer = null;
-        this.cacheFoldersTimeout = null;
-        this.foldersLoading = null;
-        this.cacheFolders = null;
-        this.onFileChange = (id, fileName, size) => {
-            const key = `${id}/${fileName}`;
-            const pos = key.lastIndexOf('/');
-            const folder = key.substring(0, pos);
-            console.log(`File changed ${key}[${size}]`);
-            if (this.state.folders[folder]) {
-                if (this._tempTimeout[folder]) {
-                    clearTimeout(this._tempTimeout[folder]);
-                }
-                this._tempTimeout[folder] = setTimeout(() => {
-                    delete this._tempTimeout[folder];
-                    this.browseFolder(folder, null, false, true)
-                        .then(folders => this.setState({ folders }))
-                        .catch(e => console.error(`Cannot read folder: ${e.message}`));
-                }, 300);
-            }
-        };
-        this.setStateBackgroundImage = () => {
-            const array = ['light', 'dark', 'colored', 'delete'];
-            this.setState(({ backgroundImage }) => {
-                if (backgroundImage &&
-                    array.indexOf(backgroundImage) !== -1 &&
-                    array.length - 1 !== array.indexOf(backgroundImage)) {
-                    this.localStorage.setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
-                    return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
-                }
-                this.localStorage.setItem('files.backgroundImage', array[0]);
-                return { backgroundImage: array[0] };
-            });
-        };
-        this.getStyleBackgroundImage = () => {
-            // ['light', 'dark', 'colored', 'delete']
-            switch (this.state.backgroundImage) {
-                case 'light':
-                    return styles.backgroundImageLight;
-                case 'dark':
-                    return styles.backgroundImageDark;
-                case 'colored':
-                    return styles.backgroundImageColored;
-                case 'delete':
-                    return null;
-                default:
-                    return null;
-            }
-        };
         this.localStorage = window._localStorage || window.localStorage;
         const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
         if (this.props.limitPath) {
@@ -473,15 +410,12 @@ class FileBrowserClass extends react_1.Component {
         try {
             expanded = JSON.parse(expandedStr);
             if (this.limitToPath) {
-                expanded = expanded.filter(id => {
-                    var _a;
-                    return id.startsWith(`${this.limitToPath}/`) ||
-                        id === this.limitToPath ||
-                        ((_a = this.limitToPath) === null || _a === void 0 ? void 0 : _a.startsWith(`${id}/`));
-                });
+                expanded = expanded.filter(id => id.startsWith(`${this.limitToPath}/`) ||
+                    id === this.limitToPath ||
+                    this.limitToPath?.startsWith(`${id}/`));
             }
         }
-        catch (_a) {
+        catch {
             expanded = [];
         }
         let viewType;
@@ -595,7 +529,7 @@ class FileBrowserClass extends react_1.Component {
     scrollToSelected() {
         if (this.mounted) {
             const el = document.getElementById(this.state.selected);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView();
+            el?.scrollIntoView();
         }
     }
     async componentDidMount() {
@@ -617,7 +551,7 @@ class FileBrowserClass extends react_1.Component {
         this._tempTimeout = {};
     }
     browseFoldersCb(foldersList, newFoldersNotNull, cb) {
-        if (!(foldersList === null || foldersList === void 0 ? void 0 : foldersList.length)) {
+        if (!foldersList?.length) {
             cb(newFoldersNotNull);
         }
         else {
@@ -643,7 +577,7 @@ class FileBrowserClass extends react_1.Component {
         else {
             newFoldersNotNull = _newFolders;
         }
-        if (!(foldersList === null || foldersList === void 0 ? void 0 : foldersList.length)) {
+        if (!foldersList?.length) {
             return Promise.resolve(newFoldersNotNull);
         }
         return new Promise(resolve => {
@@ -838,17 +772,28 @@ class FileBrowserClass extends react_1.Component {
         const adapter = parts.shift();
         const relPath = parts.join('/');
         // make all requests here serial
-        const files = await this.readDirSerial(adapter || '', relPath);
+        let files;
+        try {
+            files = await this.readDirSerial(adapter || '', relPath);
+        }
+        catch (error) {
+            // work around: 0_userdata.0 is a special folder, that should exist event when other folders and itself do not exit, as the browser shows it anyway.
+            if (error === 'Not exists' && adapter === '0_userdata.0') {
+                files = [];
+            }
+            else {
+                throw error;
+            }
+        }
         try {
             const _folders = [];
             files.forEach(file => {
-                var _a;
                 const item = {
                     id: `${folderId}/${file.file}`,
-                    ext: Utils_1.default.getFileExtension(file.file),
+                    ext: Utils.getFileExtension(file.file),
                     folder: file.isDir,
                     name: file.file,
-                    size: (_a = file.stats) === null || _a === void 0 ? void 0 : _a.size,
+                    size: file.stats?.size,
                     modified: file.modifiedAt,
                     acl: file.acl,
                     level,
@@ -890,14 +835,14 @@ class FileBrowserClass extends react_1.Component {
         catch (e) {
             const knownError = e;
             if (this.initialReadFinished) {
-                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${knownError === null || knownError === void 0 ? void 0 : knownError.message}`);
+                window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${knownError?.message}`);
             }
             newFoldersNotNull[folderId] = [];
         }
         return newFoldersNotNull;
     }
     toggleFolder(item, e) {
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        e?.stopPropagation();
         const expanded = [...this.state.expanded];
         const pos = expanded.indexOf(item.id);
         if (pos === -1) {
@@ -921,10 +866,25 @@ class FileBrowserClass extends react_1.Component {
             this.setState({ expanded });
         }
     }
-    changeFolder(e, folder) {
-        if (e) {
-            e.stopPropagation();
+    onFileChange = (id, fileName, size) => {
+        const key = `${id}/${fileName}`;
+        const pos = key.lastIndexOf('/');
+        const folder = key.substring(0, pos);
+        console.log(`File changed ${key}[${size}]`);
+        if (this.state.folders[folder]) {
+            if (this._tempTimeout[folder]) {
+                clearTimeout(this._tempTimeout[folder]);
+            }
+            this._tempTimeout[folder] = setTimeout(() => {
+                delete this._tempTimeout[folder];
+                this.browseFolder(folder, null, false, true)
+                    .then(folders => this.setState({ folders }))
+                    .catch(e => console.error(`Cannot read folder: ${e.message}`));
+            }, 300);
         }
+    };
+    changeFolder(e, folder) {
+        e?.stopPropagation();
         this.lastSelect = Date.now();
         let _folder = folder || getParentDir(this.state.currentDir);
         if (_folder === '/') {
@@ -932,8 +892,10 @@ class FileBrowserClass extends react_1.Component {
         }
         this.localStorage.setItem('files.currentDir', _folder);
         if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
-            return this.setState({ selected: _folder });
+            this.setState({ selected: _folder });
+            return;
         }
+        // If desired folder is not yet loaded
         if (_folder && !this.state.folders[_folder]) {
             this.browseFolder(_folder)
                 .then(folders => this.setState({
@@ -946,7 +908,7 @@ class FileBrowserClass extends react_1.Component {
                 .catch(_e => console.error(`Cannot read folder: ${_e.message}`));
             return;
         }
-        return this.setState({
+        this.setState({
             currentDir: _folder,
             selected: _folder,
             path: _folder,
@@ -961,10 +923,10 @@ class FileBrowserClass extends react_1.Component {
         this.localStorage.setItem('files.selected', id);
         this.setState({ selected: id, path: id, pathFocus: false }, () => {
             if (this.props.onSelect) {
-                const ext = Utils_1.default.getFileExtension(id);
+                const ext = Utils.getFileExtension(id);
                 if ((!this.props.filterFiles || (ext && this.props.filterFiles.includes(ext))) &&
                     (!this.state.filterByType ||
-                        (ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(ext)))) {
+                        (ext && EXTENSIONS[this.state.filterByType].includes(ext)))) {
                     this.props.onSelect(id, false, !!this.state.folders[id]);
                 }
                 else {
@@ -993,25 +955,24 @@ class FileBrowserClass extends react_1.Component {
             !item.temp) {
             return null;
         }
-        const IconEl = expanded ? IconOpen_1.default : IconClosed_1.default;
+        const IconEl = expanded ? IconOpen : IconClosed;
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
-        return (react_1.default.createElement(material_1.Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
-            react_1.default.createElement(IconEl, { style: Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder), onClick: this.state.viewType === TABLE
-                    ? (e) => this.toggleFolder(item, e)
-                    : undefined }),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
-            react_1.default.createElement(material_1.Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
+        const iconStyle = Utils.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder);
+        return (React.createElement(Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
+            React.createElement(IconEl, { style: iconStyle, onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
+            React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
+            React.createElement(Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
                 ? this.state.folders[item.id].length
                 : ''),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            this.state.viewType === TABLE && this.props.expertMode ? (react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.itemDeleteButtonTable), { display: { md: 'inline-block', sm: 'none' } }) })) : null,
-            this.state.viewType === TABLE && this.props.allowDownload ? (react_1.default.createElement("div", { style: styles[`itemDownloadEmpty${this.state.viewType}`] })) : null,
+            React.createElement(Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
+            this.state.viewType === TABLE && this.props.expertMode ? (React.createElement(Box, { component: "div", sx: { ...styles.itemDeleteButtonTable, display: { md: 'inline-block', sm: 'none' } } })) : null,
+            this.state.viewType === TABLE && this.props.allowDownload ? (React.createElement("div", { style: styles[`itemDownloadEmpty${this.state.viewType}`] })) : null,
             this.state.viewType === TABLE &&
                 this.props.allowDelete &&
                 this.state.folders[item.id] &&
-                this.state.folders[item.id].length ? (react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                this.state.folders[item.id].length ? (React.createElement(IconButton, { "aria-label": "delete", onClick: e => {
                     e.stopPropagation();
                     if (this.suppressDeleteConfirm > Date.now()) {
                         this.deleteItem(item.id);
@@ -1020,16 +981,16 @@ class FileBrowserClass extends react_1.Component {
                         this.setState({ deleteItem: item.id });
                     }
                 }, sx: styles[`itemDeleteButton${this.state.viewType}`], size: "large" },
-                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
+                React.createElement(DeleteIcon, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (React.createElement(Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
     }
     renderBackFolder() {
-        return (react_1.default.createElement(material_1.Box, { component: "div", key: this.state.currentDir, id: this.state.currentDir, onClick: e => this.changeFolder(e), title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)), className: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`]) },
-            react_1.default.createElement(IconClosed_1.default, { style: styles[`itemFolderIcon${this.state.viewType}`] }),
-            react_1.default.createElement(icons_material_1.ArrowBack, { sx: styles.itemFolderIconBack }),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, "..")));
+        return (React.createElement(Box, { component: "div", key: this.state.currentDir, id: this.state.currentDir, onClick: e => this.changeFolder(e), title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)), className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`]) },
+            React.createElement(IconClosed, { style: Utils.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`]) }),
+            React.createElement(IconBack, { sx: styles.itemFolderIconBack }),
+            React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, "..")));
     }
     formatSize(size) {
-        return (react_1.default.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : ''));
+        return (React.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils.formatBytes(size) : ''));
     }
     formatAcl(acl) {
         const access = acl ? acl.permissions || acl.file : 0;
@@ -1040,30 +1001,30 @@ class FileBrowserClass extends react_1.Component {
         else {
             accessStr = '';
         }
-        return (react_1.default.createElement("div", { style: styles[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? (react_1.default.createElement(material_1.IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), sx: styles[`itemAclButton${this.state.viewType}`] }, accessStr || '---')) : (accessStr || '---')));
+        return (React.createElement("div", { style: styles[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? (React.createElement(IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), sx: styles[`itemAclButton${this.state.viewType}`] }, accessStr || '---')) : (accessStr || '---')));
     }
     getFileIcon(ext) {
         switch (ext) {
             case 'json':
             case 'json5':
-                return react_1.default.createElement(icons_material_1.Bookmark, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(JsonIcon, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'css':
-                return react_1.default.createElement(icons_material_1.BookmarkBorder, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(CssIcon, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'js':
             case 'ts':
-                return react_1.default.createElement(icons_material_1.Code, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(JSIcon, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'html':
             case 'md':
-                return react_1.default.createElement(icons_material_1.Description, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(HtmlIcon, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'mp3':
             case 'ogg':
             case 'wav':
             case 'm4a':
             case 'mp4':
             case 'flac':
-                return react_1.default.createElement(icons_material_1.MusicNote, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(MusicIcon, { style: styles[`itemIcon${this.state.viewType}`] });
             default:
-                return react_1.default.createElement(icons_material_1.InsertDriveFile, { style: styles[`itemIcon${this.state.viewType}`] });
+                return React.createElement(FileIcon, { style: styles[`itemIcon${this.state.viewType}`] });
         }
     }
     static getEditFile(ext) {
@@ -1080,10 +1041,38 @@ class FileBrowserClass extends react_1.Component {
                 return false;
         }
     }
+    setStateBackgroundImage = () => {
+        const array = ['light', 'dark', 'colored', 'delete'];
+        this.setState(({ backgroundImage }) => {
+            if (backgroundImage &&
+                array.indexOf(backgroundImage) !== -1 &&
+                array.length - 1 !== array.indexOf(backgroundImage)) {
+                this.localStorage.setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
+                return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
+            }
+            this.localStorage.setItem('files.backgroundImage', array[0]);
+            return { backgroundImage: array[0] };
+        });
+    };
+    getStyleBackgroundImage = () => {
+        // ['light', 'dark', 'colored', 'delete']
+        switch (this.state.backgroundImage) {
+            case 'light':
+                return styles.backgroundImageLight;
+            case 'dark':
+                return styles.backgroundImageDark;
+            case 'colored':
+                return styles.backgroundImageColored;
+            case 'delete':
+                return null;
+            default:
+                return null;
+        }
+    };
     renderFile(item) {
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
-        const ext = Utils_1.default.getFileExtension(item.name);
-        return (react_1.default.createElement(material_1.Box, { component: "div", key: item.id, id: item.id, onDoubleClick: e => {
+        const ext = Utils.getFileExtension(item.name);
+        return (React.createElement(Box, { component: "div", key: item.id, id: item.id, onDoubleClick: e => {
                 e.stopPropagation();
                 if (!this.props.onSelect) {
                     this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
@@ -1091,22 +1080,26 @@ class FileBrowserClass extends react_1.Component {
                 else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
                     (!this.state.filterByType ||
                         (item.ext &&
-                            FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                            EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                     this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                 }
-            }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}, className: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFile${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : undefined) },
-            ext && FileViewer_1.EXTENSIONS.images.includes(ext) ? (this.state.fileErrors.includes(item.id) ? (react_1.default.createElement(IconNoIcon_1.default, { style: Object.assign(Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), styles[`itemNoImage${this.state.viewType}`]) })) : (react_1.default.createElement(Icon_1.default, { onError: e => {
+            }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}, className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFile${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : undefined) },
+            ext && EXTENSIONS.images.includes(ext) ? (this.state.fileErrors.includes(item.id) ? (React.createElement(IconNoIcon, { style: {
+                    ...styles[`itemImage${this.state.viewType}`],
+                    ...this.getStyleBackgroundImage(),
+                    ...styles[`itemNoImage${this.state.viewType}`],
+                } })) : (React.createElement(Icon, { onError: e => {
                     e.target.onerror = null;
                     const fileErrors = [...this.state.fileErrors];
                     if (!fileErrors.includes(item.id)) {
                         fileErrors.push(item.id);
                         this.setState({ fileErrors });
                     }
-                }, style: Object.assign(Object.assign({}, styles[`itemImage${this.state.viewType}`]), this.getStyleBackgroundImage()), src: this.imagePrefix + item.id, alt: item.name }))) : (this.getFileIcon(ext)),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemName${this.state.viewType}`] }, item.name),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.formatSize(item.size)),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            react_1.default.createElement(material_1.Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ? (react_1.default.createElement(material_1.IconButton, { "aria-label": "edit", onClick: e => {
+                }, style: { ...styles[`itemImage${this.state.viewType}`], ...this.getStyleBackgroundImage() }, src: this.imagePrefix + item.id, alt: item.name }))) : (this.getFileIcon(ext)),
+            React.createElement(Box, { component: "div", sx: styles[`itemName${this.state.viewType}`] }, item.name),
+            React.createElement(Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.formatSize(item.size)),
+            React.createElement(Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
+            React.createElement(Box, { component: "div", sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ? (React.createElement(IconButton, { "aria-label": "edit", onClick: e => {
                     e.stopPropagation();
                     if (!this.props.onSelect) {
                         this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
@@ -1115,18 +1108,18 @@ class FileBrowserClass extends react_1.Component {
                         (item.ext && this.props.filterFiles.includes(item.ext))) &&
                         (!this.state.filterByType ||
                             (item.ext &&
-                                FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                                EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                         this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                     }
                 }, sx: styles.itemDeleteButtonTable, size: "large" },
-                react_1.default.createElement(icons_material_1.Edit, { fontSize: "small" }))) : (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }))),
-            this.state.viewType === TABLE && this.props.allowDownload ? (react_1.default.createElement(material_1.Box, { component: "a", className: "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge", sx: styles.itemDownloadButtonTable, tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => e.stopPropagation() },
-                react_1.default.createElement(icons_material_1.SaveAlt, null))) : null,
+                React.createElement(EditIcon, { fontSize: "small" }))) : (React.createElement(Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }))),
+            this.state.viewType === TABLE && this.props.allowDownload ? (React.createElement(Box, { component: "a", className: "MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge", sx: styles.itemDownloadButtonTable, tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => e.stopPropagation() },
+                React.createElement(DownloadIcon, null))) : null,
             this.state.viewType === TABLE &&
                 this.props.allowDelete &&
                 item.id !== 'vis.0/' &&
                 item.id !== 'vis-2.0/' &&
-                item.id !== USER_DATA ? (react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                item.id !== USER_DATA ? (React.createElement(IconButton, { "aria-label": "delete", onClick: e => {
                     e.stopPropagation();
                     if (this.suppressDeleteConfirm > Date.now()) {
                         this.deleteItem(item.id);
@@ -1135,7 +1128,7 @@ class FileBrowserClass extends react_1.Component {
                         this.setState({ deleteItem: item.id });
                     }
                 }, sx: styles[`itemDeleteButton${this.state.viewType}`], size: "large" },
-                react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
+                React.createElement(DeleteIcon, { fontSize: "small" }))) : this.state.viewType === TABLE && this.props.allowDelete ? (React.createElement(Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] })) : null));
     }
     renderItems(folderId) {
         if (this.state.folders && this.state.folders[folderId]) {
@@ -1152,7 +1145,7 @@ class FileBrowserClass extends react_1.Component {
                     else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
                         (!this.state.filterByType ||
                             (item.ext &&
-                                FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                                EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                         res.push(this.renderFile(item));
                     }
                 });
@@ -1182,15 +1175,15 @@ class FileBrowserClass extends react_1.Component {
                 else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
                     (!this.state.filterByType ||
                         (item.ext &&
-                            FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                            EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                     totalResult.push(this.renderFile(item));
                 }
             });
             return totalResult;
         }
-        return (react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(material_1.CircularProgress, { key: folderId, color: "secondary", size: 24 }),
-            react_1.default.createElement("div", { style: {
+        return (React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(CircularProgress, { key: folderId, color: "secondary", size: 24 }),
+            React.createElement("div", { style: {
                     position: 'absolute',
                     zIndex: 2,
                     top: 4,
@@ -1203,17 +1196,23 @@ class FileBrowserClass extends react_1.Component {
             ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all
             : null;
         const isInFolder = this.findFirstFolder(this.state.selected);
-        return (react_1.default.createElement(material_1.Toolbar, { key: "toolbar", variant: "dense" },
-            this.props.allowNonRestricted && this.props.restrictToFolder ? (react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.state.restrictToFolder
+        return (React.createElement(Toolbar, { key: "toolbar", variant: "dense" },
+            this.props.allowNonRestricted && this.props.restrictToFolder ? (React.createElement(IconButton, { edge: "start", title: this.state.restrictToFolder
                     ? this.props.t('ra_Show all folders')
-                    : this.props.t('ra_Restrict to folder'), style: Object.assign(Object.assign({}, styles.menuButton), (this.state.restrictToFolder ? styles.menuButtonRestrictActive : undefined)), "aria-label": "restricted to folder", onClick: () => this.setState({
+                    : this.props.t('ra_Restrict to folder'), style: {
+                    ...styles.menuButton,
+                    ...(this.state.restrictToFolder ? styles.menuButtonRestrictActive : undefined),
+                }, "aria-label": "restricted to folder", onClick: () => this.setState({
                     restrictToFolder: (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
                     loadAllFolders: true,
                 }), size: "small" },
-                react_1.default.createElement(icons_material_1.FolderSpecial, { fontSize: "small" }))) : null,
-            this.props.showExpertButton ? (react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle expert mode'), style: Object.assign(Object.assign({}, styles.menuButton), (this.state.expertMode ? styles.menuButtonExpertActive : undefined)), "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
-                react_1.default.createElement(IconExpert_1.default, null))) : null,
-            this.props.showViewTypeButton ? (react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
+                React.createElement(RestrictedIcon, { fontSize: "small" }))) : null,
+            this.props.showExpertButton ? (React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Toggle expert mode'), style: {
+                    ...styles.menuButton,
+                    ...(this.state.expertMode ? styles.menuButtonExpertActive : undefined),
+                }, "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
+                React.createElement(IconExpert, null))) : null,
+            this.props.showViewTypeButton ? (React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
                     const viewType = this.state.viewType === TABLE ? TILE : TABLE;
                     this.localStorage.setItem('files.viewType', viewType);
                     let currentDir = this.state.selected;
@@ -1225,32 +1224,32 @@ class FileBrowserClass extends react_1.Component {
                             this.scrollToSelected();
                         }
                     });
-                }, size: "small" }, this.state.viewType !== TABLE ? react_1.default.createElement(icons_material_1.List, { fontSize: "small" }) : react_1.default.createElement(icons_material_1.ViewModule, { fontSize: "small" }))) : null,
-            react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Hide empty folders'), style: styles.menuButton, color: this.state.filterEmpty ? 'secondary' : 'inherit', "aria-label": "filter empty", onClick: () => {
+                }, size: "small" }, this.state.viewType !== TABLE ? React.createElement(IconList, { fontSize: "small" }) : React.createElement(IconTile, { fontSize: "small" }))) : null,
+            React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Hide empty folders'), style: styles.menuButton, color: this.state.filterEmpty ? 'secondary' : 'inherit', "aria-label": "filter empty", onClick: () => {
                     this.localStorage.setItem('file.empty', this.state.filterEmpty ? 'false' : 'true');
                     this.setState({ filterEmpty: !this.state.filterEmpty });
                 }, size: "small" },
-                react_1.default.createElement(icons_material_1.FolderOpen, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Reload files'), style: styles.menuButton, color: "inherit", "aria-label": "reload files", onClick: () => this.setState({ folders: {} }, () => this.loadFolders()), size: "small" },
-                react_1.default.createElement(icons_material_1.Refresh, { fontSize: "small" })),
-            this.props.allowCreateFolder ? (react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+                React.createElement(EmptyFilterIcon, { fontSize: "small" })),
+            React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Reload files'), style: styles.menuButton, color: "inherit", "aria-label": "reload files", onClick: () => this.setState({ folders: {} }, () => this.loadFolders()), size: "small" },
+                React.createElement(RefreshIcon, { fontSize: "small" })),
+            this.props.allowCreateFolder ? (React.createElement(IconButton, { edge: "start", disabled: !this.state.selected ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Create folder'), style: styles.menuButton, color: "inherit", "aria-label": "add folder", onClick: () => this.setState({ addFolder: true }), size: "small" },
-                react_1.default.createElement(icons_material_1.CreateNewFolder, { fontSize: "small" }))) : null,
-            this.props.allowUpload ? (react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+                React.createElement(AddFolderIcon, { fontSize: "small" }))) : null,
+            this.props.allowUpload ? (React.createElement(IconButton, { edge: "start", disabled: !this.state.selected ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), style: styles.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
-                react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" }))) : null,
-            this.props.showTypeSelector && IconType ? (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files'), slotProps: { popper: { sx: styles.tooltip } } },
-                react_1.default.createElement(material_1.IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
-                    react_1.default.createElement(IconType, { fontSize: "small" })))) : null,
-            this.state.showTypesMenu ? (react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {
+                React.createElement(UploadIcon, { fontSize: "small" }))) : null,
+            this.props.showTypeSelector && IconType ? (React.createElement(Tooltip, { title: this.props.t('ra_Filter files'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
+                    React.createElement(IconType, { fontSize: "small" })))) : null,
+            this.state.showTypesMenu ? (React.createElement(Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {
                 const MyIcon = FILE_TYPE_ICONS[type];
-                return (react_1.default.createElement(material_1.MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
+                return (React.createElement(MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
                         if (type === 'all') {
                             this.localStorage.removeItem('files.filterByType');
                             this.setState({ filterByType: '', showTypesMenu: null });
@@ -1260,16 +1259,16 @@ class FileBrowserClass extends react_1.Component {
                             this.setState({ filterByType: type, showTypesMenu: null });
                         }
                     } },
-                    react_1.default.createElement(material_1.ListItemIcon, null,
-                        react_1.default.createElement(MyIcon, { fontSize: "small" })),
-                    react_1.default.createElement(material_1.ListItemText, null, this.props.t(`ra_fileType_${type}`))));
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(MyIcon, { fontSize: "small" })),
+                    React.createElement(ListItemText, null, this.props.t(`ra_fileType_${type}`))));
             }))) : null,
-            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image'), slotProps: { popper: { sx: styles.tooltip } } },
-                react_1.default.createElement(material_1.IconButton, { color: "inherit", edge: "start", style: styles.menuButton, onClick: this.setStateBackgroundImage, size: "small" },
-                    react_1.default.createElement(icons_material_1.Brightness6, { fontSize: "small" }))),
-            this.state.viewType !== TABLE && this.props.allowDelete ? (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Delete'), slotProps: { popper: { sx: styles.tooltip } } },
-                react_1.default.createElement("span", null,
-                    react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", disabled: !this.state.selected ||
+            React.createElement(Tooltip, { title: this.props.t('ra_Background image'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { color: "inherit", edge: "start", style: styles.menuButton, onClick: this.setStateBackgroundImage, size: "small" },
+                    React.createElement(Brightness5Icon, { fontSize: "small" }))),
+            this.state.viewType !== TABLE && this.props.allowDelete ? (React.createElement(Tooltip, { title: this.props.t('ra_Delete'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement("span", null,
+                    React.createElement(IconButton, { "aria-label": "delete", disabled: !this.state.selected ||
                             this.state.selected === 'vis.0/' ||
                             this.state.selected === 'vis-2.0/' ||
                             this.state.selected === USER_DATA, color: "inherit", edge: "start", style: styles.menuButton, onClick: e => {
@@ -1281,7 +1280,7 @@ class FileBrowserClass extends react_1.Component {
                                 this.setState({ deleteItem: this.state.selected });
                             }
                         }, size: "small" },
-                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))))) : null));
+                        React.createElement(DeleteIcon, { fontSize: "small" }))))) : null));
     }
     findItem(id, folders) {
         folders = folders || this.state.folders;
@@ -1303,7 +1302,7 @@ class FileBrowserClass extends react_1.Component {
                 window.alert(this.props.t('ra_Invalid parent folder!'));
                 return null;
             }
-            return (react_1.default.createElement(TextInput_1.default, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => this.state.folders[parentFolder].find(item => item.name === text)
+            return (React.createElement(DialogTextInput, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => this.state.folders[parentFolder].find(item => item.name === text)
                     ? ''
                     : this.props.t('ra_Duplicate name'), onClose: (name) => {
                     if (name) {
@@ -1313,7 +1312,7 @@ class FileBrowserClass extends react_1.Component {
                         const id = `${parentFolder}/${name}`;
                         folders[parentFolder].push({
                             id,
-                            level: ((parent === null || parent === void 0 ? void 0 : parent.level) || 0) + 1,
+                            level: (parent?.level || 0) + 1,
                             name,
                             folder: true,
                             temp: true,
@@ -1357,7 +1356,7 @@ class FileBrowserClass extends react_1.Component {
             parentFolder = '';
             while (parts.length) {
                 const _item = this.findItem(parts.join('/'));
-                if (_item === null || _item === void 0 ? void 0 : _item.folder) {
+                if (_item?.folder) {
                     parentFolder = parts.join('/');
                     break;
                 }
@@ -1377,15 +1376,15 @@ class FileBrowserClass extends react_1.Component {
         }
         catch (e) {
             const knownError = e;
-            window.alert(`Cannot write file: ${knownError === null || knownError === void 0 ? void 0 : knownError.message}`);
+            window.alert(`Cannot write file: ${knownError?.message}`);
         }
     }
     renderUpload() {
         if (this.state.uploadFile) {
             return [
-                react_1.default.createElement(material_1.Fab, { key: "close", color: "primary", "aria-label": "close", style: styles.uploadCloseButton, onClick: () => this.setState({ uploadFile: false }) },
-                    react_1.default.createElement(icons_material_1.Close, null)),
-                react_1.default.createElement(react_dropzone_1.default, { key: "dropzone", onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: acceptedFiles => {
+                React.createElement(Fab, { key: "close", color: "primary", "aria-label": "close", style: styles.uploadCloseButton, onClick: () => this.setState({ uploadFile: false }) },
+                    React.createElement(CloseIcon, null)),
+                React.createElement(Dropzone, { key: "dropzone", onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: acceptedFiles => {
                         let count = acceptedFiles.length;
                         acceptedFiles.forEach(file => {
                             const reader = new FileReader();
@@ -1430,12 +1429,15 @@ class FileBrowserClass extends react_1.Component {
                             };
                             reader.readAsArrayBuffer(file);
                         });
-                    } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, styles.uploadDiv), (this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined)) }, getRootProps()),
-                    react_1.default.createElement("input", Object.assign({}, getInputProps())),
-                    react_1.default.createElement(material_1.Box, { component: "div", sx: styles.uploadCenterDiv },
-                        react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
-                            react_1.default.createElement(icons_material_1.Publish, { style: styles.uploadCenterIcon }),
-                            react_1.default.createElement("div", { style: styles.uploadCenterText }, this.state.uploadFile === 'dragging'
+                    } }, ({ getRootProps, getInputProps }) => (React.createElement("div", { style: {
+                        ...styles.uploadDiv,
+                        ...(this.state.uploadFile === 'dragging' ? styles.uploadDivDragging : undefined),
+                    }, ...getRootProps() },
+                    React.createElement("input", { ...getInputProps() }),
+                    React.createElement(Box, { component: "div", sx: styles.uploadCenterDiv },
+                        React.createElement("div", { style: styles.uploadCenterTextAndIcon },
+                            React.createElement(UploadIcon, { style: styles.uploadCenterIcon }),
+                            React.createElement("div", { style: styles.uploadCenterText }, this.state.uploadFile === 'dragging'
                                 ? this.props.t('ra_Drop file here')
                                 : this.props.t('ra_Place your files here or click here to open the browse dialog'))))))),
             ];
@@ -1444,7 +1446,7 @@ class FileBrowserClass extends react_1.Component {
     }
     deleteRecursive(id) {
         const item = this.findItem(id);
-        if (item === null || item === void 0 ? void 0 : item.folder) {
+        if (item?.folder) {
             return (this.state.folders[id]
                 ? Promise.all(this.state.folders[id].map(_item => this.deleteRecursive(_item.id)))
                 : Promise.resolve()).then(() => {
@@ -1517,26 +1519,26 @@ class FileBrowserClass extends react_1.Component {
     }
     renderDeleteDialog() {
         if (this.state.deleteItem) {
-            return (react_1.default.createElement(material_1.Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
-                react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())),
-                react_1.default.createElement(material_1.DialogContent, null,
-                    react_1.default.createElement(material_1.DialogContentText, null, this.props.t('ra_Are you sure?'))),
-                react_1.default.createElement(material_1.DialogActions, null,
-                    react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => {
+            return (React.createElement(Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
+                React.createElement(DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())),
+                React.createElement(DialogContent, null,
+                    React.createElement(DialogContentText, null, this.props.t('ra_Are you sure?'))),
+                React.createElement(DialogActions, null,
+                    React.createElement(Button, { color: "grey", variant: "contained", onClick: () => {
                             this.suppressDeleteConfirm = Date.now() + 60000 * 5;
                             this.deleteItem('');
                         } }, this.props.t('ra_Delete (no confirm for 5 mins)')),
-                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.deleteItem(''), color: "primary", autoFocus: true }, this.props.t('ra_Delete')),
-                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ deleteItem: '' }), color: "grey" }, this.props.t('ra_Cancel')))));
+                    React.createElement(Button, { variant: "contained", onClick: () => this.deleteItem(''), color: "primary", autoFocus: true }, this.props.t('ra_Delete')),
+                    React.createElement(Button, { variant: "contained", onClick: () => this.setState({ deleteItem: '' }), color: "grey" }, this.props.t('ra_Cancel')))));
         }
         return null;
     }
     renderViewDialog() {
-        return this.state.viewer ? (react_1.default.createElement(FileViewer_1.default, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) })) : null;
+        return this.state.viewer ? (React.createElement(FileViewer, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getStyleBackgroundImage: this.getStyleBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) })) : null;
     }
     renderError() {
         if (this.state.errorText) {
-            return (react_1.default.createElement(Error_1.default, { key: "errorDialog", text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) }));
+            return (React.createElement(DialogError, { key: "errorDialog", text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) }));
         }
         return null;
     }
@@ -1599,31 +1601,31 @@ class FileBrowserClass extends react_1.Component {
             ? this.state.currentDir.split('/')
             : `/${this.state.currentDir}`.split('/');
         const p = [];
-        return (react_1.default.createElement(material_1.Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
+        return (React.createElement(Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
             if (part) {
                 p.push(part);
             }
             const path = p.join('/');
             if (i < parts.length - 1) {
-                return (react_1.default.createElement(material_1.Box, { component: "div", key: `${this.state.selected}_${i}`, sx: styles.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root')));
+                return (React.createElement(Box, { component: "div", key: `${this.state.selected}_${i}`, sx: styles.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root')));
             }
-            return (react_1.default.createElement("div", { style: styles.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part));
+            return (React.createElement("div", { style: styles.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part));
         })));
     }
     renderPath() {
-        return (react_1.default.createElement(material_1.Box, { component: "div", key: "path", sx: styles.pathDiv }, this.state.pathFocus ? (react_1.default.createElement(material_1.Input, { value: this.state.path, onKeyDown: e => {
+        return (React.createElement(Box, { component: "div", key: "path", sx: styles.pathDiv }, this.state.pathFocus ? (React.createElement(Input, { value: this.state.path, onKeyDown: e => {
                 if (e.key === 'Enter') {
                     this.changeToPath();
                 }
                 else if (e.key === 'Escape') {
                     this.setState({ pathFocus: false });
                 }
-            }, endAdornment: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.changeToPath() },
-                react_1.default.createElement(icons_material_1.KeyboardReturn, null)), onBlur: () => this.changeToPath(), onChange: e => this.setState({ path: e.target.value }), style: styles.pathDivInput })) : (this.renderBreadcrumb())));
+            }, endAdornment: React.createElement(IconButton, { size: "small", onClick: () => this.changeToPath() },
+                React.createElement(EnterIcon, null)), onBlur: () => this.changeToPath(), onChange: e => this.setState({ path: e.target.value }), style: styles.pathDivInput })) : (this.renderBreadcrumb())));
     }
     render() {
         if (!this.props.ready) {
-            return react_1.default.createElement(material_1.LinearProgress, null);
+            return React.createElement(LinearProgress, null);
         }
         if (this.state.loadAllFolders && !this.foldersLoading) {
             this.foldersLoading = true;
@@ -1634,10 +1636,13 @@ class FileBrowserClass extends react_1.Component {
                 });
             }, 300);
         }
-        return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.root), this.props.style), className: this.props.className },
+        return (React.createElement("div", { style: { ...styles.root, ...this.props.style }, className: this.props.className },
             this.props.showToolbar ? this.renderToolbar() : null,
             this.state.viewType === TILE ? this.renderPath() : null,
-            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.filesDiv), styles[`filesDiv${this.state.viewType}`]), onClick: e => {
+            React.createElement("div", { style: {
+                    ...styles.filesDiv,
+                    ...styles[`filesDiv${this.state.viewType}`],
+                }, onClick: e => {
                     if (this.state.viewType !== TABLE) {
                         if (this.state.selected !== (this.state.currentDir || '/')) {
                             this.changeFolder(e, this.state.currentDir || '/');
@@ -1650,7 +1655,7 @@ class FileBrowserClass extends react_1.Component {
                 this.state.viewType === TABLE
                     ? this.renderItems('/')
                     : this.renderItems(this.state.currentDir || '/'),
-                this.state.viewType !== TABLE ? (react_1.default.createElement("div", { style: styles.filesDivHint }, this.props.t('ra_select_folder_hint'))) : null),
+                this.state.viewType !== TABLE ? (React.createElement("div", { style: styles.filesDivHint }, this.props.t('ra_select_folder_hint'))) : null),
             this.props.allowUpload ? this.renderInputDialog() : null,
             this.props.allowUpload ? this.renderUpload() : null,
             this.props.allowDelete ? this.renderDeleteDialog() : null,
@@ -1661,5 +1666,5 @@ class FileBrowserClass extends react_1.Component {
             this.renderError()));
     }
 }
-exports.FileBrowserClass = FileBrowserClass;
-exports.default = (0, withWidth_1.default)()(FileBrowserClass);
+export const FileBrowser = withWidth()(FileBrowserClass);
+//# sourceMappingURL=FileBrowser.js.map