@iobroker/adapter-react-v5 5.0.8 → 6.0.0

package/Components/ObjectBrowser.js

@@ -40,7 +40,6 @@ exports.ObjectBrowserClass = exports.ITEM_IMAGES = exports.getSelectIdIconFromOb
  *
  * */
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
 const material_1 = require("@mui/material");
 // Icons
@@ -79,7 +78,7 @@ const COLOR_NAME_CONNECTED_DARK = '#57ff45';
 const COLOR_NAME_CONNECTED_LIGHT = '#098c04';
 const COLOR_NAME_DISCONNECTED_DARK = '#f3ad11';
 const COLOR_NAME_DISCONNECTED_LIGHT = '#6c5008';
-const styles = (theme) => ({
+const styles = {
     toolbar: {
         minHeight: 38, // Theme.toolbar.height,
         //        boxShadow: '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'
@@ -89,14 +88,14 @@ const styles = (theme) => ({
         marginLeft: 4,
     },
     switchColumnAuto: {
-        marginLeft: theme.spacing(2),
+        marginLeft: 16,
     },
     dialogColumns: {
         transition: 'opacity 1s',
     },
     dialogColumnsLabel: {
         fontSize: 12,
-        paddingTop: theme.spacing(1),
+        paddingTop: 8,
     },
     columnCustom: {
         width: '100%',
@@ -147,11 +146,8 @@ const styles = (theme) => ({
     transparent_100: {
         opacity: 1,
     },
-    columnsDialogInputWidth: {
-        width: 80,
-    },
     headerRow: {
-        paddingLeft: theme.spacing(1),
+        paddingLeft: 8,
         height: 38,
         whiteSpace: 'nowrap',
         userSelect: 'none',
@@ -170,14 +166,14 @@ const styles = (theme) => ({
         opacity: 0.7,
     },
     tableDiv: {
-        paddingTop: 0, // theme.spacing(1),
+        paddingTop: 0,
         paddingLeft: 0,
-        width: `calc(100% - ${theme.spacing(1)})`,
+        width: 'calc(100% - 8px)',
         height: 'calc(100% - 38px)',
         overflow: 'auto',
     },
-    tableRow: {
-        paddingLeft: theme.spacing(1),
+    tableRow: (theme) => ({
+        pl: 1,
         height: ROW_HEIGHT,
         lineHeight: `${ROW_HEIGHT}px`,
         verticalAlign: 'top',
@@ -189,13 +185,13 @@ const styles = (theme) => ({
         },
         whiteSpace: 'nowrap',
         flexWrap: 'nowrap',
-    },
-    tableRowLines: {
+    }),
+    tableRowLines: (theme) => ({
         borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,
         '& > div': {
             borderRight: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,
         },
-    },
+    }),
     tableRowNoDragging: {
         cursor: 'pointer',
     },
@@ -225,7 +221,7 @@ const styles = (theme) => ({
             display: 'block',
             width: ROW_HEIGHT - 4,
             height: ROW_HEIGHT - 4,
-            marginTop: 2,
+            mt: '2px',
             float: 'right',
         },
         '&:hover .iconOwn': {
@@ -242,18 +238,19 @@ const styles = (theme) => ({
         // display: 'inline-block',
         // verticalAlign: 'top',
     },
-    cellIdIconFolder: {
-        marginRight: theme.spacing(1),
+    // this style is used for simple div. Do not migrate it to "secondary.main"
+    cellIdIconFolder: (theme) => ({
+        marginRight: 8,
         width: ROW_HEIGHT - 4,
         height: ROW_HEIGHT - 4,
         cursor: 'pointer',
         color: theme.palette.secondary.main || '#fbff7d',
         verticalAlign: 'top',
-    },
+    }),
     cellIdIconDocument: {
         verticalAlign: 'middle',
         marginLeft: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,
-        marginRight: theme.spacing(1),
+        marginRight: 8,
         width: SMALL_BUTTON_SIZE,
         height: SMALL_BUTTON_SIZE,
     },
@@ -275,9 +272,6 @@ const styles = (theme) => ({
         height: SMALL_BUTTON_SIZE,
         top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,
         opacity: 0.8,
-        '&:hover': {
-            opacity: 1,
-        },
         position: 'absolute',
         right: 3,
     },
@@ -297,7 +291,7 @@ const styles = (theme) => ({
         display: 'inline-block',
         verticalAlign: 'top',
         fontSize: 14,
-        marginLeft: 5,
+        ml: '5px',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         position: 'relative',
@@ -317,14 +311,14 @@ const styles = (theme) => ({
         opacity: 0.5,
         fontStyle: 'italic',
     },
-    cellIdAlias: {
+    cellIdAlias: (theme) => ({
         fontStyle: 'italic',
         fontSize: 12,
         opacity: 0.7,
         '&:hover': {
             color: theme.palette.mode === 'dark' ? '#009900' : '#007700',
         },
-    },
+    }),
     cellIdAliasReadWriteDiv: {
         height: 24,
         marginTop: -5,
@@ -440,23 +434,9 @@ const styles = (theme) => ({
         pointerEvents: 'none',
     },
     cellValueTextUnit: {
-        marginLeft: theme.spacing(0.5),
+        marginLeft: 4,
         opacity: 0.8,
     },
-    newValue: {
-        animation: '$newValueAnimation 2s ease-in-out',
-    },
-    '@keyframes newValueAnimation': {
-        '0%': {
-            color: '#00f900',
-        },
-        '80%': {
-            color: '#008000',
-        },
-        '100%': {
-            color: theme.palette.mode === 'dark' ? '#fff' : '#000',
-        },
-    },
     cellValueTextState: {
         opacity: 0.7,
     },
@@ -497,15 +477,14 @@ const styles = (theme) => ({
         paddingTop: 0,
         marginTop: -2,
     },
-    cellButtonsButtonWithCustoms: {
+    cellButtonsButtonWithCustoms: (theme) => ({
         color: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.secondary.main,
-    },
+    }),
     cellButtonsButtonWithoutCustoms: {
         opacity: 0.2,
     },
-    cellButtonsValueButton: {
+    cellButtonsValueButton: (theme) => ({
         position: 'absolute',
-        display: 'inline-block',
         top: SMALL_BUTTON_SIZE / 2 - 2,
         opacity: 0.7,
         width: SMALL_BUTTON_SIZE - 2,
@@ -514,13 +493,13 @@ const styles = (theme) => ({
         '&:hover': {
             opacity: 1,
         },
-    },
+    }),
     cellButtonsValueButtonCopy: {
-        right: theme.spacing(1),
+        right: 8,
         cursor: 'pointer',
     },
     cellButtonsValueButtonEdit: {
-        right: SMALL_BUTTON_SIZE / 2 + parseInt(theme.spacing(2), 10),
+        right: (SMALL_BUTTON_SIZE / 2) + 16,
     },
     filteredOut: {
         opacity: 0.5,
@@ -529,8 +508,8 @@ const styles = (theme) => ({
         opacity: 0.3,
     },
     filterInput: {
-        marginTop: 0,
-        marginBottom: 0,
+        mt: 0,
+        mb: 0,
     },
     selectIcon: {
         width: 24,
@@ -540,10 +519,10 @@ const styles = (theme) => ({
     selectNone: {
         opacity: 0.5,
     },
-    itemSelected: {
+    itemSelected: (theme) => ({
         background: `${theme.palette.primary.main} !important`,
         color: `${Utils_1.default.invertColor(theme.palette.primary.main, true)} !important`,
-    },
+    }),
     header: {
         width: '100%',
     },
@@ -559,7 +538,7 @@ const styles = (theme) => ({
     headerCellInput: {
         width: 'calc(100% - 5px)',
         height: ROW_HEIGHT,
-        paddingTop: 0,
+        pt: 0,
         '& .itemIcon': {
             verticalAlign: 'middle',
             width: ICON_SIZE,
@@ -571,7 +550,7 @@ const styles = (theme) => ({
         '& .itemIcon': {
             width: ICON_SIZE,
             height: ICON_SIZE,
-            marginRight: 5,
+            mr: '5px',
             display: 'inline-block',
         },
     },
@@ -583,7 +562,7 @@ const styles = (theme) => ({
         flexGrow: 1,
     },
     enumIconDiv: {
-        marginRight: theme.spacing(1),
+        marginRight: 8,
         width: 32,
         height: 32,
         borderRadius: 8,
@@ -633,18 +612,13 @@ const styles = (theme) => ({
         display: 'flex',
         flexDirection: 'column',
     },
-    '@media screen and (max-width: 465px)': {
-        columnsDialogInputWidth: {
-            width: 50,
-        },
-        fontSizeTitle: {
+    fontSizeTitle: {
+        '@media screen and (max-width: 465px)': {
             '& *': {
                 fontSize: 12,
             },
         },
     },
-    '@media screen and (max-width: 700px)': {},
-    '@media screen and (max-width: 430px)': {},
     draggable: {
         cursor: 'copy',
     },
@@ -655,33 +629,33 @@ const styles = (theme) => ({
         position: 'absolute',
         top: 0,
         right: 0,
-        borderRadius: 20,
-        backgroundColor: theme.palette.background.default,
+        borderRadius: 5,
+        backgroundColor: 'background.default',
     },
-    iconDeviceConnected: {
+    iconDeviceConnected: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,
         opacity: 0.8,
         position: 'absolute',
         top: 4,
         right: 32,
         width: 20,
-    },
-    iconDeviceDisconnected: {
+    }),
+    iconDeviceDisconnected: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT,
         opacity: 0.8,
         position: 'absolute',
         top: 4,
         right: 32,
         width: 20,
-    },
-    iconDeviceError: {
+    }),
+    iconDeviceError: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT,
         opacity: 0.8,
         position: 'absolute',
         top: 4,
         right: 50,
         width: 20,
-    },
+    }),
     resizeHandle: {
         display: 'block',
         position: 'absolute',
@@ -703,51 +677,79 @@ const styles = (theme) => ({
             borderRightStyle: 'solid',
         },
     },
-    invertedBackground: {
+    invertedBackground: (theme) => ({
         backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',
         padding: '0 3px',
         borderRadius: '2px 0 0 2px',
-    },
-    invertedBackgroundFlex: {
+    }),
+    invertedBackgroundFlex: (theme) => ({
         backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',
         borderRadius: '0 2px 2px 0',
-    },
-    contextMenuEdit: {
+    }),
+    contextMenuEdit: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#ffee48' : '#cbb801',
-    },
-    contextMenuEditValue: {
+    }),
+    contextMenuEditValue: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#5dff45' : '#1cd301',
-    },
-    contextMenuView: {
+    }),
+    contextMenuView: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
-    },
-    contextMenuCustom: {
+    }),
+    contextMenuCustom: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#42eaff' : '#01bbc2',
-    },
-    contextMenuACL: {
+    }),
+    contextMenuACL: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070',
-    },
-    contextMenuRoom: {
+    }),
+    contextMenuRoom: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00',
-    },
-    contextMenuRole: {
+    }),
+    contextMenuRole: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00',
-    },
-    contextMenuAlias: {
-        color: theme.palette.mode === 'dark' ? '#5cabfb' : '#011ed0',
-    },
-    contextMenuDelete: {
+    }),
+    contextMenuDelete: (theme) => ({
         color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000',
-    },
+    }),
     contextMenuKeys: {
-        marginLeft: theme.spacing(1),
+        marginLeft: 8,
         opacity: 0.7,
         fontSize: 'smaller',
     },
     contextMenuWithSubMenu: {
         display: 'flex',
     },
-});
+};
+function getStyle(theme, ...args) {
+    const result = {};
+    for (let a = 0; a < args.length; a++) {
+        if (typeof args[a] === 'function') {
+            Object.assign(result, args[a](theme));
+        }
+        else if (args[a] && typeof args[a] === 'object') {
+            Object.keys(args[a]).forEach((attr) => {
+                if (typeof args[a][attr] === 'function') {
+                    result[attr] = args[a][attr](theme);
+                }
+                else if (typeof args[a][attr] === 'object') {
+                    const obj = args[a][attr];
+                    result[attr] = {};
+                    Object.keys(obj).forEach((attr1) => {
+                        if (typeof obj[attr1] === 'function') {
+                            result[attr][attr1] = obj(theme);
+                        }
+                        else if (obj[attr1] || obj[attr1] === 0) {
+                            result[attr][attr1] = obj[attr1];
+                        }
+                    });
+                }
+                else if (args[a][attr] || args[a][attr] === 0) {
+                    result[attr] = args[a][attr];
+                }
+            });
+        }
+    }
+    return result;
+}
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
@@ -1188,12 +1190,12 @@ function getObjectTooltip(data, lang) {
     }
     return null;
 }
-function getIdFieldTooltip(data, classes, lang) {
+function getIdFieldTooltip(data, lang) {
     const tooltip = getObjectTooltip(data, lang);
     if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.startsWith('http')) {
-        return react_1.default.createElement("a", { className: Utils_1.default.clsx(classes.cellIdTooltipLink), href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip);
+        return react_1.default.createElement(material_1.Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip);
     }
-    return react_1.default.createElement("span", { className: Utils_1.default.clsx(classes.cellIdTooltip) }, tooltip || data.id || '');
+    return react_1.default.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
     var _b, _c, _d, _e, _f;
@@ -1684,14 +1686,6 @@ exports.ITEM_IMAGES = {
     script: react_1.default.createElement(icons_material_1.Code, { className: "itemIcon" }),
     folder: react_1.default.createElement(IconClosed_1.default, { className: "itemIcon itemIconFolder" }),
 };
-const StyledBadge = (0, styles_1.withStyles)(theme => ({
-    badge: {
-        right: 3,
-        top: 3,
-        border: `2px solid ${theme.palette.background.paper}`,
-        padding: '0 4px',
-    },
-}))(material_1.Badge);
 const SCREEN_WIDTHS = {
     // extra-small: 0px
     xs: { idWidth: '100%', fields: [], widths: {} },
@@ -1797,6 +1791,7 @@ class ObjectBrowserClass extends react_1.Component {
         this.objectsUpdateTimer = null;
         this.filterTimer = null;
         this.adapterColumns = [];
+        this.styleTheme = '';
         this.edit = {
             id: '',
             val: '',
@@ -1821,6 +1816,7 @@ class ObjectBrowserClass extends react_1.Component {
         this.changedIds = null;
         this.contextMenu = null;
         this.recordStates = [];
+        this.styles = {};
         this.customColumnDialog = null;
         /**
          * Context menu handler.
@@ -2081,9 +2077,9 @@ class ObjectBrowserClass extends react_1.Component {
                         arrayTooltipText.push(react_1.default.createElement("span", { key: value + i },
                             this.texts[`acl${el.group}_${el.title}_${value}`],
                             ",",
-                            react_1.default.createElement("span", { className: value === 'object'
-                                    ? this.props.classes.rightsObject
-                                    : this.props.classes.rightsState }, el.value)));
+                            react_1.default.createElement("span", { style: value === 'object'
+                                    ? styles.rightsObject
+                                    : styles.rightsState }, el.value)));
                     }
                 });
             };
@@ -2093,7 +2089,7 @@ class ObjectBrowserClass extends react_1.Component {
             if (acl.state) {
                 funcRenderStateObject('state');
             }
-            return arrayTooltipText.length ? react_1.default.createElement("span", { className: this.props.classes.tooltipAccessControl }, arrayTooltipText.map(el => el)) : null;
+            return arrayTooltipText.length ? react_1.default.createElement("span", { style: styles.tooltipAccessControl }, arrayTooltipText.map(el => el)) : null;
         };
         this.resizerMouseMove = (e) => {
             if (this.resizerActiveDiv) {
@@ -2154,10 +2150,10 @@ class ObjectBrowserClass extends react_1.Component {
                 if (e.target.dataset.left === 'true') {
                     this.resizeLeft = true;
                     this.resizerNextDiv = this.resizerActiveDiv.previousElementSibling;
-                    let handle = this.resizerNextDiv.querySelector(`.${this.props.classes.resizeHandle}`);
+                    let handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
                     while (this.resizerNextDiv && !handle && i < 10) {
                         this.resizerNextDiv = this.resizerNextDiv.previousElementSibling;
-                        handle = this.resizerNextDiv.querySelector(`.${this.props.classes.resizeHandle}`);
+                        handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
                         i++;
                     }
                     if ((handle === null || handle === void 0 ? void 0 : handle.dataset.left) !== 'true') {
@@ -2167,7 +2163,7 @@ class ObjectBrowserClass extends react_1.Component {
                 else {
                     this.resizeLeft = false;
                     this.resizerNextDiv = this.resizerActiveDiv.nextElementSibling;
-                    /* while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.' + this.props.classes.resizeHandle) && i < 10) {
+                    /* while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.iob-ob-resize-handler') && i < 10) {
                         this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
                         i++;
                     } */
@@ -2796,20 +2792,20 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.state.columnsSelectorShow) {
             return null;
         }
-        return react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ columnsSelectorShow: false }), open: !0, classes: {
-                root: Utils_1.default.clsx(this.props.classes.dialogColumns, this.props.classes[`transparent_${this.state.columnsDialogTransparent}`]),
+        return react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ columnsSelectorShow: false }), open: !0, sx: {
+                '& .MuiPaper-root': getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
             } },
-            react_1.default.createElement(material_1.DialogTitle, { className: this.props.classes.fontSizeTitle }, this.props.t('ra_Configure')),
-            react_1.default.createElement(material_1.DialogContent, { className: this.props.classes.fontSizeTitle },
-                react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.foldersFirst, onChange: () => {
+            react_1.default.createElement(material_1.DialogTitle, { sx: styles.fontSizeTitle }, this.props.t('ra_Configure')),
+            react_1.default.createElement(material_1.DialogContent, { sx: styles.fontSizeTitle },
+                react_1.default.createElement(material_1.FormControlLabel, { style: styles.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.foldersFirst, onChange: () => {
                             this.localStorage.setItem(`${this.props.dialogName || 'App'}.foldersFirst`, this.state.foldersFirst ? 'false' : 'true');
                             this.setState({ foldersFirst: !this.state.foldersFirst });
                         } }), label: this.props.t('ra_Folders always first') }),
-                react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.linesEnabled, onChange: () => {
+                react_1.default.createElement(material_1.FormControlLabel, { style: styles.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.linesEnabled, onChange: () => {
                             this.localStorage.setItem(`${this.props.dialogName || 'App'}.lines`, this.state.linesEnabled ? 'false' : 'true');
                             this.setState({ linesEnabled: !this.state.linesEnabled });
                         } }), label: this.props.t('ra_Show lines between rows') }),
-                react_1.default.createElement(material_1.FormControlLabel, { className: this.props.classes.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.columnsAuto, onChange: () => {
+                react_1.default.createElement(material_1.FormControlLabel, { style: styles.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.columnsAuto, onChange: () => {
                             this.localStorage.setItem(`${this.props.dialogName || 'App'}.columnsAuto`, this.state.columnsAuto ? 'false' : 'true');
                             if (!this.state.columnsAuto) {
                                 this.calculateColumnsVisibility(true);
@@ -2924,7 +2920,7 @@ class ObjectBrowserClass extends react_1.Component {
                         item.objTypes = [item.objTypes];
                     }
                     else if (!item.objTypes) {
-                        item.objTypes = null;
+                        item.objTypes = undefined;
                     }
                     if (!item.name && item.path) {
                         return {
@@ -3105,7 +3101,7 @@ class ObjectBrowserClass extends react_1.Component {
     }
     getFilterInput(filterName) {
         var _b, _c, _d;
-        return react_1.default.createElement(material_1.FormControl, { className: Utils_1.default.clsx(this.props.classes.headerCellInput, this.props.classes.filterInput), key: `${filterName}_${this.state.filterKey}`, 
+        return react_1.default.createElement(material_1.FormControl, { sx: this.styles.filterInput, key: `${filterName}_${this.state.filterKey}`, 
             // style={{ marginTop: 0, marginBottom: 0 }}
             margin: "dense" },
             react_1.default.createElement(material_1.Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
@@ -3127,12 +3123,12 @@ class ObjectBrowserClass extends react_1.Component {
         var _b, _c, _d;
         const hasIcons = !!(values === null || values === void 0 ? void 0 : values.find(item => item.icon));
         return react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(material_1.Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], className: `${this.props.classes.headerCellInput} no-underline`, onChange: () => {
+            react_1.default.createElement(material_1.Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], sx: styles.headerCellInput, className: "no-underline", onChange: () => {
                     this.filterTimer && clearTimeout(this.filterTimer);
                     this.filterTimer = setTimeout(() => this.onFilter(), 400);
                 }, defaultValue: this.state.filter[name] || '', inputProps: { name, id: name }, displayEmpty: true },
                 react_1.default.createElement(material_1.MenuItem, { key: "empty", value: "" },
-                    react_1.default.createElement("span", { className: this.props.classes.selectNone }, this.texts[`filter_${name}`])), values === null || values === void 0 ? void 0 :
+                    react_1.default.createElement("span", { style: styles.selectNone }, this.texts[`filter_${name}`])), values === null || values === void 0 ? void 0 :
                 values.map(item => {
                     let id;
                     let _name;
@@ -3146,11 +3142,11 @@ class ObjectBrowserClass extends react_1.Component {
                         id = item;
                         _name = item;
                     }
-                    return react_1.default.createElement(material_1.MenuItem, { className: this.props.classes.headerCellSelectItem, key: id, value: id },
+                    return react_1.default.createElement(material_1.MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
                         icon || (hasIcons ? react_1.default.createElement("div", { className: "itemIcon" }) : null),
                         _name);
                 })),
-            ((_d = (_c = (_b = this.filterRefs[name]) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.childNodes[1]) === null || _d === void 0 ? void 0 : _d.value) ? react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.selectClearButton) },
+            ((_d = (_c = (_b = this.filterRefs[name]) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.childNodes[1]) === null || _d === void 0 ? void 0 : _d.value) ? react_1.default.createElement(material_1.Box, { component: "div", sx: styles.selectClearButton },
                 react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => {
                         var _b;
                         const newFilter = Object.assign({}, this.state.filter);
@@ -3170,7 +3166,7 @@ class ObjectBrowserClass extends react_1.Component {
             return ({
                 name: getName((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, this.props.lang) || id.split('.').pop(),
                 value: id,
-                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', className: this.props.classes.selectIcon }),
+                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon }),
             });
         });
         return this.getFilterSelect('room', rooms);
@@ -3181,7 +3177,7 @@ class ObjectBrowserClass extends react_1.Component {
             return ({
                 name: getName((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, this.props.lang) || id.split('.').pop(),
                 value: id,
-                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', className: this.props.classes.selectIcon }),
+                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon }),
             });
         });
         return this.getFilterSelect('func', func);
@@ -3199,7 +3195,7 @@ class ObjectBrowserClass extends react_1.Component {
             const customs = this.info.customs.map(id => ({
                 name: id === '_' ? this.texts.filterCustomsWithout : id,
                 value: id,
-                icon: id === '_' ? null : react_1.default.createElement(Icon_1.default, { src: getSelectIdIconFromObjects(this.objects, id, this.imagePrefix) || '', className: this.props.classes.selectIcon }),
+                icon: id === '_' ? null : react_1.default.createElement(Icon_1.default, { src: getSelectIdIconFromObjects(this.objects, id, this.imagePrefix) || '', style: styles.selectIcon }),
             }));
             return this.getFilterSelect('custom', customs);
         }
@@ -3539,40 +3535,54 @@ class ObjectBrowserClass extends react_1.Component {
                     width: '100%',
                     alignItems: 'center',
                 } },
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Refresh tree'), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Refresh tree'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement("div", null,
                         react_1.default.createElement(material_1.IconButton, { onClick: () => this.refreshComponent(), disabled: this.state.updating, size: "large" },
                             react_1.default.createElement(icons_material_1.Refresh, null)))),
-                this.props.showExpertButton && !this.props.expertMode && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_expertMode'), classes: { popper: this.props.classes.tooltip } },
+                this.props.showExpertButton && !this.props.expertMode && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_expertMode'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => this.onFilter('expertMode', !this.state.filter.expertMode), size: "large" },
                         react_1.default.createElement(IconExpert_1.default, null)))),
-                !this.props.disableColumnSelector && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Configure'), classes: { popper: this.props.classes.tooltip } },
+                !this.props.disableColumnSelector && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Configure'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "columnSelector", color: this.state.columnsAuto ? 'primary' : 'default', onClick: () => this.setState({ columnsSelectorShow: true }), size: "large" },
                         react_1.default.createElement(icons_material_1.ViewColumn, null)))),
-                this.state.expandAllVisible && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand all nodes'), classes: { popper: this.props.classes.tooltip } },
+                this.state.expandAllVisible && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand all nodes'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expandAll", onClick: () => this.onExpandAll(), size: "large" },
                         react_1.default.createElement(IconOpen_1.default, null)))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse all nodes'), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse all nodes'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "collapseAll", onClick: () => this.onCollapseAll(), size: "large" },
                         react_1.default.createElement(IconClosed_1.default, null))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand one step node'), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "expandVisible", color: "primary", onClick: () => this.onExpandVisible(), size: "large" },
-                        react_1.default.createElement(StyledBadge, { badgeContent: this.state.depth, color: "secondary" },
+                        react_1.default.createElement(material_1.Badge, { badgeContent: this.state.depth, color: "secondary", sx: (theme) => ({
+                                badge: {
+                                    right: 3,
+                                    top: 3,
+                                    border: `2px solid ${theme.palette.background.paper}`,
+                                    padding: '0 4px',
+                                },
+                            }) },
                             react_1.default.createElement(IconOpen_1.default, null)))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse one step node'), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse one step node'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { key: "collapseVisible", color: "primary", onClick: () => this.onCollapseVisible(), size: "large" },
-                        react_1.default.createElement(StyledBadge, { badgeContent: this.state.depth, color: "secondary" },
+                        react_1.default.createElement(material_1.Badge, { sx: (theme) => ({
+                                badge: {
+                                    right: 3,
+                                    top: 3,
+                                    border: `2px solid ${theme.palette.background.paper}`,
+                                    padding: '0 4px',
+                                },
+                            }), badgeContent: this.state.depth, color: "secondary" },
                             react_1.default.createElement(IconClosed_1.default, null)))),
-                this.props.objectStatesView && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Toggle the states view'), classes: { popper: this.props.classes.tooltip } },
+                this.props.objectStatesView && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Toggle the states view'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => this.onStatesViewVisible(), size: "large" },
                         react_1.default.createElement(icons_material_1.LooksOne, { color: this.state.statesView ? 'primary' : 'inherit' })))),
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Show/Hide object descriptions'), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Show/Hide object descriptions'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => {
                             this.localStorage.setItem(`${this.props.dialogName || 'App'}.desc`, this.state.showDescription ? 'false' : 'true');
                             this.setState({ showDescription: !this.state.showDescription });
                         }, size: "large" },
                         react_1.default.createElement(icons_material_1.TextFields, { color: this.state.showDescription ? 'primary' : 'inherit' }))),
-                this.props.objectAddBoolean ? react_1.default.createElement(material_1.Tooltip, { title: this.toolTipObjectCreating(), classes: { popper: this.props.classes.tooltip } },
+                this.props.objectAddBoolean ? react_1.default.createElement(material_1.Tooltip, { title: this.toolTipObjectCreating(), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement("div", null,
                         react_1.default.createElement(material_1.IconButton, { disabled: !allowObjectCreation, onClick: () => this.setState({
                                 modalNewObj: {
@@ -3580,7 +3590,7 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }), size: "large" },
                             react_1.default.createElement(icons_material_1.Add, null)))) : null,
-                this.props.objectImportExport && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Add objects tree from JSON file'), classes: { popper: this.props.classes.tooltip } },
+                this.props.objectImportExport && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Add objects tree from JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => {
                             const input = document.createElement('input');
                             input.setAttribute('type', 'file');
@@ -3592,11 +3602,11 @@ class ObjectBrowserClass extends react_1.Component {
                         react_1.default.createElement(icons_material_1.Publish, null))),
                 this.props.objectImportExport &&
                     (!!this.state.selected.length || this.state.selectedNonObject) &&
-                    react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), classes: { popper: this.props.classes.tooltip } },
+                    react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
                         react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ showExportDialog: this._getSelectedIdsForExport().length }), size: "large" },
                             react_1.default.createElement(icons_material_1.Publish, { style: { transform: 'rotate(180deg)' } })))),
             !!this.props.objectBrowserEditObject && (react_1.default.createElement("div", { style: { display: 'flex', whiteSpace: 'nowrap' } }, `${this.props.t('ra_Objects')}: ${Object.keys(this.info.objects).length}, ${this.props.t('ra_States')}: ${Object.keys(this.info.objects).filter(el => this.info.objects[el].type === 'state').length}`)),
-            this.props.objectEditBoolean && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Edit custom config'), classes: { popper: this.props.classes.tooltip } },
+            this.props.objectEditBoolean && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Edit custom config'), componentsProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { onClick: () => {
                         var _b;
                         // get all visible states
@@ -3639,12 +3649,12 @@ class ObjectBrowserClass extends react_1.Component {
             this.setState({ toast: this.props.t('ra_Copied') });
         }
     }
-    renderColumnButtons(id, item, classes) {
+    renderColumnButtons(id, item) {
         var _b, _c, _d;
         if (!item.data.obj) {
-            return this.props.onObjectDelete || this.props.objectEditOfAccessControl ? react_1.default.createElement("div", { className: classes.buttonDiv },
-                this.state.filter.expertMode && this.props.objectEditOfAccessControl ? react_1.default.createElement(material_1.IconButton, { className: Utils_1.default.clsx(classes.cellButtonsButton, classes.cellButtonsEmptyButton, classes.cellButtonMinWidth), onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" }, "---") : null,
-                this.props.onObjectDelete && item.children && item.children.length ? react_1.default.createElement(material_1.IconButton, { className: Utils_1.default.clsx(classes.cellButtonsButton, classes.cellButtonsButtonAlone), size: "small", "aria-label": "delete", title: this.texts.deleteObject, onClick: () => {
+            return this.props.onObjectDelete || this.props.objectEditOfAccessControl ? react_1.default.createElement("div", { style: styles.buttonDiv },
+                this.state.filter.expertMode && this.props.objectEditOfAccessControl ? react_1.default.createElement(material_1.IconButton, { sx: Object.assign(Object.assign(Object.assign({}, styles.cellButtonsButton), styles.cellButtonsEmptyButton), styles.cellButtonMinWidth), onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" }, "---") : null,
+                this.props.onObjectDelete && item.children && item.children.length ? react_1.default.createElement(material_1.IconButton, { style: Object.assign(Object.assign({}, styles.cellButtonsButton), styles.cellButtonsButtonAlone), size: "small", "aria-label": "delete", title: this.texts.deleteObject, onClick: () => {
                         var _b;
                         // calculate the number of children
                         const keys = Object.keys(this.objects);
@@ -3661,7 +3671,7 @@ class ObjectBrowserClass extends react_1.Component {
                         }
                         this.props.onObjectDelete && this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), false, count + 1);
                     } },
-                    react_1.default.createElement(icons_material_1.Delete, { className: classes.cellButtonsButtonIcon })) : null) : null;
+                    react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null) : null;
         }
         item.data.aclTooltip = item.data.aclTooltip || this.renderTooltipAccessControl(item.data.obj.acl);
         const acl = item.data.obj.acl
@@ -3675,19 +3685,19 @@ class ObjectBrowserClass extends react_1.Component {
                 : this.systemConfig.common.defaultNewAcl.object);
         const showEdit = this.state.filter.expertMode || _a.isNonExpertId(item.data.id);
         return [
-            this.state.filter.expertMode && this.props.objectEditOfAccessControl ? react_1.default.createElement(material_1.Tooltip, { key: "acl", title: item.data.aclTooltip, classes: { popper: this.props.classes.tooltip } },
-                react_1.default.createElement(material_1.IconButton, { className: classes.cellButtonMinWidth, onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" },
-                    react_1.default.createElement("div", { className: classes.aclText }, Number.isNaN(Number(acl))
+            this.state.filter.expertMode && this.props.objectEditOfAccessControl ? react_1.default.createElement(material_1.Tooltip, { key: "acl", title: item.data.aclTooltip, componentsProps: { popper: { sx: styles.tooltip } } },
+                react_1.default.createElement(material_1.IconButton, { style: styles.cellButtonMinWidth, onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" },
+                    react_1.default.createElement("div", { style: styles.aclText }, Number.isNaN(Number(acl))
                         ? Number(aclSystemConfig).toString(16)
                         : Number(acl).toString(16)))) :
-                react_1.default.createElement("div", { key: "aclEmpty", className: classes.cellButtonMinWidth }),
-            showEdit ? react_1.default.createElement(material_1.IconButton, { key: "edit", className: classes.cellButtonsButton, size: "small", "aria-label": "edit", title: this.texts.editObject, onClick: () => {
+                react_1.default.createElement("div", { key: "aclEmpty", style: styles.cellButtonMinWidth }),
+            showEdit ? react_1.default.createElement(material_1.IconButton, { key: "edit", style: styles.cellButtonsButton, size: "small", "aria-label": "edit", title: this.texts.editObject, onClick: () => {
                     this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, id);
                     this.setState({ editObjectDialog: id, editObjectAlias: false });
                 } },
-                react_1.default.createElement(icons_material_1.Edit, { className: classes.cellButtonsButtonIcon })) :
-                react_1.default.createElement("div", { key: "editDisabled", className: classes.cellButtonsButton }),
-            this.props.onObjectDelete && (((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) || !((_c = item.data.obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete)) ? react_1.default.createElement(material_1.IconButton, { key: "delete", className: classes.cellButtonsButton, size: "small", "aria-label": "delete", onClick: () => {
+                react_1.default.createElement(icons_material_1.Edit, { style: styles.cellButtonsButtonIcon })) :
+                react_1.default.createElement("div", { key: "editDisabled", style: styles.cellButtonsButton }),
+            this.props.onObjectDelete && (((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) || !((_c = item.data.obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete)) ? react_1.default.createElement(material_1.IconButton, { key: "delete", style: styles.cellButtonsButton, size: "small", "aria-label": "delete", onClick: () => {
                     var _b, _c, _d;
                     const keys = Object.keys(this.objects);
                     keys.sort();
@@ -3703,21 +3713,21 @@ class ObjectBrowserClass extends react_1.Component {
                     }
                     this.props.onObjectDelete && this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_d = (_c = item.data.obj) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.dontDelete), count);
                 }, title: this.texts.deleteObject },
-                react_1.default.createElement(icons_material_1.Delete, { className: classes.cellButtonsButtonIcon })) : null,
+                react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null,
             this.props.objectCustomDialog &&
                 this.info.hasSomeCustoms &&
                 item.data.obj.type === 'state' &&
                 // @ts-expect-error deprecated from js-controller 6
-                ((_d = item.data.obj.common) === null || _d === void 0 ? void 0 : _d.type) !== 'file' ? react_1.default.createElement(material_1.IconButton, { className: Utils_1.default.clsx(classes.cellButtonsButton, item.data.hasCustoms
-                    ? classes.cellButtonsButtonWithCustoms
-                    : classes.cellButtonsButtonWithoutCustoms), key: "custom", size: "small", "aria-label": "config", title: this.texts.customConfig, onClick: () => {
+                ((_d = item.data.obj.common) === null || _d === void 0 ? void 0 : _d.type) !== 'file' ? react_1.default.createElement(material_1.IconButton, { xs: Object.assign(Object.assign({}, styles.cellButtonsButton), (item.data.hasCustoms
+                    ? this.styles.cellButtonsButtonWithCustoms
+                    : styles.cellButtonsButtonWithoutCustoms)), key: "custom", size: "small", "aria-label": "config", title: this.texts.customConfig, onClick: () => {
                     var _b;
                     this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, id);
                     this.pauseSubscribe(true);
                     (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate(null, 'customs', id);
                     this.setState({ customDialog: [id], customDialogAll: false });
                 } },
-                react_1.default.createElement(icons_material_1.Settings, { className: classes.cellButtonsButtonIcon })) : null,
+                react_1.default.createElement(icons_material_1.Settings, { style: styles.cellButtonsButtonIcon })) : null,
         ];
     }
     readHistory(id) {
@@ -3776,7 +3786,7 @@ class ObjectBrowserClass extends react_1.Component {
         var _b, _c;
         const obj = this.objects[id];
         const state = this.states[id];
-        const classes = this.props.classes;
+        const classes = styles;
         const { valFull, fileViewer } = formatValue({
             state,
             obj: obj,
@@ -3786,25 +3796,25 @@ class ObjectBrowserClass extends react_1.Component {
             full: true,
         });
         const valFullRx = [];
-        valFull.forEach(_item => {
+        valFull === null || valFull === void 0 ? void 0 : valFull.forEach(_item => {
             if (_item.t === this.texts.quality && state.q) {
-                valFullRx.push(react_1.default.createElement("div", { className: classes.cellValueTooltipBoth, key: _item.t },
+                valFullRx.push(react_1.default.createElement("div", { style: classes.cellValueTooltipBoth, key: _item.t },
                     _item.t,
                     ":\u00A0",
                     _item.v));
-                // <div className={classes.cellValueTooltipValue} key={item.t + '_v'}>{item.v}</div>,
+                // <div style={styles.cellValueTooltipValue} key={item.t + '_v'}>{item.v}</div>,
                 !_item.nbr && valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
             }
             else {
-                valFullRx.push(react_1.default.createElement("div", { className: classes.cellValueTooltipTitle, key: _item.t },
+                valFullRx.push(react_1.default.createElement("div", { style: classes.cellValueTooltipTitle, key: _item.t },
                     _item.t,
                     ":\u00A0"));
-                valFullRx.push(react_1.default.createElement("div", { className: classes.cellValueTooltipValue, key: `${_item.t}_v` }, _item.v));
+                valFullRx.push(react_1.default.createElement("div", { style: classes.cellValueTooltipValue, key: `${_item.t}_v` }, _item.v));
                 !_item.nbr && valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
             }
         });
         if (fileViewer === 'image') {
-            valFullRx.push(react_1.default.createElement("img", { className: classes.cellValueTooltipImage, src: state.val, alt: id }));
+            valFullRx.push(react_1.default.createElement("img", { style: classes.cellValueTooltipImage, src: state.val, alt: id }));
         }
         else if (this.defaultHistory &&
             ((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.custom) &&
@@ -3813,14 +3823,14 @@ class ObjectBrowserClass extends react_1.Component {
         }
         this.setState({ tooltipInfo: { el: valFullRx, id } }, () => cb && cb());
     }
-    renderColumnValue(id, item, classes) {
+    renderColumnValue(id, item) {
         var _b, _c;
         const obj = item.data.obj;
         if (!obj || !this.states) {
             return null;
         }
         if (((_b = obj.common) === null || _b === void 0 ? void 0 : _b.type) === 'file') {
-            return react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.cellValueText, classes.cellValueFile) }, "[file]");
+            return react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.cellValueText), styles.cellValueFile) }, "[file]");
         }
         if (!this.states[id]) {
             if (obj.type === 'state') {
@@ -3845,26 +3855,26 @@ class ObjectBrowserClass extends react_1.Component {
             const valTextRx = [];
             item.data.state = { valTextRx };
             const copyText = valText.v || '';
-            valTextRx.push(react_1.default.createElement("span", { className: classes.newValue, key: `${valText.v.toString()}valText` }, valText.v.toString()));
-            valText.u && valTextRx.push(react_1.default.createElement("span", { className: Utils_1.default.clsx(classes.cellValueTextUnit, classes.newValue), key: `${valText.v.toString()}unit` }, valText.u));
-            valText.s !== undefined && valTextRx.push(react_1.default.createElement("span", { className: Utils_1.default.clsx(classes.cellValueTextState, classes.newValue), key: `${valText.v.toString()}states` },
+            valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText` }, valText.v.toString()));
+            valText.u && valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, style: styles.cellValueTextUnit, key: `${valText.v.toString()}unit` }, valText.u));
+            valText.s !== undefined && valTextRx.push(react_1.default.createElement("span", { style: styles.cellValueTextState, className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}states` },
                 "(",
                 valText.s,
                 ")"));
-            valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: Utils_1.default.clsx(classes.cellButtonsValueButton, 'copyButton', classes.cellButtonsValueButtonCopy), onClick: e => this.onCopy(e, copyText), key: "cc" }));
-            // <IconEdit className={ Utils.clsx(classes.cellButtonsValueButton, 'copyButton', classes.cellButtonsValueButtonEdit) } key="ce" />
+            valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
+            // <IconEdit className="copyButton" style={{{ ...styles.cellButtonsValueButton, styles.cellButtonsValueButtonEdit)} key="ce" />
             info = item.data.state;
         }
         info.style = getValueStyle({ state, isExpertMode: this.state.filter.expertMode, isButton: item.data.button });
         let val = info.valTextRx;
         if (!this.state.filter.expertMode && item.data.button) {
-            val = [react_1.default.createElement(icons_material_1.RoomService, { className: this.props.classes.cellValueButton })];
+            val = [react_1.default.createElement(icons_material_1.RoomService, { style: styles.cellValueButton })];
         }
-        return react_1.default.createElement(material_1.Tooltip, { key: "value", title: ((_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el) || 'Calculating...', classes: {
-                tooltip: this.props.classes.cellValueTooltip,
-                popper: this.props.classes.cellValueTooltipBox,
+        return react_1.default.createElement(material_1.Tooltip, { key: "value", title: ((_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el) || 'Calculating...', componentsProps: {
+                popper: { sx: styles.cellValueTooltipBox },
+                tooltip: { sx: styles.cellValueTooltip },
             }, onOpen: () => this.getTooltipInfo(id, () => this.readHistory(id)), onClose: () => { var _b; return ((_b = this.state.tooltipInfo) === null || _b === void 0 ? void 0 : _b.id) === id && this.setState({ tooltipInfo: null }); } },
-            react_1.default.createElement("div", { style: info.style, className: classes.cellValueText }, val));
+            react_1.default.createElement(material_1.Box, { component: "div", style: info.style, sx: styles.cellValueText }, val));
     }
     _syncEnum(id, enumIds, newArray, cb) {
         var _b, _c, _d;
@@ -3934,17 +3944,17 @@ class ObjectBrowserClass extends react_1.Component {
             .sort((a, b) => (a.name > b.name ? 1 : -1));
         enums.forEach(_item => {
             if (_item.icon && typeof _item.icon === 'string') {
-                _item.icon = (react_1.default.createElement("div", { className: this.props.classes.enumIconDiv },
-                    react_1.default.createElement("img", { src: _item.icon, className: this.props.classes.enumIcon, alt: _item.name })));
+                _item.icon = react_1.default.createElement(material_1.Box, { style: styles.enumIconDiv },
+                    react_1.default.createElement("img", { src: _item.icon, style: styles.enumIcon, alt: _item.name }));
             }
         });
         // const hasIcons = !!enums.find(item => item.icon);
-        return react_1.default.createElement(material_1.Dialog, { className: this.props.classes.enumDialog, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
+        return react_1.default.createElement(material_1.Dialog, { sx: { '& .MuiPaper-root': styles.enumDialog }, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
             react_1.default.createElement(material_1.DialogTitle, { id: "enum-dialog-title" },
                 type === 'func' ? this.props.t('ra_Define functions') : this.props.t('ra_Define rooms'),
-                react_1.default.createElement(material_1.Fab, { className: this.props.classes.enumButton, color: "primary", disabled: enumsOriginal === JSON.stringify(itemEnums), size: "small", onClick: () => this.syncEnum(item.data.id, type, itemEnums).then(() => this.setState({ enumDialog: null, enumDialogEnums: null })) },
+                react_1.default.createElement(material_1.Fab, { sx: styles.enumButton, color: "primary", disabled: enumsOriginal === JSON.stringify(itemEnums), size: "small", onClick: () => this.syncEnum(item.data.id, type, itemEnums).then(() => this.setState({ enumDialog: null, enumDialogEnums: null })) },
                     react_1.default.createElement(icons_material_1.Check, null))),
-            react_1.default.createElement(material_1.List, { classes: { root: this.props.classes.enumList } }, enums.map(_item => {
+            react_1.default.createElement(material_1.List, { sx: { '&.MuiList-root': styles.enumList } }, enums.map(_item => {
                 let id;
                 let name;
                 let icon;
@@ -3958,7 +3968,7 @@ class ObjectBrowserClass extends react_1.Component {
                     name = _item;
                 }
                 const labelId = `checkbox-list-label-${id}`;
-                return react_1.default.createElement(material_1.ListItem, { className: this.props.classes.headerCellSelectItem, key: id, onClick: () => {
+                return react_1.default.createElement(material_1.ListItem, { sx: styles.headerCellSelectItem, key: id, onClick: () => {
                         const pos = itemEnums.indexOf(id);
                         const enumDialogEnums = JSON.parse(JSON.stringify(this.state.enumDialogEnums));
                         if (pos === -1) {
@@ -3970,7 +3980,7 @@ class ObjectBrowserClass extends react_1.Component {
                         }
                         this.setState({ enumDialogEnums });
                     } },
-                    react_1.default.createElement(material_1.ListItemIcon, { classes: { root: this.props.classes.enumCheckbox } },
+                    react_1.default.createElement(material_1.ListItemIcon, { sx: { '&.MuiListItemIcon-root': styles.enumCheckbox } },
                         react_1.default.createElement(material_1.Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': labelId } })),
                     react_1.default.createElement(material_1.ListItemText, { id: labelId }, name),
                     icon ? react_1.default.createElement(material_1.ListItemSecondaryAction, null, icon) : null);
@@ -3982,11 +3992,7 @@ class ObjectBrowserClass extends react_1.Component {
         }
         if (this.state.roleDialog && this.props.objectBrowserEditRole) {
             const ObjectBrowserEditRole = this.props.objectBrowserEditRole;
-            return react_1.default.createElement(ObjectBrowserEditRole
-            // dummy, just to make compiler happy
-            , { 
-                // dummy, just to make compiler happy
-                classes: {}, key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
+            return react_1.default.createElement(ObjectBrowserEditRole, { key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
                     if (obj) {
                         this.info.objects[this.state.roleDialog] = obj;
                     }
@@ -4167,19 +4173,19 @@ class ObjectBrowserClass extends react_1.Component {
         const text = _a.getCustomValue(obj, it);
         if (text !== null && text !== undefined) {
             if (it.edit && !this.props.notEditable && (!it.objTypes || it.objTypes.includes(obj.type))) {
-                return react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.columnCustom, this.props.classes.columnCustomEditable, this.props.classes[`columnCustom_${it.align}`]), onClick: () => this.setState({
+                return react_1.default.createElement(material_1.Box, { component: "div", style: Object.assign(Object.assign(Object.assign({}, styles.columnCustom), styles.columnCustomEditable), styles[`columnCustom_${it.align}`]), onClick: () => this.setState({
                         columnsEditCustomDialog: { item, it, obj },
                         customColumnDialogValueChanged: false,
                     }) }, text);
             }
-            return react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.columnCustom, this.props.classes[`columnCustom_${it.align}`]) }, text);
+            return react_1.default.createElement(material_1.Box, { component: "div", style: Object.assign(Object.assign({}, styles.columnCustom), styles[`columnCustom_${it.align}`]) }, text);
         }
         return null;
     }
     /**
      * Renders a leaf.
      */
-    renderLeaf(item, isExpanded, classes, counter) {
+    renderLeaf(item, isExpanded, counter) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const id = item.data.id;
         counter.count++;
@@ -4193,22 +4199,24 @@ class ObjectBrowserClass extends react_1.Component {
             itemType === 'device' ||
             itemType === 'channel' ||
             itemType === 'meta') {
-            iconFolder = isExpanded ? (react_1.default.createElement(IconOpen_1.default, { className: classes.cellIdIconFolder, onClick: () => this.toggleExpanded(id) })) : (react_1.default.createElement(IconClosed_1.default, { className: classes.cellIdIconFolder, onClick: () => this.toggleExpanded(id) }));
+            iconFolder = isExpanded ?
+                react_1.default.createElement(IconOpen_1.default, { style: this.styles.cellIdIconFolder, onClick: () => this.toggleExpanded(id) }) :
+                react_1.default.createElement(IconClosed_1.default, { style: this.styles.cellIdIconFolder, onClick: () => this.toggleExpanded(id) });
         }
         else if (obj && obj.common && obj.common.write === false && obj.type === 'state') {
-            iconFolder = react_1.default.createElement(IconDocumentReadOnly_1.default, { className: classes.cellIdIconDocument });
+            iconFolder = react_1.default.createElement(IconDocumentReadOnly_1.default, { style: this.styles.cellIdIconDocument });
         }
         else {
-            iconFolder = react_1.default.createElement(IconDocument_1.default, { className: classes.cellIdIconDocument });
+            iconFolder = react_1.default.createElement(IconDocument_1.default, { style: this.styles.cellIdIconDocument });
         }
         let iconItem = null;
         if (item.data.icon) {
             if (typeof item.data.icon === 'string') {
                 if (item.data.icon.length < 3) {
-                    iconItem = react_1.default.createElement("span", { className: Utils_1.default.clsx(classes.cellIdIconOwn, 'iconOwn') }, item.data.icon); // utf-8 char
+                    iconItem = react_1.default.createElement("span", { className: "iconOwn", style: styles.cellIdIconOwn }, item.data.icon); // utf-8 char
                 }
                 else {
-                    iconItem = react_1.default.createElement(Icon_1.default, { className: Utils_1.default.clsx(classes.cellIdIconOwn, 'iconOwn'), src: item.data.icon, alt: "" });
+                    iconItem = react_1.default.createElement(Icon_1.default, { style: styles.cellIdIconOwn, className: "iconOwn", src: item.data.icon, alt: "" });
                 }
             }
             else {
@@ -4231,7 +4239,7 @@ class ObjectBrowserClass extends react_1.Component {
         const checkbox = this.props.multiSelect &&
             this.objects[id] &&
             (!this.props.types || this.props.types.includes(this.objects[id].type)) ?
-            react_1.default.createElement(material_1.Checkbox, { className: classes.checkBox, checked: this.state.selected.includes(id) }) : null;
+            react_1.default.createElement(material_1.Checkbox, { style: styles.checkBox, checked: this.state.selected.includes(id) }) : null;
         let valueEditable = !this.props.notEditable &&
             itemType === 'state' &&
             (this.state.filter.expertMode || (common === null || common === void 0 ? void 0 : common.write) !== false);
@@ -4268,30 +4276,30 @@ class ObjectBrowserClass extends react_1.Component {
         }
         const readWriteAlias = typeof ((_c = common === null || common === void 0 ? void 0 : common.alias) === null || _c === void 0 ? void 0 : _c.id) === 'object';
         const alias = id.startsWith('alias.') && ((_d = common === null || common === void 0 ? void 0 : common.alias) === null || _d === void 0 ? void 0 : _d.id) ? (readWriteAlias ?
-            react_1.default.createElement("div", { className: classes.cellIdAliasReadWriteDiv },
-                common.alias.id.read ? react_1.default.createElement("div", { onClick: e => {
+            react_1.default.createElement("div", { style: styles.cellIdAliasReadWriteDiv },
+                common.alias.id.read ? react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.onSelect(common.alias.id.read);
                         setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.read)), 100);
-                    }, className: Utils_1.default.clsx(classes.cellIdAlias, classes.cellIdAliasReadWrite) },
+                    }, sx: this.styles.aliasReadWrite },
                     "\u2190",
                     common.alias.id.read) : null,
-                common.alias.id.write ? react_1.default.createElement("div", { onClick: e => {
+                common.alias.id.write ? react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.onSelect(common.alias.id.write);
                         setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.write)), 100);
-                    }, className: Utils_1.default.clsx(classes.cellIdAlias, classes.cellIdAliasReadWrite) },
+                    }, sx: this.styles.aliasReadWrite },
                     "\u2192",
                     common.alias.id.write) : null)
             :
-                react_1.default.createElement("div", { onClick: e => {
+                react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.onSelect(common.alias.id);
                         setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id)), 100);
-                    }, className: Utils_1.default.clsx(classes.cellIdAlias, classes.cellIdAliasAlone) },
+                    }, sx: this.styles.aliasAlone },
                     "\u2192",
                     common.alias.id)) : null;
         let checkColor = common === null || common === void 0 ? void 0 : common.color;
@@ -4356,7 +4364,7 @@ class ObjectBrowserClass extends react_1.Component {
                 colorSet = true;
                 icons.push(react_1.default.createElement(icons_material_1.Error, { key: "error", 
                     // title={this.texts.deviceError}
-                    className: this.props.classes.iconDeviceError }));
+                    style: this.styles.iconDeviceError }));
             }
             if (ids.onlineId && this.states[ids.onlineId]) {
                 if (!colorSet) {
@@ -4365,7 +4373,7 @@ class ObjectBrowserClass extends react_1.Component {
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
                         icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
                             // title={this.texts.deviceError}
-                            className: this.props.classes.iconDeviceConnected }));
+                            style: this.styles.iconDeviceConnected }));
                     }
                     else {
                         checkColor =
@@ -4374,18 +4382,18 @@ class ObjectBrowserClass extends react_1.Component {
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
                         icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
                             // title={this.texts.deviceError}
-                            className: this.props.classes.iconDeviceDisconnected }));
+                            style: this.styles.iconDeviceDisconnected }));
                     }
                 }
                 else if (this.states[ids.onlineId].val) {
                     icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
                         // title={this.texts.deviceError}
-                        className: this.props.classes.iconDeviceConnected }));
+                        style: this.styles.iconDeviceConnected }));
                 }
                 else {
                     icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
                         // title={this.texts.deviceError}
-                        className: this.props.classes.iconDeviceDisconnected }));
+                        style: this.styles.iconDeviceDisconnected }));
                 }
             }
             else if (ids.offlineId && this.states[ids.offlineId]) {
@@ -4397,25 +4405,25 @@ class ObjectBrowserClass extends react_1.Component {
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
                         icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
                             // title={this.texts.deviceError}
-                            className: this.props.classes.iconDeviceDisconnected }));
+                            style: this.styles.iconDeviceDisconnected }));
                     }
                     else {
                         checkColor =
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
                         icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
                             // title={this.texts.deviceError}
-                            className: this.props.classes.iconDeviceConnected }));
+                            style: this.styles.iconDeviceConnected }));
                     }
                 }
                 else if (this.states[ids.offlineId].val) {
                     icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
                         // title={this.texts.deviceError}
-                        className: this.props.classes.iconDeviceDisconnected }));
+                        style: this.styles.iconDeviceDisconnected }));
                 }
                 else {
                     icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
                         // title={this.texts.deviceError}
-                        className: this.props.classes.iconDeviceConnected }));
+                        style: this.styles.iconDeviceConnected }));
                 }
             }
         }
