@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/Components/ObjectBrowser.js

@@ -39,7 +39,7 @@ exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
  *
  * MIT License
  *
- * */
+ */
 const react_1 = __importStar(require("react"));
 const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
 const material_1 = require("@mui/material");
@@ -515,7 +515,7 @@ const styles = {
         cursor: 'pointer',
     },
     cellButtonsValueButtonEdit: {
-        right: (SMALL_BUTTON_SIZE / 2) + 16,
+        right: SMALL_BUTTON_SIZE / 2 + 16,
     },
     cellDetailsLine: {
         display: 'flex',
@@ -749,10 +749,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" },
+    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" })));
+            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" }))));
 }
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
@@ -835,7 +835,9 @@ options) {
     if (options.excludeSystemRepositories) {
         filterKeys.push('system.repositories');
     }
-    const filteredObject = filterKeys.length > 0 || options.excludeTranslations ? filterObject(obj, filterKeys, options.excludeTranslations) : obj;
+    const filteredObject = filterKeys.length > 0 || options.excludeTranslations
+        ? filterObject(obj, filterKeys, options.excludeTranslations)
+        : obj;
     const data = options.beautify ? JSON.stringify(filteredObject, null, 2) : JSON.stringify(filteredObject);
     el.setAttribute('href', `data:application/json;charset=utf-8,${encodeURIComponent(data)}`);
     el.setAttribute('download', fileName);
@@ -874,7 +876,7 @@ function getName(name, lang) {
     }
     return (name || '').toString();
 }
