@iobroker/adapter-react-v5 7.2.3 → 7.2.6

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

@@ -1,69 +1,33 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a, _ObjectBrowserClass_NON_EXPERT_NAMESPACES;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectBrowserClass = exports.ITEM_IMAGES = void 0;
-exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
 /**
  * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
  */
-const react_1 = __importStar(require("react"));
-const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
-const material_1 = require("@mui/material");
+import React, { Component, createRef } from 'react';
+import SVG from 'react-inlinesvg';
+import { Badge, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fab, FormControl, FormControlLabel, Grid2, IconButton, Input, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, Select, Snackbar, Switch, TextField, Tooltip, } from '@mui/material';
 // Icons
-const icons_material_1 = require("@mui/icons-material");
-const IconExpert_1 = __importDefault(require("../icons/IconExpert"));
-const IconAdapter_1 = __importDefault(require("../icons/IconAdapter"));
-const IconChannel_1 = __importDefault(require("../icons/IconChannel"));
-const IconCopy_1 = __importDefault(require("../icons/IconCopy"));
-const IconDevice_1 = __importDefault(require("../icons/IconDevice"));
-const IconDocument_1 = __importDefault(require("../icons/IconDocument"));
-const IconDocumentReadOnly_1 = __importDefault(require("../icons/IconDocumentReadOnly"));
-const IconInstance_1 = __importDefault(require("../icons/IconInstance"));
-const IconState_1 = __importDefault(require("../icons/IconState"));
-const IconClosed_1 = __importDefault(require("../icons/IconClosed"));
-const IconOpen_1 = __importDefault(require("../icons/IconOpen"));
-const IconClearFilter_1 = __importDefault(require("../icons/IconClearFilter"));
-const Connection_1 = __importDefault(require("../Connection"));
-const Icon_1 = __importDefault(require("./Icon"));
-const withWidth_1 = __importDefault(require("./withWidth"));
-const Utils_1 = __importDefault(require("./Utils")); // @iobroker/adapter-react-v5/Components/Utils
-const TabContainer_1 = __importDefault(require("./TabContainer"));
-const TabContent_1 = __importDefault(require("./TabContent"));
-const TabHeader_1 = __importDefault(require("./TabHeader"));
+import { Add as AddIcon, ArrowRight as ArrowRightIcon, BedroomParent, BorderColor, Build as BuildIcon, CalendarToday as IconSchedule, Check as IconCheck, Close as IconClose, Code as IconScript, Construction, CreateNewFolder as IconFolder, Delete as IconDelete, Description as IconMeta, Edit as IconEdit, Error as IconError, FindInPage, FormatItalic as IconValueEdit, Info as IconInfo, Link as IconLink, ListAlt as IconEnum, LooksOne as LooksOneIcon, PersonOutlined as IconUser, Publish as PublishIcon, Refresh as RefreshIcon, Router as IconHost, Settings as IconConfig, SettingsApplications as IconSystem, DataObject as IconData, ShowChart as IconChart, SupervisedUserCircle as IconGroup, TextFields as TextFieldsIcon, ViewColumn as IconColumns, Wifi as IconConnection, WifiOff as IconDisconnected, } from '@mui/icons-material';
+import { IconExpert } from '../icons/IconExpert';
+import { IconAdapter } from '../icons/IconAdapter';
+import { IconChannel } from '../icons/IconChannel';
+import { IconCopy } from '../icons/IconCopy';
+import { IconDevice } from '../icons/IconDevice';
+import { IconDocument } from '../icons/IconDocument';
+import { IconDocumentReadOnly } from '../icons/IconDocumentReadOnly';
+import { IconInstance } from '../icons/IconInstance';
+import { IconState } from '../icons/IconState';
+import { IconClosed } from '../icons/IconClosed';
+import { IconOpen } from '../icons/IconOpen';
+import { IconClearFilter } from '../icons/IconClearFilter';
+import { Connection } from '../Connection';
+import { Icon } from './Icon';
+import { withWidth } from './withWidth';
+import { Utils } from './Utils'; // @iobroker/adapter-react-v5/Components/Utils
+import { TabContainer } from './TabContainer';
+import { TabContent } from './TabContent';
+import { TabHeader } from './TabHeader';
 const ICON_SIZE = 24;
 const ROW_HEIGHT = 32;
 const ITEM_LEVEL = 16;