@@ -4426,16 +4434,16 @@ class ObjectBrowserClass extends react_1.Component {
             const oTooltip = getObjectTooltip(item.data, this.props.lang);
             if (oTooltip) {
                 name = [
-                    react_1.default.createElement("div", { key: "name", className: classes.cellNameDivDiv }, name),
-                    react_1.default.createElement("div", { key: "desc", className: classes.cellDescription }, oTooltip),
+                    react_1.default.createElement("div", { key: "name", style: styles.cellNameDivDiv }, name),
+                    react_1.default.createElement("div", { key: "desc", style: styles.cellDescription }, oTooltip),
                 ];
                 useDesc = !!oTooltip;
             }
         }
-        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", className: Utils_1.default.clsx(classes.tableRow, this.state.linesEnabled && classes.tableRowLines, !this.props.dragEnabled && classes.tableRowNoDragging, alias && classes.tableRowAlias, readWriteAlias && classes.tableRowAliasReadWrite, !item.data.visible && classes.filteredOut, item.data.hasVisibleParent &&
+        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
-                classes.filteredParentOut, this.state.selected.includes(id) && classes.itemSelected, this.state.selectedNonObject === id && classes.itemSelected), key: id, id: id, onMouseDown: e => {
+                styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
                 this.onSelect(id);
                 let isRightMB;
                 if ('which' in e) {
@@ -4463,40 +4471,34 @@ class ObjectBrowserClass extends react_1.Component {
                     this.toggleExpanded(id);
                 }
             } },