-function getSelectIdIconFromObjects(objects, id, imagePrefix) {
+function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
     // `admin` has prefix '.' and `web` has '../..'
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -884,7 +886,13 @@ function getSelectIdIconFromObjects(objects, id, imagePrefix) {
         // if not BASE64
         if (!aIcon.startsWith('data:image/')) {
             if (aIcon.includes('.')) {
-                src = `${imagePrefix}/adapter/${objects[_id_].common.name}/${aIcon}`;
+                const name = objects[_id_].common.name;
+                if (typeof name === 'object') {
+                    src = `${imagePrefix}/adapter/${name[lang] || name.en}/${aIcon}`;
+                }
+                else {
+                    src = `${imagePrefix}/adapter/${name}/${aIcon}`;
+                }
             }
             else if (aIcon && aIcon.length < 3) {
                 return aIcon; // utf-8
@@ -894,7 +902,7 @@ function getSelectIdIconFromObjects(objects, id, 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_1.default.createElement(react_inlinesvg_1.default, { className: "iconOwn", src: aIcon, width: 28, height: 28 }));
         }
         else {
             src = aIcon;
@@ -909,7 +917,12 @@ function getSelectIdIconFromObjects(objects, id, imagePrefix) {
                     if (cIcon.includes('.')) {
                         let instance;
                         if (objects[id].type === 'instance' || objects[id].type === 'adapter') {
-                            src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
+                            if (typeof common.name === 'object') {
+                                src = `${imagePrefix}/adapter/${common.name[lang] || common.name.en}/${cIcon}`;
+                            }
+                            else {
+                                src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
+                            }
                         }
                         else if (id && id.startsWith('system.adapter.')) {
                             instance = id.split('.', 3);
@@ -941,7 +954,7 @@ function getSelectIdIconFromObjects(objects, id, 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_1.default.createElement(react_inlinesvg_1.default, { className: "iconOwn", src: cIcon, width: 28, height: 28 }));
                 }
                 else {
                     src = cIcon;
@@ -1039,7 +1052,8 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
                         filteredOut = true;
                     }
                 }
-                else if (Array.isArray(filterOfCustom)) { // here are ['influxdb.', 'telegram.']
+                else if (Array.isArray(filterOfCustom)) {
+                    // here are ['influxdb.', 'telegram.']
                     const customs = Object.keys(common.custom); // here are ['influxdb.0', 'telegram.2']
                     if (filterOfCustom.find(cst => customs.find(id => id.startsWith(cst)))) {
                         filteredOut = true;
@@ -1147,20 +1161,20 @@ function getVisibleItems(item, type, objects, _result) {
     }
     return _result;
 }
-function getSystemIcon(objects, id, level, themeType, imagePrefix) {
+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_1.default.createElement(icons_material_1.Link, { 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_1.default.createElement(icons_material_1.DataObject, { 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_1.default.createElement(icons_material_1.SettingsApplications, { 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_1.default.createElement(icons_material_1.SettingsApplications, { 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" });
@@ -1183,7 +1197,7 @@ function getSystemIcon(objects, id, level, themeType, imagePrefix) {
     else if (level < 2) {
         // detect "cloud.0"
         if (objects[`system.adapter.${id}`]) {
-            icon = getSelectIdIconFromObjects(objects, `system.adapter.${id}`, imagePrefix);
+            icon = getSelectIdIconFromObjects(objects, `system.adapter.${id}`, lang, imagePrefix);
         }
     }
     return icon || null;
@@ -1198,12 +1212,12 @@ function getObjectTooltip(data, lang) {
 function getIdFieldTooltip(data, lang) {
     const tooltip = getObjectTooltip(data, lang);
     if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.startsWith('http')) {
-        return react_1.default.createElement(material_1.Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip);
+        return (react_1.default.createElement(material_1.Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip));
     }
     return react_1.default.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const imagePrefix = options.imagePrefix || '.';
     let ids = Object.keys(objects);
     ids.sort((a, b) => {
@@ -1241,6 +1255,7 @@ function buildTree(objects, options) {
         customs: ['_'],
         enums: [],
         hasSomeCustoms: false,
+        aliasesMap: {},
     };
     let cRoot = root;
     for (let i = 0; i < ids.length; i++) {
@@ -1274,6 +1289,38 @@ function buildTree(objects, options) {
                 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 (typeof obj.common.alias.id === 'string') {
+                    const usedId = obj.common.alias.id;
+                    if (!info.aliasesMap[usedId]) {
+                        info.aliasesMap[usedId] = [id];
+                    }
+                    else if (!info.aliasesMap[usedId].includes(id)) {
+                        info.aliasesMap[usedId].push(id);
+                    }
+                }
+                else {
+                    const readId = obj.common.alias.id.read;
+                    if (readId) {
+                        if (!info.aliasesMap[readId]) {
+                            info.aliasesMap[readId] = [id];
+                        }
+                        else if (!info.aliasesMap[readId].includes(id)) {
+                            info.aliasesMap[readId].push(id);
+                        }
+                    }
+                    const writeId = obj.common.alias.id.write;
+                    if (writeId) {
+                        if (!info.aliasesMap[writeId]) {
+                            info.aliasesMap[writeId] = [id];
+                        }
+                        else if (!info.aliasesMap[writeId].includes(id)) {
+                            info.aliasesMap[writeId].push(id);
+                        }
+                    }
+                }
+            }
         }
         info.ids.push(id);
         let repeat;
@@ -1297,7 +1344,7 @@ function buildTree(objects, options) {
                                     id: curPath,
                                     obj: objects[curPath],
                                     level: k,
-                                    icon: getSystemIcon(objects, curPath, k, options.themeType, imagePrefix),
+                                    icon: getSystemIcon(objects, curPath, k, options.themeType, options.lang, imagePrefix),
                                     generated: true,
                                 },
                             };
@@ -1314,22 +1361,24 @@ function buildTree(objects, options) {
                 const _cRoot = {
                     data: {
                         name: parts[parts.length - 1],
-                        title: getName((_c = obj === null || obj === void 0 ? void 0 : obj.common) === null || _c === void 0 ? void 0 : _c.name, options.lang),
+                        title: getName((_d = obj === null || obj === void 0 ? void 0 : obj.common) === null || _d === void 0 ? void 0 : _d.name, options.lang),
                         obj,
                         parent: cRoot,
-                        icon: getSelectIdIconFromObjects(objects, id, imagePrefix) ||
-                            getSystemIcon(objects, id, 0, options.themeType, imagePrefix),
+                        icon: getSelectIdIconFromObjects(objects, id, options.lang, imagePrefix) ||
+                            getSystemIcon(objects, id, 0, options.themeType, options.lang, imagePrefix),
                         id,
-                        hasCustoms: !!(((_d = obj.common) === null || _d === void 0 ? void 0 : _d.custom) && Object.keys(obj.common.custom).length),
+                        hasCustoms: !!(((_e = obj.common) === null || _e === void 0 ? void 0 : _e.custom) && Object.keys(obj.common.custom).length),
                         level: parts.length - 1,
                         generated: false,
                         button: obj.type === 'state' &&
-                            !!((_e = obj.common) === null || _e === void 0 ? void 0 : _e.role) &&
+                            !!((_f = obj.common) === null || _f === void 0 ? void 0 : _f.role) &&
                             typeof obj.common.role === 'string' &&
                             obj.common.role.startsWith('button') &&
-                            ((_f = obj.common) === null || _f === void 0 ? void 0 : _f.write) !== false,
-                        switch: obj.type === 'state' && ((_g = obj.common) === null || _g === void 0 ? void 0 : _g.type) === 'boolean' &&
-                            ((_h = obj.common) === null || _h === void 0 ? void 0 : _h.write) !== false && ((_j = obj.common) === null || _j === void 0 ? void 0 : _j.read) !== false,
+                            ((_g = obj.common) === null || _g === void 0 ? void 0 : _g.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,
                     },
                 };
                 cRoot.children = cRoot.children || [];
@@ -1517,7 +1566,7 @@ function quality2text(q) {
  * Format a state value for visualization
  */
 function formatValue(options) {
-    const { dateFormat, state, isFloatComma, texts, obj, } = options;
+    const { dateFormat, state, isFloatComma, texts, obj } = options;
     const states = Utils_1.default.getStates(obj);
     const isCommon = obj.common;
     let fileViewer;
@@ -1636,11 +1685,12 @@ function formatValue(options) {
  * Get CSS style for given state value
  */
 function getValueStyle(options) {
-    const { state, isExpertMode, isButton } = options;
-    let color = (state === null || state === void 0 ? void 0 : state.ack) ? (state.q ? '#ffa500' : '') : '#ff2222c9';
-    if (!isExpertMode && isButton) {
-        color = '';
-    }
+    const { state /* , isExpertMode, isButton */ } = options;
+    const color = (state === null || state === void 0 ? void 0 : state.ack) ? (state.q ? '#ffa500' : '') : '#ff2222c9';
+    // do not show the color of the button in non-expert mode
+    // if (!isExpertMode && isButton) {
+    //     color = '';
+    // }
     return { color };
 }
 function prepareSparkData(values, from) {
@@ -1677,21 +1727,21 @@ 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' } }),
+    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' } })),
 };
 const SCREEN_WIDTHS = {
     // extra-small: 0px
@@ -1786,6 +1836,19 @@ const DEFAULT_FILTER = {
 class ObjectBrowserClass extends react_1.Component {
     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;
@@ -1819,6 +1882,7 @@ class ObjectBrowserClass extends react_1.Component {
         this.resizerNextDiv = null;
         this.storedWidths = null;
         this.defaultHistory = '';
+        this.columnsVisibility = {};
         this.changedIds = null;
         this.contextMenu = null;
         this.recordStates = [];
@@ -1831,7 +1895,12 @@ class ObjectBrowserClass extends react_1.Component {
             // 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 } });
+                this.setState({
+                    showContextMenu: {
+                        item: this.contextMenu.item,
+                        position: { left: e.clientX + 2, top: e.clientY - 6 },
+                    },
+                });
             }
             else if (this.state.showContextMenu) {
                 e.preventDefault();
@@ -1940,15 +2009,17 @@ class ObjectBrowserClass extends react_1.Component {
                 // 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 =
+                        newObj ||
+                            {
+                                _id: id,
+                                common: {
+                                    name: id.split('.').pop(),
+                                    members: [],
+                                },
+                                native: {},
+                                type: 'enum',
+                            };
                     oldObj.common = oldObj.common || {};
                     oldObj.common.members = [objId];
                     oldObj.type = 'enum';
@@ -2082,14 +2153,11 @@ class ObjectBrowserClass extends react_1.Component {
             const funcRenderStateObject = (value) => {
                 const rights = acl[value];
                 check.forEach((el, i) => {
-                    // eslint-disable-next-line no-bitwise
                     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)));
+                            react_1.default.createElement("span", { style: value === 'object' ? styles.rightsObject : styles.rightsState }, el.value)));
                     }
                 });
             };
@@ -2099,7 +2167,7 @@ class ObjectBrowserClass extends react_1.Component {
             if (acl.state) {
                 funcRenderStateObject('state');
             }
-            return arrayTooltipText.length ? react_1.default.createElement("span", { style: styles.tooltipAccessControl }, arrayTooltipText.map(el => el)) : null;
+            return arrayTooltipText.length ? (react_1.default.createElement("span", { style: styles.tooltipAccessControl }, arrayTooltipText.map(el => el))) : null;
         };
         this.resizerMouseMove = (e) => {
             if (this.resizerActiveDiv) {
@@ -2113,7 +2181,8 @@ class ObjectBrowserClass extends react_1.Component {
                     width = this.resizerOldWidth + e.clientX - this.resizerPosition;
                     widthNext = this.resizerOldWidthNext - e.clientX + this.resizerPosition;
                 }
-                if (this.resizerActiveName && this.resizerNextName &&
+                if (this.resizerActiveName &&
+                    this.resizerNextName &&
                     (!this.resizerMin || width > this.resizerMin) &&
                     (!this.resizerNextMin || widthNext > this.resizerNextMin)) {
                     this.resizerCurrentWidths[this.resizerActiveName] = width;
@@ -2153,7 +2222,9 @@ class ObjectBrowserClass extends react_1.Component {
             window.removeEventListener('mouseup', this.resizerMouseUp);
         };
         this.resizerMouseDown = (e) => {
-            this.storedWidths = this.storedWidths || JSON.parse(JSON.stringify(SCREEN_WIDTHS[this.props.width || 'lg']));
+            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;
@@ -2202,6 +2273,7 @@ class ObjectBrowserClass extends react_1.Component {
             this.forceUpdate();
         };
         const lastSelectedItemStr = this.localStorage.getItem(`${props.dialogName || 'App'}.objectSelected`) || '';
+        this.selectFirst = '';
         if (lastSelectedItemStr.startsWith('[')) {
             try {
                 const lastSelectedItems = JSON.parse(lastSelectedItemStr);
@@ -2243,7 +2315,8 @@ class ObjectBrowserClass extends react_1.Component {
         filter.expertMode =
             props.expertMode !== undefined
                 ? props.expertMode
-                : (window._sessionStorage || window.sessionStorage).getItem('App.expertMode') === 'true';
+                : (window._sessionStorage || window.sessionStorage).getItem('App.expertMode') ===
+                    'true';
         this.tableRef = (0, react_1.createRef)();
         this.filterRefs = {};
         Object.keys(DEFAULT_FILTER).forEach(name => (this.filterRefs[name] = (0, react_1.createRef)()));
@@ -2348,6 +2421,7 @@ class ObjectBrowserClass extends react_1.Component {
             excludeSystemRepositoriesFromExport: true,
             excludeTranslations: false,
             tooltipInfo: null,
+            aliasMenu: '',
         };
         this.texts = {
             name: props.t('ra_Name'),
@@ -2420,8 +2494,7 @@ class ObjectBrowserClass extends react_1.Component {
                         SCREEN_WIDTHS[width].widths.name = resizerCurrentWidths[id];
                     }
                     else if (SCREEN_WIDTHS[width].widths[id] !== undefined) {
-                        SCREEN_WIDTHS[width].widths[id] =
-                            resizerCurrentWidths[id];
+                        SCREEN_WIDTHS[width].widths[id] = resizerCurrentWidths[id];
                     }
                 });
                 this.customWidth = true;
@@ -2613,7 +2686,9 @@ class ObjectBrowserClass extends react_1.Component {
                 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, { language: this.props.lang });
+                const name = Utils_1.default.getObjectName(this.objects, this.state.selected[0], null, {
+                    language: this.props.lang,
+                });
                 if (this.props.onSelect) {
                     this.props.onSelect(this.state.selected, name, isDouble);
                 }
@@ -2666,7 +2741,9 @@ class ObjectBrowserClass extends react_1.Component {
             this.props.objectsWorker.unregisterHandler(this.onObjectChangeFromWorker, true);
         }
         else {
-            this.props.socket.unsubscribeObject('*', this.onObjectChange);
+            void this.props.socket
+                .unsubscribeObject('*', this.onObjectChange)
+                .catch(e => console.error(`Cannot unsubscribe *: ${e}`));
         }
         // remove all subscribes
         this.subscribes.forEach(pattern => {
@@ -2709,18 +2786,20 @@ class ObjectBrowserClass extends react_1.Component {
             this.props.socket.unsubscribeState(pattern, this.onStateChange);
         });
         this.subscribes = [];
-        this.loadAllObjects(true).then(() => console.log('updated!'));
+        this.loadAllObjects(true)
+            .then(() => console.log('updated!'))
+            .catch(e => this.showError(e));
     }
     /**
      * 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" },
+        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;
+                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;
     }
     /**
      * Show the error dialog.
@@ -2795,11 +2874,10 @@ class ObjectBrowserClass extends react_1.Component {
             }
         }
         return cols
-            .filter(id => (isLast && (id === 'val' || id === 'buttons')) ||
-            (!isLast && id !== 'val' && id !== 'buttons'))
+            .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: () => {
+            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);
@@ -2819,7 +2897,7 @@ class ObjectBrowserClass extends react_1.Component {
                         !!(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}`) }));
+                react_1.default.createElement(material_1.ListItemText, { primary: this.texts[`filter_${id}`] || this.props.t(`ra_${id}`) })));
         });
     }
     /**
@@ -2829,7 +2907,7 @@ 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: {
+        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}`]),
             } },
             react_1.default.createElement(material_1.DialogTitle, { sx: styles.fontSizeTitle }, this.props.t('ra_Configure')),
@@ -2859,40 +2937,41 @@ class ObjectBrowserClass extends react_1.Component {
                         } }), label: this.props.t('ra_Auto (no custom columns)') }),
                 react_1.default.createElement(material_1.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 });
-                                }
-                            }, 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})` }));
-                    })),
+                    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 });
+                                        }
+                                    }, 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})` })));
+                            })),
                     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_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))));
     }
     async getAdditionalColumns() {
         try {
-            const instances = await this.props.socket
-                .getAdapters();
+            const instances = await this.props.socket.getAdapters();
             let columnsForAdmin = null;
             // find all additional columns
             instances.forEach(obj => (columnsForAdmin = this.parseObjectForAdmins(columnsForAdmin, obj)));
@@ -2989,9 +3068,9 @@ class ObjectBrowserClass extends react_1.Component {
             else {
                 cColumns = null;
             }
-            if (cColumns === null || cColumns === void 0 ? void 0 : cColumns.length) {
+            if (cColumns && cColumns.length) {
                 columnsForAdmin = columnsForAdmin || {};
-                columnsForAdmin[obj.common.name] = cColumns.sort((a, b) => (a.path > b.path ? -1 : a.path < b.path ? 1 : 0));
+                columnsForAdmin[obj.common.name] = cColumns.sort((a, b) => a.path > b.path ? -1 : a.path < b.path ? 1 : 0);
             }
         }
         else if (obj.common && obj.common.name && columnsForAdmin && columnsForAdmin[obj.common.name]) {
@@ -3019,17 +3098,62 @@ class ObjectBrowserClass extends react_1.Component {
             }, 500);
         }
     }
+    // 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.'))) {
+            return;
+        }
+        // Rebuild aliases map
+        const aliasesIds = Object.keys(this.objects).filter(id => id.startsWith('alias.0'));
+        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 (typeof obj.common.alias.id === 'string') {
+                    const usedId = obj.common.alias.id;
+                    if (!this.info.aliasesMap[usedId]) {
+                        this.info.aliasesMap[usedId] = [id];
+                    }
+                    else if (!this.info.aliasesMap[usedId].includes(id)) {
+                        this.info.aliasesMap[usedId].push(id);
+                    }
+                }
+                else {
+                    const readId = obj.common.alias.id.read;
+                    if (readId) {
+                        if (!this.info.aliasesMap[readId]) {
+                            this.info.aliasesMap[readId] = [id];
+                        }
+                        else if (!this.info.aliasesMap[readId].includes(id)) {
+                            this.info.aliasesMap[readId].push(id);
+                        }
+                    }
+                    const writeId = obj.common.alias.id.write;
+                    if (writeId) {
+                        if (!this.info.aliasesMap[writeId]) {
+                            this.info.aliasesMap[writeId] = [id];
+                        }
+                        else if (!this.info.aliasesMap[writeId].includes(id)) {
+                            this.info.aliasesMap[writeId].push(id);
+                        }
+                    }
+                }
+            }
+        }
+    }
     /**
      * Processes a single element in regard to certain filters, columns for admin and updates object dict
+     *
+     * @param id The id of the object
+     * @param obj The object itself
      * @returns Returns an object containing the new state (if any) and whether the object was filtered.
      */
-    processOnObjectChangeElement(
-    /** The id of the object */
-    id, 
-    /** The object itself */
-    obj) {
+    processOnObjectChangeElement(id, obj) {
         console.log(`> objectChange ${id}`);
         const type = obj === null || obj === void 0 ? void 0 : obj.type;
+        // If the object is filtered out, we don't need to update the React state
         if (obj &&
             typeof this.props.filterFunc === 'function' &&
             !this.props.filterFunc(obj) &&
@@ -3041,7 +3165,7 @@ class ObjectBrowserClass extends react_1.Component {
             return { newInnerState: null, filtered: true };
         }
         let newInnerState = null;
-        if (id.startsWith('system.adapter.') && obj && obj.type === 'adapter') {
+        if (id.startsWith('system.adapter.') && (obj === null || obj === void 0 ? void 0 : 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)) {
@@ -3055,6 +3179,7 @@ class ObjectBrowserClass extends react_1.Component {
         else if (this.objects[id]) {
             delete this.objects[id];
         }
+        this.updateAliases(id);
         return { newInnerState, filtered: false };
     }
     subscribe(id) {
@@ -3062,7 +3187,9 @@ class ObjectBrowserClass extends react_1.Component {
             this.subscribes.push(id);
             console.log(`+ subscribe ${id}`);
             if (!this.pausedSubscribes) {
-                this.props.socket.subscribeState(id, this.onStateChange);
+                this.props.socket
+                    .subscribeState(id, this.onStateChange)
+                    .catch(e => console.error(`Cannot subscribe on state ${id}: ${e}`));
             }
         }
     }
@@ -3136,13 +3263,12 @@ class ObjectBrowserClass extends react_1.Component {
         }
     }
     isFilterEmpty() {
-        const someNotEmpty = Object.keys(this.state.filter)
-            .find(attr => attr !== 'expertMode' && this.state.filter[attr]);
+        const someNotEmpty = Object.keys(this.state.filter).find(attr => attr !== 'expertMode' && this.state.filter[attr]);
         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_1.default.createElement(material_1.FormControl, { sx: this.styles.filterInput, key: `${filterName}_${this.state.filterKey}`, 
             // style={{ marginTop: 0, marginBottom: 0 }}
             margin: "dense" },
             react_1.default.createElement(material_1.Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
@@ -3151,7 +3277,7 @@ class ObjectBrowserClass extends react_1.Component {
                     }
                     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: {
+            ((_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: {
                     position: 'absolute',
                     right: 0,
                 } },
@@ -3160,12 +3286,12 @@ class ObjectBrowserClass extends react_1.Component {
                         ((_b = this.filterRefs[filterName].current) === null || _b === void 0 ? void 0 : _b.firstChild).value = '';
                         this.onFilter(filterName, '');
                     } },
-                    react_1.default.createElement(icons_material_1.Close, null))) : null);
+                    react_1.default.createElement(icons_material_1.Close, 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' } },
+        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: () => {
                     if (this.filterTimer) {
                         clearTimeout(this.filterTimer);
@@ -3187,11 +3313,11 @@ 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 },
+                    return (react_1.default.createElement(material_1.MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
                         icon || (hasIcons ? react_1.default.createElement("div", { className: "itemIcon" }) : null),
-                        _name);
+                        _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 },
+            ((_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);
@@ -3200,7 +3326,7 @@ class ObjectBrowserClass extends react_1.Component {
                         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_1.default.createElement(icons_material_1.Close, null)))) : null));
     }
     getFilterSelectRole() {
         return this.getFilterSelect('role', this.info.roles);
@@ -3211,7 +3337,7 @@ class ObjectBrowserClass extends react_1.Component {
             return ({
                 name: getName((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, this.props.lang) || id.split('.').pop(),
                 value: id,
-                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon }),
+                icon: (react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon })),
             });
         });
         return this.getFilterSelect('room', rooms);
@@ -3222,7 +3348,7 @@ class ObjectBrowserClass extends react_1.Component {
             return ({
                 name: getName((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name, this.props.lang) || id.split('.').pop(),
                 value: id,
-                icon: react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon }),
+                icon: (react_1.default.createElement(Icon_1.default, { src: ((_e = (_d = this.objects[id]) === null || _d === void 0 ? void 0 : _d.common) === null || _e === void 0 ? void 0 : _e.icon) || '', style: styles.selectIcon })),
             });
         });
         return this.getFilterSelect('func', func);
@@ -3240,7 +3366,7 @@ class ObjectBrowserClass extends react_1.Component {
             const customs = this.info.customs.map(id => ({
                 name: id === '_' ? this.texts.filterCustomsWithout : id,
                 value: id,
-                icon: id === '_' ? null : react_1.default.createElement(Icon_1.default, { src: getSelectIdIconFromObjects(this.objects, id, this.imagePrefix) || '', style: styles.selectIcon }),
+                icon: id === '_' ? null : (react_1.default.createElement(Icon_1.default, { src: getSelectIdIconFromObjects(this.objects, id, this.props.lang, this.imagePrefix) || '', style: styles.selectIcon })),
             }));
             return this.getFilterSelect('custom', customs);
         }
@@ -3437,10 +3563,10 @@ 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" },
+        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,
+                react_1.default.createElement(material_1.DialogContentText, null, this.state.filter.expertMode || this.state.showAllExportOptions ? (react_1.default.createElement(react_1.default.Fragment, null,
                     this.props.t('ra_You can export all objects or just the selected branch.'),
                     react_1.default.createElement("br", null),
                     this.props.t('ra_Selected %s object(s)', this.state.showExportDialog),
@@ -3451,9 +3577,9 @@ class ObjectBrowserClass extends react_1.Component {
                     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.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({
+                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({
                         isAll: true,
                         noStatesByExportImport: this.state.noStatesByExportImport,
                         beautify: this.state.beautifyJsonExport,
@@ -3463,7 +3589,7 @@ class ObjectBrowserClass extends react_1.Component {
                     react_1.default.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: "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({
                         isAll: false,
                         noStatesByExportImport: this.state.noStatesByExportImport,
@@ -3475,7 +3601,7 @@ class ObjectBrowserClass extends react_1.Component {
                     "(",
                     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_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')))));
     }
     handleJsonUpload(evt) {
         var _b;
@@ -3574,7 +3700,7 @@ class ObjectBrowserClass extends react_1.Component {
                 allowObjectCreation = true;
             }
         }
-        return react_1.default.createElement("div", { style: {
+        return (react_1.default.createElement("div", { style: {
                 display: 'flex',
                 width: '100%',
                 alignItems: 'center',
@@ -3585,23 +3711,23 @@ class ObjectBrowserClass extends react_1.Component {
                     width: '100%',
                     alignItems: 'center',
                 } },
-                react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Refresh tree'), componentsProps: { popper: { sx: styles.tooltip } } },
+                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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                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) => ({
                                 badge: {
@@ -3611,8 +3737,8 @@ 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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                            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) => ({
                                 badge: {
@@ -3622,25 +3748,25 @@ 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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                            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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                        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: () => {
                             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(), componentsProps: { popper: { sx: styles.tooltip } } },
+                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({
                                 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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                            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: () => {
                             const input = document.createElement('input');
                             input.setAttribute('type', 'file');
@@ -3649,14 +3775,13 @@ 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_1.default.createElement(icons_material_1.Publish, null)))),
                 this.props.objectImportExport &&
-                    (!!this.state.selected.length || this.state.selectedNonObject) &&
-                    react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
-                        react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ showExportDialog: this._getSelectedIdsForExport().length }), size: "large" },
-                            react_1.default.createElement(icons_material_1.Publish, { style: { transform: 'rotate(180deg)' } })))),
-            !!this.props.objectBrowserEditObject && 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'), componentsProps: { popper: { sx: styles.tooltip } } },
+                    (!!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;
                         // get all visible states
@@ -3673,7 +3798,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_1.default.createElement(icons_material_1.Build, null))))));
     }
     toggleExpanded(id) {
         const expanded = JSON.parse(JSON.stringify(this.state.expanded));
@@ -3702,10 +3827,10 @@ class ObjectBrowserClass extends react_1.Component {
     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: () => {
+            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;
                         // calculate the number of children
                         const keys = Object.keys(this.objects);
@@ -3724,9 +3849,10 @@ class ObjectBrowserClass extends react_1.Component {
                             this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), false, count + 1);
                         }
                     } },
-                    react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null) : null;
+                    react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon }))) : null)) : null;
         }
-        item.data.aclTooltip = item.data.aclTooltip || this.renderTooltipAccessControl(item.data.obj.acl);
+        item.data.aclTooltip =
+            item.data.aclTooltip || this.renderTooltipAccessControl(item.data.obj.acl);
         const acl = item.data.obj.acl
             ? item.data.obj.type === 'state'
                 ? item.data.obj.acl.state
@@ -3738,19 +3864,17 @@ class ObjectBrowserClass extends react_1.Component {
                 : this.systemConfig.common.defaultNewAcl.object);
         const showEdit = this.state.filter.expertMode || _a.isNonExpertId(item.data.id);
         return [
-            this.state.filter.expertMode && this.props.objectEditOfAccessControl ? react_1.default.createElement(material_1.Tooltip, { key: "acl", title: item.data.aclTooltip, componentsProps: { popper: { sx: styles.tooltip } } },
+            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))
                         ? 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_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: () => {
                     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: () => {
+                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;
                     const keys = Object.keys(this.objects);
                     keys.sort();
@@ -3768,12 +3892,12 @@ class ObjectBrowserClass extends react_1.Component {
                         this.props.onObjectDelete(id, !!((_b = item.children) === null || _b === void 0 ? void 0 : _b.length), !((_d = (_c = item.data.obj) === null || _c === void 0 ? void 0 : _c.common) === null || _d === void 0 ? void 0 : _d.dontDelete), count);
                     }
                 }, title: this.texts.deleteObject },
-                react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon })) : null,
+                react_1.default.createElement(icons_material_1.Delete, { style: styles.cellButtonsButtonIcon }))) : null,
             this.props.objectCustomDialog &&
                 this.info.hasSomeCustoms &&
                 item.data.obj.type === 'state' &&
                 // @ts-expect-error deprecated from js-controller 6
-                ((_d = item.data.obj.common) === null || _d === void 0 ? void 0 : _d.type) !== 'file' ? react_1.default.createElement(material_1.IconButton, { sx: Object.assign(Object.assign({}, styles.cellButtonsButton), (item.data.hasCustoms
+                ((_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;
@@ -3782,7 +3906,7 @@ class ObjectBrowserClass extends react_1.Component {
                     (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate(null, 'customs', id);
                     this.setState({ customDialog: [id], customDialogAll: false });
                 } },
-                react_1.default.createElement(icons_material_1.Settings, { style: styles.cellButtonsButtonIcon })) : null,
+                react_1.default.createElement(icons_material_1.Settings, { style: styles.cellButtonsButtonIcon }))) : null,
         ];
     }
     readHistory(id) {
@@ -3888,7 +4012,7 @@ class ObjectBrowserClass extends react_1.Component {
             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]");
+            return (react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign({}, styles.cellValueText), styles.cellValueFile) }, "[file]"));
         }
         if (!this.states[id]) {
             if (obj.type === 'state') {
@@ -3912,7 +4036,9 @@ class ObjectBrowserClass extends react_1.Component {
                 obj: obj,
                 texts: this.texts,
                 dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat,
-                isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma,
+                isFloatComma: this.props.isFloatComma === undefined
+                    ? this.systemConfig.common.isFloatComma
+                    : this.props.isFloatComma,
             });
             const valTextRx = [];
             item.data.state = { valTextRx };
@@ -3942,23 +4068,32 @@ class ObjectBrowserClass extends react_1.Component {
         let val = info.valTextRx;
         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) })];
+                val = [
+                    react_1.default.createElement(ButtonIcon, { key: "button", style: Object.assign({ color: info.style.color }, styles.cellValueButton) }),
+                ];
             }
             else if (item.data.switch) {
-                val = [react_1.default.createElement(material_1.Switch, { key: "switch", sx: {
+                val = [
+                    react_1.default.createElement(material_1.Switch, { key: "switch", sx: {
                             '& .MuiSwitch-thumb': { color: info.style.color },
-                            '& .MuiSwitch-track': !!this.states[id].val && this.state.selected.includes(id) ?
-                                { backgroundColor: this.props.themeType === 'dark' ? '#FFF !important' : '#111 !important' } : undefined,
-                        }, checked: !!this.states[id].val })];
+                            '& .MuiSwitch-track': {
+                                backgroundColor: !!this.states[id].val && this.state.selected.includes(id)
+                                    ? this.props.themeType === 'dark'
+                                        ? '#FFF !important'
+                                        : '#111 !important'
+                                    : undefined,
+                            },
+                        }, checked: !!this.states[id].val }),
+                ];
             }
         }
-        return react_1.default.createElement(material_1.Tooltip, { key: "value", title: (_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.el, componentsProps: {
+        return (react_1.default.createElement(material_1.Tooltip, { key: "value", title: (_c = this.state.tooltipInfo) === null || _c === void 0 ? void 0 : _c.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': {
                         transform: 'translate(0, 2px)',
-                    } }) }, val));
+                    } }) }, val)));
     }
     _syncEnum(id, enumIds, newArray, cb) {
         var _b, _c, _d;
@@ -3996,8 +4131,7 @@ class ObjectBrowserClass extends react_1.Component {
                     .catch(e => this.showError(e)));
             }
         }
-        Promise.all(promises)
-            .then(() => {
+        void Promise.all(promises).then(() => {
             setTimeout(() => this._syncEnum(id, enumIds, newArray, cb), 0);
         });
     }
@@ -4024,18 +4158,18 @@ class ObjectBrowserClass extends react_1.Component {
             return ({
                 name: getName(((_c = (_b = this.objects[id]) === null || _b === void 0 ? void 0 : _b.common) === null || _c === void 0 ? void 0 : _c.name) || id.split('.').pop() || '', this.props.lang),
                 value: id,
-                icon: getSelectIdIconFromObjects(this.objects, id, this.imagePrefix),
+                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_1.default.createElement(material_1.Box, { style: styles.enumIconDiv },
+                    react_1.default.createElement("img", { src: _item.icon, style: styles.enumIcon, alt: _item.name })));
             }
         });
         // const hasIcons = !!enums.find(item => item.icon);
-        return react_1.default.createElement(material_1.Dialog, { sx: { '& .MuiPaper-root': styles.enumDialog }, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
+        return (react_1.default.createElement(material_1.Dialog, { sx: { '& .MuiPaper-root': styles.enumDialog }, onClose: () => this.setState({ enumDialog: null }), "aria-labelledby": "enum-dialog-title", open: !0 },
             react_1.default.createElement(material_1.DialogTitle, { id: "enum-dialog-title" },
                 type === 'func' ? this.props.t('ra_Define functions') : this.props.t('ra_Define rooms'),
                 react_1.default.createElement(material_1.Fab, { 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 })) },
@@ -4054,7 +4188,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_1.default.createElement(material_1.ListItem, { sx: styles.headerCellSelectItem, key: id, onClick: () => {
                         const pos = itemEnums.indexOf(id);
                         const enumDialogEnums = JSON.parse(JSON.stringify(this.state.enumDialogEnums));
                         if (pos === -1) {
@@ -4065,12 +4199,11 @@ class ObjectBrowserClass extends react_1.Component {
                             enumDialogEnums.splice(pos, 1);
                         }
                         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),
-                    icon ? react_1.default.createElement(material_1.ListItemSecondaryAction, null, icon) : null);
-            })));
+                    react_1.default.createElement(material_1.ListItemText, { id: labelId }, name)));
+            }))));
     }
     renderEditRoleDialog() {
         if (!this.state.roleDialog || !this.props.objectBrowserEditRole) {
@@ -4078,12 +4211,12 @@ 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_1.default.createElement(ObjectBrowserEditRole, { key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
                     if (obj) {
                         this.info.objects[this.state.roleDialog] = obj;
                     }
                     this.setState({ roleDialog: null });
-                } });
+                } }));
         }
         return null;
     }
