@iobroker/adapter-react-v5 6.1.10 → 7.0.2

package/Components/ObjectBrowser.js

@@ -1203,7 +1203,7 @@ function getIdFieldTooltip(data, lang) {
     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 +1241,7 @@ function buildTree(objects, options) {
         customs: ['_'],
         enums: [],
         hasSomeCustoms: false,
+        aliasesMap: {},
     };
     let cRoot = root;
     for (let i = 0; i < ids.length; i++) {
@@ -1274,6 +1275,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;
@@ -1314,22 +1347,22 @@ 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),
                         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 || [];
@@ -1636,11 +1669,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) {
@@ -1831,7 +1865,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();
@@ -2348,6 +2387,7 @@ class ObjectBrowserClass extends react_1.Component {
             excludeSystemRepositoriesFromExport: true,
             excludeTranslations: false,
             tooltipInfo: null,
+            aliasMenu: '',
         };
         this.texts = {
             name: props.t('ra_Name'),
@@ -2989,7 +3029,7 @@ 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));
             }
@@ -3019,6 +3059,52 @@ 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
      * @returns Returns an object containing the new state (if any) and whether the object was filtered.
@@ -3030,6 +3116,7 @@ class ObjectBrowserClass extends react_1.Component {
     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 +3128,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 +3142,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) {
@@ -3585,23 +3673,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 } } },
+                !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 } } },
+                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(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: {
@@ -3612,7 +3700,7 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }) },
                             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 } } },
+                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: {
@@ -3623,16 +3711,16 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }), 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 } } },
+                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(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: {
@@ -3640,7 +3728,7 @@ class ObjectBrowserClass extends react_1.Component {
                                 },
                             }), size: "large" },
                             react_1.default.createElement(icons_material_1.Add, null)))) : null,
-                this.props.objectImportExport && react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Add objects tree from JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
+                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');
@@ -3652,11 +3740,11 @@ class ObjectBrowserClass extends react_1.Component {
                         react_1.default.createElement(icons_material_1.Publish, null))),
                 this.props.objectImportExport &&
                     (!!this.state.selected.length || this.state.selectedNonObject) &&
-                    react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), componentsProps: { popper: { sx: styles.tooltip } } },
+                    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'), componentsProps: { popper: { sx: styles.tooltip } } },
+            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
@@ -3738,7 +3826,7 @@ 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)
@@ -3952,7 +4040,7 @@ class ObjectBrowserClass extends react_1.Component {
                         }, 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 }); } },
@@ -4065,11 +4153,10 @@ 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() {
@@ -4268,11 +4355,33 @@ class ObjectBrowserClass extends react_1.Component {
         }
         return null;
     }
+    renderAliasLink(id, index, customStyle) {
+        // read the type of operation
+        const aliasObj = this.objects[this.info.aliasesMap[id][index]].common.alias.id;
+        if (aliasObj) {
+            index = index || 0;
+            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;
+    }
     /**
      * 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;
@@ -4364,34 +4473,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 +4649,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,22 +4663,22 @@ 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),
+            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 } },
+            !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) {
@@ -4626,29 +4756,29 @@ class ObjectBrowserClass extends react_1.Component {
         }
         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),
+                (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 && ((_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)
+                (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 && ((_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)
+                (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;
+        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) {
@@ -4716,10 +4846,10 @@ class ObjectBrowserClass extends react_1.Component {
                         ":"),
                     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,
                         ":"),
@@ -4742,7 +4872,7 @@ class ObjectBrowserClass extends react_1.Component {
             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 => {
@@ -5242,6 +5372,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
      */
@@ -5419,11 +5561,11 @@ class ObjectBrowserClass extends react_1.Component {
                 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'),
+                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 });
@@ -5499,9 +5641,10 @@ 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({
+                    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,
                             },
@@ -5515,7 +5658,12 @@ 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 },
@@ -5535,7 +5683,6 @@ 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 => {
                 e.preventDefault();
                 if (e.altKey) {
@@ -5545,7 +5692,7 @@ 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);
@@ -5665,6 +5812,7 @@ class ObjectBrowserClass extends react_1.Component {
                 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(),