-            react_1.default.createElement(material_1.Grid, { container: true, wrap: "nowrap", direction: "row", className: classes.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
+            react_1.default.createElement(material_1.Grid, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
                 react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" },
                     checkbox,
                     iconFolder),
-                react_1.default.createElement(material_1.Grid, { item: true, style: { color: checkColor, fontWeight: bold ? 'bold' : undefined }, className: Utils_1.default.clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground) },
-                    react_1.default.createElement(material_1.Tooltip, { title: getIdFieldTooltip(item.data, this.props.classes, this.props.lang), classes: { popper: this.props.classes.tooltip } },
+                react_1.default.createElement(material_1.Grid, { item: true, style: Object.assign(Object.assign(Object.assign({}, styles.cellIdSpan), (invertBackground ? this.styles.invertedBackground : undefined)), { color: checkColor, fontWeight: bold ? 'bold' : undefined }) },
+                    react_1.default.createElement(material_1.Tooltip, { title: getIdFieldTooltip(item.data, this.props.lang), componentsProps: { popper: { sx: styles.tooltip } } },
                         react_1.default.createElement("div", null, item.data.name)),
                     alias,
                     icons),
-                react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.grow, invertBackground && classes.invertedBackgroundFlex) }),
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
                 react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, iconItem),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(IconCopy_1.default, { className: Utils_1.default.clsx(classes.cellCopyButton, 'copyButton'), onClick: e => this.onCopy(e, id) }))),