@@ -4104,7 +4237,8 @@ class ObjectBrowserClass extends react_1.Component {
                 .getObject(((_c = (_b = this.state.columnsEditCustomDialog) === null || _b === void 0 ? void 0 : _b.obj) === null || _c === void 0 ? void 0 : _c._id) || '')
                 .then(obj => {
                 var _b;
-                if (obj && _a.setCustomValue(obj, (_b = this.state.columnsEditCustomDialog) === null || _b === void 0 ? void 0 : _b.it, value)) {
+                if (obj &&
+                    _a.setCustomValue(obj, (_b = this.state.columnsEditCustomDialog) === null || _b === void 0 ? void 0 : _b.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'));
@@ -4129,27 +4263,27 @@ class ObjectBrowserClass extends react_1.Component {
                 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 },
+        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 => {
+                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 => {
                             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_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 => {
                         const customColumnDialog = this.customColumnDialog;
                         customColumnDialog.value = e.target.value;
                         const changed = customColumnDialog.value !== customColumnDialog.initValue;
                         if (changed === !this.state.customColumnDialogValueChanged) {
                             this.setState({ customColumnDialogValueChanged: changed });
                         }
-                    }, autoFocus: true }))),
+                    }, 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_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')))));
     }
     static getCustomValue(obj, it) {
         var _b;
@@ -4163,7 +4297,8 @@ class ObjectBrowserClass extends react_1.Component {
                     value = anyObj[p[0]][p[1]];
                 }
                 else if (p.length === 3) {
-                    value = anyObj[p[0]][p[1]] && typeof anyObj[p[0]][p[1]] === 'object' ? anyObj[p[0]][p[1]][p[2]] : null;
+                    value =
+                        anyObj[p[0]][p[1]] && typeof anyObj[p[0]][p[1]] === 'object' ? anyObj[p[0]][p[1]][p[2]] : null;
                 }
                 else if (p.length === 4) {
                     value =
@@ -4259,12 +4394,37 @@ class ObjectBrowserClass extends react_1.Component {
         const text = _a.getCustomValue(obj, it);
         if (text !== null && text !== undefined) {
             if (it.edit && !this.props.notEditable && (!it.objTypes || it.objTypes.includes(obj.type))) {
-                return react_1.default.createElement(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_1.default.createElement(material_1.Box, { component: "div", style: Object.assign(Object.assign(Object.assign({}, styles.columnCustom), styles.columnCustomEditable), styles[`columnCustom_${it.align}`]), onClick: () => this.setState({
                         columnsEditCustomDialog: { item, it, obj },
                         customColumnDialogValueChanged: false,
-                    }) }, text);
+                    }) }, 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_1.default.createElement(material_1.Box, { component: "div", style: Object.assign(Object.assign({}, styles.columnCustom), styles[`columnCustom_${it.align}`]) }, text));
+        }
+        return null;
+    }
+    renderAliasLink(id, index, customStyle) {
+        const _index = index || 0;
+        // 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 => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    const aliasId = this.info.aliasesMap[id][_index];
+                    // if more than one alias, close the menu
+                    if (this.info.aliasesMap[id].length > 1) {
+                        this.setState({ aliasMenu: '' });
+                    }
+                    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)
+                    ? '↔'
+                    : aliasObj.read === id
+                        ? '→'
+                        : '←'),
+                this.info.aliasesMap[id][_index]));
         }
         return null;
     }