@@ -183,7 +147,7 @@ const styles = {
         width: '100%',
         '&:hover': {
             background: `${theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light} !important`,
-            color: Utils_1.default.invertColor(theme.palette.primary.main, true),
+            color: Utils.invertColor(theme.palette.primary.main, true),
         },
         whiteSpace: 'nowrap',
         flexWrap: 'nowrap',
@@ -549,7 +513,7 @@ const styles = {
     },
     itemSelected: (theme) => ({
         background: `${theme.palette.primary.main} !important`,
-        color: `${Utils_1.default.invertColor(theme.palette.primary.main, true)} !important`,
+        color: `${Utils.invertColor(theme.palette.primary.main, true)} !important`,
     }),
     header: {
         width: '100%',
@@ -749,10 +713,10 @@ const styles = {
     },
 };
 function ButtonIcon(props) {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 436 436", style: props === null || props === void 0 ? void 0 : props.style, width: "24", height: "24", className: "admin-button" },
-        react_1.default.createElement("g", { fill: "currentColor" },
-            react_1.default.createElement("path", { d: "m195.23077,24.30769c-36,3 -67,12 -96,26c-49,24 -82,61 -93,104l-3,11l-1,50c0,46 0,49 2,59l5,20c21,58 84,103 165,116c16,3 53,4 70,2c60,-6 111,-28 147,-64c21,-21 36,-49 40,-74a866,866 0 0 0 1,-104c-3,-18 -6,-28 -13,-43c-26,-52 -87,-90 -162,-101c-16,-2 -48,-3 -63,-2l1,0zm60,23c36,5 70,18 95,35c31,20 51,47 59,77c2,7 2,11 2,25c1,15 0,18 -2,26c-19,69 -104,117 -200,114c-47,-2 -90,-15 -124,-38c-31,-20 -51,-47 -59,-77c-3,-11 -4,-32 -2,-43c8,-42 41,-78 91,-101a260,260 0 0 1 140,-19l0,1zm-221,222c21,26 57,49 95,62c81,27 174,14 239,-32c14,-10 31,-27 41,-41c2,-2 2,-2 2,7c-1,23 -16,50 -38,72c-78,74 -233,74 -311,-1a121,121 0 0 1 -39,-76l0,-6l3,4l8,11z" }),
-            react_1.default.createElement("path", { d: "m201.23077,47.30769c-40,3 -79,19 -104,44c-55,55 -38,133 37,171c52,26 122,24 172,-5c30,-17 51,-42 58,-71c3,-11 3,-34 0,-45c-6,-23 -21,-44 -40,-60l-27,-16a184,184 0 0 0 -96,-18zm30,21c56,5 100,35 112,75c4,11 4,30 0,41c-8,25 -26,45 -54,59a166,166 0 0 1 -160,-8a98,98 0 0 1 -41,-53c-5,-18 -2,-39 8,-57c23,-39 79,-62 135,-57z" }))));
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 436 436", style: props?.style, width: "24", height: "24", className: "admin-button" },
+        React.createElement("g", { fill: "currentColor" },
+            React.createElement("path", { d: "m195.23077,24.30769c-36,3 -67,12 -96,26c-49,24 -82,61 -93,104l-3,11l-1,50c0,46 0,49 2,59l5,20c21,58 84,103 165,116c16,3 53,4 70,2c60,-6 111,-28 147,-64c21,-21 36,-49 40,-74a866,866 0 0 0 1,-104c-3,-18 -6,-28 -13,-43c-26,-52 -87,-90 -162,-101c-16,-2 -48,-3 -63,-2l1,0zm60,23c36,5 70,18 95,35c31,20 51,47 59,77c2,7 2,11 2,25c1,15 0,18 -2,26c-19,69 -104,117 -200,114c-47,-2 -90,-15 -124,-38c-31,-20 -51,-47 -59,-77c-3,-11 -4,-32 -2,-43c8,-42 41,-78 91,-101a260,260 0 0 1 140,-19l0,1zm-221,222c21,26 57,49 95,62c81,27 174,14 239,-32c14,-10 31,-27 41,-41c2,-2 2,-2 2,7c-1,23 -16,50 -38,72c-78,74 -233,74 -311,-1a121,121 0 0 1 -39,-76l0,-6l3,4l8,11z" }),
+            React.createElement("path", { d: "m201.23077,47.30769c-40,3 -79,19 -104,44c-55,55 -38,133 37,171c52,26 122,24 172,-5c30,-17 51,-42 58,-71c3,-11 3,-34 0,-45c-6,-23 -21,-44 -40,-60l-27,-16a184,184 0 0 0 -96,-18zm30,21c56,5 100,35 112,75c4,11 4,30 0,41c-8,25 -26,45 -54,59a166,166 0 0 1 -160,-8a98,98 0 0 1 -41,-53c-5,-18 -2,-39 8,-57c23,-39 79,-62 135,-57z" }))));
 }
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
@@ -871,12 +835,15 @@ function binarySearch(list, find, _start, _end) {
     return false;
 }
 function getName(name, lang) {
-    if (name && typeof name === 'object') {
+    if (typeof name === 'object') {
+        if (!name) {
+            return '';
+        }
         return (name[lang] || name.en || '').toString();
     }
-    return (name || '').toString();
+    return name ? name.toString() : '';
 }
-function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
+export function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
     // `admin` has prefix '.' and `web` has '../..'
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -902,7 +869,7 @@ function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
             }
         }
         else if (aIcon.startsWith('data:image/svg')) {
-            src = (react_1.default.createElement(react_inlinesvg_1.default, { className: "iconOwn", src: aIcon, width: 28, height: 28 }));
+            src = (React.createElement(SVG, { className: "iconOwn", src: aIcon, width: 28, height: 28 }));
         }
         else {
             src = aIcon;
@@ -954,7 +921,7 @@ function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
                 }
                 else if (cIcon.startsWith('data:image/svg')) {
                     // if base 64 image
-                    src = (react_1.default.createElement(react_inlinesvg_1.default, { className: "iconOwn", src: cIcon, width: 28, height: 28 }));
+                    src = (React.createElement(SVG, { className: "iconOwn", src: cIcon, width: 28, height: 28 }));
                 }
                 else {
                     src = cIcon;
@@ -965,7 +932,6 @@ function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
     return src || null;
 }
 function applyFilter(item, filters, lang, objects, context, counter, customFilter, selectedTypes, _depth) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     _depth = _depth || 0;
     let filteredOut = false;
     if (!context) {
@@ -986,15 +952,15 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
             context.role = filters.role.toLowerCase();
         }
         if (filters.room) {
-            context.room = ((_c = (_b = objects[filters.room]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.members) || [];
+            context.room = objects[filters.room]?.common?.members || [];
         }
         if (filters.func) {
-            context.func = ((_e = (_d = objects[filters.func]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.members) || [];
+            context.func = objects[filters.func]?.common?.members || [];
         }
     }
     const data = item.data;
     if (data && data.id) {
-        const common = (_f = data.obj) === null || _f === void 0 ? void 0 : _f.common;
+        const common = data.obj?.common;
         if (customFilter) {
             if (customFilter.type) {
                 if (typeof customFilter.type === 'string') {
@@ -1008,8 +974,8 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
                     }
                 }
             }
-            if (!filteredOut && ((_g = customFilter.common) === null || _g === void 0 ? void 0 : _g.type)) {
-                if (!(common === null || common === void 0 ? void 0 : common.type)) {
+            if (!filteredOut && customFilter.common?.type) {
+                if (!common?.type) {
                     filteredOut = true;
                 }
                 else if (typeof customFilter.common.type === 'string') {
@@ -1023,8 +989,8 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
                     }
                 }
             }
-            if (!filteredOut && ((_h = customFilter.common) === null || _h === void 0 ? void 0 : _h.role)) {
-                if (!(common === null || common === void 0 ? void 0 : common.role)) {
+            if (!filteredOut && customFilter.common?.role) {
+                if (!common?.role) {
                     filteredOut = true;
                 }
                 else if (typeof customFilter.common.role === 'string') {
@@ -1038,12 +1004,12 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
                     }
                 }
             }
-            if (!filteredOut && ((_j = customFilter.common) === null || _j === void 0 ? void 0 : _j.custom) === '_' && (common === null || common === void 0 ? void 0 : common.custom)) {
+            if (!filteredOut && customFilter.common?.custom === '_' && common?.custom) {
                 filteredOut = true;
             }
-            else if (!filteredOut && ((_k = customFilter.common) === null || _k === void 0 ? void 0 : _k.custom) && ((_l = customFilter.common) === null || _l === void 0 ? void 0 : _l.custom) !== '_') {
+            else if (!filteredOut && customFilter.common?.custom && customFilter.common?.custom !== '_') {
                 const filterOfCustom = customFilter.common.custom;
-                if (!(common === null || common === void 0 ? void 0 : common.custom)) {
+                if (!common?.custom) {
                     filteredOut = true;
                 }
                 else if (filterOfCustom === '_dataSources') {
@@ -1074,7 +1040,7 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
                     data.id.startsWith('enum.') ||
                     data.id.startsWith('_design/') ||
                     data.id.endsWith('.admin') ||
-                    !!(common === null || common === void 0 ? void 0 : common.expert);
+                    !!common?.expert;
         }
         if (!filteredOut && context.id) {
             if (data.fID === undefined) {
@@ -1150,14 +1116,13 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
     return data.visible || data.hasVisibleChildren;
 }
 function getVisibleItems(item, type, objects, _result) {
-    var _b;
     _result = _result || [];
     const data = item.data;
     if (data.sumVisibility) {
         if (data.id && objects[data.id] && (!type || objects[data.id].type === type)) {
             _result.push(data.id);
         }
-        (_b = item.children) === null || _b === void 0 ? void 0 : _b.forEach(_item => getVisibleItems(_item, type, objects, _result));
+        item.children?.forEach(_item => getVisibleItems(_item, type, objects, _result));
     }
     return _result;
 }
@@ -1165,34 +1130,34 @@ function getSystemIcon(objects, id, level, themeType, lang, imagePrefix) {
     let icon;
     // system or design has special icons
     if (id === 'alias' || id === 'alias.0') {
-        icon = (react_1.default.createElement(icons_material_1.Link, { className: "iconOwn", style: { color: COLOR_NAME_ALIAS(themeType) } }));
+        icon = (React.createElement(IconLink, { className: "iconOwn", style: { color: COLOR_NAME_ALIAS(themeType) } }));
     }
     else if (id === '0_userdata' || id === '0_userdata.0') {
-        icon = (react_1.default.createElement(icons_material_1.DataObject, { className: "iconOwn", style: { color: COLOR_NAME_USERDATA(themeType) } }));
+        icon = (React.createElement(IconData, { className: "iconOwn", style: { color: COLOR_NAME_USERDATA(themeType) } }));
     }
     else if (id.startsWith('_design/') || id === 'system') {
-        icon = (react_1.default.createElement(icons_material_1.SettingsApplications, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM(themeType) } }));
+        icon = (React.createElement(IconSystem, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM(themeType) } }));
     }
     else if (id === 'system.adapter') {
-        icon = (react_1.default.createElement(icons_material_1.SettingsApplications, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM_ADAPTER(themeType) } }));
+        icon = (React.createElement(IconSystem, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM_ADAPTER(themeType) } }));
     }
     else if (id === 'system.group') {
-        icon = react_1.default.createElement(icons_material_1.SupervisedUserCircle, { className: "iconOwn" });
+        icon = React.createElement(IconGroup, { className: "iconOwn" });
     }
     else if (id === 'system.user') {
-        icon = react_1.default.createElement(icons_material_1.PersonOutlined, { className: "iconOwn" });
+        icon = React.createElement(IconUser, { className: "iconOwn" });
     }
     else if (id === 'system.host') {
-        icon = react_1.default.createElement(icons_material_1.Router, { className: "iconOwn" });
+        icon = React.createElement(IconHost, { className: "iconOwn" });
     }
     else if (id.endsWith('.connection') || id.endsWith('.connected')) {
-        icon = react_1.default.createElement(icons_material_1.Wifi, { className: "iconOwn" });
+        icon = React.createElement(IconConnection, { className: "iconOwn" });
     }
     else if (id.endsWith('.info')) {
-        icon = react_1.default.createElement(icons_material_1.Info, { className: "iconOwn" });
+        icon = React.createElement(IconInfo, { className: "iconOwn" });
     }
     else if (objects[id] && objects[id].type === 'meta') {
-        icon = react_1.default.createElement(icons_material_1.Description, { className: "iconOwn" });
+        icon = React.createElement(IconMeta, { className: "iconOwn" });
     }
     else if (level < 2) {
         // detect "cloud.0"
@@ -1203,21 +1168,19 @@ function getSystemIcon(objects, id, level, themeType, lang, imagePrefix) {
     return icon || null;
 }
 function getObjectTooltip(data, lang) {
-    var _b, _c;
-    if ((_c = (_b = data === null || data === void 0 ? void 0 : data.obj) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.desc) {
+    if (data?.obj?.common?.desc) {
         return getName(data.obj.common.desc, lang) || null;
     }
     return null;
 }
 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(material_1.Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip));
+    if (tooltip?.startsWith('http')) {
+        return (React.createElement(Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip));
     }
-    return react_1.default.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
+    return React.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const imagePrefix = options.imagePrefix || '.';
     let ids = Object.keys(objects);
     ids.sort((a, b) => {
@@ -1285,12 +1248,12 @@ function buildTree(objects, options) {
             else if (obj.type === 'enum') {
                 info.enums.push(id);
             }
-            else if (obj.type === 'instance' && common && (common.supportCustoms || ((_b = common.adminUI) === null || _b === void 0 ? void 0 : _b.custom))) {
+            else if (obj.type === 'instance' && common && (common.supportCustoms || common.adminUI?.custom)) {
                 info.hasSomeCustoms = true;
                 info.customs.push(id.substring('system.adapter.'.length));
             }
             // Build a map of aliases
-            if (id.startsWith('alias.') && ((_c = obj.common.alias) === null || _c === void 0 ? void 0 : _c.id)) {
+            if (id.startsWith('alias.') && obj.common.alias?.id) {
                 if (typeof obj.common.alias.id === 'string') {
                     const usedId = obj.common.alias.id;
                     if (!info.aliasesMap[usedId]) {
@@ -1361,24 +1324,24 @@ function buildTree(objects, options) {
                 const _cRoot = {
                     data: {
                         name: parts[parts.length - 1],
-                        title: getName((_d = obj === null || obj === void 0 ? void 0 : obj.common) === null || _d === void 0 ? void 0 : _d.name, options.lang),
+                        title: getName(obj?.common?.name, options.lang),
                         obj,
                         parent: cRoot,
                         icon: getSelectIdIconFromObjects(objects, id, options.lang, imagePrefix) ||
                             getSystemIcon(objects, id, 0, options.themeType, options.lang, imagePrefix),
                         id,
-                        hasCustoms: !!(((_e = obj.common) === null || _e === void 0 ? void 0 : _e.custom) && Object.keys(obj.common.custom).length),
+                        hasCustoms: !!(obj.common?.custom && Object.keys(obj.common.custom).length),
                         level: parts.length - 1,
                         generated: false,
                         button: obj.type === 'state' &&
-                            !!((_f = obj.common) === null || _f === void 0 ? void 0 : _f.role) &&
+                            !!obj.common?.role &&
                             typeof obj.common.role === 'string' &&
                             obj.common.role.startsWith('button') &&
-                            ((_g = obj.common) === null || _g === void 0 ? void 0 : _g.write) !== false,
+                            obj.common?.write !== false,
                         switch: obj.type === 'state' &&
-                            ((_h = obj.common) === null || _h === void 0 ? void 0 : _h.type) === 'boolean' &&
-                            ((_j = obj.common) === null || _j === void 0 ? void 0 : _j.write) !== false &&
-                            ((_k = obj.common) === null || _k === void 0 ? void 0 : _k.read) !== false,
+                            obj.common?.type === 'boolean' &&
+                            obj.common?.write !== false &&
+                            obj.common?.read !== false,
                     },
                 };
                 cRoot.children = cRoot.children || [];
@@ -1419,9 +1382,8 @@ function buildTree(objects, options) {
         } while (repeat);
     }
     info.roomEnums.sort((a, b) => {
-        var _b, _c, _d, _e;
-        const aName = getName((_c = (_b = objects[a]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, options.lang) || a.split('.').pop();
-        const bName = getName((_e = (_d = objects[b]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.name, options.lang) || b.split('.').pop();
+        const aName = getName(objects[a]?.common?.name, options.lang) || a.split('.').pop();
+        const bName = getName(objects[b]?.common?.name, options.lang) || b.split('.').pop();
         if (aName > bName) {
             return 1;
         }
@@ -1431,9 +1393,8 @@ function buildTree(objects, options) {
         return 0;
     });
     info.funcEnums.sort((a, b) => {
-        var _b, _c, _d, _e;
-        const aName = getName((_c = (_b = objects[a]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, options.lang) || a.split('.').pop();
-        const bName = getName((_e = (_d = objects[b]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.name, options.lang) || b.split('.').pop();
+        const aName = getName(objects[a]?.common?.name, options.lang) || a.split('.').pop();
+        const bName = getName(objects[b]?.common?.name, options.lang) || b.split('.').pop();
         if (aName > bName) {
             return 1;
         }
@@ -1478,18 +1439,17 @@ function findNode(root, id, _parts, _path, _level) {
     return null;
 }
 function findRoomsForObject(info, id, lang, rooms) {
-    var _b, _c;
     if (!id) {
         return { rooms: [], per: false };
     }
     rooms = rooms || [];
     for (const room of info.roomEnums) {
-        const common = (_b = info.objects[room]) === null || _b === void 0 ? void 0 : _b.common;
+        const common = info.objects[room]?.common;
         if (!common) {
             continue;
         }
         const name = getName(common.name, lang);
-        if (((_c = common.members) === null || _c === void 0 ? void 0 : _c.includes(id)) && !rooms.includes(name)) {
+        if (common.members?.includes(id) && !rooms.includes(name)) {
             rooms.push(name);
         }
     }
@@ -1505,14 +1465,13 @@ function findRoomsForObject(info, id, lang, rooms) {
     return { rooms, per: !ownEnums }; // per is if the enums are from parent
 }
 function findEnumsForObjectAsIds(info, id, enumName, funcs) {
-    var _b, _c;
     if (!id) {
         return [];
     }
     funcs = funcs || [];
     for (let i = 0; i < info[enumName].length; i++) {
-        const common = (_b = info.objects[info[enumName][i]]) === null || _b === void 0 ? void 0 : _b.common;
-        if (((_c = common === null || common === void 0 ? void 0 : common.members) === null || _c === void 0 ? void 0 : _c.includes(id)) && !funcs.includes(info[enumName][i])) {
+        const common = info.objects[info[enumName][i]]?.common;
+        if (common?.members?.includes(id) && !funcs.includes(info[enumName][i])) {
             funcs.push(info[enumName][i]);
         }
     }
@@ -1520,18 +1479,17 @@ function findEnumsForObjectAsIds(info, id, enumName, funcs) {
     return funcs;
 }
 function findFunctionsForObject(info, id, lang, funcs) {
-    var _b, _c;
     if (!id) {
         return { funcs: [], pef: false };
     }
     funcs = funcs || [];
     for (let i = 0; i < info.funcEnums.length; i++) {
-        const common = (_b = info.objects[info.funcEnums[i]]) === null || _b === void 0 ? void 0 : _b.common;
+        const common = info.objects[info.funcEnums[i]]?.common;
         if (!common) {
             continue;
         }
         const name = getName(common.name, lang);
-        if (((_c = common.members) === null || _c === void 0 ? void 0 : _c.includes(id)) && !funcs.includes(name)) {
+        if (common.members?.includes(id) && !funcs.includes(name)) {
             funcs.push(name);
         }
     }
@@ -1567,12 +1525,12 @@ function quality2text(q) {
  */
 function formatValue(options) {
     const { dateFormat, state, isFloatComma, texts, obj } = options;
-    const states = Utils_1.default.getStates(obj);
+    const states = Utils.getStates(obj);
     const isCommon = obj.common;
     let fileViewer;
     let v = 
     // @ts-expect-error deprecated from js-controller 6
-    (isCommon === null || isCommon === void 0 ? void 0 : isCommon.type) === 'file'
+    isCommon?.type === 'file'
         ? '[file]'
         : !state || state.val === null
             ? '(null)'
@@ -1580,9 +1538,9 @@ function formatValue(options) {
                 ? '[undef]'
                 : state.val;
     const type = typeof v;
-    if ((isCommon === null || isCommon === void 0 ? void 0 : isCommon.role) && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
+    if (isCommon?.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
         if (v && typeof v === 'string') {
-            if (Utils_1.default.isStringInteger(v)) {
+            if (Utils.isStringInteger(v)) {
                 // we assume a unix ts
                 v = new Date(parseInt(v, 10)).toString();
             }
@@ -1590,11 +1548,11 @@ function formatValue(options) {
                 // check if parsable by new date
                 try {
                     const parsedDate = new Date(v);
-                    if (Utils_1.default.isValidDate(parsedDate)) {
+                    if (Utils.isValidDate(parsedDate)) {
                         v = parsedDate.toString();
                     }
                 }
-                catch (_b) {
+                catch {
                     // ignore
                 }
             }
@@ -1602,7 +1560,7 @@ function formatValue(options) {
         else {
             if (v > 946681200 && v < 946681200000) {
                 // '2000-01-01T00:00:00' => 946681200000
-                v *= 1000; // maybe the time is in seconds (UNIX time)
+                v *= 1_000; // maybe the time is in seconds (UNIX time)
             }
             // "null" and undefined could not be here. See `let v = (isCommon && isCommon.type === 'file') ....` above
             v = v ? new Date(v).toString() : v;
@@ -1611,7 +1569,7 @@ function formatValue(options) {
     else {
         if (type === 'number') {
             if (!Number.isInteger(v)) {
-                v = Math.round(v * 100000000) / 100000000; // remove 4.00000000000000001
+                v = Math.round(v * 100_000_000) / 100_000_000; // remove 4.00000000000000001
                 if (isFloatComma) {
                     v = v.toString().replace('.', ',');
                 }
@@ -1639,7 +1597,7 @@ function formatValue(options) {
             valText.v = v;
         }
     }
-    if (isCommon === null || isCommon === void 0 ? void 0 : isCommon.unit) {
+    if (isCommon?.unit) {
         valText.u = isCommon.unit;
     }
     let valFull;
@@ -1650,10 +1608,10 @@ function formatValue(options) {
                 valFull.push({ t: texts.ack, v: state.ack.toString() });
             }
             if (state.ts) {
-                valFull.push({ t: texts.ts, v: state.ts ? Utils_1.default.formatDate(new Date(state.ts), dateFormat) : '' });
+                valFull.push({ t: texts.ts, v: state.ts ? Utils.formatDate(new Date(state.ts), dateFormat) : '' });
             }
             if (state.lc) {
-                valFull.push({ t: texts.lc, v: state.lc ? Utils_1.default.formatDate(new Date(state.lc), dateFormat) : '' });
+                valFull.push({ t: texts.lc, v: state.lc ? Utils.formatDate(new Date(state.lc), dateFormat) : '' });
             }
             if (state.from) {
                 let from = state.from.toString();
@@ -1672,7 +1630,7 @@ function formatValue(options) {
             if (state.c) {
                 valFull.push({ t: texts.c, v: state.c });
             }
-            valFull.push({ t: texts.quality, v: Utils_1.default.quality2text(state.q || 0).join(', '), nbr: true });
+            valFull.push({ t: texts.quality, v: Utils.quality2text(state.q || 0).join(', '), nbr: true });
         }
     }
     return {
@@ -1686,7 +1644,7 @@ function formatValue(options) {
  */
 function getValueStyle(options) {
     const { state /* , isExpertMode, isButton */ } = options;
-    const color = (state === null || state === void 0 ? void 0 : state.ack) ? (state.q ? '#ffa500' : '') : '#ff2222c9';
+    const color = state?.ack ? (state.q ? '#ffa500' : '') : '#ff2222c9';
     // do not show the color of the button in non-expert mode
     // if (!isExpertMode && isButton) {
     //     color = '';
@@ -1726,22 +1684,22 @@ function prepareSparkData(values, from) {
     }
     return v;
 }
-exports.ITEM_IMAGES = {
-    state: (react_1.default.createElement(IconState_1.default, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    channel: (react_1.default.createElement(IconChannel_1.default, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    device: (react_1.default.createElement(IconDevice_1.default, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    adapter: (react_1.default.createElement(IconAdapter_1.default, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    meta: (react_1.default.createElement(icons_material_1.Description, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    instance: (react_1.default.createElement(IconInstance_1.default, { className: "itemIcon", style: { color: '#7da7ff', verticalAlign: 'middle' } })),
-    enum: (react_1.default.createElement(icons_material_1.ListAlt, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    chart: (react_1.default.createElement(icons_material_1.ShowChart, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    config: (react_1.default.createElement(icons_material_1.Settings, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    group: (react_1.default.createElement(icons_material_1.SupervisedUserCircle, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    user: (react_1.default.createElement(icons_material_1.PersonOutlined, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    host: (react_1.default.createElement(icons_material_1.Router, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    schedule: (react_1.default.createElement(icons_material_1.CalendarToday, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    script: (react_1.default.createElement(icons_material_1.Code, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
-    folder: (react_1.default.createElement(IconClosed_1.default, { className: "itemIcon itemIconFolder", style: { verticalAlign: 'middle' } })),
+export const ITEM_IMAGES = {
+    state: (React.createElement(IconState, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    channel: (React.createElement(IconChannel, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    device: (React.createElement(IconDevice, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    adapter: (React.createElement(IconAdapter, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    meta: (React.createElement(IconMeta, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    instance: (React.createElement(IconInstance, { className: "itemIcon", style: { color: '#7da7ff', verticalAlign: 'middle' } })),
+    enum: (React.createElement(IconEnum, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    chart: (React.createElement(IconChart, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    config: (React.createElement(IconConfig, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    group: (React.createElement(IconGroup, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    user: (React.createElement(IconUser, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    host: (React.createElement(IconHost, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    schedule: (React.createElement(IconSchedule, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    script: (React.createElement(IconScript, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
+    folder: (React.createElement(IconClosed, { className: "itemIcon itemIconFolder", style: { verticalAlign: 'middle' } })),
 };
 const SCREEN_WIDTHS = {
     // extra-small: 0px
@@ -1833,445 +1791,73 @@ const DEFAULT_FILTER = {
     custom: '',
     expertMode: false,
 };
-class ObjectBrowserClass extends react_1.Component {
+export class ObjectBrowserClass extends Component {
+    // do not define the type as null to save the performance, so we must check it every time
+    info = {
+        funcEnums: [],
+        roomEnums: [],
+        roles: [],
+        ids: [],
+        types: [],
+        objects: {},
+        customs: [],
+        enums: [],
+        hasSomeCustoms: false,
+        aliasesMap: {},
+    };
+    localStorage = window._localStorage || window.localStorage;
+    lastAppliedFilter = null;
+    tableRef;
+    filterRefs;
+    pausedSubscribes = false;
+    selectFirst;
+    root = null;
+    states = {};
+    subscribes = [];
+    unsubscribeTimer = null;
+    statesUpdateTimer = null;
+    objectsUpdateTimer = null;
+    filterTimer = null;
+    visibleCols;
+    texts;
+    possibleCols;
+    imagePrefix;
+    adapterColumns = [];
+    styleTheme = '';
+    edit = {
+        id: '',
+        val: '',
+        q: 0,
+        ack: false,
+    };
+    levelPadding;
+    customWidth = false;
+    resizeTimeout = null;
+    resizerNextName = null;
+    resizerActiveName = null;
+    resizerCurrentWidths = {};
+    resizeLeft = false;
+    resizerOldWidth = 0;
+    resizerMin = 0;
+    resizerNextMin = 0;
+    resizerOldWidthNext = 0;
+    resizerPosition = 0;
+    resizerActiveDiv = null;
+    resizerNextDiv = null;
+    storedWidths = null;
+    systemConfig;
+    objects;
+    defaultHistory = '';
+    columnsVisibility = {};
+    changedIds = null;
+    contextMenu = null;
+    recordStates = [];
+    styles = {};
+    customColumnDialog = null;
+    /** Namespaces which are allowed to be edited by non-expert users */
+    static #NON_EXPERT_NAMESPACES = ['0_userdata.0.', 'alias.0.'];
     constructor(props) {
         super(props);
-        // do not define the type as null to save the performance, so we must check it every time
-        this.info = {
-            funcEnums: [],
-            roomEnums: [],
-            roles: [],
-            ids: [],
-            types: [],
-            objects: {},
-            customs: [],
-            enums: [],
-            hasSomeCustoms: false,
-            aliasesMap: {},
-        };
-        this.localStorage = window._localStorage || window.localStorage;
-        this.lastAppliedFilter = null;
-        this.pausedSubscribes = false;
-        this.root = null;
-        this.states = {};
-        this.subscribes = [];
-        this.unsubscribeTimer = null;
-        this.statesUpdateTimer = null;
-        this.objectsUpdateTimer = null;
-        this.filterTimer = null;
-        this.adapterColumns = [];
-        this.styleTheme = '';
-        this.edit = {
-            id: '',
-            val: '',
-            q: 0,
-            ack: false,
-        };
-        this.customWidth = false;
-        this.resizeTimeout = null;
-        this.resizerNextName = null;
-        this.resizerActiveName = null;
-        this.resizerCurrentWidths = {};
-        this.resizeLeft = false;
-        this.resizerOldWidth = 0;
-        this.resizerMin = 0;
-        this.resizerNextMin = 0;
-        this.resizerOldWidthNext = 0;
-        this.resizerPosition = 0;
-        this.resizerActiveDiv = null;
-        this.resizerNextDiv = null;
-        this.storedWidths = null;
-        this.defaultHistory = '';
-        this.columnsVisibility = {};
-        this.changedIds = null;
-        this.contextMenu = null;
-        this.recordStates = [];
-        this.styles = {};
-        this.customColumnDialog = null;
-        /**
-         * Context menu handler.
-         */
-        this.onContextMenu = (e) => {
-            // console.log(`CONTEXT MENU: ${this.contextMenu ? Date.now() - this.contextMenu.ts : 'false'}`);
-            if (this.contextMenu && Date.now() - this.contextMenu.ts < 2000) {
-                e.preventDefault();
-                this.setState({
-                    showContextMenu: {
-                        item: this.contextMenu.item,
-                        position: { left: e.clientX + 2, top: e.clientY - 6 },
-                    },
-                });
-            }
-            else if (this.state.showContextMenu) {
-                e.preventDefault();
-                this.setState({ showContextMenu: null });
-            }
-            this.contextMenu = null;
-        };
-        /**
-         * Called when a state changes.
-         */
-        this.onStateChange = (id, state) => {
-            console.log(`> stateChange ${id}`);
-            if (this.states[id]) {
-                const item = this.findItem(id);
-                if (item === null || item === void 0 ? void 0 : item.data.state) {
-                    item.data.state = undefined;
-                }
-            }
-            if (state) {
-                this.states[id] = state;
-            }
-            else {
-                delete this.states[id];
-            }
-            if (!this.pausedSubscribes) {
-                if (!this.statesUpdateTimer) {
-                    this.statesUpdateTimer = setTimeout(() => {
-                        this.statesUpdateTimer = null;
-                        this.forceUpdate();
-                    }, 300);
-                }
-            }
-            else if (this.statesUpdateTimer) {
-                clearTimeout(this.statesUpdateTimer);
-                this.statesUpdateTimer = null;
-            }
-        };
-        this.onObjectChangeFromWorker = (events) => {
-            if (Array.isArray(events)) {
-                let newState = null;
-                events.forEach(event => {
-                    const { newInnerState, filtered } = this.processOnObjectChangeElement(event.id, event.obj);
-                    if (filtered) {
-                        return;
-                    }
-                    if (newInnerState && newState) {
-                        Object.assign(newState, newInnerState);
-                    }
-                    else {
-                        newState = newInnerState;
-                    }
-                });
-                if (newState) {
-                    this.setState(newState);
-                }
-                this.afterObjectUpdated();
-            }
-        };
-        this.onObjectChange = (id, obj) => {
-            const { newInnerState, filtered } = this.processOnObjectChangeElement(id, obj);
-            if (filtered) {
-                return;
-            }
-            if (newInnerState) {
-                this.setState(newInnerState);
-            }
-            this.afterObjectUpdated();
-        };
-        this.getEnumsForId = (id) => {
-            const result = [];
-            this.info.enums.forEach(_id => {
-                var _b, _c, _d;
-                if ((_d = (_c = (_b = this.objects[_id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.members) === null || _d === void 0 ? void 0 : _d.includes(id)) {
-                    const enumItem = {
-                        _id: this.objects[_id]._id,
-                        common: JSON.parse(JSON.stringify(this.objects[_id].common)),
-                        native: this.objects[_id].native,
-                        type: 'enum',
-                    };
-                    if (enumItem.common) {
-                        delete enumItem.common.members;
-                        delete enumItem.common.custom;
-                        // @ts-expect-error deprecated attribute
-                        delete enumItem.common.mobile;
-                    }
-                    result.push(enumItem);
-                }
-            });
-            return result.length ? result : undefined;
-        };
-        this._createAllEnums = async (enums, objId) => {
-            var _b, _c;
-            for (let e = 0; e < enums.length; e++) {
-                const item = enums[e];
-                let id;
-                let newObj;
-                // some admin version delivered enums as string
-                if (typeof item === 'object') {
-                    newObj = item;
-                    id = newObj._id;
-                }
-                else {
-                    id = item;
-                }
-                let oldObj = this.objects[id];
-                // if enum does not exist
-                if (!oldObj) {
-                    // create a new one
-                    oldObj =
-                        newObj ||
-                            {
-                                _id: id,
-                                common: {
-                                    name: id.split('.').pop(),
-                                    members: [],
-                                },
-                                native: {},
-                                type: 'enum',
-                            };
-                    oldObj.common = oldObj.common || {};
-                    oldObj.common.members = [objId];
-                    oldObj.type = 'enum';
-                    await this.props.socket.setObject(id, oldObj);
-                }
-                else if (!((_c = (_b = oldObj.common) === null || _b === void 0 ? void 0 : _b.members) === null || _c === void 0 ? void 0 : _c.includes(objId))) {
-                    oldObj.common = oldObj.common || {};
-                    oldObj.type = 'enum';
-                    oldObj.common.members = oldObj.common.members || [];
-                    // add the missing object
-                    oldObj.common.members.push(objId);
-                    oldObj.common.members.sort();
-                    await this.props.socket.setObject(id, oldObj);
-                }
-            }
-        };
-        this.toolTipObjectCreating = () => {
-            var _b, _c;
-            const { t } = this.props;
-            let value = [
-                react_1.default.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
-                react_1.default.createElement("div", { key: 2 }, t('ra_Folder → State')),
-                react_1.default.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
-                react_1.default.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
-                react_1.default.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
-                react_1.default.createElement("div", { key: 6 }, t('ra_Channel → State')),
-                react_1.default.createElement("div", { key: 7, style: { height: 10 } }),
-                react_1.default.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
-                react_1.default.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
-            ];
-            if (this.state.selected.length || this.state.selectedNonObject) {
-                const id = this.state.selected[0] || this.state.selectedNonObject;
-                if (id.split('.').length < 2 || (this.objects[id] && ((_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.type) === 'state')) {
-                    // show default tooltip
-                }
-                else if (this.state.filter.expertMode) {
-                    switch ((_c = this.objects[id]) === null || _c === void 0 ? void 0 : _c.type) {
-                        case 'device':
-                            value = [
-                                react_1.default.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
-                                react_1.default.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
-                                react_1.default.createElement("div", { key: 7, style: { height: 10 } }),
-                                react_1.default.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
-                                react_1.default.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
-                            ];
-                            break;
-                        case 'folder':
-                            value = [
-                                react_1.default.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
-                                react_1.default.createElement("div", { key: 2 }, t('ra_Folder → State')),
-                                react_1.default.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
-                                react_1.default.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
-                                react_1.default.createElement("div", { key: 7, style: { height: 10 } }),
-                                react_1.default.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
-                                react_1.default.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
-                            ];
-                            break;
-                        case 'channel':
-                            value = [
-                                react_1.default.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
-                                react_1.default.createElement("div", { key: 1 }, t('ra_Channel → State')),
-                                react_1.default.createElement("div", { key: 7, style: { height: 10 } }),
-                                react_1.default.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
-                                react_1.default.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
-                            ];
-                            break;
-                        default:
-                            break;
-                    }
-                }
-                else if (id.startsWith('alias.0') || id.startsWith('0_userdata')) {
-                    value = [
-                        react_1.default.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
-                        react_1.default.createElement("div", { key: 2 }, t('ra_Folder → State')),
-                        react_1.default.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
-                        react_1.default.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
-                        react_1.default.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
-                        react_1.default.createElement("div", { key: 6 }, t('ra_Channel → State')),
-                        react_1.default.createElement("div", { key: 7, style: { height: 10 } }),
-                        react_1.default.createElement("div", { key: 7 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
-                        react_1.default.createElement("div", { key: 8 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
-                    ];
-                }
-            }
-            return value.length ? value : t('ra_Add new child object to selected parent');
-        };
-        this.renderTooltipAccessControl = (acl) => {
-            // acl ={object,state,owner,ownerGroup}
-            if (!acl) {
-                return null;
-            }
-            const check = [
-                {
-                    value: '0x400',
-                    valueNum: 0x400,
-                    title: 'read',
-                    group: 'Owner',
-                },
-                {
-                    value: '0x200',
-                    valueNum: 0x200,
-                    title: 'write',
-                    group: 'Owner',
-                },
-                {
-                    value: '0x40',
-                    valueNum: 0x40,
-                    title: 'read',
-                    group: 'Group',
-                },
-                {
-                    value: '0x20',
-                    valueNum: 0x20,
-                    title: 'write',
-                    group: 'Group',
-                },
-                {
-                    value: '0x4',
-                    valueNum: 0x4,
-                    title: 'read',
-                    group: 'Everyone',
-                },
-                {
-                    value: '0x2',
-                    valueNum: 0x2,
-                    title: 'write',
-                    group: 'Everyone',
-                },
-            ];
-            const arrayTooltipText = [];
-            const funcRenderStateObject = (value) => {
-                const rights = acl[value];
-                check.forEach((el, i) => {
-                    if (rights & el.valueNum) {
-                        arrayTooltipText.push(react_1.default.createElement("span", { key: value + i },
-                            this.texts[`acl${el.group}_${el.title}_${value}`],
-                            ",",
-                            react_1.default.createElement("span", { style: value === 'object' ? styles.rightsObject : styles.rightsState }, el.value)));
-                    }
-                });
-            };
-            arrayTooltipText.push(react_1.default.createElement("span", { key: "group" }, `${this.texts.ownerGroup}: ${(acl.ownerGroup || '').replace('system.group.', '')}`));
-            arrayTooltipText.push(react_1.default.createElement("span", { key: "owner" }, `${this.texts.ownerUser}: ${(acl.owner || '').replace('system.user.', '')}`));
-            funcRenderStateObject('object');
-            if (acl.state) {
-                funcRenderStateObject('state');
-            }
-            return arrayTooltipText.length ? (react_1.default.createElement("span", { style: styles.tooltipAccessControl }, arrayTooltipText.map(el => el))) : null;
-        };
-        this.resizerMouseMove = (e) => {
-            if (this.resizerActiveDiv) {
-                let width;
-                let widthNext;
-                if (this.resizeLeft) {
-                    width = this.resizerOldWidth - e.clientX + this.resizerPosition;
-                    widthNext = this.resizerOldWidthNext + e.clientX - this.resizerPosition;
-                }
-                else {
-                    width = this.resizerOldWidth + e.clientX - this.resizerPosition;
-                    widthNext = this.resizerOldWidthNext - e.clientX + this.resizerPosition;
-                }
-                if (this.resizerActiveName &&
-                    this.resizerNextName &&
-                    (!this.resizerMin || width > this.resizerMin) &&
-                    (!this.resizerNextMin || widthNext > this.resizerNextMin)) {
-                    this.resizerCurrentWidths[this.resizerActiveName] = width;
-                    this.resizerCurrentWidths[this.resizerNextName] = widthNext;
-                    this.resizerActiveDiv.style.width = `${width}px`;
-                    if (this.resizerNextDiv) {
-                        this.resizerNextDiv.style.width = `${widthNext}px`;
-                    }
-                    this.columnsVisibility[this.resizerActiveName] = width;
-                    this.columnsVisibility[this.resizerNextName] = widthNext;
-                    if (this.resizerNextName === 'nameHeader') {
-                        this.columnsVisibility.name = widthNext - this.state.scrollBarWidth;
-                        this.resizerCurrentWidths.name = widthNext - this.state.scrollBarWidth;
-                    }
-                    else if (this.resizerActiveName === 'nameHeader') {
-                        this.columnsVisibility.name = width - this.state.scrollBarWidth;
-                        this.resizerCurrentWidths.name = width - this.state.scrollBarWidth;
-                    }
-                    this.customWidth = true;
-                    if (this.resizeTimeout) {
-                        clearTimeout(this.resizeTimeout);
-                    }
-                    this.resizeTimeout = setTimeout(() => {
-                        this.resizeTimeout = null;
-                        this.forceUpdate();
-                    }, 200);
-                }
-            }
-        };
-        this.resizerMouseUp = () => {
-            this.localStorage.setItem(`${this.props.dialogName || 'App'}.table`, JSON.stringify(this.resizerCurrentWidths));
-            this.resizerActiveName = null;
-            this.resizerNextName = null;
-            this.resizerActiveDiv = null;
-            this.resizerNextDiv = null;
-            window.removeEventListener('mousemove', this.resizerMouseMove);
-            window.removeEventListener('mouseup', this.resizerMouseUp);
-        };
-        this.resizerMouseDown = (e) => {
-            this.storedWidths =
-                this.storedWidths ||
-                    JSON.parse(JSON.stringify(SCREEN_WIDTHS[this.props.width || 'lg']));
-            this.resizerCurrentWidths = this.resizerCurrentWidths || {};
-            this.resizerActiveDiv = e.target.parentNode;
-            this.resizerActiveName = this.resizerActiveDiv.dataset.name || null;
-            if (this.resizerActiveName) {
-                let i = 0;
-                if (e.target.dataset.left === 'true') {
-                    this.resizeLeft = true;
-                    this.resizerNextDiv = this.resizerActiveDiv.previousElementSibling;
-                    let handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
-                    while (this.resizerNextDiv && !handle && i < 10) {
-                        this.resizerNextDiv = this.resizerNextDiv.previousElementSibling;
-                        handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
-                        i++;
-                    }
-                    if ((handle === null || handle === void 0 ? void 0 : handle.dataset.left) !== 'true') {
-                        this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
-                    }
-                }
-                else {
-                    this.resizeLeft = false;
-                    this.resizerNextDiv = this.resizerActiveDiv.nextElementSibling;
-                    /* while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.iob-ob-resize-handler') && i < 10) {
-                        this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
-                        i++;
-                    } */
-                }
-                this.resizerNextName = this.resizerNextDiv.dataset.name || null;
-                this.resizerMin = parseInt(this.resizerActiveDiv.dataset.min, 10) || 0;
-                this.resizerNextMin = parseInt(this.resizerNextDiv.dataset.min, 10) || 0;
-                this.resizerPosition = e.clientX;
-                this.resizerCurrentWidths[this.resizerActiveName] = this.resizerActiveDiv.offsetWidth;
-                this.resizerOldWidth = this.resizerCurrentWidths[this.resizerActiveName];
-                if (this.resizerNextName) {
-                    this.resizerCurrentWidths[this.resizerNextName] = this.resizerNextDiv.offsetWidth;
-                    this.resizerOldWidthNext = this.resizerCurrentWidths[this.resizerNextName];
-                }
-                window.addEventListener('mousemove', this.resizerMouseMove);
-                window.addEventListener('mouseup', this.resizerMouseUp);
-            }
-        };
-        this.resizerReset = () => {
-            this.customWidth = false;
-            SCREEN_WIDTHS[this.props.width || 'lg'] = JSON.parse(JSON.stringify(this.storedWidths));
-            this.calculateColumnsVisibility();
-            this.localStorage.removeItem(`${this.props.dialogName || 'App'}.table`);
-            this.forceUpdate();
-        };
         const lastSelectedItemStr = this.localStorage.getItem(`${props.dialogName || 'App'}.objectSelected`) || '';
         this.selectFirst = '';
         if (lastSelectedItemStr.startsWith('[')) {
@@ -2279,7 +1865,7 @@ class ObjectBrowserClass extends react_1.Component {
                 const lastSelectedItems = JSON.parse(lastSelectedItemStr);
                 this.selectFirst = lastSelectedItems[0] || '';
             }
-            catch (_b) {
+            catch {
                 // ignore
             }
         }
@@ -2291,7 +1877,7 @@ class ObjectBrowserClass extends react_1.Component {
         try {
             expanded = JSON.parse(expandedStr);
         }
-        catch (_c) {
+        catch {
             expanded = [];
         }
         let filter;
@@ -2302,24 +1888,24 @@ class ObjectBrowserClass extends react_1.Component {
             try {
                 filter = JSON.parse(filterStr);
             }
-            catch (_d) {
-                filter = Object.assign({}, DEFAULT_FILTER);
+            catch {
+                filter = { ...DEFAULT_FILTER };
             }
         }
         else if (props.defaultFilters && typeof props.defaultFilters === 'object') {
-            filter = Object.assign({}, props.defaultFilters);
+            filter = { ...props.defaultFilters };
         }
         else {
-            filter = Object.assign({}, DEFAULT_FILTER);
+            filter = { ...DEFAULT_FILTER };
         }
         filter.expertMode =
             props.expertMode !== undefined
                 ? props.expertMode
                 : (window._sessionStorage || window.sessionStorage).getItem('App.expertMode') ===
                     'true';
-        this.tableRef = (0, react_1.createRef)();
+        this.tableRef = createRef();
         this.filterRefs = {};
-        Object.keys(DEFAULT_FILTER).forEach(name => (this.filterRefs[name] = (0, react_1.createRef)()));
+        Object.keys(DEFAULT_FILTER).forEach(name => (this.filterRefs[name] = createRef()));
         this.visibleCols = props.columns || SCREEN_WIDTHS[props.width || 'lg'].fields;
         // remove type column if only one type must be selected
         if (props.types && props.types.length === 1) {
@@ -2351,14 +1937,14 @@ class ObjectBrowserClass extends react_1.Component {
         try {
             columns = columnsStr ? JSON.parse(columnsStr) : null;
         }
-        catch (_e) {
+        catch {
             columns = null;
         }
         let columnsWidths = null; // this.localStorage.getItem(`${props.dialogName || 'App'}.columnsWidths`);
         try {
             columnsWidths = columnsWidths ? JSON.parse(columnsWidths) : {};
         }
-        catch (_f) {
+        catch {
             columnsWidths = {};
         }
         this.imagePrefix = props.imagePrefix || '.';
@@ -2379,7 +1965,7 @@ class ObjectBrowserClass extends react_1.Component {
                 ? JSON.parse(this.localStorage.getItem(`${props.dialogName || 'App'}.objectStatesView`) || '') || false
                 : false;
         }
-        catch (_g) {
+        catch {
             // ignore
         }
         this.state = {
@@ -2499,7 +2085,7 @@ class ObjectBrowserClass extends react_1.Component {
                 });
                 this.customWidth = true;
             }
-            catch (_h) {
+            catch {
                 // ignore
             }
         }
@@ -2514,7 +2100,7 @@ class ObjectBrowserClass extends react_1.Component {
             const objects = (this.props.objectsWorker
                 ? await this.props.objectsWorker.getObjects(update)
                 : await props.socket.getObjects(update, true)) || {};
-            if (props.types && Connection_1.default.isWeb()) {
+            if (props.types && Connection.isWeb()) {
                 for (let i = 0; i < props.types.length; i++) {
                     // admin has ALL objects
                     // web has only state, channel, device, enum, and system.config
@@ -2530,7 +2116,7 @@ class ObjectBrowserClass extends react_1.Component {
             }
             this.systemConfig =
                 this.systemConfig ||
-                    (objects === null || objects === void 0 ? void 0 : objects['system.config']) ||
+                    objects?.['system.config'] ||
                     (await props.socket.getObject('system.config'));
             this.systemConfig.common = this.systemConfig.common || {};
             this.systemConfig.common.defaultNewAcl = this.systemConfig.common.defaultNewAcl || {
@@ -2631,7 +2217,7 @@ class ObjectBrowserClass extends react_1.Component {
             if (node &&
                 !applyFilter(node, this.state.filter, this.props.lang, this.objects, undefined, undefined, props.customFilter, props.types)) {
                 // reset filter
-                this.setState({ filter: Object.assign({}, DEFAULT_FILTER), columnsForAdmin }, () => {
+                this.setState({ filter: { ...DEFAULT_FILTER }, columnsForAdmin }, () => {
                     this.setState({ loaded: true, updating: false }, () => this.expandAllSelected(() => this.onAfterSelect()));
                 });
             }
@@ -2649,7 +2235,7 @@ class ObjectBrowserClass extends react_1.Component {
     static isNonExpertId(
     /** id to test */
     id) {
-        return !!__classPrivateFieldGet(_a, _a, "f", _ObjectBrowserClass_NON_EXPERT_NAMESPACES).find(saveNamespace => id.startsWith(saveNamespace));
+        return !!ObjectBrowserClass.#NON_EXPERT_NAMESPACES.find(saveNamespace => id.startsWith(saveNamespace));
     }
     expandAllSelected(cb) {
         const expanded = [...this.state.expanded];
@@ -2678,15 +2264,14 @@ class ObjectBrowserClass extends react_1.Component {
      * @param isDouble is double click
      */
     onAfterSelect(isDouble) {
-        var _b;
-        if (((_b = this.state.selected) === null || _b === void 0 ? void 0 : _b.length) && this.state.selected[0]) {
+        if (this.state.selected?.length && this.state.selected[0]) {
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, this.state.selected[0]);
             // remove a task to select the pre-selected item if now we want to see another object
             if (this.selectFirst && this.selectFirst !== this.state.selected[0]) {
                 this.selectFirst = '';
             }
             if (this.state.selected.length === 1 && this.objects[this.state.selected[0]]) {
-                const name = Utils_1.default.getObjectName(this.objects, this.state.selected[0], null, {
+                const name = Utils.getObjectName(this.objects, this.state.selected[0], null, {
                     language: this.props.lang,
                 });
                 if (this.props.onSelect) {
@@ -2709,7 +2294,7 @@ class ObjectBrowserClass extends react_1.Component {
         let changed = false;
         if (props.expertMode !== undefined && props.expertMode !== state.filter.expertMode) {
             changed = true;
-            newState.filter = Object.assign({}, state.filter);
+            newState.filter = { ...state.filter };
             newState.filter.expertMode = props.expertMode;
         }
         return changed ? newState : null;
@@ -2757,7 +2342,6 @@ class ObjectBrowserClass extends react_1.Component {
      * Show the deletion dialog for a given object
      */
     showDeleteDialog(options) {
-        var _b, _c;
         const { id, obj, item } = options;
         // calculate the number of children
         const keys = Object.keys(this.objects);
@@ -2773,9 +2357,29 @@ class ObjectBrowserClass extends react_1.Component {
             }
         }
         if (this.props.onObjectDelete) {
-            this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_c = obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete), count + 1);
+            this.props.onObjectDelete(id, !!item.children?.length, !obj.common?.dontDelete, count + 1);
         }
     }
+    /**
+     * Context menu handler.
+     */
+    onContextMenu = (e) => {
+        // console.log(`CONTEXT MENU: ${this.contextMenu ? Date.now() - this.contextMenu.ts : 'false'}`);
+        if (this.contextMenu && Date.now() - this.contextMenu.ts < 2000) {
+            e.preventDefault();
+            this.setState({
+                showContextMenu: {
+                    item: this.contextMenu.item,
+                    position: { left: e.clientX + 2, top: e.clientY - 6 },
+                },
+            });
+        }
+        else if (this.state.showContextMenu) {
+            e.preventDefault();
+            this.setState({ showContextMenu: null });
+        }
+        this.contextMenu = null;
+    };
     /**
      * Called when component is mounted.
      */
@@ -2794,12 +2398,12 @@ class ObjectBrowserClass extends react_1.Component {
      * Renders the error dialog.
      */
     renderErrorDialog() {
-        return this.state.error ? (react_1.default.createElement(material_1.Dialog, { open: !0, maxWidth: "sm", fullWidth: true, onClose: () => this.setState({ error: '' }), "aria-labelledby": "error-dialog-title", "aria-describedby": "error-dialog-description" },
-            react_1.default.createElement(material_1.DialogTitle, { id: "alert-dialog-title" }, this.props.t('ra_Error')),
-            react_1.default.createElement(material_1.DialogContent, null,
-                react_1.default.createElement(material_1.DialogContentText, { id: "alert-dialog-description" }, this.state.error)),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ error: '' }), color: "primary", autoFocus: true, startIcon: react_1.default.createElement(icons_material_1.Check, null) }, this.props.t('ra_Ok'))))) : null;
+        return this.state.error ? (React.createElement(Dialog, { open: !0, maxWidth: "sm", fullWidth: true, onClose: () => this.setState({ error: '' }), "aria-labelledby": "error-dialog-title", "aria-describedby": "error-dialog-description" },
+            React.createElement(DialogTitle, { id: "alert-dialog-title" }, this.props.t('ra_Error')),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, { id: "alert-dialog-description" }, this.state.error)),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { variant: "contained", onClick: () => this.setState({ error: '' }), color: "primary", autoFocus: true, startIcon: React.createElement(IconCheck, null) }, this.props.t('ra_Ok'))))) : null;
     }
     /**
      * Show the error dialog.
@@ -2875,30 +2479,27 @@ class ObjectBrowserClass extends react_1.Component {
         }
         return cols
             .filter(id => (isLast && (id === 'val' || id === 'buttons')) || (!isLast && id !== 'val' && id !== 'buttons'))
-            .map(id => {
-            var _b;
-            return (react_1.default.createElement(material_1.ListItemButton, { onClick: () => {
-                    if (!this.state.columnsAuto && id !== 'id') {
-                        const columns = [...(this.state.columns || [])];
-                        const pos = columns.indexOf(id);
-                        if (pos === -1) {
-                            columns.push(id);
-                            columns.sort();
-                        }
-                        else {
-                            columns.splice(pos, 1);
-                        }
-                        this.localStorage.setItem(`${this.props.dialogName || 'App'}.columns`, JSON.stringify(columns));
-                        this.calculateColumnsVisibility(null, columns);
-                        this.setState({ columns });
+            .map(id => (React.createElement(ListItemButton, { onClick: () => {
+                if (!this.state.columnsAuto && id !== 'id') {
+                    const columns = [...(this.state.columns || [])];
+                    const pos = columns.indexOf(id);
+                    if (pos === -1) {
+                        columns.push(id);
+                        columns.sort();
                     }
-                }, key: id },
-                react_1.default.createElement(material_1.Checkbox, { edge: "start", disabled: id === 'id' || this.state.columnsAuto, checked: id === 'id' ||
-                        !!(this.state.columnsAuto
-                            ? this.visibleCols.includes(id)
-                            : (_b = this.state.columns) === null || _b === void 0 ? void 0 : _b.includes(id)), disableRipple: true }),
-                react_1.default.createElement(material_1.ListItemText, { primary: this.texts[`filter_${id}`] || this.props.t(`ra_${id}`) })));
-        });
+                    else {
+                        columns.splice(pos, 1);
+                    }
+                    this.localStorage.setItem(`${this.props.dialogName || 'App'}.columns`, JSON.stringify(columns));
+                    this.calculateColumnsVisibility(null, columns);
+                    this.setState({ columns });
+                }
+            }, key: id },
+            React.createElement(Checkbox, { edge: "start", disabled: id === 'id' || this.state.columnsAuto, checked: id === 'id' ||
+                    !!(this.state.columnsAuto
+                        ? this.visibleCols.includes(id)
+                        : this.state.columns?.includes(id)), disableRipple: true }),
+            React.createElement(ListItemText, { primary: this.texts[`filter_${id}`] || this.props.t(`ra_${id}`) }))));
     }
     /**
      * Renders the columns' selector.
@@ -2907,20 +2508,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, sx: {
-                '& .MuiPaper-root': Utils_1.default.getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
+        return (React.createElement(Dialog, { onClose: () => this.setState({ columnsSelectorShow: false }), open: !0, sx: {
+                '& .MuiPaper-root': Utils.getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
             } },
-            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: () => {
+            React.createElement(DialogTitle, { sx: styles.fontSizeTitle }, this.props.t('ra_Configure')),
+            React.createElement(DialogContent, { sx: styles.fontSizeTitle },
+                React.createElement(FormControlLabel, { style: styles.switchColumnAuto, control: React.createElement(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, { style: styles.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.linesEnabled, onChange: () => {
+                React.createElement(FormControlLabel, { style: styles.switchColumnAuto, control: React.createElement(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, { style: styles.switchColumnAuto, control: react_1.default.createElement(material_1.Switch, { checked: this.state.columnsAuto, onChange: () => {
+                React.createElement(FormControlLabel, { style: styles.switchColumnAuto, control: React.createElement(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);
@@ -2935,39 +2536,36 @@ class ObjectBrowserClass extends react_1.Component {
                                 this.setState({ columnsAuto: false });
                             }
                         } }), label: this.props.t('ra_Auto (no custom columns)') }),
-                react_1.default.createElement(material_1.List, null,
+                React.createElement(List, null,
                     this._renderDefinedList(false),
                     this.state.columnsForAdmin &&
                         Object.keys(this.state.columnsForAdmin)
                             .sort()
                             .map(adapter => this.state.columnsForAdmin &&
-                            this.state.columnsForAdmin[adapter].map(column => {
-                                var _b;
-                                return (react_1.default.createElement(material_1.ListItemButton, { onClick: () => {
-                                        if (!this.state.columnsAuto) {
-                                            const columns = [...(this.state.columns || [])];
-                                            const id = `_${adapter}_${column.path}`;
-                                            const pos = columns.indexOf(id);
-                                            if (pos === -1) {
-                                                columns.push(id);
-                                                columns.sort();
-                                            }
-                                            else {
-                                                columns.splice(pos, 1);
-                                            }
-                                            this.calculateColumnsVisibility(null, columns);
-                                            this.localStorage.setItem(`${this.props.dialogName || 'App'}.columns`, JSON.stringify(columns));
-                                            this.setState({ columns });
+                            this.state.columnsForAdmin[adapter].map(column => (React.createElement(ListItemButton, { onClick: () => {
+                                    if (!this.state.columnsAuto) {
+                                        const columns = [...(this.state.columns || [])];
+                                        const id = `_${adapter}_${column.path}`;
+                                        const pos = columns.indexOf(id);
+                                        if (pos === -1) {
+                                            columns.push(id);
+                                            columns.sort();
                                         }
-                                    }, key: `${adapter}_${column.name}` },
-                                    react_1.default.createElement(material_1.ListItemIcon, null,
-                                        react_1.default.createElement(material_1.Checkbox, { disabled: this.state.columnsAuto, edge: "start", checked: !this.state.columnsAuto &&
-                                                ((_b = this.state.columns) === null || _b === void 0 ? void 0 : _b.includes(`_${adapter}_${column.path}`)), disableRipple: true })),
-                                    react_1.default.createElement(material_1.ListItemText, { primary: `${column.name} (${adapter})` })));
-                            })),
+                                        else {
+                                            columns.splice(pos, 1);
+                                        }
+                                        this.calculateColumnsVisibility(null, columns);
+                                        this.localStorage.setItem(`${this.props.dialogName || 'App'}.columns`, JSON.stringify(columns));
+                                        this.setState({ columns });
+                                    }
+                                }, key: `${adapter}_${column.name}` },
+                                React.createElement(ListItemIcon, null,
+                                    React.createElement(Checkbox, { disabled: this.state.columnsAuto, edge: "start", checked: !this.state.columnsAuto &&
+                                            this.state.columns?.includes(`_${adapter}_${column.path}`), disableRipple: true })),
+                                React.createElement(ListItemText, { primary: `${column.name} (${adapter})` }))))),
                     this._renderDefinedList(true))),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ columnsSelectorShow: false }), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.texts.close))));
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { variant: "contained", onClick: () => this.setState({ columnsSelectorShow: false }), color: "primary", startIcon: React.createElement(IconClose, null) }, this.texts.close))));
     }
     async getAdditionalColumns() {
         try {
@@ -3019,15 +2617,49 @@ class ObjectBrowserClass extends react_1.Component {
         }
         return null;
     }
+    /**
+     * Called when a state changes.
+     */
+    onStateChange = (id, state) => {
+        console.log(`> stateChange ${id}`);
+        if (this.states[id]) {
+            const item = this.findItem(id);
+            if (item?.data.state) {
+                item.data.state = undefined;
+            }
+        }
+        if (state) {
+            this.states[id] = state;
+        }
+        else {
+            delete this.states[id];
+        }
+        if (!this.pausedSubscribes) {
+            if (!this.statesUpdateTimer) {
+                this.statesUpdateTimer = setTimeout(() => {
+                    this.statesUpdateTimer = null;
+                    this.forceUpdate();
+                }, 300);
+            }
+        }
+        else if (this.statesUpdateTimer) {
+            clearTimeout(this.statesUpdateTimer);
+            this.statesUpdateTimer = null;
+        }
+    };
     parseObjectForAdmins(columnsForAdmin, obj) {
         if (obj.common && obj.common.adminColumns && obj.common.name) {
-            let columns = obj.common.adminColumns;
+            const columns = obj.common.adminColumns;
+            let aColumns;
             if (columns && typeof columns !== 'object') {
-                columns = [columns];
+                aColumns = [columns];
+            }
+            else if (columns) {
+                aColumns = columns;
             }
             let cColumns;
             if (columns) {
-                cColumns = columns
+                cColumns = aColumns
                     .map((_item) => {
                     if (typeof _item !== 'object') {
                         return { path: _item, name: _item.split('.').pop() };
@@ -3063,7 +2695,7 @@ class ObjectBrowserClass extends react_1.Component {
                         objTypes: item.objTypes,
                     };
                 })
-                    .filter(item => item);
+                    .filter((item) => item);
             }
             else {
                 cColumns = null;
@@ -3078,6 +2710,37 @@ class ObjectBrowserClass extends react_1.Component {
         }
         return columnsForAdmin;
     }
+    onObjectChangeFromWorker = (events) => {
+        if (Array.isArray(events)) {
+            let newState = null;
+            events.forEach(event => {
+                const { newInnerState, filtered } = this.processOnObjectChangeElement(event.id, event.obj);
+                if (filtered) {
+                    return;
+                }
+                if (newInnerState && newState) {
+                    Object.assign(newState, newInnerState);
+                }
+                else {
+                    newState = newInnerState;
+                }
+            });
+            if (newState) {
+                this.setState(newState);
+            }
+            this.afterObjectUpdated();
+        }
+    };
+    onObjectChange = (id, obj) => {
+        const { newInnerState, filtered } = this.processOnObjectChangeElement(id, obj);
+        if (filtered) {
+            return;
+        }
+        if (newInnerState) {
+            this.setState(newInnerState);
+        }
+        this.afterObjectUpdated();
+    };
     afterObjectUpdated() {
         if (!this.objectsUpdateTimer && this.objects) {
             this.objectsUpdateTimer = setTimeout(() => {
@@ -3101,8 +2764,7 @@ class ObjectBrowserClass extends react_1.Component {
     // This function is called when the user changes the alias of an object.
     // It updates the aliasMap and returns true if the aliasMap has changed.
     updateAliases(aliasId) {
-        var _b, _c, _d;
-        if (!this.objects || !((_b = this.info) === null || _b === void 0 ? void 0 : _b.aliasesMap) || !(aliasId === null || aliasId === void 0 ? void 0 : aliasId.startsWith('alias.'))) {
+        if (!this.objects || !this.info?.aliasesMap || !aliasId?.startsWith('alias.')) {
             return;
         }
         // Rebuild aliases map
@@ -3110,7 +2772,7 @@ class ObjectBrowserClass extends react_1.Component {
         this.info.aliasesMap = {};
         for (const id of aliasesIds) {
             const obj = this.objects[id];
-            if ((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.common) === null || _c === void 0 ? void 0 : _c.alias) === null || _d === void 0 ? void 0 : _d.id) {
+            if (obj?.common?.alias?.id) {
                 if (typeof obj.common.alias.id === 'string') {
                     const usedId = obj.common.alias.id;
                     if (!this.info.aliasesMap[usedId]) {
@@ -3152,7 +2814,7 @@ class ObjectBrowserClass extends react_1.Component {
      */
     processOnObjectChangeElement(id, obj) {
         console.log(`> objectChange ${id}`);
-        const type = obj === null || obj === void 0 ? void 0 : obj.type;
+        const type = obj?.type;
         // If the object is filtered out, we don't need to update the React state
         if (obj &&
             typeof this.props.filterFunc === 'function' &&
@@ -3165,7 +2827,7 @@ class ObjectBrowserClass extends react_1.Component {
             return { newInnerState: null, filtered: true };
         }
         let newInnerState = null;
-        if (id.startsWith('system.adapter.') && (obj === null || obj === void 0 ? void 0 : obj.type) === 'adapter') {
+        if (id.startsWith('system.adapter.') && obj?.type === 'adapter') {
             const columnsForAdmin = JSON.parse(JSON.stringify(this.state.columnsForAdmin));
             this.parseObjectForAdmins(columnsForAdmin, obj);
             if (JSON.stringify(this.state.columnsForAdmin) !== JSON.stringify(columnsForAdmin)) {
@@ -3219,7 +2881,7 @@ class ObjectBrowserClass extends react_1.Component {
     }
     onFilter(name, value) {
         this.filterTimer = null;
-        const filter = Object.assign({}, this.state.filter);
+        const filter = { ...this.state.filter };
         Object.keys(this.filterRefs).forEach(_name => {
             if (this.filterRefs[_name] && this.filterRefs[_name].current) {
                 const filterRef = this.filterRefs[_name].current;
@@ -3243,7 +2905,7 @@ class ObjectBrowserClass extends react_1.Component {
         }
     }
     clearFilter() {
-        const filter = Object.assign({}, this.state.filter);
+        const filter = { ...this.state.filter };
         Object.keys(this.filterRefs).forEach(name => {
             if (this.filterRefs[name] && this.filterRefs[name].current) {
                 const filterRef = this.filterRefs[name].current;
@@ -3267,40 +2929,37 @@ class ObjectBrowserClass extends react_1.Component {
         return !someNotEmpty;
     }
     getFilterInput(filterName) {
-        var _b, _c, _d;
-        return (react_1.default.createElement(material_1.FormControl, { sx: this.styles.filterInput, key: `${filterName}_${this.state.filterKey}`, 
+        return (React.createElement(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: () => {
+            React.createElement(Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
                     if (this.filterTimer) {
                         clearTimeout(this.filterTimer);
                     }
                     this.filterTimer = setTimeout(() => this.onFilter(), 400);
                 }, autoComplete: "off" }),
-            ((_d = (_c = (_b = this.filterRefs[filterName]) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.firstChild) === null || _d === void 0 ? void 0 : _d.value) ? (react_1.default.createElement("div", { style: {
+            this.filterRefs[filterName]?.current?.firstChild?.value ? (React.createElement("div", { style: {
                     position: 'absolute',
                     right: 0,
                 } },
-                react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => {
-                        var _b;
-                        ((_b = this.filterRefs[filterName].current) === null || _b === void 0 ? void 0 : _b.firstChild).value = '';
+                React.createElement(IconButton, { size: "small", onClick: () => {
+                        (this.filterRefs[filterName].current?.firstChild).value = '';
                         this.onFilter(filterName, '');
                     } },
-                    react_1.default.createElement(icons_material_1.Close, null)))) : null));
+                    React.createElement(IconClose, null)))) : null));
     }
     getFilterSelect(name, values) {
-        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], sx: styles.headerCellInput, className: "no-underline", onChange: () => {
+        const hasIcons = !!values?.find(item => item.icon);
+        return (React.createElement("div", { style: { position: 'relative' } },
+            React.createElement(Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], sx: styles.headerCellInput, className: "no-underline", onChange: () => {
                     if (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", { style: styles.selectNone }, this.texts[`filter_${name}`])), values === null || values === void 0 ? void 0 :
-                values.map(item => {
+                React.createElement(MenuItem, { key: "empty", value: "" },
+                    React.createElement("span", { style: styles.selectNone }, this.texts[`filter_${name}`])),
+                values?.map(item => {
                     let id;
                     let _name;
                     let icon;
@@ -3313,51 +2972,44 @@ class ObjectBrowserClass extends react_1.Component {
                         id = item;
                         _name = item;
                     }
-                    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),
+                    return (React.createElement(MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
+                        icon || (hasIcons ? React.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(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);
+            this.filterRefs[name]?.current?.childNodes[1]?.value ? (React.createElement(Box, { component: "div", sx: styles.selectClearButton },
+                React.createElement(IconButton, { size: "small", onClick: () => {
+                        const newFilter = { ...this.state.filter };
                         newFilter[name] = '';
-                        ((_b = this.filterRefs[name].current) === null || _b === void 0 ? void 0 : _b.childNodes[1]).value = '';
+                        (this.filterRefs[name].current?.childNodes[1]).value = '';
                         this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(newFilter));
                         this.setState({ filter: newFilter, filterKey: this.state.filterKey + 1 }, () => this.props.onFilterChanged && this.props.onFilterChanged(newFilter));
                     } },
-                    react_1.default.createElement(icons_material_1.Close, null)))) : null));
+                    React.createElement(IconClose, null)))) : null));
     }
     getFilterSelectRole() {
         return this.getFilterSelect('role', this.info.roles);
     }
     getFilterSelectRoom() {
-        const rooms = this.info.roomEnums.map(id => {
-            var _b, _c, _d, _e;
-            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) || '', style: styles.selectIcon })),
-            });
-        });
+        const rooms = this.info.roomEnums.map(id => ({
+            name: getName(this.objects[id]?.common?.name, this.props.lang) || id.split('.').pop(),
+            value: id,
+            icon: (React.createElement(Icon, { src: this.objects[id]?.common?.icon || '', style: styles.selectIcon })),
+        }));
         return this.getFilterSelect('room', rooms);
     }
     getFilterSelectFunction() {
-        const func = this.info.funcEnums.map(id => {
-            var _b, _c, _d, _e;
-            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) || '', style: styles.selectIcon })),
-            });
-        });
+        const func = this.info.funcEnums.map(id => ({
+            name: getName(this.objects[id]?.common?.name, this.props.lang) || id.split('.').pop(),
+            value: id,
+            icon: (React.createElement(Icon, { src: this.objects[id]?.common?.icon || '', style: styles.selectIcon })),
+        }));
         return this.getFilterSelect('func', func);
     }
     getFilterSelectType() {
         const types = this.info.types.map(type => ({
             name: type,
             value: type,
-            icon: exports.ITEM_IMAGES[type] || null,
+            icon: ITEM_IMAGES[type] || null,
         }));
         return this.getFilterSelect('type', types);
     }
@@ -3366,17 +3018,16 @@ 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.props.lang, this.imagePrefix) || '', style: styles.selectIcon })),
+                icon: id === '_' ? null : (React.createElement(Icon, { src: getSelectIdIconFromObjects(this.objects, id, this.props.lang, this.imagePrefix) || '', style: styles.selectIcon })),
             }));
             return this.getFilterSelect('custom', customs);
         }
         return null;
     }
     onExpandAll(root, expanded) {
-        var _b;
         const _root = root || this.root;
         expanded = expanded || [];
-        (_b = _root === null || _root === void 0 ? void 0 : _root.children) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
+        _root?.children?.forEach((item) => {
             if (item.data.sumVisibility) {
                 expanded.push(item.data.id);
                 this.onExpandAll(item, expanded);
@@ -3394,10 +3045,9 @@ class ObjectBrowserClass extends react_1.Component {
         this.setState({ expanded: [], depth: 0, selected: [] }, () => this.onAfterSelect());
     }
     expandDepth(root, depth, expanded) {
-        var _b;
         root = root || this.root;
         if (depth > 0) {
-            (_b = root.children) === null || _b === void 0 ? void 0 : _b.forEach(item => {
+            root.children?.forEach(item => {
                 if (item.data.sumVisibility) {
                     if (!binarySearch(expanded, item.data.id)) {
                         expanded.push(item.data.id);
@@ -3432,11 +3082,76 @@ class ObjectBrowserClass extends react_1.Component {
     onCollapseVisible() {
         if (this.state.depth > 0) {
             const depth = this.state.depth - 1;
-            const expanded = _a.collapseDepth(depth, this.state.expanded);
+            const expanded = ObjectBrowserClass.collapseDepth(depth, this.state.expanded);
             this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectExpanded`, JSON.stringify(expanded));
             this.setState({ depth, expanded });
         }
     }
+    getEnumsForId = (id) => {
+        const result = [];
+        this.info.enums.forEach(_id => {
+            if (this.objects[_id]?.common?.members?.includes(id)) {
+                const enumItem = {
+                    _id: this.objects[_id]._id,
+                    common: JSON.parse(JSON.stringify(this.objects[_id].common)),
+                    native: this.objects[_id].native,
+                    type: 'enum',
+                };
+                if (enumItem.common) {
+                    delete enumItem.common.members;
+                    delete enumItem.common.custom;
+                    // @ts-expect-error deprecated attribute
+                    delete enumItem.common.mobile;
+                }
+                result.push(enumItem);
+            }
+        });
+        return result.length ? result : undefined;
+    };
+    _createAllEnums = async (enums, objId) => {
+        for (let e = 0; e < enums.length; e++) {
+            const item = enums[e];
+            let id;
+            let newObj;
+            // some admin version delivered enums as string
+            if (typeof item === 'object') {
+                newObj = item;
+                id = newObj._id;
+            }
+            else {
+                id = item;
+            }
+            let oldObj = this.objects[id];
+            // if enum does not exist
+            if (!oldObj) {
+                // create a new one
+                oldObj =
+                    newObj ||
+                        {
+                            _id: id,
+                            common: {
+                                name: id.split('.').pop(),
+                                members: [],
+                            },
+                            native: {},
+                            type: 'enum',
+                        };
+                oldObj.common = oldObj.common || {};
+                oldObj.common.members = [objId];
+                oldObj.type = 'enum';
+                await this.props.socket.setObject(id, oldObj);
+            }
+            else if (!oldObj.common?.members?.includes(objId)) {
+                oldObj.common = oldObj.common || {};
+                oldObj.type = 'enum';
+                oldObj.common.members = oldObj.common.members || [];
+                // add the missing object
+                oldObj.common.members.push(objId);
+                oldObj.common.members.sort();
+                await this.props.socket.setObject(id, oldObj);
+            }
+        }
+    };
     async loadObjects(objs) {
         if (objs) {
             for (const id in objs) {
@@ -3527,7 +3242,6 @@ class ObjectBrowserClass extends react_1.Component {
     async _exportObjects(
     /**  Options to filter/reduce the output */
     options) {
-        var _b;
         if (options.isAll) {
             generateFile('allObjects.json', this.objects, options);
             return;
@@ -3542,7 +3256,7 @@ class ObjectBrowserClass extends react_1.Component {
         for (const key of ids) {
             result[key] = JSON.parse(JSON.stringify(this.objects[key]));
             // read states values
-            if (((_b = result[key]) === null || _b === void 0 ? void 0 : _b.type) === 'state' && !options.noStatesByExportImport) {
+            if (result[key]?.type === 'state' && !options.noStatesByExportImport) {
                 const state = await this.props.socket.getState(key);
                 if (state) {
                     result[key].val = state.val;
@@ -3563,55 +3277,53 @@ class ObjectBrowserClass extends react_1.Component {
         if (this.state.showExportDialog === false) {
             return null;
         }
-        return (react_1.default.createElement(material_1.Dialog, { open: !0, maxWidth: "lg" },
-            react_1.default.createElement(material_1.DialogTitle, null, this.props.t('ra_Select type of export')),
-            react_1.default.createElement(material_1.DialogContent, null,
-                react_1.default.createElement(material_1.DialogContentText, null, this.state.filter.expertMode || this.state.showAllExportOptions ? (react_1.default.createElement(react_1.default.Fragment, null,
+        return (React.createElement(Dialog, { open: !0, maxWidth: "lg" },
+            React.createElement(DialogTitle, null, this.props.t('ra_Select type of export')),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, null, this.state.filter.expertMode || this.state.showAllExportOptions ? (React.createElement(React.Fragment, null,
                     this.props.t('ra_You can export all objects or just the selected branch.'),
-                    react_1.default.createElement("br", null),
+                    React.createElement("br", null),
                     this.props.t('ra_Selected %s object(s)', this.state.showExportDialog),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: this.state.noStatesByExportImport, onChange: e => this.setState({ noStatesByExportImport: e.target.checked }) }), label: this.props.t('ra_Do not export values of states') }),
-                    react_1.default.createElement("br", null),
+                    React.createElement("br", null),
+                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.noStatesByExportImport, onChange: e => this.setState({ noStatesByExportImport: e.target.checked }) }), label: this.props.t('ra_Do not export values of states') }),
+                    React.createElement("br", null),
                     this.props.t('These options can reduce the size of the export file:'),
-                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: this.state.beautifyJsonExport, onChange: e => this.setState({ beautifyJsonExport: e.target.checked }) }), label: this.props.t('Beautify JSON output') }),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: this.state.excludeSystemRepositoriesFromExport, onChange: e => this.setState({ excludeSystemRepositoriesFromExport: e.target.checked }) }), label: this.props.t('Exclude system repositories from export JSON') }),
-                    react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: this.state.excludeTranslations, onChange: e => this.setState({ excludeTranslations: e.target.checked }) }), label: this.props.t('Exclude translations (except english) from export JSON') }))) : null)),
-            react_1.default.createElement(material_1.DialogActions, null,
-                this.state.filter.expertMode || this.state.showAllExportOptions ? (react_1.default.createElement(material_1.Button, { color: "grey", variant: "outlined", onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }, () => this._exportObjects({
+                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.beautifyJsonExport, onChange: e => this.setState({ beautifyJsonExport: e.target.checked }) }), label: this.props.t('Beautify JSON output') }),
+                    React.createElement("br", null),
+                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.excludeSystemRepositoriesFromExport, onChange: e => this.setState({ excludeSystemRepositoriesFromExport: e.target.checked }) }), label: this.props.t('Exclude system repositories from export JSON') }),
+                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.excludeTranslations, onChange: e => this.setState({ excludeTranslations: e.target.checked }) }), label: this.props.t('Exclude translations (except english) from export JSON') }))) : null)),
+            React.createElement(DialogActions, null,
+                this.state.filter.expertMode || this.state.showAllExportOptions ? (React.createElement(Button, { color: "grey", variant: "outlined", onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }, () => this._exportObjects({
                         isAll: true,
                         noStatesByExportImport: this.state.noStatesByExportImport,
                         beautify: this.state.beautifyJsonExport,
                         excludeSystemRepositories: this.state.excludeSystemRepositoriesFromExport,
                         excludeTranslations: this.state.excludeTranslations,
                     })) },
-                    react_1.default.createElement("span", { style: { marginRight: 8 } }, this.props.t('ra_All objects')),
+                    React.createElement("span", { style: { marginRight: 8 } }, this.props.t('ra_All objects')),
                     "(",
                     Object.keys(this.objects).length,
-                    ")")) : (react_1.default.createElement(material_1.Button, { color: "grey", variant: "outlined", startIcon: react_1.default.createElement(IconExpert_1.default, null), onClick: () => this.setState({ showAllExportOptions: true }) }, this.props.t('ra_Advanced options'))),
-                react_1.default.createElement(material_1.Button, { color: "primary", variant: "contained", autoFocus: true, onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }, () => this._exportObjects({
+                    ")")) : (React.createElement(Button, { color: "grey", variant: "outlined", startIcon: React.createElement(IconExpert, null), onClick: () => this.setState({ showAllExportOptions: true }) }, this.props.t('ra_Advanced options'))),
+                React.createElement(Button, { color: "primary", variant: "contained", autoFocus: true, onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }, () => this._exportObjects({
                         isAll: false,
                         noStatesByExportImport: this.state.noStatesByExportImport,
                         beautify: this.state.beautifyJsonExport,
                         excludeSystemRepositories: this.state.excludeSystemRepositoriesFromExport,
                         excludeTranslations: this.state.excludeTranslations,
                     })) },
-                    react_1.default.createElement("span", { style: { marginRight: 8 } }, this.props.t('ra_Only selected')),
+                    React.createElement("span", { style: { marginRight: 8 } }, this.props.t('ra_Only selected')),
                     "(",
                     this.state.showExportDialog,
                     ")"),
-                react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }), startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('ra_Cancel')))));
+                React.createElement(Button, { color: "grey", variant: "contained", onClick: () => this.setState({ showExportDialog: false, showAllExportOptions: false }), startIcon: React.createElement(IconClose, null) }, this.props.t('ra_Cancel')))));
     }
     handleJsonUpload(evt) {
-        var _b;
         const target = evt.target;
-        const f = ((_b = target.files) === null || _b === void 0 ? void 0 : _b.length) && target.files[0];
+        const f = target.files?.length && target.files[0];
         if (f) {
             const r = new FileReader();
             r.onload = async (e) => {
-                var _b;
-                const contents = (_b = e.target) === null || _b === void 0 ? void 0 : _b.result;
+                const contents = e.target?.result;
                 try {
                     const json = JSON.parse(contents);
                     const len = Object.keys(json).length;
@@ -3683,6 +3395,75 @@ class ObjectBrowserClass extends react_1.Component {
             window.alert(this.props.t('ra_Failed to open JSON File'));
         }
     }
+    toolTipObjectCreating = () => {
+        const { t } = this.props;
+        let value = [
+            React.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
+            React.createElement("div", { key: 2 }, t('ra_Folder → State')),
+            React.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
+            React.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
+            React.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
+            React.createElement("div", { key: 6 }, t('ra_Channel → State')),
+            React.createElement("div", { key: 7, style: { height: 10 } }),
+            React.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
+            React.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
+        ];
+        if (this.state.selected.length || this.state.selectedNonObject) {
+            const id = this.state.selected[0] || this.state.selectedNonObject;
+            if (id.split('.').length < 2 || (this.objects[id] && this.objects[id]?.type === 'state')) {
+                // show default tooltip
+            }
+            else if (this.state.filter.expertMode) {
+                switch (this.objects[id]?.type) {
+                    case 'device':
+                        value = [
+                            React.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
+                            React.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
+                            React.createElement("div", { key: 7, style: { height: 10 } }),
+                            React.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
+                            React.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
+                        ];
+                        break;
+                    case 'folder':
+                        value = [
+                            React.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
+                            React.createElement("div", { key: 2 }, t('ra_Folder → State')),
+                            React.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
+                            React.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
+                            React.createElement("div", { key: 7, style: { height: 10 } }),
+                            React.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
+                            React.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
+                        ];
+                        break;
+                    case 'channel':
+                        value = [
+                            React.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
+                            React.createElement("div", { key: 1 }, t('ra_Channel → State')),
+                            React.createElement("div", { key: 7, style: { height: 10 } }),
+                            React.createElement("div", { key: 8 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
+                            React.createElement("div", { key: 9 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
+                        ];
+                        break;
+                    default:
+                        break;
+                }
+            }
+            else if (id.startsWith('alias.0') || id.startsWith('0_userdata')) {
+                value = [
+                    React.createElement("div", { key: 1 }, t('ra_Only following structures of objects are available:')),
+                    React.createElement("div", { key: 2 }, t('ra_Folder → State')),
+                    React.createElement("div", { key: 3 }, t('ra_Folder → Channel → State')),
+                    React.createElement("div", { key: 4 }, t('ra_Folder → Device → Channel → State')),
+                    React.createElement("div", { key: 5 }, t('ra_Device → Channel → State')),
+                    React.createElement("div", { key: 6 }, t('ra_Channel → State')),
+                    React.createElement("div", { key: 7, style: { height: 10 } }),
+                    React.createElement("div", { key: 7 }, t('ra_Non-experts may create new objects only in "0_userdata.0" or "alias.0".')),
+                    React.createElement("div", { key: 8 }, t('ra_The experts may create objects everywhere but from second level (e.g. "vis.0" or "javascript.0").')),
+                ];
+            }
+        }
+        return value.length ? value : t('ra_Add new child object to selected parent');
+    };
     /**
      * Renders the toolbar.
      */
@@ -3700,36 +3481,36 @@ class ObjectBrowserClass extends react_1.Component {
                 allowObjectCreation = true;
             }
         }
-        return (react_1.default.createElement("div", { style: {
+        return (React.createElement("div", { style: {
                 display: 'flex',
                 width: '100%',
                 alignItems: 'center',
                 overflowX: 'auto',
             } },
-            react_1.default.createElement("div", { style: {
+            React.createElement("div", { style: {
                     display: 'flex',
                     width: '100%',
                     alignItems: 'center',
                 } },
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Refresh tree'), slotProps: { 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'), slotProps: { 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 && this.props.width !== 'xs' && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Configure'), slotProps: { 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.props.width !== 'xs' && this.state.expandAllVisible && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand all nodes'), slotProps: { 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'), slotProps: { 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))),
-                this.props.width !== 'xs' && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Expand one step node'), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement(material_1.IconButton, { key: "expandVisible", color: "primary", onClick: () => this.onExpandVisible(), size: "large" },
-                        react_1.default.createElement(material_1.Badge, { badgeContent: this.state.depth, color: "secondary", sx: (theme) => ({
+                React.createElement(Tooltip, { title: this.props.t('ra_Refresh tree'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement("div", null,
+                        React.createElement(IconButton, { onClick: () => this.refreshComponent(), disabled: this.state.updating, size: "large" },
+                            React.createElement(RefreshIcon, null)))),
+                this.props.showExpertButton && !this.props.expertMode && (React.createElement(Tooltip, { title: this.props.t('ra_expertMode'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => this.onFilter('expertMode', !this.state.filter.expertMode), size: "large" },
+                        React.createElement(IconExpert, null)))),
+                !this.props.disableColumnSelector && this.props.width !== 'xs' && (React.createElement(Tooltip, { title: this.props.t('ra_Configure'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "columnSelector", color: this.state.columnsAuto ? 'primary' : 'default', onClick: () => this.setState({ columnsSelectorShow: true }), size: "large" },
+                        React.createElement(IconColumns, null)))),
+                this.props.width !== 'xs' && this.state.expandAllVisible && (React.createElement(Tooltip, { title: this.props.t('ra_Expand all nodes'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "expandAll", onClick: () => this.onExpandAll(), size: "large" },
+                        React.createElement(IconOpen, null)))),
+                React.createElement(Tooltip, { title: this.props.t('ra_Collapse all nodes'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "collapseAll", onClick: () => this.onCollapseAll(), size: "large" },
+                        React.createElement(IconClosed, null))),
+                this.props.width !== 'xs' && (React.createElement(Tooltip, { title: this.props.t('ra_Expand one step node'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "expandVisible", color: "primary", onClick: () => this.onExpandVisible(), size: "large" },
+                        React.createElement(Badge, { badgeContent: this.state.depth, color: "secondary", sx: (theme) => ({
                                 badge: {
                                     right: 3,
                                     top: 3,
@@ -3737,10 +3518,10 @@ class ObjectBrowserClass extends react_1.Component {
                                     padding: '0 4px',
                                 },
                             }) },
-                            react_1.default.createElement(IconOpen_1.default, null))))),
-                this.props.width !== 'xs' && (react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Collapse one step node'), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement(material_1.IconButton, { key: "collapseVisible", color: "primary", onClick: () => this.onCollapseVisible(), size: "large" },
-                        react_1.default.createElement(material_1.Badge, { sx: (theme) => ({
+                            React.createElement(IconOpen, null))))),
+                this.props.width !== 'xs' && (React.createElement(Tooltip, { title: this.props.t('ra_Collapse one step node'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { key: "collapseVisible", color: "primary", onClick: () => this.onCollapseVisible(), size: "large" },
+                        React.createElement(Badge, { sx: (theme) => ({
                                 badge: {
                                     right: 3,
                                     top: 3,
@@ -3748,26 +3529,26 @@ class ObjectBrowserClass extends react_1.Component {
                                     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'), slotProps: { 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'), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement(material_1.IconButton, { onClick: () => {
+                            React.createElement(IconClosed, null))))),
+                this.props.objectStatesView && (React.createElement(Tooltip, { title: this.props.t('ra_Toggle the states view'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { onClick: () => this.onStatesViewVisible(), size: "large" },
+                        React.createElement(LooksOneIcon, { color: this.state.statesView ? 'primary' : 'inherit' })))),
+                React.createElement(Tooltip, { title: this.props.t('ra_Show/Hide object descriptions'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(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(), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(material_1.IconButton, { disabled: !allowObjectCreation, onClick: () => this.setState({
+                        React.createElement(TextFieldsIcon, { color: this.state.showDescription ? 'primary' : 'inherit' }))),
+                this.props.objectAddBoolean ? (React.createElement(Tooltip, { title: this.toolTipObjectCreating(), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement("div", null,
+                        React.createElement(IconButton, { disabled: !allowObjectCreation, onClick: () => this.setState({
                                 modalNewObj: {
                                     id: this.state.selected[0] || this.state.selectedNonObject,
                                 },
                             }), 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'), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement(material_1.IconButton, { onClick: () => {
+                            React.createElement(AddIcon, null))))) : null,
+                this.props.objectImportExport && (React.createElement(Tooltip, { title: this.props.t('ra_Add objects tree from JSON file'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { onClick: () => {
                             const input = document.createElement('input');
                             input.setAttribute('type', 'file');
                             input.setAttribute('id', 'files');
@@ -3775,22 +3556,21 @@ class ObjectBrowserClass extends react_1.Component {
                             input.addEventListener('change', (e) => this.handleJsonUpload(e), false);
                             input.click();
                         }, size: "large" },
-                        react_1.default.createElement(icons_material_1.Publish, null)))),
+                        React.createElement(PublishIcon, 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'), slotProps: { 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 && this.props.width !== 'xs' && (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'), slotProps: { popper: { sx: styles.tooltip } } },
-                react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                        var _b;
+                    (!!this.state.selected.length || this.state.selectedNonObject) && (React.createElement(Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement(IconButton, { onClick: () => this.setState({ showExportDialog: this._getSelectedIdsForExport().length }), size: "large" },
+                        React.createElement(PublishIcon, { style: { transform: 'rotate(180deg)' } }))))),
+            !!this.props.objectBrowserEditObject && this.props.width !== 'xs' && (React.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.createElement(Tooltip, { title: this.props.t('ra_Edit custom config'), slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { onClick: () => {
                         // get all visible states
                         const ids = this.root ? getVisibleItems(this.root, 'state', this.objects) : [];
                         if (ids.length) {
                             this.pauseSubscribe(true);
                             if (ids.length === 1) {
                                 this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectSelected`, this.state.selected[0]);
-                                (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate(null, 'custom', this.state.selected[0]);
+                                this.props.router?.doNavigate(null, 'custom', this.state.selected[0]);
                             }
                             this.setState({ customDialog: ids, customDialogAll: true });
                         }
@@ -3798,7 +3578,7 @@ class ObjectBrowserClass extends react_1.Component {
                             this.setState({ toast: this.props.t('ra_please select object') });
                         }
                     }, size: "large" },
-                    react_1.default.createElement(icons_material_1.Build, null))))));
+                    React.createElement(BuildIcon, null))))));
     }
     toggleExpanded(id) {
         const expanded = JSON.parse(JSON.stringify(this.state.expanded));
@@ -3816,7 +3596,7 @@ class ObjectBrowserClass extends react_1.Component {
     onCopy(e, text) {
         e.stopPropagation();
         e.preventDefault();
-        Utils_1.default.copyToClipboard(text);
+        Utils.copyToClipboard(text);
         if (text.length < 50) {
             this.setState({ toast: this.props.t('ra_Copied %s', text) });
         }
@@ -3824,14 +3604,82 @@ class ObjectBrowserClass extends react_1.Component {
             this.setState({ toast: this.props.t('ra_Copied') });
         }
     }
+    renderTooltipAccessControl = (acl) => {
+        // acl ={object,state,owner,ownerGroup}
+        if (!acl) {
+            return null;
+        }
+        const check = [
+            {
+                value: '0x400',
+                valueNum: 0x400,
+                title: 'read',
+                group: 'Owner',
+            },
+            {
+                value: '0x200',
+                valueNum: 0x200,
+                title: 'write',
+                group: 'Owner',
+            },
+            {
+                value: '0x40',
+                valueNum: 0x40,
+                title: 'read',
+                group: 'Group',
+            },
+            {
+                value: '0x20',
+                valueNum: 0x20,
+                title: 'write',
+                group: 'Group',
+            },
+            {
+                value: '0x4',
+                valueNum: 0x4,
+                title: 'read',
+                group: 'Everyone',
+            },
+            {
+                value: '0x2',
+                valueNum: 0x2,
+                title: 'write',
+                group: 'Everyone',
+            },
+        ];
+        const arrayTooltipText = [];
+        const funcRenderStateObject = (value) => {
+            const rights = acl[value];
+            check.forEach((el, i) => {
+                if (rights & el.valueNum) {
+                    arrayTooltipText.push(React.createElement("span", { key: value + i },
+                        this.texts[`acl${el.group}_${el.title}_${value}`],
+                        ",",
+                        React.createElement("span", { style: value === 'object' ? styles.rightsObject : styles.rightsState }, el.value)));
+                }
+            });
+        };
+        arrayTooltipText.push(React.createElement("span", { key: "group" }, `${this.texts.ownerGroup}: ${(acl.ownerGroup || '').replace('system.group.', '')}`));
+        arrayTooltipText.push(React.createElement("span", { key: "owner" }, `${this.texts.ownerUser}: ${(acl.owner || '').replace('system.user.', '')}`));
+        funcRenderStateObject('object');
+        if (acl.state) {
+            funcRenderStateObject('state');
+        }
+        return arrayTooltipText.length ? (React.createElement("span", { style: styles.tooltipAccessControl }, arrayTooltipText.map(el => el))) : null;
+    };
     renderColumnButtons(id, item) {
-        var _b, _c, _d;
         if (!item.data.obj) {
-            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" },
-                    react_1.default.createElement("div", { style: { height: 15 } }, "---"))) : null,
-                this.props.onObjectDelete && item.children && item.children.length ? (react_1.default.createElement(material_1.IconButton, { sx: Object.assign(Object.assign({}, styles.cellButtonsButton), styles.cellButtonsButtonAlone), size: "small", "aria-label": "delete", title: this.texts.deleteObject, onClick: () => {
-                        var _b;
+            return this.props.onObjectDelete || this.props.objectEditOfAccessControl ? (React.createElement("div", { style: styles.buttonDiv },
+                this.state.filter.expertMode && this.props.objectEditOfAccessControl ? (React.createElement(IconButton, { sx: {
+                        ...styles.cellButtonsButton,
+                        ...styles.cellButtonsEmptyButton,
+                        ...styles.cellButtonMinWidth,
+                    }, onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" },
+                    React.createElement("div", { style: { height: 15 } }, "---"))) : null,
+                this.props.onObjectDelete && item.children && item.children.length ? (React.createElement(IconButton, { sx: {
+                        ...styles.cellButtonsButton,
+                        ...styles.cellButtonsButtonAlone,
+                    }, size: "small", "aria-label": "delete", title: this.texts.deleteObject, onClick: () => {
                         // calculate the number of children
                         const keys = Object.keys(this.objects);
                         keys.sort();
@@ -3846,10 +3694,10 @@ class ObjectBrowserClass extends react_1.Component {
                             }
                         }
                         if (this.props.onObjectDelete) {
-                            this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), false, count + 1);
+                            this.props.onObjectDelete(id, !!item.children?.length, false, count + 1);
                         }
                     } },
-                    react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon }))) : null)) : null;
+                    React.createElement(IconDelete, { style: styles.cellButtonsButtonIcon }))) : null)) : null;
         }
         item.data.aclTooltip =
             item.data.aclTooltip || this.renderTooltipAccessControl(item.data.obj.acl);
@@ -3862,20 +3710,26 @@ class ObjectBrowserClass extends react_1.Component {
             (item.data.obj.type === 'state'
                 ? this.systemConfig.common.defaultNewAcl.state
                 : this.systemConfig.common.defaultNewAcl.object);
-        const showEdit = this.state.filter.expertMode || _a.isNonExpertId(item.data.id);
+        const showEdit = this.state.filter.expertMode || ObjectBrowserClass.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, slotProps: { popper: { sx: styles.tooltip } } },
-                react_1.default.createElement(material_1.IconButton, { sx: Object.assign(Object.assign(Object.assign({}, styles.cellButtonsButton), styles.cellButtonMinWidth), { opacity: 1 }), onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" },
-                    react_1.default.createElement("div", { style: styles.aclText }, Number.isNaN(Number(acl))
+            this.state.filter.expertMode && this.props.objectEditOfAccessControl ? (React.createElement(Tooltip, { key: "acl", title: item.data.aclTooltip, slotProps: { popper: { sx: styles.tooltip } } },
+                React.createElement(IconButton, { sx: {
+                        ...styles.cellButtonsButton,
+                        ...styles.cellButtonMinWidth,
+                        opacity: 1,
+                    }, onClick: () => this.setState({ modalEditOfAccess: true, modalEditOfAccessObjData: item.data }), size: "large" },
+                    React.createElement("div", { style: styles.aclText }, Number.isNaN(Number(acl))
                         ? Number(aclSystemConfig).toString(16)
-                        : Number(acl).toString(16))))) : (react_1.default.createElement("div", { key: "aclEmpty", style: styles.cellButtonMinWidth })),
-            showEdit ? (react_1.default.createElement(material_1.IconButton, { key: "edit", sx: Object.assign({ marginRight: '2px' }, styles.cellButtonsButton), size: "small", "aria-label": "edit", title: this.texts.editObject, onClick: () => {
+                        : Number(acl).toString(16))))) : (React.createElement("div", { key: "aclEmpty", style: styles.cellButtonMinWidth })),
+            showEdit ? (React.createElement(IconButton, { key: "edit", sx: {
+                    marginRight: '2px',
+                    ...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, { style: styles.cellButtonsButtonIcon }))) : (react_1.default.createElement(material_1.Box, { component: "div", key: "editDisabled", sx: 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", sx: styles.cellButtonsButton, size: "small", "aria-label": "delete", onClick: () => {
-                    var _b, _c, _d;
+                React.createElement(IconEdit, { style: styles.cellButtonsButtonIcon }))) : (React.createElement(Box, { component: "div", key: "editDisabled", sx: styles.cellButtonsButton })),
+            this.props.onObjectDelete && (item.children?.length || !item.data.obj.common?.dontDelete) ? (React.createElement(IconButton, { key: "delete", sx: styles.cellButtonsButton, size: "small", "aria-label": "delete", onClick: () => {
                     const keys = Object.keys(this.objects);
                     keys.sort();
                     let count = 0;
@@ -3889,28 +3743,29 @@ class ObjectBrowserClass extends react_1.Component {
                         }
                     }
                     if (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);
+                        this.props.onObjectDelete(id, !!item.children?.length, !item.data.obj?.common?.dontDelete, count);
                     }
                 }, title: this.texts.deleteObject },
-                react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon }))) : null,
+                React.createElement(IconDelete, { 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, { sx: 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;
+                item.data.obj.common?.type !== 'file' ? (React.createElement(IconButton, { sx: {
+                    ...styles.cellButtonsButton,
+                    ...(item.data.hasCustoms
+                        ? this.styles.cellButtonsButtonWithCustoms
+                        : styles.cellButtonsButtonWithoutCustoms),
+                }, key: "custom", size: "small", "aria-label": "config", title: this.texts.customConfig, onClick: () => {
                     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.props.router?.doNavigate(null, 'customs', id);
                     this.setState({ customDialog: [id], customDialogAll: false });
                 } },
-                react_1.default.createElement(icons_material_1.Settings, { style: styles.cellButtonsButtonIcon }))) : null,
+                React.createElement(IconConfig, { style: styles.cellButtonsButtonIcon }))) : null,
         ];
     }
     readHistory(id) {
-        var _b, _c;
         /* interface GetHistoryOptions {
             instance?: string;
             start?: number;
@@ -3928,7 +3783,7 @@ class ObjectBrowserClass extends react_1.Component {
         } */
         if (window.sparkline &&
             this.defaultHistory &&
-            ((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.custom) &&
+            this.objects[id]?.common?.custom &&
             this.objects[id].common.custom[this.defaultHistory]) {
             const now = new Date();
             now.setHours(now.getHours() - 24);
@@ -3962,7 +3817,6 @@ class ObjectBrowserClass extends react_1.Component {
         }
     }
     getTooltipInfo(id, cb) {
-        var _b, _c;
         const obj = this.objects[id];
         const state = this.states[id];
         const { valFull, fileViewer } = formatValue({
@@ -3974,45 +3828,44 @@ class ObjectBrowserClass extends react_1.Component {
             full: true,
         });
         const valFullRx = [];
-        valFull === null || valFull === void 0 ? void 0 : valFull.forEach(_item => {
+        valFull?.forEach(_item => {
             if (_item.t === this.texts.quality && state.q) {
-                valFullRx.push(react_1.default.createElement("div", { style: styles.cellValueTooltipBoth, key: _item.t },
+                valFullRx.push(React.createElement("div", { style: styles.cellValueTooltipBoth, key: _item.t },
                     _item.t,
                     ":\u00A0",
                     _item.v));
                 // <div style={styles.cellValueTooltipValue} key={item.t + '_v'}>{item.v}</div>,
                 if (!_item.nbr) {
-                    valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                    valFullRx.push(React.createElement("br", { key: `${_item.t}_br` }));
                 }
             }
             else {
-                valFullRx.push(react_1.default.createElement("div", { style: styles.cellValueTooltipTitle, key: _item.t },
+                valFullRx.push(React.createElement("div", { style: styles.cellValueTooltipTitle, key: _item.t },
                     _item.t,
                     ":\u00A0"));
-                valFullRx.push(react_1.default.createElement("div", { style: styles.cellValueTooltipValue, key: `${_item.t}_v` }, _item.v));
+                valFullRx.push(React.createElement("div", { style: styles.cellValueTooltipValue, key: `${_item.t}_v` }, _item.v));
                 if (!_item.nbr) {
-                    valFullRx.push(react_1.default.createElement("br", { key: `${_item.t}_br` }));
+                    valFullRx.push(React.createElement("br", { key: `${_item.t}_br` }));
                 }
             }
         });
         if (fileViewer === 'image') {
-            valFullRx.push(react_1.default.createElement("img", { style: styles.cellValueTooltipImage, src: state.val, alt: id }));
+            valFullRx.push(React.createElement("img", { style: styles.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) &&
+            this.objects[id]?.common?.custom &&
             this.objects[id].common.custom[this.defaultHistory]) {
-            valFullRx.push(react_1.default.createElement("svg", { key: "sparkline", className: "sparkline", "data-id": id, style: { fill: '#3d85de' }, width: "200", height: "30", strokeWidth: "3" }));
+            valFullRx.push(React.createElement("svg", { key: "sparkline", className: "sparkline", "data-id": id, style: { fill: '#3d85de' }, width: "200", height: "30", strokeWidth: "3" }));
         }
         this.setState({ tooltipInfo: { el: valFullRx, id } }, () => cb && cb());
     }
     renderColumnValue(id, item, narrowStyleWithDetails) {
-        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(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.cellValueText), styles.cellValueFile) }, "[file]"));
+        if (obj.common?.type === 'file') {
+            return (React.createElement(Box, { component: "div", sx: { ...styles.cellValueText, ...styles.cellValueFile } }, "[file]"));
         }
         if (!this.states[id]) {
             if (obj.type === 'state') {
@@ -4043,23 +3896,23 @@ class ObjectBrowserClass extends react_1.Component {
             const valTextRx = [];
             item.data.state = { valTextRx };
             const copyText = valText.v || '';
-            valTextRx.push(react_1.default.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
+            valTextRx.push(React.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
                     whiteSpace: 'nowrap',
                     display: 'inline-block',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                 } }, valText.v.toString()));
             if (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));
+                valTextRx.push(React.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, style: styles.cellValueTextUnit, key: `${valText.v.toString()}unit` }, valText.u));
             }
             if (valText.s !== undefined) {
-                valTextRx.push(react_1.default.createElement("span", { style: styles.cellValueTextState, className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}states` },
+                valTextRx.push(React.createElement("span", { style: styles.cellValueTextState, className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}states` },
                     "(",
                     valText.s,
                     ")"));
             }
             if (!narrowStyleWithDetails) {
-                valTextRx.push(react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
+                valTextRx.push(React.createElement(IconCopy, { 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;
@@ -4069,12 +3922,12 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.state.filter.expertMode) {
             if (item.data.button) {
                 val = [
-                    react_1.default.createElement(ButtonIcon, { key: "button", style: Object.assign({ color: info.style.color }, styles.cellValueButton) }),
+                    React.createElement(ButtonIcon, { key: "button", style: { color: info.style.color, ...styles.cellValueButton } }),
                 ];
             }
             else if (item.data.switch) {
                 val = [
-                    react_1.default.createElement(material_1.Switch, { key: "switch", sx: {
+                    React.createElement(Switch, { key: "switch", sx: {
                             '& .MuiSwitch-thumb': { color: info.style.color },
                             '& .MuiSwitch-track': {
                                 backgroundColor: !!this.states[id].val && this.state.selected.includes(id)
@@ -4087,16 +3940,19 @@ class ObjectBrowserClass extends react_1.Component {
                 ];
             }
         }
-        return (react_1.default.createElement(material_1.Tooltip, { key: "value", title: (_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el, slotProps: {
+        return (React.createElement(Tooltip, { key: "value", title: this.state.tooltipInfo?.el, slotProps: {
                 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(material_1.Box, { component: "div", style: info.style, sx: Object.assign(Object.assign({}, styles.cellValueText), { height: narrowStyleWithDetails ? undefined : ROW_HEIGHT, '& .admin-button:active': {
+            }, onOpen: () => this.getTooltipInfo(id, () => this.readHistory(id)), onClose: () => this.state.tooltipInfo?.id === id && this.setState({ tooltipInfo: null }) },
+            React.createElement(Box, { component: "div", style: info.style, sx: {
+                    ...styles.cellValueText,
+                    height: narrowStyleWithDetails ? undefined : ROW_HEIGHT,
+                    '& .admin-button:active': {
                         transform: 'translate(0, 2px)',
-                    } }) }, val)));
+                    },
+                } }, val)));
     }
     _syncEnum(id, enumIds, newArray, cb) {
-        var _b, _c, _d;
         if (!enumIds || !enumIds.length) {
             if (cb) {
                 cb();
@@ -4105,8 +3961,8 @@ class ObjectBrowserClass extends react_1.Component {
         }
         const enumId = enumIds.pop() || '';
         const promises = [];
-        if ((_b = this.info.objects[enumId]) === null || _b === void 0 ? void 0 : _b.common) {
-            if ((_c = this.info.objects[enumId].common.members) === null || _c === void 0 ? void 0 : _c.length) {
+        if (this.info.objects[enumId]?.common) {
+            if (this.info.objects[enumId].common.members?.length) {
                 const pos = this.info.objects[enumId].common.members.indexOf(id);
                 if (pos !== -1 && !newArray.includes(enumId)) {
                     // delete it from members
@@ -4119,7 +3975,7 @@ class ObjectBrowserClass extends react_1.Component {
                 }
             }
             // add to it
-            if (newArray.includes(enumId) && !((_d = this.info.objects[enumId].common.members) === null || _d === void 0 ? void 0 : _d.includes(id))) {
+            if (newArray.includes(enumId) && !this.info.objects[enumId].common.members?.includes(id)) {
                 // add to object
                 const obj = JSON.parse(JSON.stringify(this.info.objects[enumId]));
                 obj.common.members = obj.common.members || [];
@@ -4153,28 +4009,25 @@ class ObjectBrowserClass extends react_1.Component {
         const itemEnums = this.state.enumDialogEnums;
         const enumsOriginal = this.state.enumDialog.enumsOriginal;
         const enums = (type === 'room' ? this.info.roomEnums : this.info.funcEnums)
-            .map(id => {
-            var _b, _c;
-            return ({
-                name: getName(((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name) || id.split('.').pop() || '', this.props.lang),
-                value: id,
-                icon: getSelectIdIconFromObjects(this.objects, id, this.props.lang, this.imagePrefix),
-            });
-        })
+            .map(id => ({
+            name: getName(this.objects[id]?.common?.name || id.split('.').pop() || '', this.props.lang),
+            value: id,
+            icon: getSelectIdIconFromObjects(this.objects, id, this.props.lang, this.imagePrefix),
+        }))
             .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(material_1.Box, { style: styles.enumIconDiv },
-                    react_1.default.createElement("img", { src: _item.icon, style: styles.enumIcon, alt: _item.name })));
+                _item.icon = (React.createElement(Box, { style: styles.enumIconDiv },
+                    React.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, { 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" },
+        return (React.createElement(Dialog, { sx: { '& .MuiPaper-root': styles.enumDialog }, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
+            React.createElement(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, { 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, { sx: { '&.MuiList-root': styles.enumList } }, enums.map(_item => {
+                React.createElement(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.createElement(IconCheck, null))),
+            React.createElement(List, { sx: { '&.MuiList-root': styles.enumList } }, enums.map(_item => {
                 let id;
                 let name;
                 let icon;
@@ -4188,7 +4041,7 @@ class ObjectBrowserClass extends react_1.Component {
                     name = _item;
                 }
                 const labelId = `checkbox-list-label-${id}`;
-                return (react_1.default.createElement(material_1.ListItem, { sx: styles.headerCellSelectItem, key: id, onClick: () => {
+                return (React.createElement(ListItem, { sx: styles.headerCellSelectItem, key: id, onClick: () => {
                         const pos = itemEnums.indexOf(id);
                         const enumDialogEnums = JSON.parse(JSON.stringify(this.state.enumDialogEnums));
                         if (pos === -1) {
@@ -4200,9 +4053,9 @@ class ObjectBrowserClass extends react_1.Component {
                         }
                         this.setState({ enumDialogEnums });
                     }, secondaryAction: icon },
-                    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)));
+                    React.createElement(ListItemIcon, { sx: { '&.MuiListItemIcon-root': styles.enumCheckbox } },
+                        React.createElement(Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': labelId } })),
+                    React.createElement(ListItemText, { id: labelId }, name)));
             }))));
     }
     renderEditRoleDialog() {
@@ -4211,7 +4064,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, { key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
+            return (React.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;
                     }
@@ -4221,7 +4074,6 @@ class ObjectBrowserClass extends react_1.Component {
         return null;
     }
     onColumnsEditCustomDialogClose(isSave) {
-        var _b, _c;
         // cannot be null
         const customColumnDialog = this.customColumnDialog;
         if (isSave) {
@@ -4234,11 +4086,10 @@ class ObjectBrowserClass extends react_1.Component {
             }
             this.customColumnDialog = null;
             this.props.socket
-                .getObject(((_c = (_b = this.state.columnsEditCustomDialog) === null || _b === void 0 ? void 0 : _b.obj) === null || _c === void 0 ? void 0 : _c._id) || '')
+                .getObject(this.state.columnsEditCustomDialog?.obj?._id || '')
                 .then(obj => {
-                var _b;
                 if (obj &&
-                    _a.setCustomValue(obj, (_b = this.state.columnsEditCustomDialog) === null || _b === void 0 ? void 0 : _b.it, value)) {
+                    ObjectBrowserClass.setCustomValue(obj, this.state.columnsEditCustomDialog?.it, value)) {
                     return this.props.socket.setObject(obj._id, obj);
                 }
                 throw new Error(this.props.t('ra_Cannot update attribute, because not found in the object'));
@@ -4256,24 +4107,24 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         if (!this.customColumnDialog) {
-            const value = _a.getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
+            const value = ObjectBrowserClass.getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
             this.customColumnDialog = {
                 type: (this.state.columnsEditCustomDialog.it.type || typeof value),
                 initValue: (value === null || value === undefined ? '' : value).toString(),
                 value: (value === null || value === undefined ? '' : value).toString(),
             };
         }
-        return (react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ columnsEditCustomDialog: null }), maxWidth: "md", "aria-labelledby": "custom-dialog-title", open: !0 },
-            react_1.default.createElement(material_1.DialogTitle, { id: "custom-dialog-title" }, `${this.props.t('ra_Edit object field')}: ${this.state.columnsEditCustomDialog.obj._id}`),
-            react_1.default.createElement(material_1.DialogContent, null,
-                react_1.default.createElement(material_1.DialogContentText, { id: "alert-dialog-description" }, this.customColumnDialog.type === 'boolean' ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { onKeyUp: e => e.key === 'Enter' && this.onColumnsEditCustomDialogClose(true), defaultChecked: this.customColumnDialog.value === 'true', onChange: e => {
+        return (React.createElement(Dialog, { onClose: () => this.setState({ columnsEditCustomDialog: null }), maxWidth: "md", "aria-labelledby": "custom-dialog-title", open: !0 },
+            React.createElement(DialogTitle, { id: "custom-dialog-title" }, `${this.props.t('ra_Edit object field')}: ${this.state.columnsEditCustomDialog.obj._id}`),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, { id: "alert-dialog-description" }, this.customColumnDialog.type === 'boolean' ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { onKeyUp: e => e.key === 'Enter' && this.onColumnsEditCustomDialogClose(true), defaultChecked: this.customColumnDialog.value === 'true', onChange: e => {
                             const customColumnDialog = this.customColumnDialog;
                             customColumnDialog.value = e.target.checked.toString();
                             const changed = customColumnDialog.value !== customColumnDialog.initValue;
                             if (changed === !this.state.customColumnDialogValueChanged) {
                                 this.setState({ customColumnDialogValueChanged: changed });
                             }
-                        } }), label: `${this.state.columnsEditCustomDialog.it.name} (${this.state.columnsEditCustomDialog.it.pathText})` })) : (react_1.default.createElement(material_1.TextField, { variant: "standard", defaultValue: this.customColumnDialog.value, fullWidth: true, onKeyUp: e => e.key === 'Enter' && this.onColumnsEditCustomDialogClose(true), label: `${this.state.columnsEditCustomDialog.it.name} (${this.state.columnsEditCustomDialog.it.pathText})`, onChange: e => {
+                        } }), label: `${this.state.columnsEditCustomDialog.it.name} (${this.state.columnsEditCustomDialog.it.pathText})` })) : (React.createElement(TextField, { variant: "standard", defaultValue: this.customColumnDialog.value, fullWidth: true, onKeyUp: e => e.key === 'Enter' && this.onColumnsEditCustomDialogClose(true), label: `${this.state.columnsEditCustomDialog.it.name} (${this.state.columnsEditCustomDialog.it.pathText})`, onChange: e => {
                         const customColumnDialog = this.customColumnDialog;
                         customColumnDialog.value = e.target.value;
                         const changed = customColumnDialog.value !== customColumnDialog.initValue;
@@ -4281,13 +4132,12 @@ class ObjectBrowserClass extends react_1.Component {
                             this.setState({ customColumnDialogValueChanged: changed });
                         }
                     }, autoFocus: true })))),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(true), disabled: !this.state.customColumnDialogValueChanged, color: "primary", startIcon: react_1.default.createElement(icons_material_1.Check, null) }, this.props.t('ra_Update')),
-                react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(), startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.t('ra_Cancel')))));
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(true), disabled: !this.state.customColumnDialogValueChanged, color: "primary", startIcon: React.createElement(IconCheck, null) }, this.props.t('ra_Update')),
+                React.createElement(Button, { color: "grey", variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(), startIcon: React.createElement(IconClose, null) }, this.props.t('ra_Cancel')))));
     }
     static getCustomValue(obj, it) {
-        var _b;
-        if (((_b = obj === null || obj === void 0 ? void 0 : obj._id) === null || _b === void 0 ? void 0 : _b.startsWith(`${it.adapter}.`)) && it.path.length > 1) {
+        if (obj?._id?.startsWith(`${it.adapter}.`) && it.path.length > 1) {
             const p = it.path;
             let value;
             const anyObj = obj;
@@ -4334,8 +4184,7 @@ class ObjectBrowserClass extends react_1.Component {
         return null;
     }
     static setCustomValue(obj, it, value) {
-        var _b;
-        if (((_b = obj === null || obj === void 0 ? void 0 : obj._id) === null || _b === void 0 ? void 0 : _b.startsWith(`${it.adapter}.`)) && it.path.length > 1) {
+        if (obj?._id?.startsWith(`${it.adapter}.`) && it.path.length > 1) {
             const p = it.path;
             const anyObj = obj;
             if (anyObj[p[0]] && typeof anyObj[p[0]] === 'object') {
@@ -4391,15 +4240,22 @@ class ObjectBrowserClass extends react_1.Component {
      * Renders a custom value.
      */
     renderCustomValue(obj, it, item) {
-        const text = _a.getCustomValue(obj, it);
+        const text = ObjectBrowserClass.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(material_1.Box, { component: "div", style: Object.assign(Object.assign(Object.assign({}, styles.columnCustom), styles.columnCustomEditable), styles[`columnCustom_${it.align}`]), onClick: () => this.setState({
+                return (React.createElement(Box, { component: "div", style: {
+                        ...styles.columnCustom,
+                        ...styles.columnCustomEditable,
+                        ...styles[`columnCustom_${it.align}`],
+                    }, onClick: () => this.setState({
                         columnsEditCustomDialog: { item, it, obj },
                         customColumnDialogValueChanged: false,
                     }) }, text));
             }
-            return (react_1.default.createElement(material_1.Box, { component: "div", style: Object.assign(Object.assign({}, styles.columnCustom), styles[`columnCustom_${it.align}`]) }, text));
+            return (React.createElement(Box, { component: "div", style: {
+                    ...styles.columnCustom,
+                    ...styles[`columnCustom_${it.align}`],
+                } }, text));
         }
         return null;
     }
@@ -4408,7 +4264,7 @@ class ObjectBrowserClass extends react_1.Component {
         // read the type of operation
         const aliasObj = this.objects[this.info.aliasesMap[id][_index]].common.alias.id;
         if (aliasObj) {
-            return (react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
+            return (React.createElement(Box, { component: "div", onClick: e => {
                     e.stopPropagation();
                     e.preventDefault();
                     const aliasId = this.info.aliasesMap[id][_index];
@@ -4419,7 +4275,7 @@ class ObjectBrowserClass extends react_1.Component {
                     this.onSelect(aliasId);
                     setTimeout(() => this.expandAllSelected(() => this.scrollToItem(aliasId)), 100);
                 }, sx: customStyle || this.styles.aliasAlone },
-                react_1.default.createElement("span", { className: "admin-browser-arrow" }, typeof aliasObj === 'string' || (aliasObj.read === id && aliasObj.write === id)
+                React.createElement("span", { className: "admin-browser-arrow" }, typeof aliasObj === 'string' || (aliasObj.read === id && aliasObj.write === id)
                     ? '↔'
                     : aliasObj.read === id
                         ? '→'
@@ -4432,43 +4288,42 @@ class ObjectBrowserClass extends react_1.Component {
      * Renders a leaf.
      */
     renderLeaf(item, isExpanded, counter) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const id = item.data.id;
         counter.count++;
         isExpanded = isExpanded === undefined ? this.state.expanded.includes(id) : isExpanded;
         // icon
         let iconFolder;
         const obj = item.data.obj;
-        const itemType = obj === null || obj === void 0 ? void 0 : obj.type;
+        const itemType = obj?.type;
         if (item.children ||
             itemType === 'folder' ||
             itemType === 'device' ||
             itemType === 'channel' ||
             itemType === 'meta') {
-            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) }));
+            iconFolder = isExpanded ? (React.createElement(IconOpen, { style: this.styles.cellIdIconFolder, onClick: () => this.toggleExpanded(id) })) : (React.createElement(IconClosed, { 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, { style: this.styles.cellIdIconDocument });
+            iconFolder = React.createElement(IconDocumentReadOnly, { style: this.styles.cellIdIconDocument });
         }
         else {
-            iconFolder = react_1.default.createElement(IconDocument_1.default, { style: this.styles.cellIdIconDocument });
+            iconFolder = React.createElement(IconDocument, { 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: "iconOwn", style: styles.cellIdIconOwn }, item.data.icon)); // utf-8 char
+                    iconItem = (React.createElement("span", { className: "iconOwn", style: styles.cellIdIconOwn }, item.data.icon)); // utf-8 char
                 }
                 else {
-                    iconItem = (react_1.default.createElement(Icon_1.default, { style: styles.cellIdIconOwn, className: "iconOwn", src: item.data.icon, alt: "" }));
+                    iconItem = (React.createElement(Icon, { style: styles.cellIdIconOwn, className: "iconOwn", src: item.data.icon, alt: "" }));
                 }
             }
             else {
                 iconItem = item.data.icon;
             }
         }
-        const common = obj === null || obj === void 0 ? void 0 : obj.common;
-        const typeImg = ((obj === null || obj === void 0 ? void 0 : obj.type) && exports.ITEM_IMAGES[obj.type]) || react_1.default.createElement("div", { className: "itemIcon" });
+        const common = obj?.common;
+        const typeImg = (obj?.type && ITEM_IMAGES[obj.type]) || React.createElement("div", { className: "itemIcon" });
         const paddingLeft = this.levelPadding * (item.data.level || 0);
         // recalculate rooms and function names if the language changed
         if (item.data.lang !== this.props.lang) {
@@ -4482,11 +4337,11 @@ 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, { style: styles.checkBox, checked: this.state.selected.includes(id) })) : null;
+            (!this.props.types || this.props.types.includes(this.objects[id].type)) ? (React.createElement(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);
-        if (this.props.objectBrowserViewFile && (common === null || common === void 0 ? void 0 : common.type) === 'file') {
+            (this.state.filter.expertMode || common?.write !== false);
+        if (this.props.objectBrowserViewFile && common?.type === 'file') {
             valueEditable = true;
         }
         const enumEditable = !this.props.notEditable &&
@@ -4496,7 +4351,7 @@ class ObjectBrowserClass extends react_1.Component {
         let newValue = '';
         const newValueTitle = [];
         if (checkVisibleObjectType) {
-            newValue = (_b = this.states[id]) === null || _b === void 0 ? void 0 : _b.from;
+            newValue = this.states[id]?.from;
             if (newValue === undefined) {
                 newValue = '&nbsp;';
             }
@@ -4504,7 +4359,7 @@ class ObjectBrowserClass extends react_1.Component {
                 newValue = newValue ? newValue.replace(/^system\.adapter\.|^system\./, '') : '';
                 newValueTitle.push(`${this.texts.stateChangedFrom} ${newValue}`);
             }
-            if (obj === null || obj === void 0 ? void 0 : obj.user) {
+            if (obj?.user) {
                 const user = obj.user.replace('system.user.', '');
                 newValue += `/${user}`;
                 newValueTitle.push(`${this.texts.stateChangedBy} ${user}`);
@@ -4518,16 +4373,16 @@ class ObjectBrowserClass extends react_1.Component {
                 newValueTitle.push(`${this.texts.objectChangedBy} ${obj.user.replace(/^system\.user\./, '')}`);
             }
             if (obj.ts) {
-                newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils_1.default.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`);
+                newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`);
             }
         }
         let readWriteAlias = false;
         let alias = null;
-        if (id.startsWith('alias.') && ((_c = common === null || common === void 0 ? void 0 : common.alias) === null || _c === void 0 ? void 0 : _c.id)) {
+        if (id.startsWith('alias.') && common?.alias?.id) {
             readWriteAlias = typeof common.alias.id === 'object';
             if (readWriteAlias) {
-                alias = (react_1.default.createElement("div", { style: styles.cellIdAliasReadWriteDiv },
-                    common.alias.id.read ? (react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
+                alias = (React.createElement("div", { style: styles.cellIdAliasReadWriteDiv },
+                    common.alias.id.read ? (React.createElement(Box, { component: "div", onClick: e => {
                             e.stopPropagation();
                             e.preventDefault();
                             this.onSelect(common.alias.id.read);
@@ -4535,7 +4390,7 @@ class ObjectBrowserClass extends react_1.Component {
                         }, sx: this.styles.aliasReadWrite },
                         "\u2190",
                         common.alias.id.read)) : null,
-                    common.alias.id.write ? (react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
+                    common.alias.id.write ? (React.createElement(Box, { component: "div", onClick: e => {
                             e.stopPropagation();
                             e.preventDefault();
                             this.onSelect(common.alias.id.write);
@@ -4545,7 +4400,7 @@ class ObjectBrowserClass extends react_1.Component {
                         common.alias.id.write)) : null));
             }
             else {
-                alias = (react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
+                alias = (React.createElement(Box, { component: "div", onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.onSelect(common.alias.id);
@@ -4559,7 +4414,7 @@ class ObjectBrowserClass extends react_1.Component {
             // Some alias points to this object. It can be more than one
             if (this.info.aliasesMap[id].length > 1) {
                 // Show number of aliases and open a menu by click
-                alias = (react_1.default.createElement(material_1.Box, { component: "div", id: `alias_${id}`, onClick: e => {
+                alias = (React.createElement(Box, { component: "div", id: `alias_${id}`, onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.setState({ aliasMenu: id });
@@ -4570,11 +4425,11 @@ class ObjectBrowserClass extends react_1.Component {
                 alias = this.renderAliasLink(id, 0);
             }
         }
-        let checkColor = common === null || common === void 0 ? void 0 : common.color;
+        let checkColor = common?.color;
         let invertBackground;
         if (checkColor && !this.state.selected.includes(id)) {
             const background = this.props.themeName === 'dark' ? '#1f1f1f' : this.props.themeName === 'blue' ? '#222a2e' : '#FFFFFF';
-            const distance = Utils_1.default.colorDistance(checkColor, background);
+            const distance = Utils.colorDistance(checkColor, background);
             // console.log(`Distance: ${checkColor} - ${background} = ${distance}`);
             if (distance < 1000) {
                 invertBackground = this.props.themeType === 'dark' ? '#9a9a9a' : '#565656';
@@ -4604,17 +4459,16 @@ class ObjectBrowserClass extends react_1.Component {
             checkColor = 'inherit';
         }
         const icons = [];
-        if (common === null || common === void 0 ? void 0 : common.statusStates) {
+        if (common?.statusStates) {
             const ids = {};
             Object.keys(common.statusStates).forEach(name => {
-                var _b;
                 let _id = common.statusStates[name];
                 if (_id.split('.').length < 3) {
                     _id = `${id}.${_id}`;
                 }
                 ids[name] = _id;
                 if (!this.states[_id]) {
-                    if (((_b = this.objects[_id]) === null || _b === void 0 ? void 0 : _b.type) === 'state') {
+                    if (this.objects[_id]?.type === 'state') {
                         if (!this.recordStates.includes(_id)) {
                             this.recordStates.push(_id);
                         }
@@ -4632,7 +4486,7 @@ class ObjectBrowserClass extends react_1.Component {
             if (common.statusStates.errorId && this.states[ids.errorId] && this.states[ids.errorId].val) {
                 checkColor = this.props.themeType === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT;
                 colorSet = true;
-                icons.push(react_1.default.createElement(icons_material_1.Error, { key: "error", 
+                icons.push(React.createElement(IconError, { key: "error", 
                     // title={this.texts.deviceError}
                     style: this.styles.iconDeviceError }));
             }
@@ -4641,7 +4495,7 @@ class ObjectBrowserClass extends react_1.Component {
                     if (this.states[ids.onlineId].val) {
                         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", 
+                        icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));
                     }
@@ -4650,18 +4504,18 @@ class ObjectBrowserClass extends react_1.Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
-                        icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
+                        icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceDisconnected }));
                     }
                 }
                 else if (this.states[ids.onlineId].val) {
-                    icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
+                    icons.push(React.createElement(IconConnection, { key: "conn", 
                         // title={this.texts.deviceError}
                         style: this.styles.iconDeviceConnected }));
                 }
                 else {
-                    icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
+                    icons.push(React.createElement(IconDisconnected, { key: "disc", 
                         // title={this.texts.deviceError}
                         style: this.styles.iconDeviceDisconnected }));
                 }
@@ -4673,85 +4527,102 @@ class ObjectBrowserClass extends react_1.Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
-                        icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
+                        icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             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", 
+                        icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));
                     }
                 }
                 else if (this.states[ids.offlineId].val) {
-                    icons.push(react_1.default.createElement(icons_material_1.WifiOff, { key: "disc", 
+                    icons.push(React.createElement(IconDisconnected, { key: "disc", 
                         // title={this.texts.deviceError}
                         style: this.styles.iconDeviceDisconnected }));
                 }
                 else {
-                    icons.push(react_1.default.createElement(icons_material_1.Wifi, { key: "conn", 
+                    icons.push(React.createElement(IconConnection, { key: "conn", 
                         // title={this.texts.deviceError}
                         style: this.styles.iconDeviceConnected }));
                 }
             }
         }
-        const q = checkVisibleObjectType ? Utils_1.default.quality2text(((_d = this.states[id]) === null || _d === void 0 ? void 0 : _d.q) || 0).join(', ') : null;
-        let name = ((_e = item.data) === null || _e === void 0 ? void 0 : _e.title) || '';
+        const q = checkVisibleObjectType ? Utils.quality2text(this.states[id]?.q || 0).join(', ') : null;
+        let name = item.data?.title || '';
         let useDesc = false;
         if (this.state.showDescription) {
             const oTooltip = getObjectTooltip(item.data, this.props.lang);
             if (oTooltip) {
                 name = [
-                    react_1.default.createElement("div", { key: "name", style: styles.cellNameDivDiv }, name),
-                    react_1.default.createElement("div", { key: "desc", style: styles.cellDescription }, oTooltip),
+                    React.createElement("div", { key: "name", style: styles.cellNameDivDiv }, name),
+                    React.createElement("div", { key: "desc", style: styles.cellDescription }, oTooltip),
                 ];
                 useDesc = !!oTooltip;
             }
         }
         const narrowStyleWithDetails = this.props.width === 'xs' && this.state.focused === id;
-        const colID = (react_1.default.createElement(material_1.Grid2, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
-            react_1.default.createElement(material_1.Grid2, { container: true, alignItems: "center" },
+        const colID = (React.createElement(Grid2, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
+            React.createElement(Grid2, { container: true, alignItems: "center" },
                 checkbox,
                 iconFolder),
-            react_1.default.createElement(material_1.Grid2, { 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), slotProps: { popper: { sx: styles.tooltip } } },
-                    react_1.default.createElement("div", null, item.data.name)),
+            React.createElement(Grid2, { style: {
+                    ...styles.cellIdSpan,
+                    ...(invertBackground ? this.styles.invertedBackground : undefined),
+                    color: checkColor,
+                    fontWeight: bold ? 'bold' : undefined,
+                } },
+                React.createElement(Tooltip, { title: getIdFieldTooltip(item.data, this.props.lang), slotProps: { popper: { sx: styles.tooltip } } },
+                    React.createElement("div", null, item.data.name)),
                 alias,
                 icons),
-            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
-            react_1.default.createElement(material_1.Grid2, { container: true, alignItems: "center" }, iconItem),
-            this.props.width !== 'xs' ? (react_1.default.createElement("div", null,
-                react_1.default.createElement(IconCopy_1.default, { className: narrowStyleWithDetails ? '' : 'copyButton', style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) }))) : null));
-        let colName = (narrowStyleWithDetails && name) || 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.props.width !== 'xs' ? this.columnsVisibility.name : undefined, ml: narrowStyleWithDetails ? 0 : '5px' }) },
+            React.createElement("div", { style: { ...styles.grow, ...(invertBackground ? this.styles.invertedBackgroundFlex : {}) } }),
+            React.createElement(Grid2, { container: true, alignItems: "center" }, iconItem),
+            this.props.width !== 'xs' ? (React.createElement("div", null,
+                React.createElement(IconCopy, { className: narrowStyleWithDetails ? '' : 'copyButton', style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) }))) : null));
+        let colName = (narrowStyleWithDetails && name) || this.columnsVisibility.name ? (React.createElement(Box, { component: "div", sx: {
+                ...styles.cellName,
+                ...(useDesc ? styles.cellNameWithDesc : undefined),
+                width: this.props.width !== 'xs' ? this.columnsVisibility.name : undefined,
+                ml: narrowStyleWithDetails ? 0 : '5px',
+            } },
             name,
-            !narrowStyleWithDetails && ((_f = item.data) === null || _f === void 0 ? void 0 : _f.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;
+            !narrowStyleWithDetails && item.data?.title ? (React.createElement(Box, { style: { color: checkColor } },
+                React.createElement(IconCopy, { className: "copyButton", style: styles.cellCopyButton, onClick: e => this.onCopy(e, item.data?.title) }))) : null)) : null;
         let colMiddle;
         if (!this.state.statesView) {
             colMiddle = [
-                (narrowStyleWithDetails && (obj === null || obj === void 0 ? void 0 : obj.type)) || this.columnsVisibility.type
+                (narrowStyleWithDetails && obj?.type) || this.columnsVisibility.type
                     ? {
-                        el: (react_1.default.createElement("div", { key: "type", style: Object.assign(Object.assign({}, styles.cellType), { width: this.props.width !== 'xs' ? this.columnsVisibility.type : undefined }) },
+                        el: (React.createElement("div", { key: "type", style: {
+                                ...styles.cellType,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.type : undefined,
+                            } },
                             typeImg,
-                            "\u00A0", obj === null || obj === void 0 ? void 0 :
-                            obj.type)),
+                            "\u00A0",
+                            obj?.type)),
                         type: 'filter_type',
                     }
                     : null,
                 (narrowStyleWithDetails && common) || this.columnsVisibility.role
                     ? {
-                        el: (react_1.default.createElement("div", { key: "role", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.role : '100%', cursor: this.state.filter.expertMode &&
+                        el: (React.createElement("div", { key: "role", style: {
+                                ...styles.cellRole,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.role : '100%',
+                                cursor: this.state.filter.expertMode &&
                                     enumEditable &&
                                     this.props.objectBrowserEditRole
                                     ? 'text'
-                                    : 'default' }), onClick: !narrowStyleWithDetails &&
+                                    : 'default',
+                            }, onClick: !narrowStyleWithDetails &&
                                 this.state.filter.expertMode &&
                                 enumEditable &&
                                 this.props.objectBrowserEditRole
                                 ? () => this.setState({ roleDialog: item.data.id })
-                                : undefined }, common === null || common === void 0 ? void 0 : common.role)),
+                                : undefined }, common?.role)),
                         type: 'filter_role',
                         onClick: narrowStyleWithDetails &&
                             this.state.filter.expertMode &&
@@ -4763,7 +4634,12 @@ class ObjectBrowserClass extends react_1.Component {
                     : null,
                 (narrowStyleWithDetails && common) || this.columnsVisibility.room
                     ? {
-                        el: (react_1.default.createElement("div", { key: "room", style: Object.assign(Object.assign(Object.assign({}, styles.cellRoom), (item.data.per ? styles.cellEnumParent : {})), { width: this.props.width !== 'xs' ? this.columnsVisibility.room : '100%', cursor: enumEditable ? 'text' : 'default' }), onClick: !narrowStyleWithDetails && enumEditable
+                        el: (React.createElement("div", { key: "room", style: {
+                                ...styles.cellRoom,
+                                ...(item.data.per ? styles.cellEnumParent : {}),
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.room : '100%',
+                                cursor: enumEditable ? 'text' : 'default',
+                            }, onClick: !narrowStyleWithDetails && enumEditable
                                 ? () => {
                                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
                                     this.setState({
@@ -4794,7 +4670,12 @@ class ObjectBrowserClass extends react_1.Component {
                     : null,
                 (narrowStyleWithDetails && common) || this.columnsVisibility.func
                     ? {
-                        el: (react_1.default.createElement("div", { key: "func", style: Object.assign(Object.assign(Object.assign({}, styles.cellFunc), (item.data.pef ? styles.cellEnumParent : {})), { width: this.props.width !== 'xs' ? this.columnsVisibility.func : '100%', cursor: enumEditable ? 'text' : 'default' }), onClick: !narrowStyleWithDetails && enumEditable
+                        el: (React.createElement("div", { key: "func", style: {
+                                ...styles.cellFunc,
+                                ...(item.data.pef ? styles.cellEnumParent : {}),
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.func : '100%',
+                                cursor: enumEditable ? 'text' : 'default',
+                            }, onClick: !narrowStyleWithDetails && enumEditable
                                 ? () => {
                                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
                                     this.setState({
@@ -4827,57 +4708,76 @@ class ObjectBrowserClass extends react_1.Component {
         }
         else {
             colMiddle = [
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_g = this.states[id]) === null || _g === void 0 ? void 0 : _g.from)) ||
+                (narrowStyleWithDetails && checkVisibleObjectType && this.states[id]?.from) ||
                     this.columnsVisibility.changedFrom
                     ? {
-                        el: (react_1.default.createElement("div", { key: "from", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.changedFrom : undefined }), title: newValueTitle.join('\n') }, checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.from) ? newValue : null)),
+                        el: (React.createElement("div", { key: "from", style: {
+                                ...styles.cellRole,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.changedFrom : undefined,
+                            }, title: newValueTitle.join('\n') }, checkVisibleObjectType && this.states[id]?.from ? newValue : null)),
                         type: 'from',
                     }
                     : null,
                 (narrowStyleWithDetails && q) || this.columnsVisibility.qualityCode
                     ? {
-                        el: (react_1.default.createElement("div", { key: "q", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.qualityCode : undefined }), title: q || '' }, q)),
+                        el: (React.createElement("div", { key: "q", style: {
+                                ...styles.cellRole,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.qualityCode : undefined,
+                            }, title: q || '' }, q)),
                         type: 'quality',
                     }
                     : null,
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.ts)) ||
+                (narrowStyleWithDetails && checkVisibleObjectType && this.states[id]?.ts) ||
                     this.columnsVisibility.timestamp
                     ? {
-                        el: (react_1.default.createElement("div", { key: "ts", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.timestamp : undefined }) }, checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.ts)
-                            ? Utils_1.default.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                        el: (React.createElement("div", { key: "ts", style: {
+                                ...styles.cellRole,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.timestamp : undefined,
+                            } }, checkVisibleObjectType && this.states[id]?.ts
+                            ? Utils.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
                             : null)),
                         type: 'ts',
                     }
                     : null,
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_l = this.states[id]) === null || _l === void 0 ? void 0 : _l.lc)) ||
+                (narrowStyleWithDetails && checkVisibleObjectType && this.states[id]?.lc) ||
                     this.columnsVisibility.lastChange
                     ? {
-                        el: (react_1.default.createElement("div", { key: "lc", style: Object.assign(Object.assign({}, styles.cellRole), { width: this.props.width !== 'xs' ? this.columnsVisibility.lastChange : undefined }) }, checkVisibleObjectType && ((_m = this.states[id]) === null || _m === void 0 ? void 0 : _m.lc)
-                            ? Utils_1.default.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                        el: (React.createElement("div", { key: "lc", style: {
+                                ...styles.cellRole,
+                                width: this.props.width !== 'xs' ? this.columnsVisibility.lastChange : undefined,
+                            } }, checkVisibleObjectType && this.states[id]?.lc
+                            ? Utils.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
                             : null)),
                         type: 'lc',
                     }
                     : null,
             ];
         }
-        let colCustom = ((_o = this.adapterColumns) === null || _o === void 0 ? void 0 : _o.map(it => (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellAdapter), { width: this.props.width !== 'xs'
+        let colCustom = this.adapterColumns?.map(it => (React.createElement("div", { style: {
+                ...styles.cellAdapter,
+                width: this.props.width !== 'xs'
                     ? this.columnsVisibility[it.id]
-                    : undefined }), key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null)))) || null;
+                    : undefined,
+            }, key: it.id, title: `${it.adapter} => ${it.pathText}` }, obj ? this.renderCustomValue(obj, it, item) : null))) || null;
         const columnValue = narrowStyleWithDetails || this.columnsVisibility.val
             ? this.renderColumnValue(id, item, narrowStyleWithDetails)
             : null;
-        let colValue = (narrowStyleWithDetails && columnValue) || this.columnsVisibility.val ? (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellValue), { width: this.props.width !== 'xs' ? this.columnsVisibility.val : 'calc(100% - 100px)', cursor: valueEditable
-                    ? (common === null || common === void 0 ? void 0 : common.type) === 'file'
+        let colValue = (narrowStyleWithDetails && columnValue) || this.columnsVisibility.val ? (React.createElement("div", { style: {
+                ...styles.cellValue,
+                width: this.props.width !== 'xs' ? this.columnsVisibility.val : 'calc(100% - 100px)',
+                cursor: valueEditable
+                    ? common?.type === 'file'
                         ? 'zoom-in'
                         : item.data.button
                             ? 'grab'
                             : 'text'
-                    : 'default' }), onClick: valueEditable
+                    : 'default',
+            }, onClick: valueEditable
                 ? () => {
                     if (!obj || !this.states) {
                         // return;
                     }
-                    else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
+                    else if (common?.type === 'file') {
                         this.setState({ viewFileDialog: id });
                     }
                     else if (!this.state.filter.expertMode && item.data.button) {
@@ -4903,7 +4803,10 @@ class ObjectBrowserClass extends react_1.Component {
                     }
                 }
                 : undefined }, columnValue)) : null;
-        let colButtons = narrowStyleWithDetails || this.columnsVisibility.buttons ? (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellButtons), { width: this.props.width !== 'xs' ? this.columnsVisibility.buttons : undefined }) }, this.renderColumnButtons(id, item))) : null;
+        let colButtons = narrowStyleWithDetails || this.columnsVisibility.buttons ? (React.createElement("div", { style: {
+                ...styles.cellButtons,
+                width: this.props.width !== 'xs' ? this.columnsVisibility.buttons : undefined,
+            } }, this.renderColumnButtons(id, item))) : null;
         let colDetails = null;
         if (this.props.width === 'xs' && this.state.focused === id) {
             colMiddle = colMiddle.filter(a => a);
@@ -4916,14 +4819,14 @@ class ObjectBrowserClass extends react_1.Component {
                     if (!it) {
                         return null;
                     }
-                    return (react_1.default.createElement("div", { key: it.type, style: styles.cellDetailsLine },
-                        react_1.default.createElement("span", { style: styles.cellDetailsName },
+                    return (React.createElement("div", { key: it.type, style: styles.cellDetailsLine },
+                        React.createElement("span", { style: styles.cellDetailsName },
                             this.texts[it.type],
                             ":"),
                         it.el,
-                        react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                        it.onClick ? (react_1.default.createElement(icons_material_1.Edit, { style: styles.cellCopyButtonInDetails, onClick: () => {
-                                if (it === null || it === void 0 ? void 0 : it.onClick) {
+                        React.createElement("div", { style: { flexGrow: 1 } }),
+                        it.onClick ? (React.createElement(IconEdit, { style: styles.cellCopyButtonInDetails, onClick: () => {
+                                if (it?.onClick) {
                                     it.onClick();
                                 }
                             } })) : null));
@@ -4932,32 +4835,32 @@ class ObjectBrowserClass extends react_1.Component {
             if (!colCustom.length) {
                 colCustom = null;
             }
-            colDetails = (react_1.default.createElement(material_1.Paper, { style: {
+            colDetails = (React.createElement(Paper, { style: {
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'column',
                     padding: 10,
                     backgroundColor: this.props.theme.palette.mode === 'dark' ? '#333' : '#ccc',
                 } },
-                react_1.default.createElement("div", { style: styles.cellDetailsLine },
-                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                    react_1.default.createElement(IconCopy_1.default, { style: styles.cellCopyButtonInDetails, onClick: e => this.onCopy(e, id) })),
-                colName && (react_1.default.createElement("div", { style: styles.cellDetailsLine },
-                    react_1.default.createElement("span", { style: styles.cellDetailsName },
+                React.createElement("div", { style: styles.cellDetailsLine },
+                    React.createElement("div", { style: { flexGrow: 1 } }),
+                    React.createElement(IconCopy, { style: styles.cellCopyButtonInDetails, onClick: e => this.onCopy(e, id) })),
+                colName && (React.createElement("div", { style: styles.cellDetailsLine },
+                    React.createElement("span", { style: styles.cellDetailsName },
                         this.texts.name,
                         ":"),
                     colName,
-                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                    ((_p = item.data) === null || _p === void 0 ? void 0 : _p.title) ? (react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null)),
+                    React.createElement("div", { style: { flexGrow: 1 } }),
+                    item.data?.title ? (React.createElement(IconCopy, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => this.onCopy(e, item.data?.title) })) : null)),
                 renderedMiddle,
-                colCustom && react_1.default.createElement("div", { style: styles.cellDetailsLine }, colCustom),
-                ((_q = this.objects[id]) === null || _q === void 0 ? void 0 : _q.type) === 'state' && (react_1.default.createElement("div", { style: styles.cellDetailsLine },
-                    react_1.default.createElement("span", { style: styles.cellDetailsName },
+                colCustom && React.createElement("div", { style: styles.cellDetailsLine }, colCustom),
+                this.objects[id]?.type === 'state' && (React.createElement("div", { style: styles.cellDetailsLine },
+                    React.createElement("span", { style: styles.cellDetailsName },
                         this.texts.value,
                         ":"),
                     colValue,
-                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                    react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => {
+                    React.createElement("div", { style: { flexGrow: 1 } }),
+                    React.createElement(IconCopy, { className: "copyButton", style: styles.cellCopyButtonInDetails, onClick: e => {
                             const { valText } = formatValue({
                                 state: this.states[id],
                                 obj: this.objects[id],
@@ -4969,14 +4872,14 @@ class ObjectBrowserClass extends react_1.Component {
                             });
                             this.onCopy(e, valText.v.toString());
                         }, key: "cc" }))),
-                colButtons && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellDetailsLine), { justifyContent: 'right' }) }, colButtons))));
+                colButtons && (React.createElement("div", { style: { ...styles.cellDetailsLine, justifyContent: 'right' } }, colButtons))));
             colName = null;
             colMiddle = null;
             colCustom = null;
             colValue = null;
             colButtons = null;
         }
-        const row = (react_1.default.createElement(material_1.Grid2, { container: true, direction: "row", wrap: "nowrap", sx: Utils_1.default.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, this.state.focused === id && this.props.multiSelect && styles.tableRowFocused, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
+        const row = (React.createElement(Grid2, { container: true, direction: "row", wrap: "nowrap", sx: Utils.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, this.state.focused === id && this.props.multiSelect && styles.tableRowFocused, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
                 styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
@@ -5008,8 +4911,8 @@ class ObjectBrowserClass extends react_1.Component {
                 }
             } },
             colID,
-            colName, colMiddle === null || colMiddle === void 0 ? void 0 :
-            colMiddle.map(it => it === null || it === void 0 ? void 0 : it.el),
+            colName,
+            colMiddle?.map(it => it?.el),
             colCustom,
             colValue,
             colButtons));
@@ -5026,11 +4929,11 @@ class ObjectBrowserClass extends react_1.Component {
         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, style: styles.draggable }, result.row));
+                leaf = (React.createElement(DragWrapper, { key: root.data.id, item: root, style: styles.draggable }, result.row));
             }
             else {
                 // change cursor
-                leaf = (react_1.default.createElement("div", { key: root.data.id, style: styles.nonDraggable }, result.row));
+                leaf = (React.createElement("div", { key: root.data.id, style: styles.nonDraggable }, result.row));
             }
         }
         else {
@@ -5248,11 +5151,106 @@ class ObjectBrowserClass extends react_1.Component {
             }
         }
     }
+    resizerMouseMove = (e) => {
+        if (this.resizerActiveDiv) {
+            let width;
+            let widthNext;
+            if (this.resizeLeft) {
+                width = this.resizerOldWidth - e.clientX + this.resizerPosition;
+                widthNext = this.resizerOldWidthNext + e.clientX - this.resizerPosition;
+            }
+            else {
+                width = this.resizerOldWidth + e.clientX - this.resizerPosition;
+                widthNext = this.resizerOldWidthNext - e.clientX + this.resizerPosition;
+            }
+            if (this.resizerActiveName &&
+                this.resizerNextName &&
+                (!this.resizerMin || width > this.resizerMin) &&
+                (!this.resizerNextMin || widthNext > this.resizerNextMin)) {
+                this.resizerCurrentWidths[this.resizerActiveName] = width;
+                this.resizerCurrentWidths[this.resizerNextName] = widthNext;
+                this.resizerActiveDiv.style.width = `${width}px`;
+                if (this.resizerNextDiv) {
+                    this.resizerNextDiv.style.width = `${widthNext}px`;
+                }
+                this.columnsVisibility[this.resizerActiveName] = width;
+                this.columnsVisibility[this.resizerNextName] = widthNext;
+                if (this.resizerNextName === 'nameHeader') {
+                    this.columnsVisibility.name = widthNext - this.state.scrollBarWidth;
+                    this.resizerCurrentWidths.name = widthNext - this.state.scrollBarWidth;
+                }
+                else if (this.resizerActiveName === 'nameHeader') {
+                    this.columnsVisibility.name = width - this.state.scrollBarWidth;
+                    this.resizerCurrentWidths.name = width - this.state.scrollBarWidth;
+                }
+                this.customWidth = true;
+                if (this.resizeTimeout) {
+                    clearTimeout(this.resizeTimeout);
+                }
+                this.resizeTimeout = setTimeout(() => {
+                    this.resizeTimeout = null;
+                    this.forceUpdate();
+                }, 200);
+            }
+        }
+    };
+    resizerMouseUp = () => {
+        this.localStorage.setItem(`${this.props.dialogName || 'App'}.table`, JSON.stringify(this.resizerCurrentWidths));
+        this.resizerActiveName = null;
+        this.resizerNextName = null;
+        this.resizerActiveDiv = null;
+        this.resizerNextDiv = null;
+        window.removeEventListener('mousemove', this.resizerMouseMove);
+        window.removeEventListener('mouseup', this.resizerMouseUp);
+    };
+    resizerMouseDown = (e) => {
+        this.storedWidths =
+            this.storedWidths ||
+                JSON.parse(JSON.stringify(SCREEN_WIDTHS[this.props.width || 'lg']));
+        this.resizerCurrentWidths = this.resizerCurrentWidths || {};
+        this.resizerActiveDiv = e.target.parentNode;
+        this.resizerActiveName = this.resizerActiveDiv.dataset.name || null;
+        if (this.resizerActiveName) {
+            let i = 0;
+            if (e.target.dataset.left === 'true') {
+                this.resizeLeft = true;
+                this.resizerNextDiv = this.resizerActiveDiv.previousElementSibling;
+                let handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
+                while (this.resizerNextDiv && !handle && i < 10) {
+                    this.resizerNextDiv = this.resizerNextDiv.previousElementSibling;
+                    handle = this.resizerNextDiv.querySelector('.iob-ob-resize-handler');
+                    i++;
+                }
+                if (handle?.dataset.left !== 'true') {
+                    this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
+                }
+            }
+            else {
+                this.resizeLeft = false;
+                this.resizerNextDiv = this.resizerActiveDiv.nextElementSibling;
+                /* while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.iob-ob-resize-handler') && i < 10) {
+                    this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
+                    i++;
+                } */
+            }
+            this.resizerNextName = this.resizerNextDiv.dataset.name || null;
+            this.resizerMin = parseInt(this.resizerActiveDiv.dataset.min, 10) || 0;
+            this.resizerNextMin = parseInt(this.resizerNextDiv.dataset.min, 10) || 0;
+            this.resizerPosition = e.clientX;
+            this.resizerCurrentWidths[this.resizerActiveName] = this.resizerActiveDiv.offsetWidth;
+            this.resizerOldWidth = this.resizerCurrentWidths[this.resizerActiveName];
+            if (this.resizerNextName) {
+                this.resizerCurrentWidths[this.resizerNextName] = this.resizerNextDiv.offsetWidth;
+                this.resizerOldWidthNext = this.resizerCurrentWidths[this.resizerNextName];
+            }
+            window.addEventListener('mousemove', this.resizerMouseMove);
+            window.addEventListener('mouseup', this.resizerMouseUp);
+        }
+    };
     /**
      * Handle keyboard events for navigation
      */
     navigateKeyPress(event) {
-        var _b, _c;
         const selectedId = this.state.selectedNonObject || this.state.selected[0];
         if (!selectedId) {
             return;
@@ -5260,7 +5258,7 @@ class ObjectBrowserClass extends react_1.Component {
         if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
             event.preventDefault();
             const ids = [];
-            (_b = this.tableRef.current) === null || _b === void 0 ? void 0 : _b.childNodes.forEach((node) => ids.push(node.id));
+            this.tableRef.current?.childNodes.forEach((node) => ids.push(node.id));
             const idx = ids.indexOf(selectedId);
             const newIdx = event.code === 'ArrowDown' ? idx + 1 : idx - 1;
             const newId = ids[newIdx] || selectedId;
@@ -5271,10 +5269,10 @@ class ObjectBrowserClass extends react_1.Component {
             this.toggleExpanded(selectedId);
         }
         if (event.code === 'Delete' && this.root && selectedId) {
-            const item = _a.getItemFromRoot(this.root, selectedId);
+            const item = ObjectBrowserClass.getItemFromRoot(this.root, selectedId);
             if (item) {
                 const { obj } = item.data;
-                if (obj && !((_c = obj.common) === null || _c === void 0 ? void 0 : _c.dontDelete)) {
+                if (obj && !obj.common?.dontDelete) {
                     this.showDeleteDialog({ id: selectedId, obj, item });
                 }
             }
@@ -5282,86 +5280,146 @@ class ObjectBrowserClass extends react_1.Component {
     }
     /**
      * Find the id from the root
+     *
+     * @param root The current root
+     * @param id The object id to find
      */
-    static getItemFromRoot(
-    /** The current root */
-    root, 
-    /** the object id to find */
-    id) {
-        var _b;
+    static getItemFromRoot(root, id) {
         const idArr = id.split('.');
         let currId = '';
         let _root = root;
-        for (const idEntry of idArr) {
+        for (let i = 0; i < idArr.length; i++) {
+            const idEntry = idArr[i];
             currId = currId ? `${currId}.${idEntry}` : idEntry;
-            _root = (_b = _root.children) === null || _b === void 0 ? void 0 : _b.find(item => item.data.id === currId);
-            if (!_root) {
-                break;
+            let found = false;
+            if (_root.children) {
+                for (let j = 0; j < _root.children.length; j++) {
+                    if (_root.children[j].data.id === currId) {
+                        _root = _root.children[j];
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                return null;
             }
         }
         return _root || null;
     }
+    resizerReset = () => {
+        this.customWidth = false;
+        SCREEN_WIDTHS[this.props.width || 'lg'] = JSON.parse(JSON.stringify(this.storedWidths));
+        this.calculateColumnsVisibility();
+        this.localStorage.removeItem(`${this.props.dialogName || 'App'}.table`);
+        this.forceUpdate();
+    };
     /**
      * Render the right handle for resizing
      */
     renderHandleRight() {
-        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') }));
+        return (React.createElement(Box, { component: "div", className: "iob-ob-resize-handler", sx: { ...styles.resizeHandle, ...styles.resizeHandleRight }, onMouseDown: this.resizerMouseDown, onDoubleClick: this.resizerReset, title: this.props.t('ra_Double click to reset table layout') }));
     }
     renderHeader() {
         let filterClearInValue = null;
         if (!this.columnsVisibility.buttons && !this.isFilterEmpty()) {
-            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, { style: styles.buttonClearFilterIcon })));
+            filterClearInValue = (React.createElement(IconButton, { onClick: () => this.clearFilter(), style: styles.buttonClearFilter, title: this.props.t('ra_Clear filter'), size: "large" },
+                React.createElement(IconClearFilter, null),
+                React.createElement(IconClose, { style: styles.buttonClearFilterIcon })));
         }
         if (this.props.width === 'xs') {
-            return (react_1.default.createElement("div", { style: styles.headerRow },
-                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: '100%' }) }, this.getFilterInput('id'))));
+            return (React.createElement("div", { style: styles.headerRow },
+                React.createElement("div", { style: { ...styles.headerCell, width: '100%' } }, this.getFilterInput('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" },
+        return (React.createElement("div", { style: styles.headerRow },
+            React.createElement("div", { style: { ...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", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.nameHeader, position: 'relative' }), "data-min": 100, "data-name": "nameHeader" },
+            this.columnsVisibility.name ? (React.createElement("div", { style: { ...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", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.type, position: 'relative' }), "data-min": 100, "data-name": "type" },
+            !this.state.statesView && (React.createElement(React.Fragment, null,
+                this.columnsVisibility.type ? (React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.role, position: 'relative' }), "data-min": 100, "data-name": "role" },
+                this.columnsVisibility.role ? (React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.room, position: 'relative' }), "data-min": 100, "data-name": "room" },
+                this.columnsVisibility.room ? (React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.func, position: 'relative' }), "data-min": 100, "data-name": "func" },
+                this.columnsVisibility.func ? (React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.changedFrom, position: 'relative' }), "data-min": 100, "data-name": "changedFrom" },
+            this.state.statesView && (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.qualityCode, position: 'relative' }), "data-min": 100, "data-name": "qualityCode" },
+                React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.timestamp, position: 'relative' }), "data-min": 100, "data-name": "timestamp" },
+                React.createElement("div", { style: {
+                        ...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", { style: Object.assign(Object.assign(Object.assign({}, styles.headerCell), styles.headerCellValue), { width: this.columnsVisibility.lastChange, position: 'relative' }), "data-min": 100, "data-name": "lastChange" },
+                React.createElement("div", { style: {
+                        ...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", { 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.adapterColumns.map(item => (React.createElement("div", { style: {
+                    ...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.createElement("div", { style: {
+                    ...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", { title: this.texts.filter_custom, style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.buttons }) },
+            this.columnsVisibility.buttons ? (React.createElement("div", { title: this.texts.filter_custom, style: { ...styles.headerCell, width: this.columnsVisibility.buttons } },
                 ' ',
                 this.getFilterSelectCustoms())) : null));
     }
     renderToast() {
-        return (react_1.default.createElement(material_1.Snackbar, { open: !!this.state.toast, autoHideDuration: 3000, onClick: () => this.setState({ toast: '' }), onClose: () => this.setState({ toast: '' }), message: this.state.toast, action: react_1.default.createElement(material_1.IconButton, { size: "small", "aria-label": "close", color: "inherit", onClick: () => this.setState({ toast: '' }) },
-                react_1.default.createElement(icons_material_1.Close, { fontSize: "small" })) }));
+        return (React.createElement(Snackbar, { open: !!this.state.toast, autoHideDuration: 3000, onClick: () => this.setState({ toast: '' }), onClose: () => this.setState({ toast: '' }), message: this.state.toast, action: React.createElement(IconButton, { size: "small", "aria-label": "close", color: "inherit", onClick: () => this.setState({ toast: '' }) },
+                React.createElement(IconClose, { fontSize: "small" })) }));
     }
     /**
      * Called when component is updated.
@@ -5380,7 +5438,7 @@ class ObjectBrowserClass extends react_1.Component {
     scrollToItem(id) {
         this.selectFirst = '';
         const node = window.document.getElementById(id);
-        node === null || node === void 0 ? void 0 : node.scrollIntoView({
+        node?.scrollIntoView({
             behavior: 'auto',
             block: 'center',
             inline: 'center',
@@ -5389,10 +5447,9 @@ class ObjectBrowserClass extends react_1.Component {
     renderCustomDialog() {
         if (this.state.customDialog && this.props.objectCustomDialog) {
             const ObjectCustomDialog = this.props.objectCustomDialog;
-            return (react_1.default.createElement(ObjectCustomDialog, { reportChangedIds: (changedIds) => (this.changedIds = [...changedIds]), objectIDs: this.state.customDialog, allVisibleObjects: !!this.state.customDialogAll, expertMode: this.state.filter.expertMode, isFloatComma: this.props.isFloatComma === undefined
+            return (React.createElement(ObjectCustomDialog, { reportChangedIds: (changedIds) => (this.changedIds = [...changedIds]), objectIDs: this.state.customDialog, allVisibleObjects: !!this.state.customDialogAll, expertMode: this.state.filter.expertMode, isFloatComma: this.props.isFloatComma === undefined
                     ? this.systemConfig.common.isFloatComma
                     : this.props.isFloatComma, t: this.props.t, lang: this.props.lang, socket: this.props.socket, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, objects: this.objects, customsInstances: this.info.customs, onClose: () => {
-                    var _b;
                     this.pauseSubscribe(false);
                     this.setState({ customDialog: null });
                     if (this.changedIds) {
@@ -5400,7 +5457,7 @@ class ObjectBrowserClass extends react_1.Component {
                         // update all changed IDs
                         this.forceUpdate();
                     }
-                    (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate('tab-objects');
+                    this.props.router?.doNavigate('tab-objects');
                 }, systemConfig: this.systemConfig }));
         }
         return null;
@@ -5420,18 +5477,17 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         const ObjectBrowserEditObject = this.props.objectBrowserEditObject;
-        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
+        return (React.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, theme: this.props.theme, 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) => {
-                var _b, _c;
                 if (obj) {
                     let updateAlias;
                     if (this.state.editObjectDialog.startsWith('alias.')) {
-                        if (JSON.stringify((_b = this.objects[this.state.editObjectDialog].common) === null || _b === void 0 ? void 0 : _b.alias) !==
-                            JSON.stringify((_c = obj.common) === null || _c === void 0 ? void 0 : _c.alias)) {
+                        if (JSON.stringify(this.objects[this.state.editObjectDialog].common?.alias) !==
+                            JSON.stringify(obj.common?.alias)) {
                             updateAlias = this.state.editObjectDialog;
                         }
                     }
@@ -5453,14 +5509,14 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         const ObjectBrowserViewFile = this.props.objectBrowserViewFile;
-        return (react_1.default.createElement(ObjectBrowserViewFile, { key: "viewFile", obj: this.objects[this.state.viewFileDialog], socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ viewFileDialog: '' }) }));
+        return (React.createElement(ObjectBrowserViewFile, { key: "viewFile", obj: this.objects[this.state.viewFileDialog], socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ viewFileDialog: '' }) }));
     }
     renderAliasEditorDialog() {
         if (!this.props.objectBrowserAliasEditor || !this.state.showAliasEditor) {
             return null;
         }
         const ObjectBrowserAliasEditor = this.props.objectBrowserAliasEditor;
-        return (react_1.default.createElement(ObjectBrowserAliasEditor, { key: "editAlias", obj: this.objects[this.state.showAliasEditor], objects: this.objects, socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ showAliasEditor: '' }), onRedirect: (id, timeout) => setTimeout(() => this.onSelect(id, false, () => this.expandAllSelected(() => {
+        return (React.createElement(ObjectBrowserAliasEditor, { key: "editAlias", obj: this.objects[this.state.showAliasEditor], objects: this.objects, socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ showAliasEditor: '' }), onRedirect: (id, timeout) => setTimeout(() => this.onSelect(id, false, () => this.expandAllSelected(() => {
                 this.scrollToItem(id);
                 setTimeout(() => this.setState({
                     editObjectDialog: id,
@@ -5484,8 +5540,8 @@ class ObjectBrowserClass extends react_1.Component {
         if (!this.state.aliasMenu) {
             return null;
         }
-        return (react_1.default.createElement(material_1.Menu, { key: "aliasmenu", open: !0, anchorEl: window.document.getElementById(`alias_${this.state.aliasMenu}`), onClose: () => this.setState({ aliasMenu: '' }) }, this.info.aliasesMap[this.state.aliasMenu].map((aliasId, i) => (react_1.default.createElement(material_1.MenuItem, { key: aliasId, onClick: () => this.onSelect(aliasId) },
-            react_1.default.createElement(material_1.ListItemText, null, this.renderAliasLink(this.state.aliasMenu, i, {
+        return (React.createElement(Menu, { key: "aliasmenu", open: !0, anchorEl: window.document.getElementById(`alias_${this.state.aliasMenu}`), onClose: () => this.setState({ aliasMenu: '' }) }, this.info.aliasesMap[this.state.aliasMenu].map((aliasId, i) => (React.createElement(MenuItem, { key: aliasId, onClick: () => this.onSelect(aliasId) },
+            React.createElement(ListItemText, null, this.renderAliasLink(this.state.aliasMenu, i, {
                 '& .admin-browser-arrow': {
                     mr: '8px',
                 },
@@ -5495,7 +5551,6 @@ class ObjectBrowserClass extends react_1.Component {
      * Renders the right mouse button context menu
      */
     renderContextMenu() {
-        var _b, _c, _d, _e, _f, _g, _h;
         if (!this.state.showContextMenu) {
             return null;
         }
@@ -5545,8 +5600,8 @@ class ObjectBrowserClass extends react_1.Component {
                 key: '0',
                 visibility: !!(this.props.objectBrowserEditObject &&
                     obj &&
-                    (this.state.filter.expertMode || _a.isNonExpertId(id))),
-                icon: (react_1.default.createElement(icons_material_1.Edit, { fontSize: "small", style: this.styles.contextMenuEdit })),
+                    (this.state.filter.expertMode || ObjectBrowserClass.isNonExpertId(id))),
+                icon: (React.createElement(IconEdit, { fontSize: "small", style: this.styles.contextMenuEdit })),
                 label: this.texts.editObject,
                 onClick: () => this.setState({ editObjectDialog: item.data.id, showContextMenu: null, editObjectAlias: false }),
             },
@@ -5557,9 +5612,9 @@ class ObjectBrowserClass extends react_1.Component {
                     obj &&
                     obj.type === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
-                    ((_b = obj.common) === null || _b === void 0 ? void 0 : _b.type) !== 'file' &&
+                    obj.common?.type !== 'file' &&
                     (this.state.filter.expertMode || obj.common.write !== false)),
-                icon: (react_1.default.createElement(icons_material_1.FormatItalic, { fontSize: "small", style: this.styles.contextMenuEditValue })),
+                icon: (React.createElement(IconValueEdit, { fontSize: "small", style: this.styles.contextMenuEditValue })),
                 label: this.props.t('ra_Edit value'),
                 onClick: () => {
                     this.edit = {
@@ -5573,12 +5628,12 @@ class ObjectBrowserClass extends react_1.Component {
             },
             VIEW: {
                 visibility: !!this.props.objectBrowserViewFile &&
-                    (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
+                    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", style: this.styles.contextMenuView })),
+                    obj.common?.type === 'file',
+                icon: (React.createElement(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 }),
+                onClick: () => this.setState({ viewFileDialog: obj?._id || '', showContextMenu: null }),
             },
             CUSTOM: {
                 key: '2',
@@ -5587,16 +5642,15 @@ class ObjectBrowserClass extends react_1.Component {
                     obj &&
                     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", style: item.data.hasCustoms
+                    obj.common?.type !== 'file'),
+                icon: (React.createElement(IconConfig, { fontSize: "small", style: item.data.hasCustoms
                         ? this.styles.cellButtonsButtonWithCustoms
                         : styles.cellButtonsButtonWithoutCustoms })),
                 style: this.styles.contextMenuCustom,
                 label: this.texts.customConfig,
                 onClick: () => {
-                    var _b;
                     this.pauseSubscribe(true);
-                    (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate(null, 'customs', id);
+                    this.props.router?.doNavigate(null, 'customs', id);
                     this.setState({ customDialog: [id], showContextMenu: null });
                 },
             },
@@ -5617,14 +5671,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", style: this.styles.contextMenuRole })),
+                icon: (React.createElement(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", style: this.styles.contextMenuRole })),
+                icon: (React.createElement(BedroomParent, { fontSize: "small", style: this.styles.contextMenuRole })),
                 label: this.props.t('ra_Edit function'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
@@ -5642,7 +5696,7 @@ class ObjectBrowserClass extends react_1.Component {
             ROOM: {
                 key: '6',
                 visibility: !!enumEditable,
-                icon: (react_1.default.createElement(icons_material_1.Construction, { fontSize: "small", style: this.styles.contextMenuRoom })),
+                icon: (React.createElement(Construction, { fontSize: "small", style: this.styles.contextMenuRoom })),
                 label: this.props.t('ra_Edit room'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
@@ -5662,19 +5716,17 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!(!this.props.notEditable &&
                     this.props.objectBrowserAliasEditor &&
                     this.props.objectBrowserEditObject &&
-                    this.state.filter.expertMode &&
-                    (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
+                    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, { style: ((_f = obj === null || obj === void 0 ? void 0 : obj.common) === null || _f === void 0 ? void 0 : _f.alias)
+                    obj.common?.type !== 'file'),
+                icon: (React.createElement(IconLink, { style: obj?.common?.alias
                         ? this.styles.cellButtonsButtonWithCustoms
                         : styles.cellButtonsButtonWithoutCustoms })),
                 label: this.info.aliasesMap[item.data.id]
                     ? this.props.t('ra_Edit alias')
                     : this.props.t('ra_Create alias'),
                 onClick: () => {
-                    var _b;
-                    if ((_b = obj === null || obj === void 0 ? void 0 : obj.common) === null || _b === void 0 ? void 0 : _b.alias) {
+                    if (obj?.common?.alias) {
                         this.setState({ showContextMenu: null, editObjectDialog: item.data.id, editObjectAlias: true });
                     }
                     else {
@@ -5686,49 +5738,49 @@ 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", style: this.styles.cellButtonsButtonWithCustoms })),
+                icon: (React.createElement(AddIcon, { fontSize: "small", style: this.styles.cellButtonsButtonWithCustoms })),
                 style: styles.contextMenuWithSubMenu,
                 label: this.texts.create,
                 subMenu: [
                     {
                         label: this.texts.createBooleanState,
                         visibility: createStateVisible,
-                        icon: react_1.default.createElement(IconState_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconState, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'state', 'boolean'),
                     },
                     {
                         label: this.texts.createNumberState,
                         visibility: createStateVisible,
-                        icon: react_1.default.createElement(IconState_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconState, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'state', 'number'),
                     },
                     {
                         label: this.texts.createStringState,
                         visibility: createStateVisible,
-                        icon: react_1.default.createElement(IconState_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconState, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'state', 'string'),
                     },
                     {
                         label: this.texts.createState,
                         visibility: createStateVisible,
-                        icon: react_1.default.createElement(IconState_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconState, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'state'),
                     },
                     {
                         label: this.texts.createChannel,
                         visibility: createChannelVisible,
-                        icon: react_1.default.createElement(IconChannel_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconChannel, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'channel'),
                     },
                     {
                         label: this.texts.createDevice,
                         visibility: createDeviceVisible,
-                        icon: react_1.default.createElement(IconDevice_1.default, { fontSize: "small" }),
+                        icon: React.createElement(IconDevice, { fontSize: "small" }),
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'device'),
                     },
                     {
                         label: this.texts.createFolder,
-                        icon: react_1.default.createElement(icons_material_1.CreateNewFolder, { fontSize: "small" }),
+                        icon: React.createElement(IconFolder, { fontSize: "small" }),
                         visibility: createFolderVisible,
                         onClick: () => this.showAddDataPointDialog(item.data.id, 'folder'),
                     },
@@ -5737,8 +5789,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", style: this.styles.contextMenuDelete })),
+                    (item.children?.length || (obj && !obj.common?.dontDelete))),
+                icon: (React.createElement(IconDelete, { fontSize: "small", style: this.styles.contextMenuDelete })),
                 style: this.styles.contextMenuDelete,
                 label: this.texts.deleteObject,
                 onClick: () => this.setState({ showContextMenu: null }, () => this.showDeleteDialog({
@@ -5749,10 +5801,9 @@ class ObjectBrowserClass extends react_1.Component {
             },
         };
         Object.keys(ITEMS).forEach(key => {
-            var _b, _c;
             if (ITEMS[key].visibility) {
                 if (ITEMS[key].subMenu) {
-                    items.push(react_1.default.createElement(material_1.MenuItem, { key: key, href: "", onClick: (e) => this.state.showContextMenu &&
+                    items.push(React.createElement(MenuItem, { key: key, href: "", onClick: (e) => this.state.showContextMenu &&
                             this.setState({
                                 showContextMenu: {
                                     item: this.state.showContextMenu.item,
@@ -5761,14 +5812,14 @@ class ObjectBrowserClass extends react_1.Component {
                                     subAnchor: e.target,
                                 },
                             }), 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,
+                        React.createElement(ListItemIcon, { style: { ...ITEMS[key].iconStyle, ...ITEMS[key].listItemIconStyle } }, ITEMS[key].icon),
+                        React.createElement(ListItemText, null,
                             ITEMS[key].label,
                             "..."),
-                        react_1.default.createElement(material_1.ListItemSecondaryAction, null,
-                            react_1.default.createElement(icons_material_1.ArrowRight, null))));
-                    if (((_b = this.state.showContextMenu) === null || _b === void 0 ? void 0 : _b.subItem) === key) {
-                        items.push(react_1.default.createElement(material_1.Menu, { key: "subContextMenu", open: !0, anchorEl: this.state.showContextMenu.subAnchor, onClose: () => {
+                        React.createElement("div", { style: { ...styles.contextMenuKeys, opacity: 1 } },
+                            React.createElement(ArrowRightIcon, null))));
+                    if (this.state.showContextMenu?.subItem === key) {
+                        items.push(React.createElement(Menu, { key: "subContextMenu", open: !0, anchorEl: this.state.showContextMenu.subAnchor, onClose: () => {
                                 if (this.state.showContextMenu) {
                                     this.setState({
                                         showContextMenu: {
@@ -5778,16 +5829,19 @@ class ObjectBrowserClass extends react_1.Component {
                                     });
                                 }
                                 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, 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)));
+                            } }, ITEMS[key].subMenu?.map(subItem => subItem.visibility ? (React.createElement(MenuItem, { key: subItem.label, onClick: subItem.onClick, style: subItem.style },
+                            React.createElement(ListItemIcon, { style: {
+                                    ...subItem.iconStyle,
+                                    ...(subItem.listItemIconStyle || undefined),
+                                } }, subItem.icon),
+                            React.createElement(ListItemText, null, subItem.label))) : null)));
                     }
                 }
                 else {
-                    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", { style: styles.contextMenuKeys }, `Alt+${ITEMS[key].key === 'Delete' ? this.props.t('ra_Del') : ITEMS[key].key}`)) : null));
+                    items.push(React.createElement(MenuItem, { key: key, onClick: ITEMS[key].onClick, sx: ITEMS[key].style },
+                        React.createElement(ListItemIcon, { style: { ...ITEMS[key].iconStyle, ...ITEMS[key].listItemIconStyle } }, ITEMS[key].icon),
+                        React.createElement(ListItemText, null, ITEMS[key].label),
+                        ITEMS[key].key ? (React.createElement("div", { style: styles.contextMenuKeys }, `Alt+${ITEMS[key].key === 'Delete' ? this.props.t('ra_Del') : ITEMS[key].key}`)) : null));
                 }
             }
         });
@@ -5795,7 +5849,7 @@ class ObjectBrowserClass extends react_1.Component {
             setTimeout(() => this.setState({ showContextMenu: null }), 100);
             return null;
         }
-        return (react_1.default.createElement(material_1.Menu, { key: "contextMenu", open: !0, onKeyUp: e => {
+        return (React.createElement(Menu, { key: "contextMenu", open: !0, onKeyUp: e => {
                 e.preventDefault();
                 if (e.altKey) {
                     Object.keys(ITEMS).forEach(key => {
@@ -5810,7 +5864,6 @@ class ObjectBrowserClass extends react_1.Component {
             } }, items));
     }
     renderEditValueDialog() {
-        var _b;
         if (!this.state.updateOpened || !this.props.objectBrowserValue) {
             return null;
         }
@@ -5822,12 +5875,12 @@ class ObjectBrowserClass extends react_1.Component {
             console.error(`Something went wrong. Possibly the object ${this.edit.id} was deleted.`);
             return null;
         }
-        const type = ((_b = this.objects[this.edit.id].common) === null || _b === void 0 ? void 0 : _b.type)
+        const type = this.objects[this.edit.id].common?.type
             ? this.objects[this.edit.id].common.type
             : typeof this.edit.val;
         const role = this.objects[this.edit.id].common.role;
         const ObjectBrowserValue = this.props.objectBrowserValue;
-        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, theme: this.props.theme, 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
+        return (React.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, theme: this.props.theme, 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 });
@@ -5846,26 +5899,26 @@ class ObjectBrowserClass extends react_1.Component {
         }
         if (this.styleTheme !== this.props.themeType) {
             this.styles = {
-                cellIdIconFolder: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconFolder),
-                cellIdIconDocument: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconDocument),
-                iconDeviceError: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceError),
-                iconDeviceConnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceConnected),
-                iconDeviceDisconnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceDisconnected),
-                cellButtonsButtonWithCustoms: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
-                invertedBackground: Utils_1.default.getStyle(this.props.theme, styles.invertedBackground),
-                invertedBackgroundFlex: Utils_1.default.getStyle(this.props.theme, styles.invertedBackgroundFlex),
-                contextMenuEdit: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEdit),
-                contextMenuEditValue: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEditValue),
-                contextMenuView: Utils_1.default.getStyle(this.props.theme, styles.contextMenuView),
-                contextMenuCustom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuCustom),
-                contextMenuACL: Utils_1.default.getStyle(this.props.theme, styles.contextMenuACL),
-                contextMenuRoom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRoom),
-                contextMenuRole: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRole),
-                contextMenuDelete: Utils_1.default.getStyle(this.props.theme, styles.contextMenuDelete),
-                filterInput: Utils_1.default.getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
-                iconCopy: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
-                aliasReadWrite: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasReadWrite),
-                aliasAlone: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasAlone),
+                cellIdIconFolder: Utils.getStyle(this.props.theme, styles.cellIdIconFolder),
+                cellIdIconDocument: Utils.getStyle(this.props.theme, styles.cellIdIconDocument),
+                iconDeviceError: Utils.getStyle(this.props.theme, styles.iconDeviceError),
+                iconDeviceConnected: Utils.getStyle(this.props.theme, styles.iconDeviceConnected),
+                iconDeviceDisconnected: Utils.getStyle(this.props.theme, styles.iconDeviceDisconnected),
+                cellButtonsButtonWithCustoms: Utils.getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
+                invertedBackground: Utils.getStyle(this.props.theme, styles.invertedBackground),
+                invertedBackgroundFlex: Utils.getStyle(this.props.theme, styles.invertedBackgroundFlex),
+                contextMenuEdit: Utils.getStyle(this.props.theme, styles.contextMenuEdit),
+                contextMenuEditValue: Utils.getStyle(this.props.theme, styles.contextMenuEditValue),
+                contextMenuView: Utils.getStyle(this.props.theme, styles.contextMenuView),
+                contextMenuCustom: Utils.getStyle(this.props.theme, styles.contextMenuCustom),
+                contextMenuACL: Utils.getStyle(this.props.theme, styles.contextMenuACL),
+                contextMenuRoom: Utils.getStyle(this.props.theme, styles.contextMenuRoom),
+                contextMenuRole: Utils.getStyle(this.props.theme, styles.contextMenuRole),
+                contextMenuDelete: Utils.getStyle(this.props.theme, styles.contextMenuDelete),
+                filterInput: Utils.getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
+                iconCopy: Utils.getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
+                aliasReadWrite: Utils.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasReadWrite),
+                aliasAlone: Utils.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasAlone),
             };
             this.styleTheme = this.props.themeType;
         }
@@ -5887,11 +5940,11 @@ class ObjectBrowserClass extends react_1.Component {
             this.checkUnsubscribes();
         }, 200);
         if (!this.state.loaded) {
-            return react_1.default.createElement(material_1.CircularProgress, { key: `${this.props.dialogName}_c` });
+            return React.createElement(CircularProgress, { key: `${this.props.dialogName}_c` });
         }
         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, `
+        return (React.createElement(TabContainer, { key: this.props.dialogName },
+            React.createElement("style", null, `
 @keyframes newValueAnimation-light {
     0% {
         color: #00f900;
@@ -5921,10 +5974,10 @@ class ObjectBrowserClass extends react_1.Component {
     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,
+            React.createElement(TabHeader, null, this.getToolbar()),
+            React.createElement(TabContent, null,
                 this.renderHeader(),
-                react_1.default.createElement("div", { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
+                React.createElement("div", { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
             this.renderContextMenu(),
             this.renderAliasMenu(),
             this.renderToast(),
@@ -5946,8 +5999,5 @@ class ObjectBrowserClass extends react_1.Component {
                 this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData)));
     }
 }
-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)()(ObjectBrowserClass);
+export const ObjectBrowser = withWidth()(ObjectBrowserClass);
+//# sourceMappingURL=ObjectBrowser.js.map