-            this.columnsVisibility.name ? react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.cellName, useDesc && classes.cellNameWithDesc), style: { width: this.columnsVisibility.name } },
+                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) }))),
+            this.columnsVisibility.name ? react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign(Object.assign({}, styles.cellName), (useDesc ? styles.cellNameWithDesc : undefined)), { width: this.columnsVisibility.name }) },
                 name,
-                ((_g = item.data) === null || _g === void 0 ? void 0 : _g.title) ? react_1.default.createElement("div", { style: { color: checkColor } },
-                    react_1.default.createElement(IconCopy_1.default, { className: Utils_1.default.clsx(classes.cellCopyButton, 'copyButton'), onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null) : null,
+                ((_g = item.data) === null || _g === void 0 ? void 0 : _g.title) ? react_1.default.createElement(material_1.Box, { style: { color: checkColor } },
+                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null) : null,
             !this.state.statesView ? react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.type ? react_1.default.createElement("div", { className: classes.cellType, style: { width: this.columnsVisibility.type } },
+                this.columnsVisibility.type ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellType), { width: this.columnsVisibility.type }) },
                     typeImg,
                     "\u00A0",
                     obj && obj.type) : null,
-                this.columnsVisibility.role ? react_1.default.createElement("div", { className: classes.cellRole, style: {
-                        width: this.columnsVisibility.role,
-                        cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
+                this.columnsVisibility.role ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.role, cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
                             ? 'text'
-                            : 'default',
-                    }, onClick: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
+                            : 'default' }), onClick: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
                         ? () => this.setState({ roleDialog: item.data.id })
                         : undefined }, common === null || common === void 0 ? void 0 : common.role) : null,