@@ -4272,7 +4432,7 @@ 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, _r;
+        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;
@@ -4285,9 +4445,7 @@ class ObjectBrowserClass extends react_1.Component {
             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_1.default.createElement(IconOpen_1.default, { style: this.styles.cellIdIconFolder, onClick: () => this.toggleExpanded(id) })) : (react_1.default.createElement(IconClosed_1.default, { style: this.styles.cellIdIconFolder, onClick: () => this.toggleExpanded(id) }));
         }
         else if (obj && obj.common && obj.common.write === false && obj.type === 'state') {
             iconFolder = react_1.default.createElement(IconDocumentReadOnly_1.default, { style: this.styles.cellIdIconDocument });
@@ -4299,10 +4457,10 @@ class ObjectBrowserClass extends react_1.Component {
         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_1.default.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_1.default.createElement(Icon_1.default, { style: styles.cellIdIconOwn, className: "iconOwn", src: item.data.icon, alt: "" }));
                 }
             }
             else {
@@ -4324,8 +4482,7 @@ class ObjectBrowserClass extends react_1.Component {
         }
         const checkbox = this.props.multiSelect &&
             this.objects[id] &&
-            (!this.props.types || this.props.types.includes(this.objects[id].type)) ?
-            react_1.default.createElement(material_1.Checkbox, { style: styles.checkBox, checked: this.state.selected.includes(id) }) : null;
+            (!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;
         let valueEditable = !this.props.notEditable &&
             itemType === 'state' &&
             (this.state.filter.expertMode || (common === null || common === void 0 ? void 0 : common.write) !== false);
@@ -4364,34 +4521,55 @@ class ObjectBrowserClass extends react_1.Component {
                 newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils_1.default.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`);
             }
         }
-        const readWriteAlias = typeof ((_c = common === null || common === void 0 ? void 0 : common.alias) === null || _c === void 0 ? void 0 : _c.id) === 'object';
-        const alias = id.startsWith('alias.') && ((_d = common === null || common === void 0 ? void 0 : common.alias) === null || _d === void 0 ? void 0 : _d.id) ? (readWriteAlias ?
-            react_1.default.createElement("div", { style: styles.cellIdAliasReadWriteDiv },
-                common.alias.id.read ? react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        this.onSelect(common.alias.id.read);
-                        setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.read)), 100);
-                    }, 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 => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        this.onSelect(common.alias.id.write);
-                        setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.write)), 100);
-                    }, sx: this.styles.aliasReadWrite },
-                    "\u2192",
-                    common.alias.id.write) : null)
-            :
-                react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
+        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)) {
+            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 => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            this.onSelect(common.alias.id.read);
+                            setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.read)), 100);
+                        }, 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 => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            this.onSelect(common.alias.id.write);
+                            setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id.write)), 100);
+                        }, sx: this.styles.aliasReadWrite },
+                        "\u2192",
+                        common.alias.id.write)) : null));
+            }
+            else {
+                alias = (react_1.default.createElement(material_1.Box, { component: "div", onClick: e => {
                         e.stopPropagation();
                         e.preventDefault();
                         this.onSelect(common.alias.id);
                         setTimeout(() => this.expandAllSelected(() => this.scrollToItem(common.alias.id)), 100);
                     }, sx: this.styles.aliasAlone },
                     "\u2192",
-                    common.alias.id)) : null;
+                    common.alias.id));
+            }
+        }
+        else if (this.info.aliasesMap[id]) {
+            // 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 => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        this.setState({ aliasMenu: id });
+                    }, sx: this.styles.aliasAlone }, this.props.t('ra_%s links from aliases', this.info.aliasesMap[id].length)));
+            }
+            else {
+                // Show name of alias and open it by click
+                alias = this.renderAliasLink(id, 0);
+            }
+        }
         let checkColor = common === null || common === void 0 ? void 0 : common.color;
         let invertBackground;
         if (checkColor && !this.state.selected.includes(id)) {
@@ -4519,8 +4697,8 @@ class ObjectBrowserClass extends react_1.Component {
                 }
             }
         }
-        const q = checkVisibleObjectType ? Utils_1.default.quality2text(((_e = this.states[id]) === null || _e === void 0 ? void 0 : _e.q) || 0).join(', ') : null;
-        let name = ((_f = item.data) === null || _f === void 0 ? void 0 : _f.title) || '';
+        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) || '';
         let useDesc = false;
         if (this.state.showDescription) {
             const oTooltip = getObjectTooltip(item.data, this.props.lang);
@@ -4533,154 +4711,199 @@ class ObjectBrowserClass extends react_1.Component {
             }
         }
         const narrowStyleWithDetails = this.props.width === 'xs' && this.state.focused === id;
-        const colID = react_1.default.createElement(material_1.Grid, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
-            react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" },
+        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" },
                 checkbox,
                 iconFolder),
-            react_1.default.createElement(material_1.Grid, { item: true, style: Object.assign(Object.assign(Object.assign({}, styles.cellIdSpan), (invertBackground ? this.styles.invertedBackground : undefined)), { color: checkColor, fontWeight: bold ? 'bold' : undefined }) },
-                react_1.default.createElement(material_1.Tooltip, { title: getIdFieldTooltip(item.data, this.props.lang), componentsProps: { popper: { sx: styles.tooltip } } },
+            react_1.default.createElement(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)),
                 alias,
                 icons),
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
-            react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, iconItem),
-            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_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' }) },
             name,
-            !narrowStyleWithDetails && ((_g = item.data) === null || _g === void 0 ? void 0 : _g.title) ? react_1.default.createElement(material_1.Box, { style: { color: checkColor } },
-                react_1.default.createElement(IconCopy_1.default, { className: "copyButton", style: styles.cellCopyButton, onClick: e => { var _b; return this.onCopy(e, (_b = item.data) === null || _b === void 0 ? void 0 : _b.title); } })) : null) : null;
+            !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;
         let colMiddle;
         if (!this.state.statesView) {
             colMiddle = [
-                (narrowStyleWithDetails && (obj === null || obj === void 0 ? void 0 : 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 }) },
-                        typeImg,
-                        "\u00A0", obj === null || obj === void 0 ? void 0 :
-                        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 && enumEditable && this.props.objectBrowserEditRole
-                                ? 'text'
-                                : 'default' }), onClick: !narrowStyleWithDetails && this.state.filter.expertMode &&
-                            enumEditable && this.props.objectBrowserEditRole
+                (narrowStyleWithDetails && (obj === null || obj === void 0 ? void 0 : 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 }) },
+                            typeImg,
+                            "\u00A0", obj === null || obj === void 0 ? void 0 :
+                            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 &&
+                                    enumEditable &&
+                                    this.props.objectBrowserEditRole
+                                    ? 'text'
+                                    : '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)),
+                        type: 'filter_role',
+                        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),
-                    type: 'filter_role',
-                    onClick: narrowStyleWithDetails && this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole
-                        ? () => this.setState({ roleDialog: item.data.id })
-                        : undefined,
-                } : 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 ? () => {
-                            const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
-                            this.setState({
-                                enumDialogEnums: enums,
-                                enumDialog: {
-                                    item,
-                                    type: 'room',
-                                    enumsOriginal: JSON.stringify(enums),
-                                },
-                            });
-                        } : undefined }, item.data.rooms),
-                    type: 'filter_room',
-                    onClick: narrowStyleWithDetails && enumEditable ? () => {
-                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
-                        this.setState({
-                            enumDialogEnums: enums,
-                            enumDialog: {
-                                item,
-                                type: 'room',
-                                enumsOriginal: JSON.stringify(enums),
-                            },
-                        });
-                    } : undefined,
-                } : 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 ? () => {
-                            const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
-                            this.setState({
-                                enumDialogEnums: enums,
-                                enumDialog: {
-                                    item,
-                                    type: 'func',
-                                    enumsOriginal: JSON.stringify(enums),
-                                },
-                            });
-                        } : undefined }, item.data.funcs),
-                    type: 'filter_func',
-                    onClick: narrowStyleWithDetails && enumEditable ? () => {
-                        const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
-                        this.setState({
-                            enumDialogEnums: enums,
-                            enumDialog: {
-                                item,
-                                type: 'func',
-                                enumsOriginal: JSON.stringify(enums),
-                            },
-                        });
-                    } : undefined,
-                } : null,
+                            : undefined,
+                    }
+                    : 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
+                                ? () => {
+                                    const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
+                                    this.setState({
+                                        enumDialogEnums: enums,
+                                        enumDialog: {
+                                            item,
+                                            type: 'room',
+                                            enumsOriginal: JSON.stringify(enums),
+                                        },
+                                    });
+                                }
+                                : undefined }, item.data.rooms)),
+                        type: 'filter_room',
+                        onClick: narrowStyleWithDetails && enumEditable
+                            ? () => {
+                                const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
+                                this.setState({
+                                    enumDialogEnums: enums,
+                                    enumDialog: {
+                                        item,
+                                        type: 'room',
+                                        enumsOriginal: JSON.stringify(enums),
+                                    },
+                                });
+                            }
+                            : undefined,
+                    }
+                    : 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
+                                ? () => {
+                                    const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
+                                    this.setState({
+                                        enumDialogEnums: enums,
+                                        enumDialog: {
+                                            item,
+                                            type: 'func',
+                                            enumsOriginal: JSON.stringify(enums),
+                                        },
+                                    });
+                                }
+                                : undefined }, item.data.funcs)),
+                        type: 'filter_func',
+                        onClick: narrowStyleWithDetails && enumEditable
+                            ? () => {
+                                const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
+                                this.setState({
+                                    enumDialogEnums: enums,
+                                    enumDialog: {
+                                        item,
+                                        type: 'func',
+                                        enumsOriginal: JSON.stringify(enums),
+                                    },
+                                });
+                            }
+                            : undefined,
+                    }
+                    : null,
             ];
         }
         else {
             colMiddle = [
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_h = this.states[id]) === null || _h === void 0 ? void 0 : _h.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 && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.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),
-                    type: 'quality',
-                } : null,
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_k = this.states[id]) === null || _k === void 0 ? void 0 : _k.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 && ((_l = this.states[id]) === null || _l === void 0 ? void 0 : _l.ts)
-                        ? Utils_1.default.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
-                        : null),
-                    type: 'ts',
-                } : null,
-                (narrowStyleWithDetails && checkVisibleObjectType && ((_m = this.states[id]) === null || _m === void 0 ? void 0 : _m.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 && ((_o = this.states[id]) === null || _o === void 0 ? void 0 : _o.lc)
-                        ? Utils_1.default.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
-                        : null),
-                    type: 'lc',
-                } : null,
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_g = this.states[id]) === null || _g === void 0 ? void 0 : _g.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)),
+                        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)),
+                        type: 'quality',
+                    }
+                    : null,
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_j = this.states[id]) === null || _j === void 0 ? void 0 : _j.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)
+                            : null)),
+                        type: 'ts',
+                    }
+                    : null,
+                (narrowStyleWithDetails && checkVisibleObjectType && ((_l = this.states[id]) === null || _l === void 0 ? void 0 : _l.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)
+                            : null)),
+                        type: 'lc',
+                    }
+                    : null,
             ];
         }
-        let colCustom = ((_p = this.adapterColumns) === null || _p === void 0 ? void 0 : _p.map(it => react_1.default.createElement("div", { style: Object.assign(Object.assign({}, 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;
-        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' ? 'zoom-in' : (item.data.button ? 'grab' : 'text')) : 'default' }), onClick: valueEditable ? () => {
-                if (!obj || !this.states) {
-                    // return;
-                }
-                else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
-                    this.setState({ viewFileDialog: id });
-                    // eslint-disable-next-line brace-style
-                }
-                else if (!this.state.filter.expertMode && item.data.button) {
-                    // in non-expert mode control button directly
-                    this.props.socket
-                        .setState(id, true)
-                        .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
-                }
-                else if (!this.state.filter.expertMode && item.data.switch) {
-                    // in non-expert mode control switch directly
-                    this.props.socket
-                        .setState(id, !this.states[id].val)
-                        .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
-                }
-                else {
-                    this.edit = {
-                        val: this.states[id] ? this.states[id].val : '',
-                        q: this.states[id] ? this.states[id].q || 0 : 0,
-                        ack: false,
-                        id,
-                    };
-                    this.setState({ updateOpened: true });
+        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'
+                    ? this.columnsVisibility[it.id]
+                    : 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'
+                        ? 'zoom-in'
+                        : item.data.button
+                            ? 'grab'
+                            : 'text'
+                    : 'default' }), onClick: valueEditable
+                ? () => {
+                    if (!obj || !this.states) {
+                        // return;
+                    }
+                    else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
+                        this.setState({ viewFileDialog: id });
+                    }
+                    else if (!this.state.filter.expertMode && item.data.button) {
+                        // in non-expert mode control button directly
+                        this.props.socket
+                            .setState(id, true)
+                            .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
+                    }
+                    else if (!this.state.filter.expertMode && item.data.switch) {
+                        // in non-expert mode control switch directly
+                        this.props.socket
+                            .setState(id, !this.states[id].val)
+                            .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
+                    }
+                    else {
+                        this.edit = {
+                            val: this.states[id] ? this.states[id].val : '',
+                            q: this.states[id] ? this.states[id].q || 0 : 0,
+                            ack: false,
+                            id,
+                        };
+                        this.setState({ updateOpened: true });
+                    }
                 }
-            } : 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;
+                : 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 colDetails = null;
         if (this.props.width === 'xs' && this.state.focused === id) {
             colMiddle = colMiddle.filter(a => a);
@@ -4689,18 +4912,27 @@ class ObjectBrowserClass extends react_1.Component {
                 renderedMiddle = null;
             }
             else {
-                renderedMiddle = colMiddle.map(it => react_1.default.createElement("div", { style: styles.cellDetailsLine },
-                    react_1.default.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: () => it.onClick() }) : null));
+                renderedMiddle = colMiddle.map(it => {
+                    if (!it) {
+                        return null;
+                    }
+                    return (react_1.default.createElement("div", { key: it.type, style: styles.cellDetailsLine },
+                        react_1.default.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) {
+                                    it.onClick();
+                                }
+                            } })) : null));
+                });
             }
             if (!colCustom.length) {
                 colCustom = null;
             }
-            colDetails = react_1.default.createElement(material_1.Paper, { style: {
+            colDetails = (react_1.default.createElement(material_1.Paper, { style: {
                     width: '100%',
                     display: 'flex',
                     flexDirection: 'column',
@@ -4710,16 +4942,16 @@ class ObjectBrowserClass extends react_1.Component {
                 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 },
+                colName && (react_1.default.createElement("div", { style: styles.cellDetailsLine },
                     react_1.default.createElement("span", { style: styles.cellDetailsName },
                         this.texts.name,
                         ":"),
                     colName,
                     react_1.default.createElement("div", { style: { flexGrow: 1 } }),
-                    ((_q = item.data) === null || _q === void 0 ? void 0 : _q.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),
+                    ((_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)),
                 renderedMiddle,
                 colCustom && react_1.default.createElement("div", { style: styles.cellDetailsLine }, colCustom),
-                ((_r = this.objects[id]) === null || _r === void 0 ? void 0 : _r.type) === 'state' && react_1.default.createElement("div", { style: styles.cellDetailsLine },
+                ((_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 },
                         this.texts.value,
                         ":"),
@@ -4731,18 +4963,20 @@ class ObjectBrowserClass extends react_1.Component {
                                 obj: this.objects[id],
                                 texts: this.texts,
                                 dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat,
-                                isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma,
+                                isFloatComma: this.props.isFloatComma === undefined
+                                    ? this.systemConfig.common.isFloatComma
+                                    : this.props.isFloatComma,
                             });
                             this.onCopy(e, valText.v.toString());
-                        }, key: "cc" })),
-                colButtons && react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellDetailsLine), { justifyContent: 'right' }) }, colButtons));
+                        }, key: "cc" }))),
+                colButtons && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.cellDetailsLine), { justifyContent: 'right' }) }, colButtons))));
             colName = null;
             colMiddle = null;
             colCustom = null;
             colValue = null;
             colButtons = null;
         }
-        const row = react_1.default.createElement(material_1.Grid, { 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_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 &&
                 !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 => {
@@ -4778,7 +5012,7 @@ class ObjectBrowserClass extends react_1.Component {
             colMiddle.map(it => it === null || it === void 0 ? void 0 : it.el),
             colCustom,
             colValue,
-            colButtons);
+            colButtons));
         return { row, details: colDetails };
     }
     /**
@@ -4792,11 +5026,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_1.default.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_1.default.createElement("div", { key: root.data.id, style: styles.nonDraggable }, result.row));
             }
         }
         else {
@@ -4951,8 +5185,7 @@ class ObjectBrowserClass extends react_1.Component {
             if (columnsForAdmin && columns) {
                 Object.keys(columnsForAdmin)
                     .sort()
-                    .forEach(adapter => columnsForAdmin[adapter]
-                    .forEach(column => {
+                    .forEach(adapter => columnsForAdmin[adapter].forEach(column => {
                     const id = `_${adapter}_${column.path}`;
                     if (columns.includes(id)) {
                         const item = {
@@ -4976,7 +5209,8 @@ class ObjectBrowserClass extends react_1.Component {
                             columnsWidths[item.id] ||
                                 column.width ||
                                 SCREEN_WIDTHS[width].widths.func ||
-                                SCREEN_WIDTHS.xl.widths.func || 0;
+                                SCREEN_WIDTHS.xl.widths.func ||
+                                0;
                         widthSum += this.columnsVisibility[id];
                     }
                     else {
@@ -5001,8 +5235,7 @@ class ObjectBrowserClass extends react_1.Component {
                 this.columnsVisibility.nameHeader = `calc(100% - ${widthSum + 5 + this.state.scrollBarWidth}px)`;
             }
             else {
-                const newWidth = Object.keys(this.columnsVisibility)
-                    .reduce((accumulator, name) => {
+                const newWidth = Object.keys(this.columnsVisibility).reduce((accumulator, name) => {
                     // do not summarize strings
                     if (name === 'id' ||
                         typeof this.columnsVisibility[name] === 'string' ||
@@ -5072,40 +5305,40 @@ class ObjectBrowserClass extends react_1.Component {
      * 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_1.default.createElement(material_1.Box, { component: "div", className: "iob-ob-resize-handler", sx: Object.assign(Object.assign({}, styles.resizeHandle), styles.resizeHandleRight), onMouseDown: this.resizerMouseDown, onDoubleClick: this.resizerReset, title: this.props.t('ra_Double click to reset table layout') }));
     }
     renderHeader() {
         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" },
+            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 }));
+                react_1.default.createElement(icons_material_1.Close, { 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_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_1.default.createElement("div", { style: styles.headerRow },
+        return (react_1.default.createElement("div", { style: styles.headerRow },
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.id, position: 'relative' }), "data-min": 240, "data-name": "id" },
                 this.getFilterInput('id'),
                 this.renderHandleRight()),
-            this.columnsVisibility.name ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.nameHeader, position: 'relative' }), "data-min": 100, "data-name": "nameHeader" },
+            this.columnsVisibility.name ? (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.nameHeader, position: 'relative' }), "data-min": 100, "data-name": "nameHeader" },
                 this.getFilterInput('name'),
-                this.renderHandleRight()) : null,
-            !this.state.statesView && react_1.default.createElement(react_1.default.Fragment, null,
-                this.columnsVisibility.type ? react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.headerCell), { width: this.columnsVisibility.type, position: 'relative' }), "data-min": 100, "data-name": "type" },
+                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.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.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.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.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.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.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.getFilterSelectFunction(),
-                    this.renderHandleRight()) : null),
-            this.state.statesView && react_1.default.createElement(react_1.default.Fragment, null,
+                    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.props.t('ra_Changed from'),
                     this.renderHandleRight()),
@@ -5117,18 +5350,18 @@ class ObjectBrowserClass extends react_1.Component {
                     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" },
                     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.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.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 }) },
+                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.getFilterSelectCustoms()) : null);
+                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_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" })) }));
     }
     /**
      * Called when component is updated.
@@ -5156,7 +5389,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 ? 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: () => {
+            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
+                    ? 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 });
@@ -5166,7 +5401,7 @@ class ObjectBrowserClass extends react_1.Component {
                         this.forceUpdate();
                     }
                     (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate('tab-objects');
-                }, systemConfig: this.systemConfig });
+                }, systemConfig: this.systemConfig }));
         }
         return null;
     }
@@ -5185,7 +5420,9 @@ 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 ? 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
+        return (react_1.default.createElement(ObjectBrowserEditObject, { key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined
+                ? this.systemConfig.common.isFloatComma
+                : this.props.isFloatComma, themeType: this.props.themeType, 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) => {
@@ -5209,28 +5446,28 @@ class ObjectBrowserClass extends react_1.Component {
                         .catch(e => this.showError(`Cannot write object: ${e}`));
                 }
                 this.setState({ editObjectDialog: '', editObjectAlias: false });
-            }, width: this.props.width });
+            }, width: this.props.width }));
     }
     renderViewObjectFileDialog() {
         if (!this.state.viewFileDialog || !this.props.objectBrowserViewFile) {
             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_1.default.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_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(() => {
                 this.scrollToItem(id);
                 setTimeout(() => this.setState({
                     editObjectDialog: id,
                     showAliasEditor: '',
                     editObjectAlias: true,
                 }), 300);
-            })), timeout || 0) });
+            })), timeout || 0) }));
     }
     showAddDataPointDialog(id, initialType, initialStateType) {
         this.setState({
@@ -5242,6 +5479,18 @@ class ObjectBrowserClass extends react_1.Component {
             },
         });
     }
+    /** Renders the aliases list for one state (if more than 2) */
+    renderAliasMenu() {
+        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, {
+                '& .admin-browser-arrow': {
+                    mr: '8px',
+                },
+            })))))));
+    }
     /**
      * Renders the right mouse button context menu
      */
@@ -5297,7 +5546,7 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!(this.props.objectBrowserEditObject &&
                     obj &&
                     (this.state.filter.expertMode || _a.isNonExpertId(id))),
-                icon: react_1.default.createElement(icons_material_1.Edit, { fontSize: "small", style: this.styles.contextMenuEdit }),
+                icon: (react_1.default.createElement(icons_material_1.Edit, { fontSize: "small", style: this.styles.contextMenuEdit })),
                 label: this.texts.editObject,
                 onClick: () => this.setState({ editObjectDialog: item.data.id, showContextMenu: null, editObjectAlias: false }),
             },
@@ -5310,7 +5559,7 @@ class ObjectBrowserClass extends react_1.Component {
                     // @ts-expect-error deprecated from js-controller 6
                     ((_b = obj.common) === null || _b === void 0 ? void 0 : _b.type) !== 'file' &&
                     (this.state.filter.expertMode || obj.common.write !== false)),
-                icon: react_1.default.createElement(icons_material_1.FormatItalic, { fontSize: "small", style: this.styles.contextMenuEditValue }),
+                icon: (react_1.default.createElement(icons_material_1.FormatItalic, { fontSize: "small", style: this.styles.contextMenuEditValue })),
                 label: this.props.t('ra_Edit value'),
                 onClick: () => {
                     this.edit = {
@@ -5323,10 +5572,11 @@ class ObjectBrowserClass extends react_1.Component {
                 },
             },
             VIEW: {
-                visibility: !!this.props.objectBrowserViewFile && (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
+                visibility: !!this.props.objectBrowserViewFile &&
+                    (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_c = obj.common) === null || _c === void 0 ? void 0 : _c.type) === 'file',
-                icon: react_1.default.createElement(icons_material_1.FindInPage, { fontSize: "small", style: this.styles.contextMenuView }),
+                icon: (react_1.default.createElement(icons_material_1.FindInPage, { fontSize: "small", style: this.styles.contextMenuView })),
                 label: this.props.t('ra_View file'),
                 onClick: () => this.setState({ viewFileDialog: (obj === null || obj === void 0 ? void 0 : obj._id) || '', showContextMenu: null }),
             },
@@ -5338,9 +5588,9 @@ class ObjectBrowserClass extends react_1.Component {
                     obj.type === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_d = obj.common) === null || _d === void 0 ? void 0 : _d.type) !== 'file'),
-                icon: react_1.default.createElement(icons_material_1.Settings, { fontSize: "small", style: item.data.hasCustoms
+                icon: (react_1.default.createElement(icons_material_1.Settings, { fontSize: "small", style: item.data.hasCustoms
                         ? this.styles.cellButtonsButtonWithCustoms
-                        : styles.cellButtonsButtonWithoutCustoms }),
+                        : styles.cellButtonsButtonWithoutCustoms })),
                 style: this.styles.contextMenuCustom,
                 label: this.texts.customConfig,
                 onClick: () => {
@@ -5367,14 +5617,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_1.default.createElement(icons_material_1.BorderColor, { fontSize: "small", style: this.styles.contextMenuRole })),
                 label: this.props.t('ra_Edit role'),
                 onClick: () => this.setState({ roleDialog: item.data.id, showContextMenu: null }),
             },
             FUNCTION: {
                 key: '5',
                 visibility: !!enumEditable,
-                icon: react_1.default.createElement(icons_material_1.BedroomParent, { fontSize: "small", style: this.styles.contextMenuRole }),
+                icon: (react_1.default.createElement(icons_material_1.BedroomParent, { fontSize: "small", style: this.styles.contextMenuRole })),
                 label: this.props.t('ra_Edit function'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'funcEnums');
@@ -5392,7 +5642,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_1.default.createElement(icons_material_1.Construction, { fontSize: "small", style: this.styles.contextMenuRoom })),
                 label: this.props.t('ra_Edit room'),
                 onClick: () => {
                     const enums = findEnumsForObjectAsIds(this.info, item.data.id, 'roomEnums');
@@ -5416,14 +5666,16 @@ class ObjectBrowserClass extends react_1.Component {
                     (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_e = obj.common) === null || _e === void 0 ? void 0 : _e.type) !== 'file'),
-                icon: react_1.default.createElement(icons_material_1.Link, { style: ((_f = obj === null || obj === void 0 ? void 0 : obj.common) === null || _f === void 0 ? void 0 : _f.alias)
+                icon: (react_1.default.createElement(icons_material_1.Link, { style: ((_f = obj === null || obj === void 0 ? void 0 : obj.common) === null || _f === void 0 ? void 0 : _f.alias)
                         ? this.styles.cellButtonsButtonWithCustoms
-                        : styles.cellButtonsButtonWithoutCustoms }),
-                label: this.props.t('ra_Edit alias'),
+                        : 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) {
-                        this.setState({ editObjectDialog: item.data.id, showContextMenu: null, editObjectAlias: true });
+                        this.setState({ showContextMenu: null, editObjectDialog: item.data.id, editObjectAlias: true });
                     }
                     else {
                         this.setState({ showContextMenu: null, showAliasEditor: item.data.id });
@@ -5434,7 +5686,7 @@ 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_1.default.createElement(icons_material_1.Add, { fontSize: "small", style: this.styles.cellButtonsButtonWithCustoms })),
                 style: styles.contextMenuWithSubMenu,
                 label: this.texts.create,
                 subMenu: [
@@ -5484,8 +5736,9 @@ 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 }),
+                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 })),
                 style: this.styles.contextMenuDelete,
                 label: this.texts.deleteObject,
                 onClick: () => this.setState({ showContextMenu: null }, () => this.showDeleteDialog({
@@ -5499,13 +5752,15 @@ class ObjectBrowserClass extends react_1.Component {
             var _b, _c;
             if (ITEMS[key].visibility) {
                 if (ITEMS[key].subMenu) {
-                    items.push(react_1.default.createElement(material_1.MenuItem, { key: key, onClick: (e) => this.state.showContextMenu && this.setState({
-                            showContextMenu: {
-                                item: this.state.showContextMenu.item,
-                                subItem: key,
-                                subAnchor: e.target,
-                            },
-                        }), style: ITEMS[key].style },
+                    items.push(react_1.default.createElement(material_1.MenuItem, { key: key, href: "", onClick: (e) => this.state.showContextMenu &&
+                            this.setState({
+                                showContextMenu: {
+                                    item: this.state.showContextMenu.item,
+                                    position: this.state.showContextMenu.position,
+                                    subItem: key,
+                                    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,
                             ITEMS[key].label,
@@ -5515,19 +5770,24 @@ class ObjectBrowserClass extends react_1.Component {
                     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: () => {
                                 if (this.state.showContextMenu) {
-                                    this.setState({ showContextMenu: { item: this.state.showContextMenu.item } });
+                                    this.setState({
+                                        showContextMenu: {
+                                            item: this.state.showContextMenu.item,
+                                            position: this.state.showContextMenu.position,
+                                        },
+                                    });
                                 }
                                 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 },
+                            } }, (_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))));
+                            react_1.default.createElement(material_1.ListItemText, null, subItem.label))) : null)));
                     }
                 }
                 else {
                     items.push(react_1.default.createElement(material_1.MenuItem, { key: key, onClick: ITEMS[key].onClick, 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[key].key ? (react_1.default.createElement("div", { style: styles.contextMenuKeys }, `Alt+${ITEMS[key].key === 'Delete' ? this.props.t('ra_Del') : ITEMS[key].key}`)) : null));
                 }
             }
         });
@@ -5535,8 +5795,7 @@ class ObjectBrowserClass extends react_1.Component {
             setTimeout(() => this.setState({ showContextMenu: null }), 100);
             return null;
         }
-        const el = document.getElementById(id);
-        return react_1.default.createElement(material_1.Menu, { key: "contextMenu", open: !0, onKeyUp: e => {
+        return (react_1.default.createElement(material_1.Menu, { key: "contextMenu", open: !0, onKeyUp: e => {
                 e.preventDefault();
                 if (e.altKey) {
                     Object.keys(ITEMS).forEach(key => {
@@ -5545,10 +5804,10 @@ class ObjectBrowserClass extends react_1.Component {
                         }
                     });
                 }
-            }, anchorEl: el, onClose: () => {
+            }, anchorReference: "anchorPosition", anchorPosition: this.state.showContextMenu.position, onClose: () => {
                 this.setState({ showContextMenu: null });
                 this.contextMenu = null;
-            } }, items);
+            } }, items));
     }
     renderEditValueDialog() {
         var _b;
@@ -5568,12 +5827,14 @@ class ObjectBrowserClass extends react_1.Component {
             : 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 ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, onClose: (res) => {
+        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
+                ? this.systemConfig.common.isFloatComma
+                : this.props.isFloatComma, onClose: (res) => {
                 this.setState({ updateOpened: false });
                 if (res) {
                     this.onUpdate(res);
                 }
-            }, width: this.props.width });
+            }, width: this.props.width }));
     }
     /**
      * The rendering method of this component.
@@ -5629,42 +5890,43 @@ class ObjectBrowserClass extends react_1.Component {
             return react_1.default.createElement(material_1.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, `
-@keyframes newValueAnimation-light {
-    0% {
-        color: #00f900;
-    }
-    80% {
-        color: #008000;
-    }
-    100% {
-        color: #000;
-    }
-}
-@keyframes newValueAnimation-dark {
-    0% {
-        color: #00f900;
-    }
-    80% {
-        color: #008000;
-    }
-    100% {
-        color: #fff;
-    }
-}
-.newValueBrowser-dark {
-    animation: newValueAnimation-dark 2s ease-in-out;
-}
-.newValueBrowser-light {
-    animation: newValueAnimation-light 2s ease-in-out;
-}
+        return (react_1.default.createElement(TabContainer_1.default, { key: this.props.dialogName },
+            react_1.default.createElement("style", null, `
+@keyframes newValueAnimation-light {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #000;
+    }
+}
+@keyframes newValueAnimation-dark {
+    0% {
+        color: #00f900;
+    }
+    80% {
+        color: #008000;
+    }
+    100% {
+        color: #fff;
+    }
+}
+.newValueBrowser-dark {
+    animation: newValueAnimation-dark 2s ease-in-out;
+}
+.newValueBrowser-light {
+    animation: newValueAnimation-light 2s ease-in-out;
+}
 `),
             react_1.default.createElement(TabHeader_1.default, null, this.getToolbar()),
             react_1.default.createElement(TabContent_1.default, null,
                 this.renderHeader(),
                 react_1.default.createElement("div", { style: styles.tableDiv, ref: this.tableRef, onKeyDown: event => this.navigateKeyPress(event) }, items)),
             this.renderContextMenu(),
+            this.renderAliasMenu(),
             this.renderToast(),
             this.renderColumnsEditCustomDialog(),
             this.renderColumnsSelectorDialog(),
@@ -5678,9 +5940,10 @@ class ObjectBrowserClass extends react_1.Component {
             this.renderErrorDialog(),
             this.renderExportDialog(),
             this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this),
-            this.state.modalEditOfAccess && this.state.modalEditOfAccessObjData &&
+            this.state.modalEditOfAccess &&
+                this.state.modalEditOfAccessObjData &&
                 this.props.modalEditOfAccessControl &&
-                this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData));
+                this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData)));
     }
 }
 exports.ObjectBrowserClass = ObjectBrowserClass;