@iobroker/adapter-react-v5 5.0.8 → 6.0.0

package/Components/FileBrowser.js

@@ -26,6 +26,7 @@ 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>
  *
@@ -33,7 +34,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *
  * */
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const react_dropzone_1 = __importDefault(require("react-dropzone"));
 const material_1 = require("@mui/material");
 // MUI Icons
@@ -62,10 +62,10 @@ const FILE_TYPE_ICONS = {
     audio: icons_material_1.AudioFile,
     video: icons_material_1.Videocam,
 };
-const styles = (theme) => ({
-    dialog: {
+const styles = {
+    dialog: (theme) => ({
         height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
-    },
+    }),
     root: {
         width: '100%',
         overflow: 'hidden',
@@ -73,10 +73,10 @@ const styles = (theme) => ({
         position: 'relative',
     },
     filesDiv: {
-        width: `calc(100% - ${theme.spacing(2)})`,
+        width: 'calc(100% - 16px)',
         overflowX: 'hidden',
         overflowY: 'auto',
-        padding: theme.spacing(1),
+        padding: 8,
     },
     filesDivHint: {
         position: 'absolute',
@@ -87,17 +87,17 @@ const styles = (theme) => ({
         fontSize: 12,
     },
     filesDivTable: {
-        height: `calc(100% - ${48 + parseInt(theme.spacing(1), 10)}px)`,
+        height: 'calc(100% - 56px)',
     },
     filesDivTile: {
-        height: `calc(100% - ${48 * 2 + parseInt(theme.spacing(1), 10)}px)`,
+        height: `calc(100% - ${48 * 2 + 8}px)`,
         display: 'flex',
         alignContent: 'flex-start',
         alignItems: 'stretch',
         flexWrap: 'wrap',
         flex: `0 0 ${TILE_WIDTH}px`,
     },
-    itemTile: {
+    itemTile: (theme) => ({
         position: 'relative',
         userSelect: 'none',
         cursor: 'pointer',
@@ -112,7 +112,7 @@ const styles = (theme) => ({
             background: theme.palette.secondary.light,
             color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
         },
-    },
+    }),
     itemNameFolderTile: {
         fontWeight: 'bold',
     },
@@ -125,20 +125,20 @@ const styles = (theme) => ({
         textAlign: 'center',
         wordBreak: 'break-all',
     },
-    itemFolderIconTile: {
+    itemFolderIconTile: (theme) => ({
         width: '100%',
         height: TILE_HEIGHT - 32 - 16 - 8, // name + size
         display: 'block',
-        paddingLeft: 8,
+        pl: 1,
         color: theme.palette.secondary.main || '#fbff7d',
-    },
-    itemFolderIconBack: {
+    }),
+    itemFolderIconBack: (theme) => ({
         position: 'absolute',
         top: 22,
         left: 18,
         zIndex: 1,
         color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
-    },
+    }),
     itemSizeTile: {
         width: '100%',
         height: 16,
@@ -159,11 +159,11 @@ const styles = (theme) => ({
         display: 'block',
         objectFit: 'contain',
     },
-    itemSelected: {
+    itemSelected: (theme) => ({
         background: theme.palette.primary.main,
         color: Utils_1.default.invertColor(theme.palette.primary.main, true),
-    },
-    itemTable: {
+    }),
+    itemTable: (theme) => ({
         userSelect: 'none',
         cursor: 'pointer',
         height: ROW_HEIGHT,
@@ -173,13 +173,20 @@ const styles = (theme) => ({
             background: theme.palette.secondary.light,
             color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
         },
-    },
+    }),
     itemNameTable: {
         display: 'inline-block',
-        paddingLeft: 10,
+        pl: '10px',
         fontSize: '1rem',
         verticalAlign: 'top',
         flexGrow: 1,
+        '@media screen and (max-width: 500px)': {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            textAlign: 'end',
+            direction: 'rtl',
+        },
     },
     itemNameFolderTable: {
         fontWeight: 'bold',
@@ -220,15 +227,15 @@ const styles = (theme) => ({
     itemFolderTemp: {
         opacity: 0.4,
     },
-    itemFolderIconTable: {
+    itemFolderIconTable: (theme) => ({
         marginTop: 1,
-        marginLeft: theme.spacing(1),
+        marginLeft: 8,
         display: 'inline-block',
         width: 30,
         height: 30,
         color: theme.palette.secondary.main || '#fbff7d',
-    },
-    itemDownloadButtonTable: {
+    }),
+    itemDownloadButtonTable: (theme) => ({
         display: 'inline-block',
         width: BUTTON_WIDTH,
         height: ROW_HEIGHT,
@@ -236,22 +243,22 @@ const styles = (theme) => ({
         verticalAlign: 'middle',
         textAlign: 'center',
         padding: 0,
-        borderRadius: BUTTON_WIDTH / 2,
+        borderRadius: `${BUTTON_WIDTH / 2}px`,
         '&:hover': {
             backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
         },
         '& span': {
-            paddingTop: 9,
+            pt: '9px',
         },
         '& svg': {
             width: 14,
             height: 14,
             fontSize: '1rem',
-            marginTop: -3,
+            mt: '-3px',
             verticalAlign: 'middle',
             color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
         },
-    },
+    }),
     itemDownloadEmptyTable: {
         display: 'inline-block',
         width: BUTTON_WIDTH,
@@ -295,10 +302,10 @@ const styles = (theme) => ({
     uploadDivDragging: {
         opacity: 1,
     },
-    uploadCenterDiv: {
-        margin: 20,
+    uploadCenterDiv: (theme) => ({
+        m: '20px',
         border: '3px dashed grey',
-        borderRadius: 30,
+        borderRadius: '30px',
         width: 'calc(100% - 40px)',
         height: 'calc(100% - 40px)',
         position: 'relative',
@@ -306,7 +313,7 @@ const styles = (theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-    },
+    }),
     uploadCenterIcon: {
         width: '25%',
         height: '25%',
@@ -334,27 +341,27 @@ const styles = (theme) => ({
     menuButtonRestrictActive: {
         color: '#c05000',
     },
-    pathDiv: {
+    pathDiv: (theme) => ({
         display: 'flex',
-        width: `calc(100% - ${theme.spacing(2)})`,
-        marginLeft: theme.spacing(1),
-        marginRight: theme.spacing(1),
+        width: 'calc(100% - 16px)',
+        ml: 1,
+        mr: 1,
         textOverflow: 'clip',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         backgroundColor: theme.palette.secondary.main,
-    },
+    }),
     pathDivInput: {
         width: '100%',
     },
-    pathDivBreadcrumbDir: {
-        paddingLeft: 2,
-        paddingRight: 2,
+    pathDivBreadcrumbDir: (theme) => ({
+        pl: '2px',
+        pr: '2px',
         cursor: 'pointer',
         '&:hover': {
             background: theme.palette.primary.main,
         },
-    },
+    }),
     backgroundImageLight: {
         background: 'white',
     },
@@ -364,19 +371,13 @@ const styles = (theme) => ({
     backgroundImageColored: {
         background: 'silver',
     },
-    '@media screen and (max-width: 500px)': {
-        itemNameTable: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            textAlign: 'end',
-            direction: 'rtl',
-        },
-    },
-    specialFolder: {
+    specialFolder: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300',
+    }),
+    tooltip: {
+        pointerEvents: 'none',
     },
-});
+};
 const USER_DATA = '0_userdata.0';
 function getParentDir(dir) {
     const parts = (dir || '').split('/');
@@ -401,10 +402,7 @@ function sortFolders(a, b) {
     }
     return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
 }
-/**
- * @extends {React.Component<import('./types').FileBrowserProps>}
- */
-class FileBrowser extends react_1.Component {
+class FileBrowserClass extends react_1.Component {
     constructor(props) {
         super(props);
         this.limitToObjectID = null;
@@ -431,30 +429,31 @@ class FileBrowser extends react_1.Component {
         this.setStateBackgroundImage = () => {
             const array = ['light', 'dark', 'colored', 'delete'];
             this.setState(({ backgroundImage }) => {
-                if (array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
-                    (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
+                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] };
                 }
-                (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[0]);
+                this.localStorage.setItem('files.backgroundImage', array[0]);
                 return { backgroundImage: array[0] };
             });
         };
-        this.getClassBackgroundImage = () => {
+        this.getStyleBackgroundImage = () => {
             // ['light', 'dark', 'colored', 'delete']
             switch (this.state.backgroundImage) {
                 case 'light':
-                    return this.props.classes.backgroundImageLight;
+                    return styles.backgroundImageLight;
                 case 'dark':
-                    return this.props.classes.backgroundImageDark;
+                    return styles.backgroundImageDark;
                 case 'colored':
-                    return this.props.classes.backgroundImageColored;
+                    return styles.backgroundImageColored;
                 case 'delete':
                     return null;
                 default:
                     return null;
             }
         };
-        const expandedStr = (window._localStorage || window.localStorage).getItem('files.expanded') || '[]';
+        this.localStorage = (window._localStorage || window.localStorage);
+        const expandedStr = this.localStorage.getItem('files.expanded') || '[]';
         if (this.props.limitPath) {
             const parts = this.props.limitPath.split('/');
             this.limitToObjectID = parts[0];
@@ -479,13 +478,13 @@ class FileBrowser extends react_1.Component {
         }
         let viewType;
         if (this.props.showViewTypeButton) {
-            viewType = (window._localStorage || window.localStorage).getItem('files.viewType') || TABLE;
+            viewType = this.localStorage.getItem('files.viewType') || TABLE;
         }
         else {
             viewType = TABLE;
         }
         let selected = this.props.selected ||
-            (window._localStorage || window.localStorage).getItem('files.selected') ||
+            this.localStorage.getItem('files.selected') ||
             USER_DATA;
         let currentDir;
         if (props.restrictToFolder) {
@@ -511,11 +510,11 @@ class FileBrowser extends react_1.Component {
                 currentDir = selected;
             }
         }
-        const backgroundImage = (window._localStorage || window.localStorage).getItem('files.backgroundImage') || null;
+        const backgroundImage = this.localStorage.getItem('files.backgroundImage') || null;
         this.state = {
             viewType,
             folders: {},
-            filterEmpty: (window._localStorage || window.localStorage).getItem('files.empty') !== 'false',
+            filterEmpty: this.localStorage.getItem('files.empty') !== 'false',
             expanded,
             currentDir,
             expertMode: !!props.expertMode,
@@ -757,7 +756,7 @@ class FileBrowser extends react_1.Component {
         // if root folder
         if (!folderId || folderId === '/') {
             try {
-                let objs = await this.props.socket.readMetaItems();
+                let objs = (await this.props.socket.readMetaItems());
                 const _folders = [];
                 let userData = null;
                 if (this.state.restrictToFolder) {
@@ -883,7 +882,7 @@ class FileBrowser extends react_1.Component {
         if (pos === -1) {
             expanded.push(item.id);
             expanded.sort();
-            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
             if (!item.temp) {
                 this.browseFolder(item.id)
                     .then(folders => this.setState({ expanded, folders }))
@@ -897,7 +896,7 @@ class FileBrowser extends react_1.Component {
         }
         else {
             expanded.splice(pos, 1);
-            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
             this.setState({ expanded });
         }
     }
@@ -908,7 +907,7 @@ class FileBrowser extends react_1.Component {
         if (_folder === '/') {
             _folder = '';
         }
-        (window._localStorage || window.localStorage).setItem('files.currentDir', _folder);
+        this.localStorage.setItem('files.currentDir', _folder);
         if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
             return this.setState({ selected: _folder });
         }
@@ -932,7 +931,7 @@ class FileBrowser extends react_1.Component {
     select(id, e, cb) {
         e && e.stopPropagation();
         this.lastSelect = Date.now();
-        (window._localStorage || window.localStorage).setItem('files.selected', id);
+        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);
@@ -969,18 +968,18 @@ class FileBrowser extends react_1.Component {
         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("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: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes.itemFolderTemp) },
-            react_1.default.createElement(IconEl, { className: Utils_1.default.clsx(this.props.classes[`itemFolderIcon${this.state.viewType}`], isSpecialData && this.props.classes.specialFolder), onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
-            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes[`itemName${this.state.viewType}`], this.props.classes[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
+        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.Hidden, { smDown: true },
-                react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, this.state.viewType === TABLE && this.state.folders[item.id]
+                react_1.default.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, this.state.viewType === TABLE && this.state.folders[item.id]
                     ? this.state.folders[item.id].length
                     : '')),
             react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
             react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ?
-                react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null),
+                react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }) : null),
             this.state.viewType === TABLE && this.props.allowDownload ?
-                react_1.default.createElement("div", { className: this.props.classes[`itemDownloadEmpty${this.state.viewType}`] }) : null,
+                react_1.default.createElement("div", { style: styles[`itemDownloadEmpty${this.state.viewType}`] }) : null,
             this.state.viewType === TABLE &&
                 this.props.allowDelete &&
                 this.state.folders[item.id] &&
@@ -992,22 +991,22 @@ class FileBrowser extends react_1.Component {
                     else {
                         this.setState({ deleteItem: item.id });
                     }
-                }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                }, 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("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null);
+                    react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }) : null);
     }
     renderBackFolder() {
-        return react_1.default.createElement("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: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`]) },
-            react_1.default.createElement(IconClosed_1.default, { className: this.props.classes[`itemFolderIcon${this.state.viewType}`] }),
-            react_1.default.createElement(icons_material_1.ArrowBack, { className: this.props.classes.itemFolderIconBack }),
-            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes[`itemName${this.state.viewType}`], this.props.classes[`itemNameFolder${this.state.viewType}`]) }, ".."));
+        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}`]) }, ".."));
     }
     formatSize(size) {
-        return react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : '');
+        return react_1.default.createElement("div", { style: styles[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : '');
     }
     formatAcl(acl) {
-        const access = acl && (acl.permissions || acl.file);
+        const access = acl ? (acl.permissions || acl.file) : 0;
         let accessStr;
         if (access) {
             accessStr = access.toString(16).padStart(3, '0');
@@ -1015,30 +1014,30 @@ class FileBrowser extends react_1.Component {
         else {
             accessStr = '';
         }
-        return react_1.default.createElement("div", { className: this.props.classes[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? react_1.default.createElement(material_1.IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), className: this.props.classes[`itemAclButton${this.state.viewType}`] }, accessStr || '---') : 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 || '---');
     }
     getFileIcon(ext) {
         switch (ext) {
             case 'json':
             case 'json5':
-                return react_1.default.createElement(icons_material_1.Bookmark, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.Bookmark, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'css':
-                return react_1.default.createElement(icons_material_1.BookmarkBorder, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.BookmarkBorder, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'js':
             case 'ts':
-                return react_1.default.createElement(icons_material_1.Code, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.Code, { style: styles[`itemIcon${this.state.viewType}`] });
             case 'html':
             case 'md':
-                return react_1.default.createElement(icons_material_1.Description, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.Description, { 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, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.MusicNote, { style: styles[`itemIcon${this.state.viewType}`] });
             default:
-                return react_1.default.createElement(icons_material_1.InsertDriveFile, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+                return react_1.default.createElement(icons_material_1.InsertDriveFile, { style: styles[`itemIcon${this.state.viewType}`] });
         }
     }
     static getEditFile(ext) {
@@ -1058,7 +1057,7 @@ class FileBrowser extends react_1.Component {
     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("div", { key: item.id, id: item.id, onDoubleClick: e => {
+        return react_1.default.createElement(material_1.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 });
@@ -1069,25 +1068,24 @@ class FileBrowser extends react_1.Component {
                             FileViewer_1.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: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFile${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected) },
+            }, 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, { className: Utils_1.default.clsx(this.props.classes[`itemImage${this.state.viewType}`], this.getClassBackgroundImage(), this.props.classes[`itemNoImage${this.state.viewType}`]) }) :
+                    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 => {
-                            // @ts-expect-error it exists
                             e.target.onerror = null;
                             const fileErrors = [...this.state.fileErrors];
                             if (!fileErrors.includes(item.id)) {
                                 fileErrors.push(item.id);
                                 this.setState({ fileErrors });
                             }
-                        }, className: Utils_1.default.clsx(this.props.classes[`itemImage${this.state.viewType}`], this.getClassBackgroundImage()), src: this.imagePrefix + item.id, alt: item.name })
+                        }, 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("div", { className: this.props.classes[`itemName${this.state.viewType}`] }, item.name),
+            react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemName${this.state.viewType}`] }, item.name),
             react_1.default.createElement(material_1.Hidden, { smDown: true }, this.formatSize(item.size)),
             react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
-            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode && FileBrowser.getEditFile(ext) ?
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode && FileBrowserClass.getEditFile(ext) ?
                 react_1.default.createElement(material_1.IconButton, { "aria-label": "edit", onClick: e => {
                         e.stopPropagation();
                         if (!this.props.onSelect) {
@@ -1100,32 +1098,29 @@ class FileBrowser extends react_1.Component {
                                     FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
                             this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
                         }
-                    }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                    }, sx: styles[`itemDeleteButton${this.state.viewType}`], size: "large" },
                     react_1.default.createElement(icons_material_1.Edit, { fontSize: "small" }))
                 :
-                    react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] })),
-            this.state.viewType === TABLE && this.props.allowDownload ? react_1.default.createElement("a", { className: Utils_1.default.clsx('MuiButtonBase-root', 'MuiIconButton-root', 'MuiIconButton-sizeLarge', this.props.classes.itemDownloadButtonTable), tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => {
-                    e.stopPropagation();
-                } },
+                    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,
             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 => {
-                        e.stopPropagation();
-                        if (this.suppressDeleteConfirm > Date.now()) {
-                            this.deleteItem(item.id);
-                        }
-                        else {
-                            this.setState({ deleteItem: item.id });
-                        }
-                    }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
-                    react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
+                item.id !== USER_DATA ? react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                    e.stopPropagation();
+                    if (this.suppressDeleteConfirm > Date.now()) {
+                        this.deleteItem(item.id);
+                    }
+                    else {
+                        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("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null));
+                        react_1.default.createElement(material_1.Box, { component: "div", sx: styles[`itemDeleteButton${this.state.viewType}`] }) : null));
     }
     renderItems(folderId) {
         if (this.state.folders && this.state.folders[folderId]) {
@@ -1197,16 +1192,16 @@ class FileBrowser extends react_1.Component {
         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
                     ? this.props.t('ra_Show all folders')
-                    : this.props.t('ra_Restrict to folder'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.restrictToFolder && this.props.classes.menuButtonRestrictActive), "aria-label": "restricted to folder", onClick: () => this.setState({
+                    : 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({
                     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'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.expertMode && this.props.classes.menuButtonExpertActive), "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
+            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'), className: this.props.classes.menuButton, "aria-label": "view mode", onClick: () => {
+            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: () => {
                     const viewType = this.state.viewType === TABLE ? TILE : TABLE;
-                    (window._localStorage || window.localStorage).setItem('files.viewType', viewType);
+                    this.localStorage.setItem('files.viewType', viewType);
                     let currentDir = this.state.selected;
                     if (isFile(currentDir)) {
                         currentDir = getParentDir(currentDir);
@@ -1217,37 +1212,37 @@ class FileBrowser extends react_1.Component {
                         }
                     });
                 }, 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'), className: this.props.classes.menuButton, color: this.state.filterEmpty ? 'secondary' : 'inherit', "aria-label": "filter empty", onClick: () => {
-                    (window._localStorage || window.localStorage).setItem('file.empty', !this.state.filterEmpty);
+            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: () => {
+                    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'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "reload files", onClick: () => this.setState({ folders: {} }, () => this.loadFolders()), size: "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 ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
-                        this.limitToPath !== this.state.selected), title: this.props.t('ra_Create folder'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "add folder", onClick: () => this.setState({ addFolder: true }), size: "small" },
+                        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 ||
                     !isInFolder ||
                     (!!this.limitToPath &&
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
-                        this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
+                        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 ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files') },
+            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files') },
                 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 => {
                 const MyIcon = FILE_TYPE_ICONS[type];
                 return react_1.default.createElement(material_1.MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
                         if (type === 'all') {
-                            (window._localStorage || window.localStorage).removeItem('files.filterByType');
+                            this.localStorage.removeItem('files.filterByType');
                             this.setState({ filterByType: '', showTypesMenu: null });
                         }
                         else {
-                            (window._localStorage || window.localStorage).setItem('files.filterByType', type);
+                            this.localStorage.setItem('files.filterByType', type);
                             this.setState({ filterByType: type, showTypesMenu: null });
                         }
                     } },
@@ -1255,15 +1250,15 @@ class FileBrowser extends react_1.Component {
                         react_1.default.createElement(MyIcon, { fontSize: "small" })),
                     react_1.default.createElement(material_1.ListItemText, null, this.props.t(`ra_fileType_${type}`)));
             })) : null,
-            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image') },
-                react_1.default.createElement(material_1.IconButton, { color: "inherit", edge: "start", className: this.props.classes.menuButton, onClick: this.setStateBackgroundImage, size: "small" },
+            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image'), componentsProps: { 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') },
+            this.state.viewType !== TABLE && this.props.allowDelete ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Delete'), componentsProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement("span", null,
                     react_1.default.createElement(material_1.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", className: this.props.classes.menuButton, onClick: e => {
+                            this.state.selected === USER_DATA, color: "inherit", edge: "start", style: styles.menuButton, onClick: e => {
                             e.stopPropagation();
                             if (this.suppressDeleteConfirm > Date.now()) {
                                 this.deleteItem(this.state.selected);
@@ -1316,7 +1311,7 @@ class FileBrowser extends react_1.Component {
                             expanded.push(parentFolder);
                             expanded.sort();
                         }
-                        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                        this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
                         this.setState({ addFolder: false, folders, expanded }, () => this.select(id));
                     }
                     else {
@@ -1336,16 +1331,6 @@ class FileBrowser extends react_1.Component {
             }
         }, 100);
     }
-    async uploadFile(fileName, data) {
-        const parts = fileName.split('/');
-        const adapter = parts.shift();
-        try {
-            return await this.props.socket.writeFile64(adapter || '', parts.join('/'), data);
-        }
-        catch (e) {
-            return window.alert(`Cannot write file: ${e}`);
-        }
-    }
     findFirstFolder(id) {
         let parentFolder = id;
         const item = this.findItem(parentFolder);
@@ -1368,10 +1353,20 @@ class FileBrowser extends react_1.Component {
         }
         return parentFolder;
     }
+    async uploadFile(fileName, data) {
+        const parts = fileName.split('/');
+        const adapterName = parts.shift();
+        try {
+            await this.props.socket.writeFile64(adapterName || '', parts.join('/'), data);
+        }
+        catch (e) {
+            window.alert(`Cannot write file: ${e}`);
+        }
+    }
     renderUpload() {
         if (this.state.uploadFile) {
             return [
-                react_1.default.createElement(material_1.Fab, { key: "close", color: "primary", "aria-label": "close", className: this.props.classes.uploadCloseButton, onClick: () => this.setState({ uploadFile: false }) },
+                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 => {
                         let count = acceptedFiles.length;
@@ -1396,7 +1391,7 @@ class FileBrowser extends react_1.Component {
                                                     if (!expanded.includes(parentFolder)) {
                                                         expanded.push(parentFolder);
                                                         expanded.sort();
-                                                        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                                                        this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
                                                     }
                                                     this.setState({ expanded }, () => this.select(id));
                                                 }
@@ -1408,8 +1403,7 @@ class FileBrowser extends react_1.Component {
                                                         if (!expanded.includes(parentFolder)) {
                                                             expanded.push(parentFolder);
                                                             expanded.sort();
-                                                            (window._localStorage ||
-                                                                window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                                                            this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
                                                         }
                                                         this.setState({ folders, expanded }, () => this.select(id));
                                                     }), 500);
@@ -1421,12 +1415,12 @@ class FileBrowser extends react_1.Component {
                             };
                             reader.readAsArrayBuffer(file);
                         });
-                    } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(this.props.classes.uploadDiv, this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging) }, getRootProps()),
+                    } }, ({ 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("div", { className: this.props.classes.uploadCenterDiv },
-                        react_1.default.createElement("div", { className: this.props.classes.uploadCenterTextAndIcon },
-                            react_1.default.createElement(icons_material_1.Publish, { className: this.props.classes.uploadCenterIcon }),
-                            react_1.default.createElement("div", { className: this.props.classes.uploadCenterText }, this.state.uploadFile === 'dragging'
+                    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'
                                 ? this.props.t('ra_Drop file here')
                                 : this.props.t('ra_Place your files here or click here to open the browse dialog')))))),
             ];
@@ -1480,7 +1474,7 @@ class FileBrowser extends react_1.Component {
             if (pos !== -1) {
                 const expanded = [...this.state.expanded];
                 expanded.splice(pos, 1);
-                (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                this.localStorage.setItem('files.expanded', JSON.stringify(expanded));
                 newState.expanded = expanded;
             }
             if (this.state.selected === deleteItem) {
@@ -1525,7 +1519,7 @@ class FileBrowser extends react_1.Component {
         return false;
     }
     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, getClassBackgroundImage: this.getClassBackgroundImage, 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_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;
     }
     renderError() {
         if (this.state.errorText) {
@@ -1592,13 +1586,13 @@ class FileBrowser extends react_1.Component {
             part && p.push(part);
             const path = p.join('/');
             if (i < parts.length - 1) {
-                return react_1.default.createElement("div", { key: `${this.state.selected}_${i}`, className: this.props.classes.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root'));
+                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_1.default.createElement("div", { className: this.props.classes.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part);
+            return react_1.default.createElement("div", { style: styles.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part);
         }));
     }
     renderPath() {
-        return react_1.default.createElement("div", { key: "path", className: this.props.classes.pathDiv }, this.state.pathFocus ?
+        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 => {
                     if (e.key === 'Enter') {
                         this.changeToPath();
@@ -1607,7 +1601,7 @@ class FileBrowser extends react_1.Component {
                         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 }), className: this.props.classes.pathDivInput })
+                    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());
     }
@@ -1625,10 +1619,10 @@ class FileBrowser extends react_1.Component {
                 });
             }, 300);
         }
-        return react_1.default.createElement("div", { style: this.props.style, className: Utils_1.default.clsx(this.props.classes.root, this.props.className) },
+        return react_1.default.createElement("div", { style: Object.assign(Object.assign({}, 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", { className: Utils_1.default.clsx(this.props.classes.filesDiv, this.props.classes[`filesDiv${this.state.viewType}`]), onClick: e => {
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, 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 || '/');
@@ -1641,7 +1635,8 @@ class FileBrowser extends react_1.Component {
                 this.state.viewType === TABLE
                     ? this.renderItems('/')
                     : this.renderItems(this.state.currentDir || '/'),
-                this.state.viewType !== TABLE ? (react_1.default.createElement("div", { className: this.props.classes.filesDivHint }, this.props.t('ra_select_folder_hint'))) : null),
+                this.state.viewType !== TABLE ?
+                    react_1.default.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,
@@ -1652,4 +1647,5 @@ class FileBrowser extends react_1.Component {
             this.renderError());
     }
 }
-exports.default = (0, withWidth_1.default)()((0, styles_1.withStyles)(styles)(FileBrowser));
+exports.FileBrowserClass = FileBrowserClass;
+exports.default = (0, withWidth_1.default)()(FileBrowserClass);