-                this.columnsVisibility.room ? react_1.default.createElement("div", { className: `${classes.cellRoom} ${item.data.per ? classes.cellEnumParent : ''}`, style: {
-                        width: this.columnsVisibility.room,
-                        cursor: enumEditable ? 'text' : 'default',
-                    }, onClick: enumEditable ? () => {
+                this.columnsVisibility.room ? react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.cellRoom), (item.data.per ? styles.cellEnumParent : {})), { width: this.columnsVisibility.room, cursor: enumEditable ? 'text' : 'default' }), onClick: enumEditable ? () => {
                         const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
                         this.setState({
                             enumDialogEnums: enums,
@@ -4507,10 +4509,7 @@ class ObjectBrowserClass extends react_1.Component {
                             },
                         });
                     } : undefined }, item.data.rooms) : null,
-                this.columnsVisibility.func ? react_1.default.createElement("div", { className: `${classes.cellFunc} ${item.data.pef ? classes.cellEnumParent : ''}`, style: {
-                        width: this.columnsVisibility.func,
-                        cursor: enumEditable ? 'text' : 'default',
-                    }, onClick: enumEditable ? () => {
+                this.columnsVisibility.func ? react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.cellFunc), (item.data.pef ? styles.cellEnumParent : {})), { width: this.columnsVisibility.func, cursor: enumEditable ? 'text' : 'default' }), onClick: enumEditable ? () => {
                         const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
                         this.setState({
                             enumDialogEnums: enums,
@@ -4521,19 +4520,16 @@ class ObjectBrowserClass extends react_1.Component {
                             },
                         });
                     } : undefined }, item.data.funcs) : null) : react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.changedFrom ? react_1.default.createElement("div", { className: classes.cellRole, style: { width: this.columnsVisibility.changedFrom }, title: newValueTitle.join('\n') }, checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.from) ? newValue : null) : null,
