@iobroker/gui-components 8.0.2 → 10.0.1

package/build/Components/ObjectBrowser.js

@@ -1,14 +1,13 @@
 /**
- * Copyright 2020-2025, Denis Haev <dogafox@gmail.com>
+ * Copyright 2020-2026, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
  */
 import React, { Component, createRef } from 'react';
-import SVG from 'react-inlinesvg';
-import { Badge, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fab, FormControl, FormControlLabel, Grid2, IconButton, Input, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, Select, Snackbar, Switch, TextField, Tooltip, } from '@mui/material';
+import { Badge, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fab, FormControlLabel, Grid, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, Snackbar, Switch, TextField, Tooltip, } from '@mui/material';
 // Icons
-import { Add as AddIcon, ArrowRight as ArrowRightIcon, BedroomParent, BorderColor, Build as BuildIcon, CalendarToday as IconSchedule, Check as IconCheck, Close as IconClose, Code as IconScript, Construction, CreateNewFolder as IconFolder, Delete as IconDelete, Description as IconMeta, Edit as IconEdit, Error as IconError, FindInPage, FormatItalic as IconValueEdit, Info as IconInfo, Link as IconLink, ListAlt as IconEnum, LooksOne as LooksOneIcon, PersonOutlined as IconUser, Publish as PublishIcon, Refresh as RefreshIcon, Router as IconHost, Settings as IconConfig, SettingsApplications as IconSystem, DataObject as IconData, ShowChart as IconChart, SupervisedUserCircle as IconGroup, TextFields as TextFieldsIcon, ViewColumn as IconColumns, Wifi as IconConnection, WifiOff as IconDisconnected, DriveFileRenameOutline, } from '@mui/icons-material';
+import { Add as AddIcon, ArrowRight as ArrowRightIcon, BedroomParent, BorderColor, Build as BuildIcon, CalendarToday as IconSchedule, Check as IconCheck, Close as IconClose, Code as IconScript, Construction, CreateNewFolder as IconFolder, Delete as IconDelete, Description as IconMeta, Edit as IconEdit, Error as IconError, FindInPage, FormatItalic as IconValueEdit, Link as IconLink, ListAlt as IconEnum, LooksOne as LooksOneIcon, PersonOutlined as IconUser, Publish as PublishIcon, Refresh as RefreshIcon, Router as IconHost, Settings as IconConfig, ShowChart as IconChart, SupervisedUserCircle as IconGroup, TextFields as TextFieldsIcon, ViewColumn as IconColumns, Wifi as IconConnection, WifiOff as IconDisconnected, DriveFileRenameOutline, ContentPaste, UploadFile, } from '@mui/icons-material';
 import { IconExpert } from '../icons/IconExpert';
 import { IconAdapter } from '../icons/IconAdapter';
 import { IconChannel } from '../icons/IconChannel';
@@ -24,25 +23,21 @@ import { IconClearFilter } from '../icons/IconClearFilter';
 import { Connection } from '../Connection';
 import { Icon } from './Icon';
 import { withWidth } from './withWidth';
-import { Utils } from './Utils'; // @iobroker/adapter-react-v5/Components/Utils
+import { Utils } from './Utils'; // @iobroker/gui-components/Components/Utils
 import { TabContainer } from './TabContainer';
 import { TabContent } from './TabContent';
 import { TabHeader } from './TabHeader';
-const ICON_SIZE = 24;
-const ROW_HEIGHT = 32;
+import { CustomFilterInput, CustomFilterSelect, ButtonIcon, applyFilter, binarySearch, buildTree, findEnumsForObjectAsIds, findFunctionsForObject, findNode, findRoomsForObject, formatValue, generateFile, getCustomValue, getIdFieldTooltip, getName, getObjectTooltip, getSelectIdIconFromObjects, getValueStyle, getVisibleItems, isNonExpertId, setCustomValue, prepareSparkData, COLOR_NAME_USERDATA, COLOR_NAME_ALIAS, COLOR_NAME_JAVASCRIPT, COLOR_NAME_SYSTEM, COLOR_NAME_SYSTEM_ADAPTER, ICON_SIZE, ROW_HEIGHT, styles as utilStyles, } from './objectBrowserUtils';
+export { getSelectIdIconFromObjects };
 const ITEM_LEVEL = 16;
 const SMALL_BUTTON_SIZE = 20;
-const COLOR_NAME_USERDATA = (themeType) => (themeType === 'dark' ? '#62ff25' : '#37c400');
-const COLOR_NAME_ALIAS = (themeType) => (themeType === 'dark' ? '#ee56ff' : '#a204b4');
-const COLOR_NAME_JAVASCRIPT = (themeType) => (themeType === 'dark' ? '#fff46e' : '#b89101');
-const COLOR_NAME_SYSTEM = (themeType) => (themeType === 'dark' ? '#ff6d69' : '#ff6d69');
-const COLOR_NAME_SYSTEM_ADAPTER = (themeType) => (themeType === 'dark' ? '#5773ff' : '#5773ff');
 const COLOR_NAME_ERROR_DARK = '#ff413c';
 const COLOR_NAME_ERROR_LIGHT = '#86211f';
 const COLOR_NAME_CONNECTED_DARK = '#57ff45';
 const COLOR_NAME_CONNECTED_LIGHT = '#098c04';
 const COLOR_NAME_DISCONNECTED_DARK = '#f3ad11';
 const COLOR_NAME_DISCONNECTED_LIGHT = '#6c5008';