-                this.columnsVisibility.qualityCode ? react_1.default.createElement("div", { className: classes.cellRole, style: { width: this.columnsVisibility.qualityCode }, title: q || '' }, q) : null,
-                this.columnsVisibility.timestamp ? react_1.default.createElement("div", { className: classes.cellRole, style: { width: this.columnsVisibility.timestamp } }, checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.ts)
+                this.columnsVisibility.changedFrom ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.changedFrom }), title: newValueTitle.join('\n') }, checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.from) ? newValue : null) : null,
+                this.columnsVisibility.qualityCode ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.qualityCode }), title: q || '' }, q) : null,
+                this.columnsVisibility.timestamp ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.timestamp }) }, checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.ts)
                     ? Utils_1.default.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
                     : null) : null,
-                this.columnsVisibility.lastChange ? react_1.default.createElement("div", { className: classes.cellRole, style: { width: this.columnsVisibility.lastChange } }, checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.lc)
+                this.columnsVisibility.lastChange ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellRole), { width: this.columnsVisibility.lastChange }) }, checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.lc)
                     ? Utils_1.default.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
                     : null) : null),
-            this.adapterColumns.map(it => react_1.default.createElement("div", { className: classes.cellAdapter, style: { width: this.columnsVisibility[it.id] }, key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null)),
-            this.columnsVisibility.val ? react_1.default.createElement("div", { className: classes.cellValue, style: {
-                    width: this.columnsVisibility.val,
-                    cursor: valueEditable ? ((common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default',
-                }, onClick: valueEditable ? () => {
+            this.adapterColumns.map(it => react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellAdapter), { width: this.columnsVisibility[it.id] }), key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null)),
+            this.columnsVisibility.val ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellValue), { width: this.columnsVisibility.val, cursor: valueEditable ? ((common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default' }), onClick: valueEditable ? () => {
                     if (!obj || !this.states) {
                         // return;
                     }
@@ -4556,24 +4552,24 @@ class ObjectBrowserClass extends react_1.Component {
                         };
                         this.setState({ updateOpened: true });
                     }
-                } : undefined }, this.renderColumnValue(id, item, classes)) : null,
-            this.columnsVisibility.buttons ? react_1.default.createElement("div", { className: classes.cellButtons, style: { width: this.columnsVisibility.buttons } }, this.renderColumnButtons(id, item, classes)) : null);
+                } : undefined }, this.renderColumnValue(id, item)) : null,
+            this.columnsVisibility.buttons ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellButtons), { width: this.columnsVisibility.buttons }) }, this.renderColumnButtons(id, item)) : null);
     }
     /**
      * Renders an item.
      */
-    renderItem(root, isExpanded, classes, counter) {
+    renderItem(root, isExpanded, counter) {
         const items = [];
         counter = counter || { count: 0 };
-        let leaf = this.renderLeaf(root, isExpanded, classes, counter);
+        let leaf = this.renderLeaf(root, isExpanded, counter);
         const DragWrapper = this.props.DragWrapper;
         if (this.props.dragEnabled && DragWrapper) {
             if (root.data.sumVisibility) {
-                leaf = react_1.default.createElement(DragWrapper, { key: root.data.id, item: root, className: classes.draggable }, leaf);
+                leaf = react_1.default.createElement(DragWrapper, { key: root.data.id, item: root, style: styles.draggable }, leaf);
             }
             else {
                 // change cursor
-                leaf = react_1.default.createElement("div", { key: root.data.id, className: classes.nonDraggable }, leaf);
+                leaf = react_1.default.createElement("div", { key: root.data.id, style: styles.nonDraggable }, leaf);
             }
         }
         root.data.id && leaf && items.push(leaf);
@@ -4584,7 +4580,7 @@ class ObjectBrowserClass extends react_1.Component {
                     // do not render too many items in column editor mode
                     if (!this.state.columnsSelectorShow || counter.count < 15) {
                         if (item.data.sumVisibility) {
-                            return this.renderItem(item, undefined, classes, counter);
+                            return this.renderItem(item, undefined, counter);
                         }
                     }
                     return null;
@@ -4597,7 +4593,7 @@ class ObjectBrowserClass extends react_1.Component {
                         // do not render too many items in column editor mode
                         if (!this.state.columnsSelectorShow || counter.count < 15) {
                             if (item.data.sumVisibility) {
-                                return this.renderItem(item, undefined, classes, counter);
+                                return this.renderItem(item, undefined, counter);
                             }
                         }
                     }
@@ -4609,7 +4605,7 @@ class ObjectBrowserClass extends react_1.Component {
                         // do not render too many items in column editor mode
                         if (!this.state.columnsSelectorShow || counter.count < 15) {
                             if (item.data.sumVisibility) {
-                                return this.renderItem(item, undefined, classes, counter);
+                                return this.renderItem(item, undefined, counter);
                             }
                         }
                     }
@@ -4839,54 +4835,53 @@ class ObjectBrowserClass extends react_1.Component {
      * Render the right handle for resizing
      */
     renderHandleRight() {
-        return react_1.default.createElement("div", { className: `${this.props.classes.resizeHandle} ${this.props.classes.resizeHandleRight}`, onMouseDown: this.resizerMouseDown, onDoubleClick: this.resizerReset, title: this.props.t('ra_Double click to reset table layout') });
+        return react_1.default.createElement(material_1.Box, { component: "div", className: "iob-ob-resize-handler", sx: Object.assign(Object.assign({}, styles.resizeHandle), styles.resizeHandleRight), onMouseDown: this.resizerMouseDown, onDoubleClick: this.resizerReset, title: this.props.t('ra_Double click to reset table layout') });
     }
     renderHeader() {
-        const classes = this.props.classes;
         let filterClearInValue = null;
         if (!this.columnsVisibility.buttons && !this.isFilterEmpty()) {
-            filterClearInValue = react_1.default.createElement(material_1.IconButton, { onClick: () => this.clearFilter(), className: classes.buttonClearFilter, title: this.props.t('ra_Clear filter'), size: "large" },
+            filterClearInValue = react_1.default.createElement(material_1.IconButton, { onClick: () => this.clearFilter(), style: styles.buttonClearFilter, title: this.props.t('ra_Clear filter'), size: "large" },
                 react_1.default.createElement(IconClearFilter_1.default, null),
-                react_1.default.createElement(icons_material_1.Close, { className: classes.buttonClearFilterIcon }));
+                react_1.default.createElement(icons_material_1.Close, { style: styles.buttonClearFilterIcon }));
         }
-        return react_1.default.createElement("div", { className: classes.headerRow },
-            react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.id, position: 'relative' }, "data-min": 240, "data-name": "id" },
+        return react_1.default.createElement("div", { style: styles.headerRow },
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.id, position: 'relative' }), "data-min": 240, "data-name": "id" },
                 this.getFilterInput('id'),
                 this.renderHandleRight()),
-            this.columnsVisibility.name ? react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.nameHeader, position: 'relative' }, "data-min": 100, "data-name": "nameHeader" },
+            this.columnsVisibility.name ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.nameHeader, position: 'relative' }), "data-min": 100, "data-name": "nameHeader" },
                 this.getFilterInput('name'),
                 this.renderHandleRight()) : null,
             !this.state.statesView && react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.type ? react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.type, position: 'relative' }, "data-min": 100, "data-name": "type" },
+                this.columnsVisibility.type ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.type, position: 'relative' }), "data-min": 100, "data-name": "type" },
                     this.getFilterSelectType(),
                     this.renderHandleRight()) : null,
-                this.columnsVisibility.role ? react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.role, position: 'relative' }, "data-min": 100, "data-name": "role" },
+                this.columnsVisibility.role ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.role, position: 'relative' }), "data-min": 100, "data-name": "role" },
                     this.getFilterSelectRole(),
                     this.renderHandleRight()) : null,
-                this.columnsVisibility.room ? react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.room, position: 'relative' }, "data-min": 100, "data-name": "room" },
+                this.columnsVisibility.room ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.room, position: 'relative' }), "data-min": 100, "data-name": "room" },
                     this.getFilterSelectRoom(),
                     this.renderHandleRight()) : null,
-                this.columnsVisibility.func ? react_1.default.createElement("div", { className: classes.headerCell, style: { width: this.columnsVisibility.func, position: 'relative' }, "data-min": 100, "data-name": "func" },
+                this.columnsVisibility.func ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.func, position: 'relative' }), "data-min": 100, "data-name": "func" },
                     this.getFilterSelectFunction(),
                     this.renderHandleRight()) : null),
             this.state.statesView && react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility.changedFrom, position: 'relative' }, "data-min": 100, "data-name": "changedFrom" },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.changedFrom, position: 'relative' }), "data-min": 100, "data-name": "changedFrom" },
                     this.props.t('ra_Changed from'),
                     this.renderHandleRight()),
-                react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility.qualityCode, position: 'relative' }, "data-min": 100, "data-name": "qualityCode" },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.qualityCode, position: 'relative' }), "data-min": 100, "data-name": "qualityCode" },
                     this.props.t('ra_Quality code'),
                     this.renderHandleRight()),
-                react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility.timestamp, position: 'relative' }, "data-min": 100, "data-name": "timestamp" },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.timestamp, position: 'relative' }), "data-min": 100, "data-name": "timestamp" },
                     this.props.t('ra_Timestamp'),
                     this.renderHandleRight()),
-                react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility.lastChange, position: 'relative' }, "data-min": 100, "data-name": "lastChange" },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.lastChange, position: 'relative' }), "data-min": 100, "data-name": "lastChange" },
                     this.props.t('ra_Last change'),
                     this.renderHandleRight())),
-            this.adapterColumns.map(item => react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility[item.id] }, title: item.adapter, key: item.id, "data-min": 100, "data-name": item.id }, item.name)),
-            this.columnsVisibility.val ? react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.headerCell, classes.headerCellValue), style: { width: this.columnsVisibility.val, position: 'relative' }, "data-min": 120, "data-name": "val" },
+            this.adapterColumns.map(item => react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility[item.id] }), title: item.adapter, key: item.id, "data-min": 100, "data-name": item.id }, item.name)),
+            this.columnsVisibility.val ? react_1.default.createElement("div", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.val, position: 'relative' }), "data-min": 120, "data-name": "val" },
                 this.props.t('ra_Value'),
                 filterClearInValue) : null,
-            this.columnsVisibility.buttons ? react_1.default.createElement("div", { className: classes.headerCell, title: this.texts.filter_custom, style: { width: this.columnsVisibility.buttons } },
+            this.columnsVisibility.buttons ? react_1.default.createElement("div", { title: this.texts.filter_custom, style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.buttons }) },
                 ' ',
                 this.getFilterSelectCustoms()) : null);
     }
@@ -4933,9 +4928,7 @@ class ObjectBrowserClass extends react_1.Component {
                         this.forceUpdate();
                     }
                     (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate('tab-objects');
-                }, systemConfig: this.systemConfig, 
-                // dummy, just to make compiler happy
-                classes: {} });
+                }, systemConfig: this.systemConfig });
         }
         return null;
     }