+const DEFAULT_DATE_FORMAT = 'YYYY.MM.DD';
 const styles = {
     toolbar: {
         minHeight: 38, // Theme.toolbar.height,
@@ -232,18 +227,6 @@ const styles = {
         height: SMALL_BUTTON_SIZE,
     },
     cellIdIconOwn: {},
-    cellIdTooltip: {
-        fontSize: 14,
-    },
-    cellIdTooltipLink: {
-        color: '#7ec2fd',
-        '&:hover': {
-            color: '#7ec2fd',
-        },
-        '&:visited': {
-            color: '#7ec2fd',
-        },
-    },
     cellCopyButton: {
         width: SMALL_BUTTON_SIZE,
         height: SMALL_BUTTON_SIZE,
@@ -508,9 +491,6 @@ const styles = {
         height: 24,
         marginRight: 4,
     },
-    selectNone: {
-        opacity: 0.5,
-    },
     itemSelected: (theme) => ({
         background: `${theme.palette.primary.main} !important`,
         color: `${Utils.invertColor(theme.palette.primary.main, true)} !important`,
@@ -527,25 +507,6 @@ const styles = {
         // paddingLeft: 5,
         fontSize: 16,
     },
-    headerCellInput: {
-        width: 'calc(100% - 5px)',
-        height: ROW_HEIGHT,
-        pt: 0,
-        '& .itemIcon': {
-            verticalAlign: 'middle',
-            width: ICON_SIZE,
-            height: ICON_SIZE,
-            display: 'inline-block',
-        },
-    },
-    headerCellSelectItem: {
-        '& .itemIcon': {
-            width: ICON_SIZE,
-            height: ICON_SIZE,
-            mr: '5px',
-            display: 'inline-block',
-        },
-    },
     visibleButtons: {
         color: '#2196f3',
         opacity: 0.7,
@@ -615,13 +576,6 @@ const styles = {
     nonDraggable: {
         cursor: 'no-drop',
     },
-    selectClearButton: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        borderRadius: 5,
-        backgroundColor: 'background.default',
-    },
     iconDeviceConnected: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,
         opacity: 0.8,
@@ -689,1077 +643,27 @@ const styles = {
         color: theme.palette.mode === 'dark' ? '#42eaff' : '#01bbc2',
     }),
     contextMenuACL: (theme) => ({
-        color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070',
-    }),
-    contextMenuRoom: (theme) => ({
-        color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00',
-    }),
-    contextMenuRole: (theme) => ({
-        color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00',
-    }),
-    contextMenuDelete: (theme) => ({
-        color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000',
-    }),
-    contextMenuKeys: {
-        marginLeft: 8,
-        opacity: 0.7,
-        fontSize: 'smaller',
-    },
-    contextMenuWithSubMenu: {
-        display: 'flex',
-    },
-};
-function ButtonIcon(props) {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 436 436", style: props?.style, width: "24", height: "24", className: "admin-button" },
-        React.createElement("g", { fill: "currentColor" },
-            React.createElement("path", { d: "m195.23077,24.30769c-36,3 -67,12 -96,26c-49,24 -82,61 -93,104l-3,11l-1,50c0,46 0,49 2,59l5,20c21,58 84,103 165,116c16,3 53,4 70,2c60,-6 111,-28 147,-64c21,-21 36,-49 40,-74a866,866 0 0 0 1,-104c-3,-18 -6,-28 -13,-43c-26,-52 -87,-90 -162,-101c-16,-2 -48,-3 -63,-2l1,0zm60,23c36,5 70,18 95,35c31,20 51,47 59,77c2,7 2,11 2,25c1,15 0,18 -2,26c-19,69 -104,117 -200,114c-47,-2 -90,-15 -124,-38c-31,-20 -51,-47 -59,-77c-3,-11 -4,-32 -2,-43c8,-42 41,-78 91,-101a260,260 0 0 1 140,-19l0,1zm-221,222c21,26 57,49 95,62c81,27 174,14 239,-32c14,-10 31,-27 41,-41c2,-2 2,-2 2,7c-1,23 -16,50 -38,72c-78,74 -233,74 -311,-1a121,121 0 0 1 -39,-76l0,-6l3,4l8,11z" }),
-            React.createElement("path", { d: "m201.23077,47.30769c-40,3 -79,19 -104,44c-55,55 -38,133 37,171c52,26 122,24 172,-5c30,-17 51,-42 58,-71c3,-11 3,-34 0,-45c-6,-23 -21,-44 -40,-60l-27,-16a184,184 0 0 0 -96,-18zm30,21c56,5 100,35 112,75c4,11 4,30 0,41c-8,25 -26,45 -54,59a166,166 0 0 1 -160,-8a98,98 0 0 1 -41,-53c-5,-18 -2,-39 8,-57c23,-39 79,-62 135,-57z" }))));
-}
-/** Converts ioB pattern into regex */
-export function pattern2RegEx(pattern) {
-    pattern = (pattern || '').toString();
-    const startsWithWildcard = pattern[0] === '*';
-    const endsWithWildcard = pattern[pattern.length - 1] === '*';
-    pattern = pattern.replace(/[-/\\^$+?.()|[\]{}]/g, '\\$&').replace(/\*/g, '.*');
-    return (startsWithWildcard ? '' : '^') + pattern + (endsWithWildcard ? '' : '$');
-}
-/**
- * Function that walks through all keys of an object or array and applies a function to each key.
- */
-function walkThroughArray(object, iteratee) {
-    const copiedObject = [];
-    for (let index = 0; index < object.length; index++) {
-        iteratee(copiedObject, object[index], index);
-    }
-    return copiedObject;
-}
-/**
- * Function that walks through all keys of an object or array and applies a function to each key.
- */
-function walkThroughObject(object, iteratee) {
-    const copiedObject = {};
-    for (const key in object) {
-        if (Object.prototype.hasOwnProperty.call(object, key)) {
-            iteratee(copiedObject, object[key], key);
-        }
-    }
-    return copiedObject;
-}
-/**
- * Function to reduce an object primarily by a given list of keys
- */
-function filterObject(
-/** The objects which should be filtered */
-obj, 
-/** The keys which should be excluded */
-filterKeys, 
-/** Whether translations should be reduced to only the english value */
-excludeTranslations) {
-    if (Array.isArray(obj)) {
-        return walkThroughArray(obj, (result, value, key) => {
-            if (value === undefined || value === null) {
-                return;
-            }
-            // if the key is an object, run it through the inner function - omitFromObject
-            const isObject = typeof value === 'object';
-            if (excludeTranslations && isObject) {
-                if (typeof value.en === 'string' && typeof value.de === 'string') {
-                    result[key] = value.en;
-                    return;
-                }
-            }
-            result[key] = isObject ? filterObject(value, filterKeys, excludeTranslations) : value;
-        });
-    }
-    return walkThroughObject(obj, (result, value, key) => {
-        if (value === undefined || value === null) {
-            return;
-        }
-        if (filterKeys.includes(key)) {
-            return;
-        }
-        // if the key is an object, run it through the inner function - omitFromObject
-        const isObject = typeof value === 'object';
-        if (excludeTranslations && isObject) {
-            if (typeof value.en === 'string' && typeof value.de === 'string') {
-                result[key] = value.en;
-                return;
-            }
-        }
-        result[key] = isObject ? filterObject(value, filterKeys, excludeTranslations) : value;
-    });
-}
-export function filterRoles(roleArray, type, defaultRoles) {
-    const bigRoleArray = [];
-    roleArray.forEach(role => (role.type === 'mixed' || role.type) === type &&
-        !bigRoleArray.includes(role.role) &&
-        bigRoleArray.push(role.role));
-    defaultRoles.forEach(role => (role.type === 'mixed' || role.type) === type &&
-        !bigRoleArray.includes(role.role) &&
-        bigRoleArray.push(role.role));
-    bigRoleArray.sort();
-    return bigRoleArray;
-}
-/**
- * Function to generate a json-file for an object and trigger download it
- */
-function generateFile(
-/** The desired filename */
-fileName, 
-/** The objects which should be downloaded */
-obj, 
-/** Options to filter/reduce the output */
-options) {
-    const el = document.createElement('a');
-    const filterKeys = [];
-    if (options.excludeSystemRepositories) {
-        filterKeys.push('system.repositories');
-    }
-    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);
-    el.style.display = 'none';
-    document.body.appendChild(el);
-    el.click();
-    document.body.removeChild(el);
-}
-// d=data, t=target, s=start, e=end, m=middle
-function binarySearch(list, find, _start, _end) {
-    _start ||= 0;
-    if (_end === undefined) {
-        _end = list.length - 1;
-        if (!_end) {
-            return list[0] === find;
-        }
-    }
-    const middle = Math.floor((_start + _end) / 2);
-    if (find === list[middle]) {
-        return true;
-    }
-    if (_end - 1 === _start) {
-        return list[_start] === find || list[_end] === find;
-    }
-    if (find > list[middle]) {
-        return binarySearch(list, find, middle, _end);
-    }
-    if (find < list[middle]) {
-        return binarySearch(list, find, _start, middle);
-    }
-    return false;
-}
-function getName(name, lang) {
-    if (typeof name === 'object') {
-        if (!name) {
-            return '';
-        }
-        return (name[lang] || name.en || '').toString();
-    }
-    return name ? name.toString() : '';
-}
-export function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
-    // `admin` has prefix '.' and `web` has '../..'
-    imagePrefix ||= '.'; // http://localhost:8081';
-    let src = '';
-    const _id_ = `system.adapter.${id}`;
-    const aIcon = id && objects[_id_]?.common?.icon;
-    if (aIcon) {
-        // if not BASE64
-        if (!aIcon.startsWith('data:image/')) {
-            if (aIcon.includes('.')) {
-                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
-            }
-            else {
-                return null; // '<i class="material-icons iob-list-icon">' + objects[_id_].common.icon + '</i>';
-            }
-        }
-        else if (aIcon.startsWith('data:image/svg')) {
-            src = (React.createElement(SVG, { className: "iconOwn", src: aIcon, width: 28, height: 28 }));
-        }
-        else {
-            src = aIcon;
-        }
-    }
-    else {
-        const common = objects[id] && objects[id].common;
-        if (common) {
-            const cIcon = common.icon;
-            if (cIcon) {
-                if (!cIcon.startsWith('data:image/')) {
-                    if (cIcon.includes('.')) {
-                        let instance;
-                        if (objects[id].type === 'instance' || objects[id].type === 'adapter') {
-                            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);
-                            if (cIcon[0] === '/') {
-                                instance[2] += cIcon;
-                            }
-                            else {
-                                instance[2] += `/${cIcon}`;
-                            }
-                            src = `${imagePrefix}/adapter/${instance[2]}`;
-                        }
-                        else {
-                            instance = id.split('.', 2);
-                            if (cIcon[0] === '/') {
-                                instance[0] += cIcon;
-                            }
-                            else {
-                                instance[0] += `/${cIcon}`;
-                            }
-                            src = `${imagePrefix}/adapter/${instance[0]}`;
-                        }
-                    }
-                    else if (aIcon && aIcon.length < 3) {
-                        return aIcon; // utf-8
-                    }
-                    else {
-                        return null;
-                    }
-                }
-                else if (cIcon.startsWith('data:image/svg')) {
-                    // if base 64 image
-                    src = (React.createElement(SVG, { className: "iconOwn", src: cIcon, width: 28, height: 28 }));
-                }
-                else {
-                    src = cIcon;
-                }
-            }
-        }
-    }
-    return src || null;
-}
-function applyFilter(item, filters, lang, objects, context, counter, customFilter, selectedTypes, _depth) {
-    _depth ||= 0;
-    let filteredOut = false;
-    if (!context) {
-        context = {};
-        if (filters.id) {
-            const id = filters.id.toLowerCase();
-            if (id.includes('*')) {
-                context.idRx = new RegExp(pattern2RegEx(filters.id), 'i');
-            }
-            else {
-                context.id = id;
-            }
-        }
-        if (filters.name) {
-            const name = filters.name.toLowerCase();
-            if (name.includes('*')) {
-                context.nameRx = new RegExp(pattern2RegEx(name), 'i');
-            }
-            else {
-                context.name = name;
-            }
-        }
-        if (filters.type?.length) {
-            context.type = filters.type.map(f => f.toLowerCase());
-        }
-        if (filters.custom?.length) {
-            context.custom = filters.custom.map(c => c.toLowerCase());
-        }
-        if (filters.role?.length) {
-            context.role = filters.role.map(r => r.toLowerCase());
-        }
-        if (filters.room?.length) {
-            context.room = [];
-            filters.room.forEach(room => {
-                context.room = context.room.concat(objects[room]?.common?.members || []);
-            });
-        }
-        if (filters.func?.length) {
-            context.func = [];
-            filters.func.forEach(func => {
-                context.func = context.func.concat(objects[func]?.common?.members || []);
-            });
-        }
-    }
-    const data = item.data;
-    if (data?.id) {
-        const common = data.obj?.common;
-        if (customFilter) {
-            if (customFilter.type) {
-                if (typeof customFilter.type === 'string') {
-                    if (!data.obj || customFilter.type !== data.obj.type) {
-                        filteredOut = true;
-                    }
-                }
-                else if (Array.isArray(customFilter.type)) {
-                    if (!data.obj || !customFilter.type.includes(data.obj.type)) {
-                        filteredOut = true;
-                    }
-                }
-            }
-            if (!filteredOut && customFilter.common?.type) {
-                if (!common?.type) {
-                    filteredOut = true;
-                }
-                else if (typeof customFilter.common.type === 'string') {
-                    if (customFilter.common.type !== common.type) {
-                        filteredOut = true;
-                    }
-                }
-                else if (Array.isArray(customFilter.common.type)) {
-                    if (!customFilter.common.type.includes(common.type)) {
-                        filteredOut = true;
-                    }
-                }
-            }
-            if (!filteredOut && customFilter.common?.role) {
-                if (!common?.role) {
-                    filteredOut = true;
-                }
-                else if (typeof customFilter.common.role === 'string') {
-                    if (common.role.startsWith(customFilter.common.role)) {
-                        filteredOut = true;
-                    }
-                }
-                else if (Array.isArray(customFilter.common.role)) {
-                    if (!customFilter.common.role.find(role => common.role.startsWith(role))) {
-                        filteredOut = true;
-                    }
-                }
-            }
-            if (!filteredOut && customFilter.common?.custom === '_' && common?.custom) {
-                filteredOut = true;
-            }
-            else if (!filteredOut && customFilter.common?.custom && customFilter.common?.custom !== '_') {
-                const filterOfCustom = customFilter.common.custom;
-                if (!common?.custom) {
-                    filteredOut = true;
-                }
-                else if (filterOfCustom === '_dataSources') {
-                    // TODO: make it configurable
-                    if (!Object.keys(common.custom).find(id => id.startsWith('history.') || id.startsWith('sql.') || id.startsWith('influxdb.'))) {
-                        filteredOut = true;
-                    }
-                }
-                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;
-                    }
-                }
-                else if (filterOfCustom !== true &&
-                    !Object.keys(common.custom).find(id => id.startsWith(filterOfCustom))) {
-                    filteredOut = true;
-                }
-            }
-        }
-        if (!filteredOut && !filters.expertMode) {
-            filteredOut =
-                data.id === 'system' ||
-                    data.id === 'enum' ||
-                    // (data.obj && data.obj.type === 'meta') ||
-                    data.id.startsWith('system.') ||
-                    data.id.startsWith('enum.') ||
-                    data.id.startsWith('_design/') ||
-                    data.id.endsWith('.admin') ||
-                    !!common?.expert;
-        }
-        if (!filteredOut && context.id) {
-            if (data.fID === undefined) {
-                data.fID = data.id.toLowerCase();
-            }
-            filteredOut = !data.fID.includes(context.id);
-        }
-        if (!filteredOut && context.idRx) {
-            filteredOut = !context.idRx.test(data.id);
-        }
-        if (!filteredOut && context.name) {
-            if (common) {
-                if (data.fName === undefined) {
-                    data.fName = getName(common.name, lang) || '';
-                    data.fName = data.fName.toLowerCase();
-                }
-                filteredOut = !data.fName.includes(context.name);
-            }
-            else {
-                filteredOut = true;
-            }
-        }
-        if (!filteredOut && context.nameRx) {
-            if (common) {
-                if (data.fName === undefined) {
-                    data.fName = getName(common.name, lang) || '';
-                    data.fName = data.fName.toLowerCase();
-                }
-                filteredOut = !context.nameRx.test(data.fName);
-            }
-        }
-        if (!filteredOut && filters.role?.length && common) {
-            filteredOut = !(typeof common.role === 'string' && context.role.find(role => common.role.startsWith(role)));
-        }
-        if (!filteredOut && context.room?.length) {
-            filteredOut = !context.room.find(id => id === data.id || data.id.startsWith(`${id}.`));
-        }
-        if (!filteredOut && context.func?.length) {
-            filteredOut = !context.func.find(id => id === data.id || data.id.startsWith(`${id}.`));
-        }
-        if (!filteredOut && context.type?.length) {
-            filteredOut = !(data.obj?.type && context.type.includes(data.obj.type));
-        }
-        if (!filteredOut && selectedTypes) {
-            filteredOut = !(data.obj?.type && selectedTypes.includes(data.obj.type));
-        }
-        if (!filteredOut && context.custom?.length) {
-            if (common) {
-                if (context.custom.includes('_')) {
-                    filteredOut = !!common.custom;
-                }
-                else if (common.custom) {
-                    filteredOut = !context.custom.find(custom => common.custom[custom]);
-                }
-            }
-            else {
-                filteredOut = true;
-            }
-        }
-    }
-    data.visible = !filteredOut;
-    data.hasVisibleChildren = false;
-    if (item.children && _depth < 20) {
-        item.children.forEach(_item => {
-            const visible = applyFilter(_item, filters, lang, objects, context, counter, customFilter, selectedTypes, _depth + 1);
-            if (visible) {
-                data.hasVisibleChildren = true;
-            }
-        });
-    }
-    // const visible = data.visible || data.hasVisibleChildren;
-    data.sumVisibility = data.visible || data.hasVisibleChildren; // || data.hasVisibleParent;
-    if (counter && data.sumVisibility) {
-        counter.count++;
-    }
-    // show all children of visible object with opacity 0.5
-    if (data.id && data.sumVisibility && item.children) {
-        item.children.forEach(_item => (_item.data.hasVisibleParent = true));
-    }
-    return data.visible || data.hasVisibleChildren;
-}
-function getVisibleItems(item, type, objects, _result) {
-    _result ||= [];
-    const data = item.data;
-    if (data.sumVisibility) {
-        if (data.id && objects[data.id] && (!type || objects[data.id].type === type)) {
-            _result.push(data.id);
-        }
-        item.children?.forEach(_item => getVisibleItems(_item, type, objects, _result));
-    }
-    return _result;
-}
-function getSystemIcon(objects, id, level, themeType, lang, imagePrefix) {
-    let icon;
-    // system or design has special icons
-    if (id === 'alias' || id === 'alias.0') {
-        icon = (React.createElement(IconLink, { className: "iconOwn", style: { color: COLOR_NAME_ALIAS(themeType) } }));
-    }
-    else if (id === '0_userdata' || id === '0_userdata.0') {
-        icon = (React.createElement(IconData, { className: "iconOwn", style: { color: COLOR_NAME_USERDATA(themeType) } }));
-    }
-    else if (id.startsWith('_design/') || id === 'system') {
-        icon = (React.createElement(IconSystem, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM(themeType) } }));
-    }
-    else if (id === 'system.adapter') {
-        icon = (React.createElement(IconSystem, { className: "iconOwn", style: { color: COLOR_NAME_SYSTEM_ADAPTER(themeType) } }));
-    }
-    else if (id === 'system.group') {
-        icon = React.createElement(IconGroup, { className: "iconOwn" });
-    }
-    else if (id === 'system.user') {
-        icon = React.createElement(IconUser, { className: "iconOwn" });
-    }
-    else if (id === 'system.host') {
-        icon = React.createElement(IconHost, { className: "iconOwn" });
-    }
-    else if (id.endsWith('.connection') || id.endsWith('.connected')) {
-        icon = React.createElement(IconConnection, { className: "iconOwn" });
-    }
-    else if (id.endsWith('.info')) {
-        icon = React.createElement(IconInfo, { className: "iconOwn" });
-    }
-    else if (objects[id] && objects[id].type === 'meta') {
-        icon = React.createElement(IconMeta, { className: "iconOwn" });
-    }
-    else if (level < 2) {
-        // detect "cloud.0"
-        if (objects[`system.adapter.${id}`]) {
-            icon = getSelectIdIconFromObjects(objects, `system.adapter.${id}`, lang, imagePrefix);
-        }
-    }
-    return icon || null;
-}
-function getObjectTooltip(data, lang) {
-    if (data?.obj?.common?.desc) {
-        return getName(data.obj.common.desc, lang) || null;
-    }
-    return null;
-}
-function getIdFieldTooltip(data, lang) {
-    const tooltip = getObjectTooltip(data, lang);
-    if (tooltip?.startsWith('http')) {
-        return (React.createElement(Box, { component: "a", sx: styles.cellIdTooltipLink, href: tooltip, target: "_blank", rel: "noreferrer" }, tooltip));
-    }
-    return React.createElement("span", { style: styles.cellIdTooltip }, tooltip || data.id || '');
-}
-function buildTree(objects, options) {
-    const imagePrefix = options.imagePrefix || '.';
-    let ids = Object.keys(objects);
-    ids.sort((a, b) => {
-        if (a === b) {
-            return 0;
-        }
-        a = a.replace(/\./g, '!!!');
-        b = b.replace(/\./g, '!!!');
-        if (a > b) {
-            return 1;
-        }
-        return -1;
-    });
-    if (options.root) {
-        ids = ids.filter(id => id === options.root || id.startsWith(`${options.root}.`));
-    }
-    // find empty nodes and create names for it
-    let currentPathArr = [];
-    let currentPath = '';
-    let currentPathLen = 0;
-    const root = {
-        data: {
-            name: '',
-            id: '',
-        },
-        children: [],
-    };
-    const info = {
-        funcEnums: [],
-        roomEnums: [],
-        roles: [],
-        ids: [],
-        types: [],
-        objects,
-        customs: ['_'],
-        enums: [],
-        hasSomeCustoms: false,
-        aliasesMap: {},
-    };
-    let cRoot = root;
-    for (let i = 0; i < ids.length; i++) {
-        const id = ids[i];
-        if (!id) {
-            continue;
-        }
-        const obj = objects[id];
-        const parts = id.split('.');
-        if (obj.type && !info.types.includes(obj.type)) {
-            info.types.push(obj.type);
-        }
-        if (obj) {
-            const common = obj.common;
-            const role = common?.role;
-            if (role && !info.roles.find(it => it.role === role)) {
-                if (typeof role !== 'string') {
-                    console.warn(`Invalid role type "${typeof role}" in "${obj._id}"`);
-                }
-                else {
-                    info.roles.push({ role, type: common.type });
-                }
-            }
-            else if (id.startsWith('enum.rooms.')) {
-                info.roomEnums.push(id);
-                info.enums.push(id);
-            }
-            else if (id.startsWith('enum.functions.')) {
-                info.funcEnums.push(id);
-                info.enums.push(id);
-            }
-            else if (obj.type === 'enum') {
-                info.enums.push(id);
-            }
-            else if (obj.type === 'instance' && common && (common.supportCustoms || common.adminUI?.custom)) {
-                info.hasSomeCustoms = true;
-                info.customs.push(id.substring('system.adapter.'.length));
-            }
-            // Build a map of aliases
-            if (id.startsWith('alias.') && obj.common.alias?.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;
-        // if next level
-        do {
-            repeat = false;
-            // If the current level is still OK, and we can add ID to children
-            if (!currentPath || id.startsWith(`${currentPath}.`)) {
-                // if more than one level added
-                if (parts.length - currentPathLen > 1) {
-                    let curPath = currentPath;
-                    // generate missing levels
-                    for (let k = currentPathLen; k < parts.length - 1; k++) {
-                        curPath += (curPath ? '.' : '') + parts[k];
-                        // level does not exist
-                        if (!binarySearch(info.ids, curPath)) {
-                            const _cRoot = {
-                                data: {
-                                    name: parts[k],
-                                    parent: cRoot,
-                                    id: curPath,
-                                    obj: objects[curPath],
-                                    level: k,
-                                    icon: getSystemIcon(objects, curPath, k, options.themeType, options.lang, imagePrefix),
-                                    generated: true,
-                                },
-                            };
-                            cRoot.children ||= [];
-                            cRoot.children.push(_cRoot);
-                            cRoot = _cRoot;
-                            info.ids.push(curPath); // IDs will be added by alphabet
-                        }
-                        else if (cRoot.children) {
-                            cRoot = cRoot.children.find(item => item.data.name === parts[k]);
-                        }
-                    }
-                }
-                const _cRoot = {
-                    data: {
-                        name: parts[parts.length - 1],
-                        title: getName(obj?.common?.name, options.lang),
-                        obj,
-                        parent: cRoot,
-                        icon: getSelectIdIconFromObjects(objects, id, options.lang, imagePrefix) ||
-                            getSystemIcon(objects, id, 0, options.themeType, options.lang, imagePrefix),
-                        id,
-                        hasCustoms: !!(obj.common?.custom && Object.keys(obj.common.custom).length),
-                        level: parts.length - 1,
-                        generated: false,
-                        button: obj.type === 'state' &&
-                            !!obj.common?.role &&
-                            typeof obj.common.role === 'string' &&
-                            obj.common.role.startsWith('button') &&
-                            obj.common?.write !== false,
-                        switch: obj.type === 'state' &&
-                            obj.common?.type === 'boolean' &&
-                            obj.common?.write !== false &&
-                            obj.common?.read !== false,
-                        url: !!obj.common?.role &&
-                            typeof obj.common.role === 'string' &&
-                            obj.common.role.startsWith('url'),
-                    },
-                };
-                cRoot.children ||= [];
-                cRoot.children.push(_cRoot);
-                cRoot = _cRoot;
-                currentPathLen = parts.length;
-                currentPathArr = parts;
-                currentPath = id;
-            }
-            else {
-                let u = 0;
-                while (currentPathArr[u] === parts[u]) {
-                    u++;
-                }
-                if (u > 0) {
-                    let move = currentPathArr.length;
-                    currentPathArr = currentPathArr.splice(0, u);
-                    currentPathLen = u;
-                    currentPath = currentPathArr.join('.');
-                    while (move > u) {
-                        if (cRoot.data.parent) {
-                            cRoot = cRoot.data.parent;
-                        }
-                        else {
-                            console.error(`Parent is null for ${id} ${currentPath} ${currentPathArr.join('.')}`);
-                        }
-                        move--;
-                    }
-                }
-                else {
-                    cRoot = root;
-                    currentPathArr = [];
-                    currentPath = '';
-                    currentPathLen = 0;
-                }
-                repeat = true;
-            }
-        } while (repeat);
-    }
-    info.roomEnums.sort((a, b) => {
-        const aName = getName(objects[a]?.common?.name, options.lang) || a.split('.').pop();
-        const bName = getName(objects[b]?.common?.name, options.lang) || b.split('.').pop();
-        if (aName > bName) {
-            return 1;
-        }
-        if (aName < bName) {
-            return -1;
-        }
-        return 0;
-    });
-    info.funcEnums.sort((a, b) => {
-        const aName = getName(objects[a]?.common?.name, options.lang) || a.split('.').pop();
-        const bName = getName(objects[b]?.common?.name, options.lang) || b.split('.').pop();
-        if (aName > bName) {
-            return 1;
-        }
-        if (aName < bName) {
-            return -1;
-        }
-        return 0;
-    });
-    info.roles.sort((a, b) => a.role.localeCompare(b.role));
-    info.types.sort();
-    return { info, root };
-}
-function findNode(root, id, _parts, _path, _level) {
-    if (root.data.id === id) {
-        return root;
-    }
-    if (!_parts) {
-        _parts = id.split('.');
-        _level = 0;
-        _path = _parts[_level];
-    }
-    if (!root.children && root.data.id !== id) {
-        return null;
-    }
-    let found;
-    if (root.children) {
-        for (let i = 0; i < root.children.length; i++) {
-            const _id = root.children[i].data.id;
-            if (_id === _path) {
-                found = root.children[i];
-                break;
-            }
-            else if (_id > _path) {
-                break;
-            }
-        }
-    }
-    if (found) {
-        _level ||= 0;
-        return findNode(found, id, _parts, `${_path}.${_parts[_level + 1]}`, _level + 1);
-    }
-    return null;
-}
-function findRoomsForObject(info, id, lang, rooms) {
-    if (!id) {
-        return { rooms: [], per: false };
-    }
-    rooms ||= [];
-    for (const room of info.roomEnums) {
-        const common = info.objects[room]?.common;
-        if (!common) {
-            continue;
-        }
-        const name = getName(common.name, lang);
-        if (common.members?.includes(id) && !rooms.includes(name)) {
-            rooms.push(name);
-        }
-    }
-    let ownEnums;
-    // Check parent
-    const parts = id.split('.');
-    parts.pop();
-    id = parts.join('.');
-    if (info.objects[id]) {
-        ownEnums = rooms.length;
-        findRoomsForObject(info, id, lang, rooms);
-    }
-    return { rooms, per: !ownEnums }; // per is if the enums are from parent
-}
-function findEnumsForObjectAsIds(info, id, enumName, funcs) {
-    if (!id) {
-        return [];
-    }
-    funcs ||= [];
-    for (let i = 0; i < info[enumName].length; i++) {
-        const common = info.objects[info[enumName][i]]?.common;
-        if (common?.members?.includes(id) && !funcs.includes(info[enumName][i])) {
-            funcs.push(info[enumName][i]);
-        }
-    }
-    funcs.sort();
-    return funcs;
-}
-function findFunctionsForObject(info, id, lang, funcs) {
-    if (!id) {
-        return { funcs: [], pef: false };
-    }
-    funcs ||= [];
-    for (let i = 0; i < info.funcEnums.length; i++) {
-        const common = info.objects[info.funcEnums[i]]?.common;
-        if (!common) {
-            continue;
-        }
-        const name = getName(common.name, lang);
-        if (common.members?.includes(id) && !funcs.includes(name)) {
-            funcs.push(name);
-        }
-    }
-    let ownEnums;
-    // Check parent
-    const parts = id.split('.');
-    parts.pop();
-    id = parts.join('.');
-    if (info.objects[id]) {
-        ownEnums = funcs.length;
-        findFunctionsForObject(info, id, lang, funcs);
-    }
-    return { funcs, pef: !ownEnums };
-}
-/*
-function quality2text(q) {
-    if (!q) {
-        return 'ok';
-    }
-    const custom = q & 0xFFFF0000;
-    let text = '';
-    if (q & 0x40) text += 'device';
-    if (q & 0x80) text += 'sensor';
-    if (q & 0x01) text += ' bad';
-    if (q & 0x02) text += ' not connected';
-    if (q & 0x04) text += ' error';
-
-    return text + (custom ? '|0x' + (custom >> 16).toString(16).toUpperCase() : '') + ' [0x' + q.toString(16).toUpperCase() + ']';
-}
-*/
-/**
- * Format a state value for visualization
- */
-function formatValue(options) {
-    const { dateFormat, state, isFloatComma, texts, obj } = options;
-    const states = Utils.getStates(obj);
-    const isCommon = obj.common;
-    let fileViewer;
-    let v = 
-    // @ts-expect-error deprecated from js-controller 6
-    isCommon?.type === 'file'
-        ? '[file]'
-        : !state || state.val === null
-            ? '(null)'
-            : state.val === undefined
-                ? '[undef]'
-                : state.val;
-    const type = typeof v;
-    if (isCommon?.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
-        if (v && typeof v === 'string') {
-            if (Utils.isStringInteger(v)) {
-                // we assume a unix ts
-                v = new Date(parseInt(v, 10)).toString();
-            }
-            else {
-                // check if parsable by new date
-                try {
-                    const parsedDate = new Date(v);
-                    if (Utils.isValidDate(parsedDate)) {
-                        v = parsedDate.toString();
-                    }
-                }
-                catch {
-                    // ignore
-                }
-            }
-        }
-        else {
-            if (v > 946681200 && v < 946681200000) {
-                // '2000-01-01T00:00:00' => 946681200000
-                v *= 1_000; // maybe the time is in seconds (UNIX time)
-            }
-            // "null" and undefined could not be here. See `let v = (isCommon && isCommon.type === 'file') ....` above
-            v = v ? new Date(v).toString() : v;
-        }
-    }
-    else if (isCommon?.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.duration/)) {
-        // Format duration values in HH:mm:ss format
-        if (typeof v === 'number' && v >= 0) {
-            const hours = Math.floor(v / 3600);
-            const minutes = Math.floor((v % 3600) / 60);
-            const seconds = Math.floor(v % 60);
-            v = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-        }
-        else if (typeof v === 'string' && Utils.isStringInteger(v)) {
-            const numValue = parseInt(v, 10);
-            if (numValue >= 0) {
-                const hours = Math.floor(numValue / 3600);
-                const minutes = Math.floor((numValue % 3600) / 60);
-                const seconds = Math.floor(numValue % 60);
-                v = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-            }
-        }
-    }
-    else {
-        if (type === 'number') {
-            if (!Number.isInteger(v)) {
-                v = Math.round(v * 100_000_000) / 100_000_000; // remove 4.00000000000000001
-                if (isFloatComma) {
-                    v = v.toString().replace('.', ',');
-                }
-            }
-        }
-        else if (type === 'object') {
-            v = JSON.stringify(v);
-        }
-        else if (type !== 'string') {
-            v = v.toString();
-        }
-        else if (v.startsWith('data:image/')) {
-            fileViewer = 'image';
-        }
-        if (typeof v !== 'string') {
-            v = v.toString();
-        }
-    }
-    const valText = { v: v };
-    // try to replace number with "common.states"
-    if (states && states[v] !== undefined) {
-        if (v !== states[v]) {
-            valText.s = v;
-            v = states[v];
-            valText.v = v;
-        }
-    }
-    if (valText.v?.length > 40) {
-        valText.c = valText.v;
-        valText.v = `${valText.v.substring(0, 40)}...`;
-    }
-    if (isCommon?.unit) {
-        valText.u = isCommon.unit;
-    }
-    let valFull;
-    if (options.full) {
-        if (typeof v === 'string' && v.length > 100) {
-            valFull = [{ t: texts.value, v: `${v.substring(0, 100)}...` }];
-        }
-        else {
-            valFull = [{ t: texts.value, v }];
-        }
-        if (state) {
-            if (state.ack !== undefined && state.ack !== null) {
-                valFull.push({ t: texts.ack, v: state.ack.toString() });
-            }
-            if (state.ts) {
-                valFull.push({ t: texts.ts, v: state.ts ? Utils.formatDate(new Date(state.ts), dateFormat) : '' });
-            }
-            if (state.lc) {
-                valFull.push({ t: texts.lc, v: state.lc ? Utils.formatDate(new Date(state.lc), dateFormat) : '' });
-            }
-            if (state.from) {
-                let from = state.from.toString();
-                if (from.startsWith('system.adapter.')) {
-                    from = from.substring(15);
-                }
-                valFull.push({ t: texts.from, v: from });
-            }
-            if (state.user) {
-                let user = state.user.toString();
-                if (user.startsWith('system.user.')) {
-                    user = user.substring(12);
-                }
-                valFull.push({ t: texts.user, v: user });
-            }
-            if (state.c) {
-                valFull.push({ t: texts.c, v: state.c });
-            }
-            valFull.push({ t: texts.quality, v: Utils.quality2text(state.q || 0).join(', '), nbr: true });
-        }
-    }
-    return {
-        valText,
-        valFull,
-        fileViewer,
-    };
-}
-/**
- * Get CSS style for given state value
- */
-function getValueStyle(options) {
-    const { state /* , isExpertMode, isButton */ } = options;
-    const color = 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) {
-    // set one point every hour
-    let time = from;
-    let i = 1;
-    const v = [];
-    while (i < values.length && time < from + 25 * 3600000) {
-        // find the interval
-        while (values[i - 1].ts < time && time <= values[i].ts && i < values.length) {
-            i++;
-        }
-        if (i === 1 && values[i - 1].ts >= time) {
-            // assume the value was always null
-            v.push(0);
-        }
-        else if (i < values.length) {
-            if (typeof values[i].val === 'boolean' || typeof values[i - 1].val === 'boolean') {
-                v.push(values[i].val ? 1 : 0);
-            }
-            else {
-                // remove nulls
-                values[i - 1].val ||= 0;
-                values[i].val ||= 0;
-                // interpolate
-                const nm1 = values[i - 1].val;
-                const n = values[i].val;
-                const val = nm1 + ((n - nm1) * (time - values[i - 1].ts)) / (values[i].ts - values[i - 1].ts);
-                v.push(val);
-            }
-        }
-        time += 3600000;
-    }
-    return v;
-}
+        color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070',
+    }),
+    contextMenuRoom: (theme) => ({
+        color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00',
+    }),
+    contextMenuRole: (theme) => ({
+        color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00',
+    }),
+    contextMenuDelete: (theme) => ({
+        color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000',
+    }),
+    contextMenuKeys: {
+        marginLeft: 8,
+        opacity: 0.7,
+        fontSize: 'smaller',
+    },
+    contextMenuWithSubMenu: {
+        display: 'flex',
+    },
+    ...utilStyles,
+};
 export const ITEM_IMAGES = {
     state: (React.createElement(IconState, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
     channel: (React.createElement(IconChannel, { className: "itemIcon", style: { verticalAlign: 'middle' } })),
@@ -1882,18 +786,19 @@ export class ObjectBrowserClass extends Component {
         aliasesMap: {},
     };
     localStorage = window._localStorage || window.localStorage;
-    lastAppliedFilter = null;
     tableRef;
-    filterRefs;
     pausedSubscribes = false;
     selectFirst;
+    /** Last navigation that was applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
+    lastNav = null;
+    /** True while applying `navigateTo`, so the derived-state watcher does not echo it back. */
+    applyingNav = false;
     root = null;
     states = {};
     subscribes = [];
     unsubscribeTimer = null;
     statesUpdateTimer = null;
     objectsUpdateTimer = null;
-    filterTimer = null;
     visibleCols;
     texts;
     possibleCols;
@@ -1921,22 +826,22 @@ export class ObjectBrowserClass extends Component {
     resizerActiveDiv = null;
     resizerNextDiv = null;
     storedWidths = null;
-    systemConfig;
+    systemConfig = null;
     objects;
     defaultHistory = '';
-    cltrPressed = false;
+    ctrlPressed = false;
     columnsVisibility = {};
     changedIds = null;
     contextMenu = null;
     recordStates = [];
     styles = {};
+    expertMode = false;
     customColumnDialog = null;
-    /** Namespaces which are allowed to be edited by non-expert users */
-    static NON_EXPERT_NAMESPACES = ['0_userdata.0.', 'alias.0.'];
     constructor(props) {
         super(props);
         const lastSelectedItemStr = this.localStorage.getItem(`${props.dialogName || 'App'}.objectSelected`) || '';
         this.selectFirst = '';
+        this.expertMode = !!this.props.expertMode;
         if (lastSelectedItemStr.startsWith('[')) {
             try {
                 const lastSelectedItems = JSON.parse(lastSelectedItemStr);
@@ -1976,20 +881,35 @@ export class ObjectBrowserClass extends Component {
             filter = { ...DEFAULT_FILTER };
         }
         // Migrate old filters to new one
-        if (typeof filter.room === 'string') {
-            filter.room = [filter.room];
+        if (typeof filter.room === 'string' && filter.room) {
+            filter.room = [filter.room].filter(s => s);
+            if (!filter.room.length) {
+                delete filter.room;
+            }
         }
-        if (typeof filter.func === 'string') {
-            filter.func = [filter.func];
+        if (typeof filter.func === 'string' && filter.func) {
+            filter.func = [filter.func].filter(s => s);
+            if (!filter.func.length) {
+                delete filter.func;
+            }
         }
-        if (typeof filter.role === 'string') {
-            filter.role = [filter.role];
+        if (typeof filter.role === 'string' && filter.role) {
+            filter.role = [filter.role].filter(s => s);
+            if (!filter.role.length) {
+                delete filter.role;
+            }
         }
         if (typeof filter.type === 'string') {
-            filter.type = [filter.type];
+            filter.type = [filter.type].filter(s => s);
+            if (!filter.type.length) {
+                delete filter.type;
+            }
         }
         if (typeof filter.custom === 'string') {
-            filter.custom = [filter.custom];
+            filter.custom = [filter.custom].filter(s => s);
+            if (!filter.custom.length) {
+                delete filter.custom;
+            }
         }
         filter.expertMode =
             props.expertMode !== undefined
@@ -1997,8 +917,6 @@ export class ObjectBrowserClass extends Component {
                 : (window._sessionStorage || window.sessionStorage).getItem('App.expertMode') ===
                     'true';
         this.tableRef = createRef();
-        this.filterRefs = {};
-        Object.keys(DEFAULT_FILTER).forEach(name => (this.filterRefs[name] = createRef()));
         this.visibleCols = props.columns || SCREEN_WIDTHS[props.width || 'lg'].fields;
         // remove type column if only one type must be selected
         if (props.types && props.types.length === 1) {
@@ -2062,46 +980,48 @@ export class ObjectBrowserClass extends Component {
             // ignore
         }
         this.state = {
-            loaded: false,
-            foldersFirst,
-            selected,
-            selectedNonObject: this.localStorage.getItem(`${props.dialogName || 'App'}.selectedNonObject`) || '',
-            filter,
-            filterKey: 0,
-            focused: this.localStorage.getItem(`${props.dialogName || 'App'}.focused`) || '',
-            depth: 0,
-            expandAllVisible: false,
-            expanded,
-            toast: '',
-            scrollBarWidth: 16,
-            customDialog,
-            editObjectDialog: '',
-            editObjectAlias: false, // open the edit object dialog on alias tab
-            viewFileDialog: '',
-            showAliasEditor: '',
-            enumDialog: null,
-            roleDialog: null,
-            statesView,
+            aliasMenu: '',
+            beautifyJsonExport: true,
             columns,
-            columnsForAdmin: null,
-            columnsSelectorShow: false,
             columnsAuto: this.localStorage.getItem(`${props.dialogName || 'App'}.columnsAuto`) !== 'false',
-            columnsWidths,
             columnsDialogTransparent: 100,
             columnsEditCustomDialog: null,
+            columnsForAdmin: null,
+            columnsSelectorShow: false,
+            columnsWidths,
             customColumnDialogValueChanged: false,
-            showExportDialog: false,
-            showAllExportOptions: false,
-            linesEnabled: this.localStorage.getItem(`${props.dialogName || 'App'}.lines`) === 'true',
-            showDescription: this.localStorage.getItem(`${props.dialogName || 'App'}.desc`) !== 'false',
-            showContextMenu: null,
-            noStatesByExportImport: false,
-            beautifyJsonExport: true,
+            customDialog,
+            depth: 0,
+            editObjectAlias: false, // open the edit object dialog on alias tab
+            editObjectDialog: '',
+            enumDialog: null,
             excludeSystemRepositoriesFromExport: true,
             excludeTranslations: false,
-            tooltipInfo: null,
-            aliasMenu: '',
+            expandAllVisible: false,
+            expanded,
+            filter,
+            filterKey: 0,
+            focused: this.localStorage.getItem(`${props.dialogName || 'App'}.focused`) || '',
+            foldersFirst,
+            linesEnabled: this.localStorage.getItem(`${props.dialogName || 'App'}.lines`) === 'true',
+            loaded: false,
+            noStatesByExportImport: false,
+            roleDialog: null,
+            scrollBarWidth: 16,
+            selected,
+            selectedNonObject: this.localStorage.getItem(`${props.dialogName || 'App'}.selectedNonObject`) || '',
+            showAliasEditor: '',
+            showAllExportOptions: false,
+            showContextMenu: null,
+            showDescription: this.localStorage.getItem(`${props.dialogName || 'App'}.desc`) !== 'false',
+            showExportDialog: false,
+            showImportDialog: false,
+            showImportMenu: null,
             showRenameDialog: null,
+            statesView,
+            toast: '',
+            tooltipInfo: null,
+            viewFileDialog: '',
         };
         this.texts = {
             name: props.t('ra_Name'),
@@ -2210,22 +1130,19 @@ export class ObjectBrowserClass extends Component {
                     Object.assign(objects || {}, moreObjects);
                 }
             }
-            this.systemConfig =
-                this.systemConfig ||
-                    objects?.['system.config'] ||
+            this.systemConfig ||=
+                objects?.['system.config'] ||
                     (await props.socket.getObject('system.config'));
-            this.systemConfig.common = this.systemConfig.common || {};
-            this.systemConfig.common.defaultNewAcl = this.systemConfig.common.defaultNewAcl || {
+            this.systemConfig.common ||= {};
+            this.systemConfig.common.defaultNewAcl ||= {
                 object: 0,
                 state: 0,
                 file: 0,
                 owner: 'system.user.admin',
                 ownerGroup: 'system.group.administrator',
             };
-            this.systemConfig.common.defaultNewAcl.owner =
-                this.systemConfig.common.defaultNewAcl.owner || 'system.user.admin';
-            this.systemConfig.common.defaultNewAcl.ownerGroup =
-                this.systemConfig.common.defaultNewAcl.ownerGroup || 'system.group.administrator';
+            this.systemConfig.common.defaultNewAcl.owner ||= 'system.user.admin';
+            this.systemConfig.common.defaultNewAcl.ownerGroup ||= 'system.group.administrator';
             if (typeof this.systemConfig.common.defaultNewAcl.state !== 'number') {
                 // TODO: may be convert here from string
                 this.systemConfig.common.defaultNewAcl.state = 0x664;
@@ -2308,31 +1225,30 @@ export class ObjectBrowserClass extends Component {
             this.info = info;
             // Show first selected item
             const node = this.state.selected?.length && findNode(this.root, this.state.selected[0]);
-            this.lastAppliedFilter = null;
             // If the selected ID is not visible, reset filter
             if (node &&
                 !applyFilter(node, this.state.filter, props.lang, this.objects, undefined, undefined, props.customFilter, props.types)) {
                 // reset filter
                 this.setState({ filter: { ...DEFAULT_FILTER }, columnsForAdmin }, () => {
-                    this.setState({ loaded: true, updating: false }, () => this.expandAllSelected(() => this.onAfterSelect()));
+                    this.doFilter();
+                    this.setState({ loaded: true, updating: false }, () => this.expandAllSelected(() => {
+                        this.onAfterSelect();
+                        this.applyInitialNavigateTo();
+                    }));
                 });
             }
             else {
-                this.setState({ loaded: true, updating: false, columnsForAdmin }, () => this.expandAllSelected(() => this.onAfterSelect()));
+                this.doFilter();
+                this.setState({ loaded: true, updating: false, columnsForAdmin }, () => this.expandAllSelected(() => {
+                    this.onAfterSelect();
+                    this.applyInitialNavigateTo();
+                }));
             }
         }
         catch (error) {
             this.showError(error);
         }
     }
-    /**
-     * Check if it is a non-expert id
-     */
-    static isNonExpertId(
-    /** id to test */
-    id) {
-        return !!ObjectBrowserClass.NON_EXPERT_NAMESPACES.find(saveNamespace => id.startsWith(saveNamespace));
-    }
     expandAllSelected(cb) {
         const expanded = [...this.state.expanded];
         let changed = false;
@@ -2421,6 +1337,7 @@ export class ObjectBrowserClass extends Component {
             }
         }
     }
+    // This function is used
     static getDerivedStateFromProps(props, state) {
         const newState = {};
         let changed = false;
@@ -2454,14 +1371,14 @@ export class ObjectBrowserClass extends Component {
         }
     }
     onKeyPress = (event) => {
-        if (event.type === 'keydown' && event.ctrlKey && !this.cltrPressed) {
-            this.cltrPressed = true;
+        if (event.type === 'keydown' && event.ctrlKey && !this.ctrlPressed) {
+            this.ctrlPressed = true;
             if (this.tableRef.current) {
                 this.tableRef.current.className = 'highlight-link';
             }
         }
-        else if (event.type === 'keyup' && !event.ctrlKey && this.cltrPressed) {
-            this.cltrPressed = false;
+        else if (event.type === 'keyup' && !event.ctrlKey && this.ctrlPressed) {
+            this.ctrlPressed = false;
             if (this.tableRef.current) {
                 this.tableRef.current.className = '';
             }
@@ -2471,10 +1388,6 @@ export class ObjectBrowserClass extends Component {
      * Called when component is unmounted.
      */
     componentWillUnmount() {
-        if (this.filterTimer) {
-            clearTimeout(this.filterTimer);
-            this.filterTimer = null;
-        }
         window.removeEventListener('contextmenu', this.onContextMenu, true);
         window.removeEventListener('keydown', this.onKeyPress, true);
         window.removeEventListener('keyup', this.onKeyPress, true);
@@ -2813,7 +1726,7 @@ export class ObjectBrowserClass extends Component {
             let cColumns;
             if (columns) {
                 cColumns = aColumns
-                    .map((_item) => {
+                    ?.map((_item) => {
                     if (typeof _item !== 'object') {
                         return { path: _item, name: _item.split('.').pop() };
                     }
@@ -2853,7 +1766,7 @@ export class ObjectBrowserClass extends Component {
             else {
                 cColumns = null;
             }
-            if (cColumns?.length) {
+            if (cColumns && cColumns.length) {
                 columnsForAdmin ||= {};
                 columnsForAdmin[obj.common.name] = cColumns.sort((a, b) => a.path > b.path ? -1 : a.path < b.path ? 1 : 0);
             }
@@ -2906,9 +1819,8 @@ export class ObjectBrowserClass extends Component {
                 });
                 this.root = root;
                 this.info = info;
-                this.lastAppliedFilter = null; // apply filter anew
                 if (!this.pausedSubscribes) {
-                    this.forceUpdate();
+                    this.doFilter();
                 }
                 // else it will be re-rendered when the dialog will be closed
             }, 500);
@@ -3032,129 +1944,52 @@ export class ObjectBrowserClass extends Component {
             this.subscribes.forEach(id => this.props.socket.subscribeState(id, this.onStateChange));
         }
     }
-    onFilter(name, value) {
-        this.filterTimer = null;
-        const filter = { ...this.state.filter };
-        Object.keys(this.filterRefs).forEach((_name) => {
-            if (this.filterRefs[_name]?.current) {
-                const filterRef = this.filterRefs[_name].current;
-                for (let i = 0; i < filterRef.children.length; i++) {
-                    if (filterRef.children[i].tagName === 'INPUT') {
-                        if (_name === 'role' ||
-                            _name === 'type' ||
-                            _name === 'func' ||
-                            _name === 'custom' ||
-                            _name === 'room') {
-                            const value = filterRef.children[i].value;
-                            if (value) {
-                                filter[_name] = value.split(',');
-                            }
-                            else {
-                                filter[_name] = undefined;
-                            }
-                        }
-                        else {
-                            filter[_name] = filterRef.children[i].value;
-                        }
-                        break;
-                    }
-                }
-            }
-        });
-        if (name) {
-            filter[name] = value;
-            if (name === 'expertMode') {
-                (window._sessionStorage || window.sessionStorage).setItem('App.expertMode', value ? 'true' : 'false');
-            }
-        }
-        if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
-            this.setState({ filter }, () => this.props.onFilterChanged && this.props.onFilterChanged(filter));
-        }
-    }
     clearFilter() {
-        const filter = { ...this.state.filter };
-        Object.keys(this.filterRefs).forEach(name => {
-            if (this.filterRefs[name]?.current) {
-                const filterRef = this.filterRefs[name].current;
-                for (let i = 0; i < filterRef.childNodes.length; i++) {
-                    const item = filterRef.childNodes[i];
-                    if (item.tagName === 'INPUT') {
-                        filter[name] = '';
-                        item.value = '';
-                        break;
-                    }
-                }
-            }
-        });
-        if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
-            this.setState({ filter, filterKey: this.state.filterKey + 1 }, () => this.props.onFilterChanged?.(filter));
+        if (JSON.stringify(this.state.filter) !== JSON.stringify(DEFAULT_FILTER)) {
+            this.setState({ filter: { ...DEFAULT_FILTER }, filterKey: this.state.filterKey + 1 }, () => {
+                this.doFilter();
+                this.props.onFilterChanged?.({ ...DEFAULT_FILTER });
+            });
         }
     }
     isFilterEmpty() {
-        const someNotEmpty = Object.keys(this.state.filter).find(attr => attr !== 'expertMode' && this.state.filter[attr]);
-        return !someNotEmpty;
-    }
-    getFilterInput(filterName) {
-        return (React.createElement(FormControl, { sx: this.styles.filterInput, key: `${filterName}_${this.state.filterKey}`, title: filterName === 'name' || filterName === 'id'
-                ? this.props.t('ra_You can use * as wildcard')
-                : undefined, 
-            // style={{ marginTop: 0, marginBottom: 0 }}
-            margin: "dense" },
-            React.createElement(Input, { ref: this.filterRefs[filterName], classes: { underline: 'no-underline' }, id: filterName, placeholder: this.texts[`filter_${filterName}`], defaultValue: this.state.filter[filterName] || '', onChange: () => {
-                    if (this.filterTimer) {
-                        clearTimeout(this.filterTimer);
-                    }
-                    this.filterTimer = setTimeout(() => this.onFilter(), 400);
-                }, autoComplete: "off" }),
-            this.filterRefs[filterName]?.current?.firstChild?.value ? (React.createElement("div", { style: {
-                    position: 'absolute',
-                    right: 0,
-                } },
-                React.createElement(IconButton, { size: "small", onClick: () => {
-                        (this.filterRefs[filterName].current?.firstChild).value = '';
-                        this.onFilter(filterName, '');
-                    } },
-                    React.createElement(IconClose, null)))) : null));
+        return (!!this.state.filter.id ||
+            !!this.state.filter.name ||
+            !!this.state.filter.room?.length ||
+            !!this.state.filter.func?.length ||
+            !!this.state.filter.role?.length ||
+            !!this.state.filter.type?.length ||
+            !!this.state.filter.custom?.length);
+    }
+    getFilterInput(name) {
+        return (React.createElement(CustomFilterInput, { key: `${name}_${this.state.filterKey}`, styles: this.styles.filterInput, name: name, texts: this.texts, t: this.props.t, initialValue: this.state.filter[name], onChange: (name, value) => {
+                const filter = { ...this.state.filter };
+                if (value === undefined) {
+                    delete filter[name];
+                }
+                else {
+                    filter[name] = value;
+                }
+                this.setState({ filter }, () => {
+                    this.doFilter();
+                    this.props.onFilterChanged?.(filter);
+                });
+            } }));
     }
     getFilterSelect(name, values) {
-        const hasIcons = !!values?.find(item => item.icon);
-        return (React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(Select, { variant: "standard", key: `${name}_${this.state.filterKey}`, ref: this.filterRefs[name], sx: styles.headerCellInput, className: "no-underline", multiple: true, onChange: () => {
-                    if (this.filterTimer) {
-                        clearTimeout(this.filterTimer);
-                    }
-                    this.filterTimer = setTimeout(() => this.onFilter(), 400);
-                }, defaultValue: this.state.filter[name] || [], inputProps: { name, id: name }, displayEmpty: true },
-                React.createElement(MenuItem, { key: "empty", value: "" },
-                    React.createElement("span", { style: styles.selectNone }, name === 'custom' ? this.texts.showAll : this.texts[`filter_${name}`])),
-                values?.map(item => {
-                    let id;
-                    let _name;
-                    let icon;
-                    if (typeof item === 'object') {
-                        id = item.value;
-                        _name = item.name;
-                        icon = item.icon;
-                    }
-                    else {
-                        id = item;
-                        _name = item;
-                    }
-                    return (React.createElement(MenuItem, { sx: styles.headerCellSelectItem, key: id, value: id },
-                        icon || (hasIcons ? React.createElement("div", { className: "itemIcon" }) : null),
-                        _name));
-                })),
-            this.filterRefs[name]?.current?.childNodes[1]?.value ? (React.createElement(Box, { component: "div", sx: styles.selectClearButton },
-                React.createElement(IconButton, { size: "small", onClick: () => {
-                        const newFilter = { ...this.state.filter };
-                        delete newFilter[name];
-                        (this.filterRefs[name].current?.childNodes[1]).value = '';
-                        this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(newFilter));
-                        this.setState({ filter: newFilter, filterKey: this.state.filterKey + 1 }, () => this.props.onFilterChanged && this.props.onFilterChanged(newFilter));
-                    } },
-                    React.createElement(IconClose, null)))) : null));
+        return (React.createElement(CustomFilterSelect, { key: `${name}_${this.state.filterKey}`, name: name, texts: this.texts, initialValue: this.state.filter[name] || [], values: values || [], onChange: (name, value) => {
+                const filter = { ...this.state.filter };
+                if (value === undefined) {
+                    delete filter[name];
+                }
+                else {
+                    filter[name] = value;
+                }
+                this.setState({ filter }, () => {
+                    this.doFilter();
+                    this.props.onFilterChanged?.(filter);
+                });
+            } }));
     }
     getFilterSelectRole() {
         return this.getFilterSelect('role', this.info.roles.map(it => it.role));
@@ -3215,6 +2050,9 @@ export class ObjectBrowserClass extends Component {
         this.setState({ expanded: [], depth: 0, selected: [] }, () => this.onAfterSelect());
     }
     expandDepth(root, depth, expanded) {
+        if (!this.root) {
+            throw new Error('No root');
+        }
         root ||= this.root;
         if (depth > 0) {
             root.children?.forEach(item => {
@@ -3492,79 +2330,80 @@ export class ObjectBrowserClass extends Component {
             return null;
         }
         const ObjectMoveRenameDialog = this.props.objectMoveRenameDialog;
-        return (React.createElement(ObjectMoveRenameDialog, { expertMode: this.props.expertMode, onClose: () => this.setState({ showRenameDialog: null }), id: this.state.showRenameDialog.id, childrenIds: this.state.showRenameDialog.childrenIds, theme: this.props.theme, socket: this.props.socket, t: this.props.t, objectType: this.objects[this.state.showRenameDialog.id]?.type }));
+        return (React.createElement(ObjectMoveRenameDialog, { expertMode: !!this.props.expertMode, onClose: () => this.setState({ showRenameDialog: null }), id: this.state.showRenameDialog.id, childrenIds: this.state.showRenameDialog.childrenIds, theme: this.props.theme, socket: this.props.socket, t: this.props.t, objectType: this.objects[this.state.showRenameDialog.id]?.type }));
     }
-    handleJsonUpload(evt) {
-        const target = evt.target;
-        const f = target.files?.length && target.files[0];
-        if (f) {
-            const r = new FileReader();
-            r.onload = async (e) => {
-                const contents = e.target?.result;
+    async parseJsonFile(contents) {
+        try {
+            const json = JSON.parse(contents);
+            const len = Object.keys(json).length;
+            const id = json._id;
+            // it could be a single object or many objects
+            if (id === undefined && len) {
+                // many objects
+                await this.loadObjects(json);
+                window.alert(this.props.t('ra_%s object(s) processed', len));
+            }
+            else {
+                // it is only one object in form
+                // {
+                //    "_id": "xxx",
+                //   "common": "yyy",
+                //   "native": "zzz"
+                //   "val": JSON.stringify(value)
+                //   "ack": true
+                // }
+                if (!id) {
+                    return window.alert(this.props.t('ra_Invalid structure'));
+                }
                 try {
-                    const json = JSON.parse(contents);
-                    const len = Object.keys(json).length;
-                    const id = json._id;
-                    // it could be a single object or many objects
-                    if (id === undefined && len) {
-                        // many objects
-                        await this.loadObjects(json);
-                        window.alert(this.props.t('ra_%s object(s) processed', len));
+                    let enums;
+                    let val;
+                    let ack;
+                    if (json.common.enums) {
+                        enums = json.common.enums;
+                        delete json.common.enums;
                     }
-                    else {
-                        // it is only one object in form
-                        // {
-                        //    "_id": "xxx",
-                        //   "common": "yyy",
-                        //   "native": "zzz"
-                        //   "val": JSON.stringify(value)
-                        //   "ack": true
-                        // }
-                        if (!id) {
-                            return window.alert(this.props.t('ra_Invalid structure'));
+                    if (json.val) {
+                        val = json.val;
+                        delete json.val;
+                    }
+                    if (json.ack !== undefined) {
+                        ack = json.ack;
+                        delete json.ack;
+                    }
+                    await this.props.socket.setObject(json._id, json);
+                    if (json.type === 'state') {
+                        if (val !== undefined && val !== null) {
+                            await this.props.socket.setState(json._id, val, ack === undefined ? true : ack);
                         }
-                        try {
-                            let enums;
-                            let val;
-                            let ack;
-                            if (json.common.enums) {
-                                enums = json.common.enums;
-                                delete json.common.enums;
-                            }
-                            if (json.val) {
-                                val = json.val;
-                                delete json.val;
-                            }
-                            if (json.ack !== undefined) {
-                                ack = json.ack;
-                                delete json.ack;
-                            }
-                            await this.props.socket.setObject(json._id, json);
-                            if (json.type === 'state') {
-                                if (val !== undefined && val !== null) {
-                                    await this.props.socket.setState(json._id, val, ack === undefined ? true : ack);
-                                }
-                                else {
-                                    const state = await this.props.socket.getState(json._id);
-                                    if (!state || state.val === null || state.val === undefined) {
-                                        await this.props.socket.setState(json._id, json.common.def === undefined ? null : json.common.def, true);
-                                    }
-                                }
-                            }
-                            if (enums) {
-                                await this._createAllEnums(enums, json._id);
+                        else {
+                            const state = await this.props.socket.getState(json._id);
+                            if (!state || state.val === null || state.val === undefined) {
+                                await this.props.socket.setState(json._id, json.common.def === undefined ? null : json.common.def, true);
                             }
-                            window.alert(this.props.t('ra_%s was imported', json._id));
-                        }
-                        catch (err) {
-                            window.alert(err);
                         }
                     }
+                    if (enums) {
+                        await this._createAllEnums(enums, json._id);
+                    }
+                    window.alert(this.props.t('ra_%s was imported', json._id));
                 }
                 catch (err) {
                     window.alert(err);
                 }
-                return null;
+            }
+        }
+        catch (err) {
+            window.alert(err);
+        }
+    }
+    handleJsonUpload(evt) {
+        const target = evt.target;
+        const f = target.files?.length && target.files[0];
+        if (f) {
+            const r = new FileReader();
+            r.onload = (e) => {
+                this.parseJsonFile(e.target?.result).catch(e => console.log(`Cannot parse file: ${e}`));
             };
             r.readAsText(f);
         }
@@ -3641,6 +2480,26 @@ export class ObjectBrowserClass extends Component {
         }
         return value.length ? value : t('ra_Add new child object to selected parent');
     };
+    onOpenFile() {
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('id', 'files');
+        input.setAttribute('opacity', '0');
+        input.addEventListener('change', (e) => this.handleJsonUpload(e), false);
+        input.click();
+    }
+    renderInputJsonDialog() {
+        if (!this.state.showImportDialog) {
+            return null;
+        }
+        const ObjectBrowserInsertJsonObjects = this.props.objectBrowserInsertJsonObjects;
+        return (React.createElement(ObjectBrowserInsertJsonObjects, { onClose: (text) => {
+                this.setState({ showImportDialog: false });
+                if (text) {
+                    void this.parseJsonFile(text);
+                }
+            }, themeName: this.props.themeName, themeType: this.props.themeType, t: this.props.t }));
+    }
     /**
      * Renders the toolbar.
      */
@@ -3674,7 +2533,14 @@ export class ObjectBrowserClass extends Component {
                         React.createElement(IconButton, { onClick: () => this.refreshComponent(), disabled: this.state.updating, size: "large" },
                             React.createElement(RefreshIcon, null)))),
                 this.props.showExpertButton && !this.props.expertMode && (React.createElement(Tooltip, { title: this.props.t('ra_expertMode'), slotProps: { popper: { sx: styles.tooltip } } },
-                    React.createElement(IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => this.onFilter('expertMode', !this.state.filter.expertMode), size: "large" },
+                    React.createElement(IconButton, { key: "expertMode", color: this.state.filter.expertMode ? 'secondary' : 'default', onClick: () => {
+                            const filter = { ...this.state.filter };
+                            filter.expertMode = !filter.expertMode;
+                            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(filter));
+                            this.setState({
+                                filter,
+                            });
+                        }, size: "large" },
                         React.createElement(IconExpert, null)))),
                 !this.props.disableColumnSelector && this.props.width !== 'xs' && (React.createElement(Tooltip, { title: this.props.t('ra_Configure'), slotProps: { popper: { sx: styles.tooltip } } },
                     React.createElement(IconButton, { key: "columnSelector", color: this.state.columnsAuto ? 'primary' : 'default', onClick: () => this.setState({ columnsSelectorShow: true }), size: "large" },
@@ -3725,15 +2591,24 @@ export class ObjectBrowserClass extends Component {
                             }), size: "large" },
                             React.createElement(AddIcon, null))))) : null,
                 this.props.objectImportExport && (React.createElement(Tooltip, { title: this.props.t('ra_Add objects tree from JSON file'), slotProps: { popper: { sx: styles.tooltip } } },
-                    React.createElement(IconButton, { onClick: () => {
-                            const input = document.createElement('input');
-                            input.setAttribute('type', 'file');
-                            input.setAttribute('id', 'files');
-                            input.setAttribute('opacity', '0');
-                            input.addEventListener('change', (e) => this.handleJsonUpload(e), false);
-                            input.click();
+                    React.createElement(IconButton, { onClick: e => {
+                            if (this.props.objectBrowserInsertJsonObjects) {
+                                this.setState({ showImportMenu: e.currentTarget });
+                            }
+                            else {
+                                this.onOpenFile();
+                            }
                         }, size: "large" },
                         React.createElement(PublishIcon, null)))),
+                this.props.objectBrowserInsertJsonObjects ? (React.createElement(Menu, { anchorEl: this.state.showImportMenu, open: !!this.state.showImportMenu, onClose: () => this.setState({ showImportMenu: null }) },
+                    React.createElement(MenuItem, { onClick: () => this.setState({ showImportMenu: null }, () => this.onOpenFile()) },
+                        React.createElement(ListItemIcon, null,
+                            React.createElement(UploadFile, null)),
+                        React.createElement(ListItemText, null, this.props.t('ra_From file'))),
+                    React.createElement(MenuItem, { onClick: () => this.setState({ showImportMenu: null, showImportDialog: true }) },
+                        React.createElement(ListItemIcon, null,
+                            React.createElement(ContentPaste, null)),
+                        React.createElement(ListItemText, null, this.props.t('ra_From text'))))) : null,
                 this.props.objectImportExport &&
                     (!!this.state.selected.length || this.state.selectedNonObject) && (React.createElement(Tooltip, { title: this.props.t('ra_Save objects tree as JSON file'), slotProps: { popper: { sx: styles.tooltip } } },
                     React.createElement(IconButton, { onClick: () => this.setState({ showExportDialog: this._getSelectedIdsForExport().length }), size: "large" },
@@ -3887,9 +2762,9 @@ export class ObjectBrowserClass extends Component {
             : 0;
         const aclSystemConfig = item.data.obj.acl &&
             (item.data.obj.type === 'state'
-                ? this.systemConfig.common.defaultNewAcl.state
-                : this.systemConfig.common.defaultNewAcl.object);
-        const showEdit = this.state.filter.expertMode || ObjectBrowserClass.isNonExpertId(item.data.id);
+                ? this.systemConfig?.common.defaultNewAcl.state
+                : this.systemConfig?.common.defaultNewAcl.object);
+        const showEdit = !!item.data.obj && (this.state.filter.expertMode || isNonExpertId(item.data.id));
         return [
             this.state.filter.expertMode && this.props.objectEditOfAccessControl ? (React.createElement(Tooltip, { key: "acl", title: item.data.aclTooltip, slotProps: { popper: { sx: styles.tooltip } } },
                 React.createElement(IconButton, { sx: {
@@ -4002,8 +2877,10 @@ export class ObjectBrowserClass extends Component {
             state,
             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,
+            dateFormat: this.props.dateFormat || this.systemConfig?.common.dateFormat || DEFAULT_DATE_FORMAT,
+            isFloatComma: this.props.isFloatComma === undefined
+                ? (this.systemConfig?.common.isFloatComma ?? true)
+                : this.props.isFloatComma,
             full: true,
         });
         const valFullRx = [];
@@ -4032,7 +2909,7 @@ export class ObjectBrowserClass extends Component {
         if (fileViewer === 'image') {
             valFullRx.push(React.createElement("img", { style: styles.cellValueTooltipImage, src: state.val, alt: id }));
         }
-        else if (role === 'url' || obj.common.role === 'url.self' || obj.common.role === 'url.blank') {
+        else if (role === 'url' || role === 'url.self' || role === 'url.blank') {
             // Show comment about "Hold Ctrl/⌘ key to open the link"
             valFullRx.unshift(React.createElement("div", { key: "ctrl", style: { textDecoration: 'underline', fontWeight: 'bold' } }, this.texts.ctrlForLink));
         }
@@ -4077,9 +2954,9 @@ export class ObjectBrowserClass extends Component {
                 state,
                 obj: obj,
                 texts: this.texts,
-                dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat,
+                dateFormat: this.props.dateFormat || this.systemConfig?.common.dateFormat || DEFAULT_DATE_FORMAT,
                 isFloatComma: this.props.isFloatComma === undefined
-                    ? this.systemConfig.common.isFloatComma
+                    ? (this.systemConfig?.common.isFloatComma ?? true)
                     : this.props.isFloatComma,
             });
             const valTextRx = [];
@@ -4106,7 +2983,12 @@ export class ObjectBrowserClass extends Component {
             // <IconEdit className="copyButton" style={{{ ...styles.cellButtonsValueButton, styles.cellButtonsValueButtonEdit)} key="ce" />
             info = item.data.state;
         }
-        info.style = getValueStyle({ state, isExpertMode: this.state.filter.expertMode, isButton: item.data.button });
+        info.style = getValueStyle({
+            state,
+            isExpertMode: this.state.filter.expertMode,
+            isButton: item.data.button,
+            nonAckColor: this.props.theme.palette.nonAck,
+        });
         let val = info.valTextRx;
         if (!this.state.filter.expertMode) {
             if (item.data.button) {
@@ -4250,7 +3132,9 @@ export class ObjectBrowserClass extends Component {
                         this.setState({ enumDialogEnums });
                     }, secondaryAction: icon },
                     React.createElement(ListItemIcon, { sx: { '&.MuiListItemIcon-root': styles.enumCheckbox } },
-                        React.createElement(Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': labelId } })),
+                        React.createElement(Checkbox, { edge: "start", checked: itemEnums.includes(id), tabIndex: -1, disableRipple: true, slotProps: {
+                                input: { 'aria-labelledby': labelId },
+                            } })),
                     React.createElement(ListItemText, { id: labelId }, name)));
             }))));
     }
@@ -4261,7 +3145,7 @@ export class ObjectBrowserClass extends Component {
         if (this.state.roleDialog && this.props.objectBrowserEditRole) {
             const ObjectBrowserEditRole = this.props.objectBrowserEditRole;
             return (React.createElement(ObjectBrowserEditRole, { key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roleArray: this.info.roles, commonType: this.info.objects[this.state.roleDialog]?.common?.type, onClose: (obj) => {
-                    if (obj) {
+                    if (obj && this.state.roleDialog) {
                         this.info.objects[this.state.roleDialog] = obj;
                     }
                     this.setState({ roleDialog: null });
@@ -4284,7 +3168,7 @@ export class ObjectBrowserClass extends Component {
             this.props.socket
                 .getObject(this.state.columnsEditCustomDialog?.obj?._id || '')
                 .then(obj => {
-                if (obj && ObjectBrowserClass.setCustomValue(obj, this.state.columnsEditCustomDialog?.it, value)) {
+                if (obj && setCustomValue(obj, this.state.columnsEditCustomDialog?.it, value)) {
                     return this.props.socket.setObject(obj._id, obj);
                 }
                 throw new Error(this.props.t('ra_Cannot update attribute, because not found in the object'));
@@ -4302,7 +3186,7 @@ export class ObjectBrowserClass extends Component {
             return null;
         }
         if (!this.customColumnDialog) {
-            const value = ObjectBrowserClass.getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
+            const value = getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
             this.customColumnDialog = {
                 type: (this.state.columnsEditCustomDialog.it.type || typeof value),
                 initValue: (value === null || value === undefined ? '' : value).toString(),
@@ -4331,111 +3215,11 @@ export class ObjectBrowserClass extends Component {
                 React.createElement(Button, { variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(true), disabled: !this.state.customColumnDialogValueChanged, color: "primary", startIcon: React.createElement(IconCheck, null) }, this.props.t('ra_Update')),
                 React.createElement(Button, { color: "grey", variant: "contained", onClick: () => this.onColumnsEditCustomDialogClose(), startIcon: React.createElement(IconClose, null) }, this.props.t('ra_Cancel')))));
     }
-    static getCustomValue(obj, it) {
-        if (obj?._id?.startsWith(`${it.adapter}.`) && it.path.length > 1) {
-            const p = it.path;
-            let value;
-            const anyObj = obj;
-            if (anyObj[p[0]] && typeof anyObj[p[0]] === 'object') {
-                if (p.length === 2) {
-                    // most common case
-                    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;
-                }
-                else if (p.length === 4) {
-                    value =
-                        anyObj[p[0]][p[1]] && typeof anyObj[p[0]][p[1]] === 'object' && anyObj[p[0]][p[1]][p[2]]
-                            ? anyObj[p[0]][p[1]][p[2]][p[3]]
-                            : null;
-                }
-                else if (p.length === 5) {
-                    value =
-                        anyObj[p[0]][p[1]] &&
-                            typeof anyObj[p[0]][p[1]] === 'object' &&
-                            anyObj[p[0]][p[1]][p[2]] &&
-                            anyObj[p[0]][p[1]][p[2]][p[3]]
-                            ? anyObj[p[0]][p[1]][p[2]][p[3]][p[4]]
-                            : null;
-                }
-                else if (p.length === 6) {
-                    value =
-                        anyObj[p[0]][p[1]] &&
-                            typeof anyObj[p[0]][p[1]] === 'object' &&
-                            anyObj[p[0]][p[1]][p[2]] &&
-                            anyObj[p[0]][p[1]][p[2]][p[3]] &&
-                            anyObj[p[0]][p[1]][p[2]][p[3]][p[4]]
-                            ? anyObj[p[0]][p[1]][p[2]][p[3]][p[4]][p[5]]
-                            : null;
-                }
-                if (value === undefined || value === null) {
-                    return null;
-                }
-                return value;
-            }
-        }
-        return null;
-    }
-    static setCustomValue(obj, it, value) {
-        if (obj?._id?.startsWith(`${it.adapter}.`) && it.path.length > 1) {
-            const p = it.path;
-            const anyObj = obj;
-            if (anyObj[p[0]] && typeof anyObj[p[0]] === 'object') {
-                if (p.length === 2) {
-                    // most common case
-                    anyObj[p[0]][p[1]] = value;
-                    return true;
-                }
-                if (p.length === 3) {
-                    if (anyObj[p[0]][p[1]] && typeof anyObj[p[0]][p[1]] === 'object') {
-                        anyObj[p[0]][p[1]][p[2]] = value;
-                        return true;
-                    }
-                }
-                else if (p.length === 4) {
-                    if (anyObj[p[0]][p[1]] &&
-                        typeof anyObj[p[0]][p[1]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]] === 'object') {
-                        anyObj[p[0]][p[1]][p[2]][p[3]] = value;
-                        return true;
-                    }
-                }
-                else if (p.length === 5) {
-                    if (anyObj[p[0]][p[1]] &&
-                        typeof anyObj[p[0]][p[1]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]][p[3]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]][p[3]] === 'object') {
-                        anyObj[p[0]][p[1]][p[2]][p[3]][p[4]] = value;
-                        return true;
-                    }
-                }
-                else if (p.length === 6) {
-                    if (anyObj[p[0]][p[1]] &&
-                        typeof anyObj[p[0]][p[1]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]][p[3]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]][p[3]] === 'object' &&
-                        anyObj[p[0]][p[1]][p[2]][p[3]][p[4]] &&
-                        typeof anyObj[p[0]][p[1]][p[2]][p[3]][p[4]] === 'object') {
-                        anyObj[p[0]][p[1]][p[2]][p[3]][p[4]][p[5]] = value;
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    }
     /**
      * Renders a custom value.
      */
     renderCustomValue(obj, it, item) {
-        const text = ObjectBrowserClass.getCustomValue(obj, it);
+        const text = getCustomValue(obj, it);
         if (text !== null && text !== undefined) {
             if (it.edit && !this.props.notEditable && (!it.objTypes || it.objTypes.includes(obj.type))) {
                 return (React.createElement(Box, { component: "div", style: {
@@ -4568,7 +3352,7 @@ export class ObjectBrowserClass extends Component {
                 newValueTitle.push(`${this.texts.objectChangedBy} ${obj.user.replace(/^system\.user\./, '')}`);
             }
             if (obj.ts) {
-                newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig.common.dateFormat)}`);
+                newValueTitle.push(`${this.texts.objectChangedByUser} ${Utils.formatDate(new Date(obj.ts), this.props.dateFormat || this.systemConfig?.common.dateFormat || DEFAULT_DATE_FORMAT)}`);
             }
         }
         let readWriteAlias = false;
@@ -4634,24 +3418,30 @@ export class ObjectBrowserClass extends Component {
         if (id === '0_userdata') {
             checkColor = COLOR_NAME_USERDATA(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'alias') {
             checkColor = COLOR_NAME_ALIAS(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'javascript') {
             checkColor = COLOR_NAME_JAVASCRIPT(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'system') {
             checkColor = COLOR_NAME_SYSTEM(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'system.adapter') {
             checkColor = COLOR_NAME_SYSTEM_ADAPTER(this.props.themeType);
+            invertBackground = false;
         }
         else if (!checkColor || this.state.selected.includes(id)) {
             checkColor = 'inherit';
+            invertBackground = false;
         }
         const icons = [];
         if (common?.statusStates) {
@@ -4680,6 +3470,7 @@ export class ObjectBrowserClass extends Component {
             let colorSet = false;
             if (common.statusStates.errorId && this.states[ids.errorId] && this.states[ids.errorId].val) {
                 checkColor = this.props.themeType === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT;
+                invertBackground = false;
                 colorSet = true;
                 icons.push(React.createElement(IconError, { key: "error", 
                     // title={this.texts.deviceError}
@@ -4690,6 +3481,7 @@ export class ObjectBrowserClass extends Component {
                     if (this.states[ids.onlineId].val) {
                         checkColor =
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));
@@ -4699,6 +3491,7 @@ export class ObjectBrowserClass extends Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceDisconnected }));
@@ -4722,6 +3515,7 @@ export class ObjectBrowserClass extends Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceDisconnected }));
@@ -4729,6 +3523,7 @@ export class ObjectBrowserClass extends Component {
                     else {
                         checkColor =
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));
@@ -4760,11 +3555,11 @@ export class ObjectBrowserClass extends Component {
             }
         }
         const narrowStyleWithDetails = this.props.width === 'xs' && this.state.focused === id;
-        const colID = (React.createElement(Grid2, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
-            React.createElement(Grid2, { container: true, alignItems: "center" },
+        const colID = (React.createElement(Grid, { container: true, wrap: "nowrap", direction: "row", sx: styles.cellId, style: { width: this.columnsVisibility.id, paddingLeft } },
+            React.createElement(Grid, { container: true, sx: { alignItems: 'center' } },
                 checkbox,
                 iconFolder),
-            React.createElement(Grid2, { style: {
+            React.createElement(Grid, { style: {
                     ...styles.cellIdSpan,
                     ...(invertBackground ? this.styles.invertedBackground : undefined),
                     color: checkColor,
@@ -4775,7 +3570,7 @@ export class ObjectBrowserClass extends Component {
                 alias,
                 icons),
             React.createElement("div", { style: { ...styles.grow, ...(invertBackground ? this.styles.invertedBackgroundFlex : {}) } }),
-            React.createElement(Grid2, { container: true, alignItems: "center" }, iconItem),
+            React.createElement(Grid, { container: true, sx: { alignItems: 'center' } }, iconItem),
             this.props.width !== 'xs' ? (React.createElement("div", null,
                 React.createElement(IconCopy, { className: narrowStyleWithDetails ? '' : 'copyButton', style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) }))) : null));
         let colName = (narrowStyleWithDetails && name) || this.columnsVisibility.name ? (React.createElement(Box, { component: "div", sx: {
@@ -4929,7 +3724,9 @@ export class ObjectBrowserClass extends Component {
                                 ...styles.cellRole,
                                 width: this.props.width !== 'xs' ? this.columnsVisibility.timestamp : undefined,
                             } }, checkVisibleObjectType && this.states[id]?.ts
-                            ? Utils.formatDate(new Date(this.states[id].ts), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                            ? Utils.formatDate(new Date(this.states[id].ts), this.props.dateFormat ||
+                                this.systemConfig?.common.dateFormat ||
+                                DEFAULT_DATE_FORMAT)
                             : null)),
                         type: 'ts',
                     }
@@ -4941,7 +3738,9 @@ export class ObjectBrowserClass extends Component {
                                 ...styles.cellRole,
                                 width: this.props.width !== 'xs' ? this.columnsVisibility.lastChange : undefined,
                             } }, checkVisibleObjectType && this.states[id]?.lc
-                            ? Utils.formatDate(new Date(this.states[id].lc), this.props.dateFormat || this.systemConfig.common.dateFormat)
+                            ? Utils.formatDate(new Date(this.states[id].lc), this.props.dateFormat ||
+                                this.systemConfig?.common.dateFormat ||
+                                DEFAULT_DATE_FORMAT)
                             : null)),
                         type: 'lc',
                     }
@@ -5081,9 +3880,11 @@ export class ObjectBrowserClass extends Component {
                                 state: this.states[id],
                                 obj: this.objects[id],
                                 texts: this.texts,
-                                dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat,
+                                dateFormat: this.props.dateFormat ||
+                                    this.systemConfig?.common.dateFormat ||
+                                    DEFAULT_DATE_FORMAT,
                                 isFloatComma: this.props.isFloatComma === undefined
-                                    ? this.systemConfig.common.isFloatComma
+                                    ? (this.systemConfig?.common.isFloatComma ?? true)
                                     : this.props.isFloatComma,
                             });
                             this.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
@@ -5095,7 +3896,7 @@ export class ObjectBrowserClass extends Component {
             colValue = null;
             colButtons = null;
         }
-        const row = (React.createElement(Grid2, { container: true, direction: "row", wrap: "nowrap", sx: Utils.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, this.state.focused === id && this.props.multiSelect && styles.tableRowFocused, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
+        const row = (React.createElement(Grid, { container: true, direction: "row", wrap: "nowrap", sx: Utils.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, this.state.focused === id && this.props.multiSelect && styles.tableRowFocused, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
                 styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
@@ -5635,10 +4436,109 @@ export class ObjectBrowserClass extends Component {
         return (React.createElement(Snackbar, { open: !!this.state.toast, autoHideDuration: 3000, onClick: () => this.setState({ toast: '' }), onClose: () => this.setState({ toast: '' }), message: this.state.toast, action: React.createElement(IconButton, { size: "small", "aria-label": "close", color: "inherit", onClick: () => this.setState({ toast: '' }) },
                 React.createElement(IconClose, { fontSize: "small" })) }));
     }
+    // --- Routing (navigateTo / onNavigateTo) ---
+    // The browser never reads the URL itself; the parent drives it via `navigateTo` and is informed
+    // of user navigation via `onNavigateTo`. All URL parsing/writing lives in the parent component.
+    /** Derive the current navigation target from the dialog/selection state. */
+    getStateNav() {
+        if (this.state.editObjectDialog) {
+            return { mode: 'edit', id: this.state.editObjectDialog };
+        }
+        if (this.state.customDialog && this.state.customDialog.length === 1 && !this.state.customDialogAll) {
+            return { mode: 'settings', id: this.state.customDialog[0] };
+        }
+        if (this.state.viewFileDialog) {
+            return { mode: 'viewFile', id: this.state.viewFileDialog };
+        }
+        if (this.state.selected.length === 1 && this.state.selected[0]) {
+            return { mode: 'select', id: this.state.selected[0] };
+        }
+        return null;
+    }
+    static navEqual(a, b) {
+        if (!a || !b) {
+            return !a && !b;
+        }
+        return a.mode === b.mode && a.id === b.id;
+    }
+    /** Apply a navigation target coming from the parent (`navigateTo`): select + open the dialog. */
+    applyNavigateTo(nav) {
+        this.applyingNav = true;
+        const done = () => {
+            this.applyingNav = false;
+        };
+        if (!nav?.id) {
+            // No target: just close any open dialog (keep the current selection).
+            this.setState({ editObjectDialog: '', customDialog: null, viewFileDialog: '' }, done);
+            return;
+        }
+        const { id } = nav;
+        const open = () => {
+            if (nav.mode === 'edit') {
+                this.setState({ editObjectDialog: id, editObjectAlias: false, customDialog: null, viewFileDialog: '' }, done);
+            }
+            else if (nav.mode === 'settings') {
+                this.setState({ customDialog: [id], customDialogAll: false, editObjectDialog: '', viewFileDialog: '' }, done);
+            }
+            else if (nav.mode === 'viewFile') {
+                this.setState({ viewFileDialog: id, editObjectDialog: '', customDialog: null }, done);
+            }
+            else {
+                this.setState({ editObjectDialog: '', customDialog: null, viewFileDialog: '' }, done);
+            }
+        };
+        // Select the target (if needed), expand to it and scroll into view, then open the dialog.
+        if (this.state.selected.length === 1 && this.state.selected[0] === id) {
+            open();
+        }
+        else {
+            this.onSelect(id, false, () => this.expandAllSelected(() => {
+                this.scrollToItem(id);
+                open();
+            }));
+        }
+    }
+    /** Apply the initial `navigateTo` after the tree has loaded (called from componentDidMount). */
+    applyInitialNavigateTo() {
+        const nav = this.props.navigateTo ?? null;
+        if (nav?.id) {
+            this.lastNav = nav;
+            this.applyNavigateTo(nav);
+        }
+        else {
+            // Don't push the restored-from-localStorage selection into the URL on load.
+            this.lastNav = this.getStateNav();
+        }
+    }
+    /** Reconcile `navigateTo` (parent/URL) with the browser's selection/dialog state. */
+    reconcileNavigation(prevProps) {
+        if (this.props.navigateTo === undefined && !this.props.onNavigateTo) {
+            return; // routing not used by this consumer
+        }
+        if (this.applyingNav) {
+            return; // currently applying a target; ignore the intermediate state
+        }
+        const propNav = this.props.navigateTo ?? null;
+        const stateNav = this.getStateNav();
+        if (ObjectBrowserClass.navEqual(propNav, stateNav)) {
+            this.lastNav = stateNav;
+            return;
+        }
+        if (!ObjectBrowserClass.navEqual(propNav, prevProps.navigateTo ?? null)) {
+            // The parent (URL) drove a change → apply it to the browser.
+            this.lastNav = propNav;
+            this.applyNavigateTo(propNav);
+        }
+        else if (!ObjectBrowserClass.navEqual(stateNav, this.lastNav)) {
+            // The user changed selection/dialog → report it so the parent can update the URL.
+            this.lastNav = stateNav;
+            this.props.onNavigateTo?.(stateNav);
+        }
+    }
     /**
      * Called when component is updated.
      */
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         if (this.tableRef.current) {
             const scrollBarWidth = this.tableRef.current.offsetWidth - this.tableRef.current.clientWidth;
             if (this.state.scrollBarWidth !== scrollBarWidth) {
@@ -5648,6 +4548,7 @@ export class ObjectBrowserClass extends Component {
                 this.scrollToItem(this.selectFirst);
             }
         }
+        this.reconcileNavigation(prevProps);
     }
     scrollToItem(id) {
         this.selectFirst = '';
@@ -5659,10 +4560,10 @@ export class ObjectBrowserClass extends Component {
         });
     }
     renderCustomDialog() {
-        if (this.state.customDialog && this.props.objectCustomDialog) {
+        if (this.state.customDialog && this.props.objectCustomDialog && this.systemConfig) {
             const ObjectCustomDialog = this.props.objectCustomDialog;
             return (React.createElement(ObjectCustomDialog, { reportChangedIds: (changedIds) => (this.changedIds = [...changedIds]), objectIDs: this.state.customDialog, allVisibleObjects: !!this.state.customDialogAll, expertMode: this.state.filter.expertMode, isFloatComma: this.props.isFloatComma === undefined
-                    ? this.systemConfig.common.isFloatComma
+                    ? (this.systemConfig?.common.isFloatComma ?? true)
                     : 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: () => {
                     this.pauseSubscribe(false);
                     this.setState({ customDialog: null });
@@ -5690,9 +4591,14 @@ export class ObjectBrowserClass extends Component {
         if (!this.state.editObjectDialog || !this.props.objectBrowserEditObject) {
             return null;
         }
+        // Guard against opening the editor for a node without a real object (e.g. a virtual folder
+        // that only exists because child states share an ID prefix). Its constructor reads obj._id.
+        if (!this.objects[this.state.editObjectDialog]) {
+            return null;
+        }
         const ObjectBrowserEditObject = this.props.objectBrowserEditObject;
-        return (React.createElement(ObjectBrowserEditObject, { key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined
-                ? this.systemConfig.common.isFloatComma
+        return (React.createElement(ObjectBrowserEditObject, { key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig?.common.dateFormat || DEFAULT_DATE_FORMAT, isFloatComma: this.props.isFloatComma === undefined
+                ? (this.systemConfig?.common.isFloatComma ?? true)
                 : 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)))
@@ -5782,8 +4688,8 @@ export class ObjectBrowserClass extends Component {
                 const acl = obj.acl ? (obj.type === 'state' ? obj.acl.state : obj.acl.object) : 0;
                 const aclSystemConfig = obj.acl &&
                     (obj.type === 'state'
-                        ? this.systemConfig.common.defaultNewAcl.state
-                        : this.systemConfig.common.defaultNewAcl.object);
+                        ? this.systemConfig?.common.defaultNewAcl.state
+                        : this.systemConfig?.common.defaultNewAcl.object);
                 showACL = Number.isNaN(Number(acl)) ? Number(aclSystemConfig).toString(16) : Number(acl).toString(16);
             }
         }
@@ -5814,7 +4720,7 @@ export class ObjectBrowserClass extends Component {
                 key: '0',
                 visibility: !!(this.props.objectBrowserEditObject &&
                     obj &&
-                    (this.state.filter.expertMode || ObjectBrowserClass.isNonExpertId(id))),
+                    (this.state.filter.expertMode || isNonExpertId(id))),
                 icon: (React.createElement(IconEdit, { fontSize: "small", style: this.styles.contextMenuEdit })),
                 label: this.texts.editObject,
                 onClick: () => this.setState({ editObjectDialog: item.data.id, showContextMenu: null, editObjectAlias: false }),
@@ -5825,7 +4731,7 @@ export class ObjectBrowserClass extends Component {
                     !this.props.notEditable &&
                     obj &&
                     obj.type === 'state' &&
-                    // @ts-expect-error deprecated from js-controller 6
+                    // deprecated from js-controller 6
                     obj.common?.type !== 'file' &&
                     (this.state.filter.expertMode || obj.common.write !== false)),
                 icon: (React.createElement(IconValueEdit, { fontSize: "small", style: this.styles.contextMenuEditValue })),
@@ -5843,7 +4749,7 @@ export class ObjectBrowserClass extends Component {
             VIEW: {
                 visibility: !!this.props.objectBrowserViewFile &&
                     obj?.type === 'state' &&
-                    // @ts-expect-error deprecated from js-controller 6
+                    // deprecated from js-controller 6
                     obj.common?.type === 'file',
                 icon: (React.createElement(FindInPage, { fontSize: "small", style: this.styles.contextMenuView })),
                 label: this.props.t('ra_View file'),
@@ -5855,7 +4761,7 @@ export class ObjectBrowserClass extends Component {
                     this.info.hasSomeCustoms &&
                     obj &&
                     obj.type === 'state' &&
-                    // @ts-expect-error deprecated from js-controller 6
+                    // deprecated from js-controller 6
                     obj.common?.type !== 'file'),
                 icon: (React.createElement(IconConfig, { fontSize: "small", style: item.data.hasCustoms
                         ? this.styles.cellButtonsButtonWithCustoms
@@ -5931,7 +4837,7 @@ export class ObjectBrowserClass extends Component {
                     this.props.objectBrowserAliasEditor &&
                     this.props.objectBrowserEditObject &&
                     obj?.type === 'state' &&
-                    // @ts-expect-error deprecated from js-controller 6
+                    // deprecated from js-controller 6
                     obj.common?.type !== 'file'),
                 icon: (React.createElement(IconLink, { style: obj?.common?.alias
                         ? this.styles.cellButtonsButtonWithCustoms
@@ -6117,8 +5023,8 @@ export class ObjectBrowserClass extends Component {
             : typeof this.edit.val;
         const role = this.objects[this.edit.id].common.role;
         const ObjectBrowserValue = this.props.objectBrowserValue;
-        return (React.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, theme: this.props.theme, expertMode: !!this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined
-                ? this.systemConfig.common.isFloatComma
+        return (React.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, theme: this.props.theme, expertMode: !!this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat || this.systemConfig?.common.dateFormat || DEFAULT_DATE_FORMAT, isFloatComma: this.props.isFloatComma === undefined
+                ? (this.systemConfig?.common.isFloatComma ?? true)
                 : this.props.isFloatComma, onClose: (res) => {
                 this.setState({ updateOpened: false });
                 if (res) {
@@ -6126,6 +5032,25 @@ export class ObjectBrowserClass extends Component {
                 }
             }, width: this.props.width }));
     }
+    doFilter(doNotStore) {
+        if (!this.objects || !this.root) {
+            return;
+        }
+        if (!doNotStore) {
+            this.localStorage.setItem(`${this.props.dialogName || 'App'}.objectFilter`, JSON.stringify(this.state.filter));
+        }
+        const counter = { count: 0 };
+        applyFilter(this.root, this.state.filter, this.props.lang, this.objects, undefined, counter, this.props.customFilter, this.props.types);
+        if (counter.count < 500 && !this.state.expandAllVisible) {
+            setTimeout(() => this.setState({ expandAllVisible: true }));
+        }
+        else if (counter.count >= 500 && this.state.expandAllVisible) {
+            setTimeout(() => this.setState({ expandAllVisible: false }));
+        }
+        else {
+            this.forceUpdate();
+        }
+    }
     /**
      * The rendering method of this component.
      */
@@ -6159,23 +5084,14 @@ export class ObjectBrowserClass extends Component {
             };
             this.styleTheme = this.props.themeType;
         }
-        // apply filter if changed
-        const jsonFilter = JSON.stringify(this.state.filter);
-        if (this.lastAppliedFilter !== jsonFilter && this.objects && this.root) {
-            const counter = { count: 0 };
-            applyFilter(this.root, this.state.filter, this.props.lang, this.objects, undefined, counter, this.props.customFilter, this.props.types);
-            if (counter.count < 500 && !this.state.expandAllVisible) {
-                setTimeout(() => this.setState({ expandAllVisible: true }));
-            }
-            else if (counter.count >= 500 && this.state.expandAllVisible) {
-                setTimeout(() => this.setState({ expandAllVisible: false }));
-            }
-            this.lastAppliedFilter = jsonFilter;
-        }
         this.unsubscribeTimer = setTimeout(() => {
             this.unsubscribeTimer = null;
             this.checkUnsubscribes();
         }, 200);
+        if (this.expertMode !== !!this.state.filter.expertMode) {
+            this.expertMode = !!this.state.filter.expertMode;
+            this.doFilter(true);
+        }
         if (!this.state.loaded) {
             return React.createElement(CircularProgress, { key: `${this.props.dialogName}_c` });
         }
@@ -6234,6 +5150,7 @@ export class ObjectBrowserClass extends Component {
             this.renderErrorDialog(),
             this.renderExportDialog(),
             this.renderRenameDialog(),
+            this.renderInputJsonDialog(),
             this.state.modalNewObj && this.props.modalNewObject && this.props.modalNewObject(this),
             this.state.modalEditOfAccess &&
                 this.state.modalEditOfAccessObjData &&