@@ -4954,11 +4947,7 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         const ObjectBrowserEditObject = this.props.objectBrowserEditObject;
-        return react_1.default.createElement(ObjectBrowserEditObject
-        // dummy, just to make compiler happy
-        , { 
-            // dummy, just to make compiler happy
-            classes: {}, key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, aliasTab: this.state.editObjectAlias, t: this.props.t, expertMode: !!this.state.filter.expertMode, onNewObject: (obj) => this.props.socket
+        return react_1.default.createElement(ObjectBrowserEditObject, { key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, aliasTab: this.state.editObjectAlias, t: this.props.t, expertMode: !!this.state.filter.expertMode, onNewObject: (obj) => this.props.socket
                 .setObject(obj._id, obj)
                 .then(() => this.setState({ editObjectDialog: obj._id, editObjectAlias: false }, () => this.onSelect(obj._id)))
                 .catch(e => this.showError(`Cannot write object: ${e}`)), onClose: (obj) => {
@@ -5070,7 +5059,7 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!(this.props.objectBrowserEditObject &&
                     obj &&
                     (this.state.filter.expertMode || _a.isNonExpertId(id))),
-                icon: react_1.default.createElement(icons_material_1.Edit, { fontSize: "small", className: this.props.classes.contextMenuEdit }),
+                icon: react_1.default.createElement(icons_material_1.Edit, { fontSize: "small", style: this.styles.contextMenuEdit }),
                 label: this.texts.editObject,
                 onClick: () => this.setState({ editObjectDialog: item.data.id, showContextMenu: null, editObjectAlias: false }),
             },
@@ -5083,7 +5072,7 @@ class ObjectBrowserClass extends react_1.Component {
                     // @ts-expect-error deprecated from js-controller 6
                     ((_b = obj.common) === null || _b === void 0 ? void 0 : _b.type) !== 'file' &&
                     (this.state.filter.expertMode || obj.common.write !== false)),
-                icon: react_1.default.createElement(icons_material_1.FormatItalic, { fontSize: "small", className: this.props.classes.contextMenuEditValue }),
+                icon: react_1.default.createElement(icons_material_1.FormatItalic, { fontSize: "small", style: this.styles.contextMenuEditValue }),
                 label: this.props.t('ra_Edit value'),
                 onClick: () => {
                     this.edit = {
@@ -5099,8 +5088,7 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!this.props.objectBrowserViewFile && (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_c = obj.common) === null || _c === void 0 ? void 0 : _c.type) === 'file',
-                icon: react_1.default.createElement(icons_material_1.FindInPage, { fontSize: "small", className: this.props.classes.contextMenuView }),
-                className: '',
+                icon: react_1.default.createElement(icons_material_1.FindInPage, { fontSize: "small", style: this.styles.contextMenuView }),
                 label: this.props.t('ra_View file'),
                 onClick: () => this.setState({ viewFileDialog: (obj === null || obj === void 0 ? void 0 : obj._id) || '', showContextMenu: null }),
             },
@@ -5112,10 +5100,10 @@ class ObjectBrowserClass extends react_1.Component {
                     obj.type === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_d = obj.common) === null || _d === void 0 ? void 0 : _d.type) !== 'file'),
-                icon: react_1.default.createElement(icons_material_1.Settings, { fontSize: "small", className: item.data.hasCustoms
-                        ? this.props.classes.cellButtonsButtonWithCustoms
-                        : this.props.classes.cellButtonsButtonWithoutCustoms }),
-                className: this.props.classes.contextMenuCustom,
+                icon: react_1.default.createElement(icons_material_1.Settings, { fontSize: "small", style: item.data.hasCustoms
+                        ? this.styles.cellButtonsButtonWithCustoms
+                        : styles.cellButtonsButtonWithoutCustoms }),
+                style: this.styles.contextMenuCustom,
                 label: this.texts.customConfig,
                 onClick: () => {
                     var _b;
@@ -5129,8 +5117,8 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!showACL,
                 icon: showACL,
                 iconStyle: { fontSize: 'smaller' },
-                listItemIconClass: this.props.classes.contextMenuACL,
-                className: this.props.classes.contextMenuACL,
+                listItemIconStyle: this.styles.contextMenuACL,
+                style: this.styles.contextMenuACL,
                 label: this.props.t('ra_Edit ACL'),
                 onClick: () => this.setState({
                     showContextMenu: null,
@@ -5141,16 +5129,14 @@ class ObjectBrowserClass extends react_1.Component {
             ROLE: {
                 key: '4',
                 visibility: !!(this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole),
-                icon: react_1.default.createElement(icons_material_1.BorderColor, { fontSize: "small", className: this.props.classes.contextMenuRole }),
-                className: '',
+                icon: react_1.default.createElement(icons_material_1.BorderColor, { fontSize: "small", style: this.styles.contextMenuRole }),
                 label: this.props.t('ra_Edit role'),
                 onClick: () => this.setState({ roleDialog: item.data.id, showContextMenu: null }),
             },
             FUNCTION: {
                 key: '5',
                 visibility: !!enumEditable,
-                icon: react_1.default.createElement(icons_material_1.BedroomParent, { fontSize: "small", className: this.props.classes.contextMenuRole }),
-                className: '',
+                icon: react_1.default.createElement(icons_material_1.BedroomParent, { fontSize: "small", style: this.styles.contextMenuRole }),
                 label: this.props.t('ra_Edit function'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
@@ -5168,8 +5154,7 @@ class ObjectBrowserClass extends react_1.Component {
             ROOM: {
                 key: '6',
                 visibility: !!enumEditable,
-                icon: react_1.default.createElement(icons_material_1.Construction, { fontSize: "small", className: this.props.classes.contextMenuRoom }),
-                className: '',
+                icon: react_1.default.createElement(icons_material_1.Construction, { fontSize: "small", style: this.styles.contextMenuRoom }),
                 label: this.props.t('ra_Edit room'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
@@ -5193,10 +5178,9 @@ class ObjectBrowserClass extends react_1.Component {
                     (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_e = obj.common) === null || _e === void 0 ? void 0 : _e.type) !== 'file'),
-                icon: react_1.default.createElement(icons_material_1.Link, { className: ((_f = obj === null || obj === void 0 ? void 0 : obj.common) === null || _f === void 0 ? void 0 : _f.alias)
-                        ? this.props.classes.cellButtonsButtonWithCustoms
-                        : this.props.classes.cellButtonsButtonWithoutCustoms }),
-                className: '',
+                icon: react_1.default.createElement(icons_material_1.Link, { style: ((_f = obj === null || obj === void 0 ? void 0 : obj.common) === null || _f === void 0 ? void 0 : _f.alias)
+                        ? this.styles.cellButtonsButtonWithCustoms
+                        : styles.cellButtonsButtonWithoutCustoms }),
                 label: this.props.t('ra_Edit alias'),
                 onClick: () => {
                     var _b;
@@ -5212,8 +5196,8 @@ class ObjectBrowserClass extends react_1.Component {
                 key: '+',
                 visibility: (item.data.id.startsWith('0_userdata.0') || item.data.id.startsWith('javascript.')) &&
                     (createStateVisible || createChannelVisible || createDeviceVisible || createFolderVisible),
-                icon: react_1.default.createElement(icons_material_1.Add, { fontSize: "small", className: this.props.classes.cellButtonsButtonWithCustoms }),
-                className: this.props.classes.contextMenuWithSubMenu,
+                icon: react_1.default.createElement(icons_material_1.Add, { fontSize: "small", style: this.styles.cellButtonsButtonWithCustoms }),
+                style: styles.contextMenuWithSubMenu,
                 label: this.texts.create,
                 subMenu: [
                     {
@@ -5263,8 +5247,8 @@ class ObjectBrowserClass extends react_1.Component {
             DELETE: {
                 key: 'Delete',
                 visibility: !!(this.props.onObjectDelete && (((_g = item.children) === null || _g === void 0 ? void 0 : _g.length) || (obj && !((_h = obj.common) === null || _h === void 0 ? void 0 : _h.dontDelete)))),
-                icon: react_1.default.createElement(icons_material_1.Delete, { fontSize: "small", className: this.props.classes.contextMenuDelete }),
-                className: this.props.classes.contextMenuDelete,
+                icon: react_1.default.createElement(icons_material_1.Delete, { fontSize: "small", style: this.styles.contextMenuDelete }),
+                style: this.styles.contextMenuDelete,
                 label: this.texts.deleteObject,
                 onClick: () => this.setState({ showContextMenu: null }, () => this.showDeleteDialog({
                     id,
@@ -5283,8 +5267,8 @@ class ObjectBrowserClass extends react_1.Component {
                                 subItem: key,
                                 subAnchor: e.target,
                             },
-                        }), className: ITEMS[key].className },
-                        react_1.default.createElement(material_1.ListItemIcon, { style: ITEMS[key].iconStyle, className: ITEMS[key].listItemIconClass }, ITEMS[key].icon),
+                        }), style: ITEMS[key].style },
+                        react_1.default.createElement(material_1.ListItemIcon, { style: Object.assign(Object.assign({}, ITEMS[key].iconStyle), ITEMS[key].listItemIconStyle) }, ITEMS[key].icon),
                         react_1.default.createElement(material_1.ListItemText, null,
                             ITEMS[key].label,
                             "..."),
@@ -5294,16 +5278,16 @@ class ObjectBrowserClass extends react_1.Component {
                         items.push(react_1.default.createElement(material_1.Menu, { key: "subContextMenu", open: !0, anchorEl: this.state.showContextMenu.subAnchor, onClose: () => {
                                 this.state.showContextMenu && this.setState({ showContextMenu: { item: this.state.showContextMenu.item } });
                                 this.contextMenu = null;
-                            } }, (_c = ITEMS[key].subMenu) === null || _c === void 0 ? void 0 : _c.map(subItem => (subItem.visibility ? react_1.default.createElement(material_1.MenuItem, { key: subItem.label, onClick: subItem.onClick, className: subItem.className },
-                            react_1.default.createElement(material_1.ListItemIcon, { style: subItem.iconStyle, className: subItem.listItemIconClass }, subItem.icon),
+                            } }, (_c = ITEMS[key].subMenu) === null || _c === void 0 ? void 0 : _c.map(subItem => (subItem.visibility ? react_1.default.createElement(material_1.MenuItem, { key: subItem.label, onClick: subItem.onClick, style: subItem.style },
+                            react_1.default.createElement(material_1.ListItemIcon, { style: Object.assign(Object.assign({}, subItem.iconStyle), (subItem.listItemIconStyle || undefined)) }, subItem.icon),
                             react_1.default.createElement(material_1.ListItemText, null, subItem.label)) : null))));
                     }
                 }
                 else {
-                    items.push(react_1.default.createElement(material_1.MenuItem, { key: key, onClick: ITEMS[key].onClick, className: ITEMS[key].className },
-                        react_1.default.createElement(material_1.ListItemIcon, { style: ITEMS[key].iconStyle, className: ITEMS[key].listItemIconClass }, ITEMS[key].icon),
+                    items.push(react_1.default.createElement(material_1.MenuItem, { key: key, onClick: ITEMS[key].onClick, sx: ITEMS[key].style },
+                        react_1.default.createElement(material_1.ListItemIcon, { style: Object.assign(Object.assign({}, ITEMS[key].iconStyle), ITEMS[key].listItemIconStyle) }, ITEMS[key].icon),
                         react_1.default.createElement(material_1.ListItemText, null, ITEMS[key].label),
-                        ITEMS[key].key ? react_1.default.createElement("div", { className: this.props.classes.contextMenuKeys }, `Alt+${ITEMS[key].key === 'Delete' ? this.props.t('ra_Del') : ITEMS[key].key}`) : null));
+                        ITEMS[key].key ? react_1.default.createElement("div", { style: styles.contextMenuKeys }, `Alt+${ITEMS[key].key === 'Delete' ? this.props.t('ra_Del') : ITEMS[key].key}`) : null));
                 }
             }
         });
@@ -5347,9 +5331,7 @@ class ObjectBrowserClass extends react_1.Component {
         return react_1.default.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils_1.default.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, expertMode: !!this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, onClose: (res) => {
                 this.setState({ updateOpened: false });
                 res && this.onUpdate(res);
-            }, 
-            // dummy, just to make compiler happy
-            classes: {} });
+            } });
     }
     /**
      * The rendering method of this component.
@@ -5357,6 +5339,31 @@ class ObjectBrowserClass extends react_1.Component {
     render() {
         this.recordStates = [];
         this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
+        if (this.styleTheme !== this.props.themeType) {
+            this.styles = {
+                cellIdIconFolder: getStyle(this.props.theme, styles.cellIdIconFolder),
+                cellIdIconDocument: getStyle(this.props.theme, styles.cellIdIconDocument),
+                iconDeviceError: getStyle(this.props.theme, styles.iconDeviceError),
+                iconDeviceConnected: getStyle(this.props.theme, styles.iconDeviceConnected),
+                iconDeviceDisconnected: getStyle(this.props.theme, styles.iconDeviceDisconnected),
+                cellButtonsButtonWithCustoms: getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
+                invertedBackground: getStyle(this.props.theme, styles.invertedBackground),
+                invertedBackgroundFlex: getStyle(this.props.theme, styles.invertedBackgroundFlex),
+                contextMenuEdit: getStyle(this.props.theme, styles.contextMenuEdit),
+                contextMenuEditValue: getStyle(this.props.theme, styles.contextMenuEditValue),
+                contextMenuView: getStyle(this.props.theme, styles.contextMenuView),
+                contextMenuCustom: getStyle(this.props.theme, styles.contextMenuCustom),
+                contextMenuACL: getStyle(this.props.theme, styles.contextMenuACL),
+                contextMenuRoom: getStyle(this.props.theme, styles.contextMenuRoom),
+                contextMenuRole: getStyle(this.props.theme, styles.contextMenuRole),
+                contextMenuDelete: getStyle(this.props.theme, styles.contextMenuDelete),
+                filterInput: getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
+                iconCopy: getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
+                aliasReadWrite: getStyle(styles.cellIdAlias, styles.cellIdAliasReadWrite),
+                aliasAlone: getStyle(styles.cellIdAlias, styles.cellIdAliasAlone),
+            };
+            this.styleTheme = this.props.themeType;
+        }
         // apply filter if changed
         const jsonFilter = JSON.stringify(this.state.filter);
         if (this.lastAppliedFilter !== jsonFilter && this.objects && this.root) {
@@ -5377,13 +5384,42 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.state.loaded) {
             return react_1.default.createElement(material_1.CircularProgress, { key: `${this.props.dialogName}_c` });
         }
-        const classes = this.props.classes;
-        const items = this.root ? this.renderItem(this.root, undefined, classes) : null;
+        const items = this.root ? this.renderItem(this.root, undefined) : null;
         return react_1.default.createElement(TabContainer_1.default, { key: this.props.dialogName },
+            react_1.default.createElement("style", null, `
+@keyframes newValueAnimation-light {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #000;
+    }
+}
+@keyframes newValueAnimation-dark {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #fff;
+    }
+}
+.newValueBrowser-dark {
+    animation: newValueAnimation-dark 2s ease-in-out;
+}
+.newValueBrowser-light {
+    animation: newValueAnimation-light 2s ease-in-out;
+}
+`),
             react_1.default.createElement(TabHeader_1.default, null, this.getToolbar()),
             react_1.default.createElement(TabContent_1.default, null,
                 this.renderHeader(),
-                react_1.default.createElement("div", { className: this.props.classes.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
+                react_1.default.createElement("div", { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
             this.renderContextMenu(),
             this.renderToast(),
             this.renderColumnsEditCustomDialog(),
@@ -5407,4 +5443,4 @@ exports.ObjectBrowserClass = ObjectBrowserClass;
 _a = ObjectBrowserClass;
 /** Namespaces which are allowed to be edited by non-expert users */
 _ObjectBrowserClass_NON_EXPERT_NAMESPACES = { value: ['0_userdata.0.', 'alias.0.'] };
-exports.default = (0, withWidth_1.default)()((0, styles_1.withStyles)(styles)(ObjectBrowserClass));
+exports.default = (0, withWidth_1.default)()(ObjectBrowserClass);