@iobroker/adapter-react-v5 7.2.3 → 7.2.4

package/Components/FileBrowser.d.ts

@@ -4,7 +4,7 @@
  * MIT License
  *
  */
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import type { Connection } from '@iobroker/socket-client';
 import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';
 export interface MetaACL extends ioBroker.ObjectACL {
@@ -69,7 +69,7 @@ export interface FileBrowserProps {
     /** Padding in pixels for folder levels */
     levelPadding?: number;
     restrictToFolder?: string;
-    modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
+    modalEditOfAccessControl?: (obj: FileBrowserClass) => JSX.Element | null;
     allowNonRestricted?: boolean;
     showTypeSelector?: boolean;
 }
@@ -145,38 +145,38 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     readDirSerial(adapter: string, relPath: string): Promise<ioBroker.ReadDirResult[]>;
     processBrowseList(level?: number): void;
     browseFolder(folderId: string, _newFolders?: Folders | null, _checkEmpty?: boolean, force?: boolean): Promise<Folders>;
-    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>): void;
+    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent): void;
     onFileChange: (id: string, fileName: string, size: number | null) => void;
     changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void;
     select(id: string, e?: React.MouseEvent<HTMLDivElement> | null, cb?: () => void): void;
     getText(text?: ioBroker.StringOrTranslated | null): string | undefined;
-    renderFolder(item: FolderOrFileItem, expanded?: boolean): React.JSX.Element | null;
-    renderBackFolder(): React.JSX.Element;
-    formatSize(size: number | null | undefined): React.JSX.Element;
-    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined): React.JSX.Element;
-    getFileIcon(ext: string | null): React.JSX.Element;
+    renderFolder(item: FolderOrFileItem, expanded?: boolean): JSX.Element | null;
+    renderBackFolder(): JSX.Element;
+    formatSize(size: number | null | undefined): JSX.Element;
+    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined): JSX.Element;
+    getFileIcon(ext: string | null): JSX.Element;
     static getEditFile(ext: string | null): boolean;
     setStateBackgroundImage: () => void;
     getStyleBackgroundImage: () => React.CSSProperties | null;
-    renderFile(item: FolderOrFileItem): React.JSX.Element;
-    renderItems(folderId: string): React.JSX.Element | (React.JSX.Element | null)[];
-    renderToolbar(): React.JSX.Element;
+    renderFile(item: FolderOrFileItem): JSX.Element;
+    renderItems(folderId: string): JSX.Element | (JSX.Element | null)[];
+    renderToolbar(): JSX.Element;
     findItem(id: string, folders?: Folders | null): null | FolderOrFileItem;
-    renderInputDialog(): React.JSX.Element | null;
+    renderInputDialog(): JSX.Element | null;
     componentDidUpdate(): void;
     findFirstFolder(id: string): string | null;
     uploadFile(fileName: string, data: string): Promise<void>;
-    renderUpload(): React.JSX.Element[] | null;
+    renderUpload(): JSX.Element[] | null;
     deleteRecursive(id: string): Promise<void>;
     deleteItem(deleteItem: string): void;
-    renderDeleteDialog(): React.JSX.Element | null;
-    renderViewDialog(): React.JSX.Element | null;
-    renderError(): React.JSX.Element | null;
+    renderDeleteDialog(): JSX.Element | null;
+    renderViewDialog(): JSX.Element | null;
+    renderError(): JSX.Element | null;
     updateItemsAcl(info: FolderOrFileItem[]): void;
     changeToPath(): void;
-    renderBreadcrumb(): React.JSX.Element;
-    renderPath(): React.JSX.Element;
-    render(): React.JSX.Element;
+    renderBreadcrumb(): JSX.Element;
+    renderPath(): JSX.Element;
+    render(): JSX.Element;
 }
-declare const _default: (props: Record<string, any>) => React.JSX.Element;
+declare const _default: (props: Record<string, any>) => JSX.Element;
 export default _default;

package/Components/FileBrowser.js

@@ -63,9 +63,6 @@ const FILE_TYPE_ICONS = {
     video: icons_material_1.Videocam,
 };
 const styles = {
-    dialog: (theme) => ({
-        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
-    }),
     root: {
         width: '100%',
         overflow: 'hidden',
@@ -107,7 +104,8 @@ const styles = {
         textAlign: 'center',
         opacity: 0.1,
         transition: 'opacity 1s',
-        margin: 4,
+        margin: '4px',
+        borderRadius: '4px',
         '&:hover': {
             background: theme.palette.secondary.light,
             color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
@@ -228,8 +226,8 @@ const styles = {
         opacity: 0.4,
     },
     itemFolderIconTable: (theme) => ({
-        marginTop: 1,
-        marginLeft: 8,
+        marginTop: '1px',
+        marginLeft: '8px',
         display: 'inline-block',
         width: 30,
         height: 30,
@@ -362,6 +360,9 @@ const styles = {
             background: theme.palette.primary.main,
         },
     }),
+    pathDivBreadcrumbSelected: {
+    // todo: add style
+    },
     backgroundImageLight: {
         background: 'white',
     },
@@ -838,7 +839,19 @@ class FileBrowserClass extends react_1.Component {
         const adapter = parts.shift();
         const relPath = parts.join('/');
         // make all requests here serial
-        const files = await this.readDirSerial(adapter || '', relPath);
+        let files;
+        try {
+            files = await this.readDirSerial(adapter || '', relPath);
+        }
+        catch (error) {
+            // work around: 0_userdata.0 is a special folder, that should exist event when other folders and itself do not exit, as the browser shows it anyway.
+            if (error === 'Not exists' && adapter === '0_userdata.0') {
+                files = [];
+            }
+            else {
+                throw error;
+            }
+        }
         try {
             const _folders = [];
             files.forEach(file => {
@@ -922,9 +935,7 @@ class FileBrowserClass extends react_1.Component {
         }
     }
     changeFolder(e, folder) {
-        if (e) {
-            e.stopPropagation();
-        }
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
         this.lastSelect = Date.now();
         let _folder = folder || getParentDir(this.state.currentDir);
         if (_folder === '/') {
@@ -932,8 +943,10 @@ class FileBrowserClass extends react_1.Component {
         }
         this.localStorage.setItem('files.currentDir', _folder);
         if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
-            return this.setState({ selected: _folder });
+            this.setState({ selected: _folder });
+            return;
         }
+        // If desired folder is not yet loaded
         if (_folder && !this.state.folders[_folder]) {
             this.browseFolder(_folder)
                 .then(folders => this.setState({
@@ -946,7 +959,7 @@ class FileBrowserClass extends react_1.Component {
                 .catch(_e => console.error(`Cannot read folder: ${_e.message}`));
             return;
         }
-        return this.setState({
+        this.setState({
             currentDir: _folder,
             selected: _folder,
             path: _folder,
@@ -997,10 +1010,9 @@ class FileBrowserClass extends react_1.Component {
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
+        const iconStyle = Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder);
         return (react_1.default.createElement(material_1.Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
-            react_1.default.createElement(IconEl, { style: Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`], isSpecialData && styles.specialFolder), onClick: this.state.viewType === TABLE
-                    ? (e) => this.toggleFolder(item, e)
-                    : undefined }),
+            react_1.default.createElement(IconEl, { style: iconStyle, onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
             react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
             react_1.default.createElement(material_1.Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
                 ? this.state.folders[item.id].length
@@ -1024,7 +1036,7 @@ class FileBrowserClass extends react_1.Component {
     }
     renderBackFolder() {
         return (react_1.default.createElement(material_1.Box, { component: "div", key: this.state.currentDir, id: this.state.currentDir, onClick: e => this.changeFolder(e), title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)), className: "browserItem", sx: Utils_1.default.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`]) },
-            react_1.default.createElement(IconClosed_1.default, { style: styles[`itemFolderIcon${this.state.viewType}`] }),
+            react_1.default.createElement(IconClosed_1.default, { style: Utils_1.default.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`]) }),
             react_1.default.createElement(icons_material_1.ArrowBack, { sx: styles.itemFolderIconBack }),
             react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, "..")));
     }

package/Components/FileViewer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type JSX } from 'react';
 export declare const EXTENSIONS: {
     images: string[];
     code: string[];
@@ -6,5 +6,5 @@ export declare const EXTENSIONS: {
     audio: string[];
     video: string[];
 };
-declare const _default: (props: Record<string, any>) => React.JSX.Element;
+declare const _default: (props: Record<string, any>) => JSX.Element;
 export default _default;

package/Components/ObjectBrowser.d.ts

@@ -571,6 +571,9 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     navigateKeyPress(event: React.KeyboardEvent): void;
     /**
      * Find the id from the root
+     *
+     * @param root The current root
+     * @param id The object id to find
      */
     private static getItemFromRoot;
     resizerReset: () => void;

package/Components/ObjectBrowser.js

@@ -871,10 +871,13 @@ function binarySearch(list, find, _start, _end) {
     return false;
 }
 function getName(name, lang) {
-    if (name && typeof name === 'object') {
+    if (typeof name === 'object') {
+        if (!name) {
+            return '';
+        }
         return (name[lang] || name.en || '').toString();
     }
-    return (name || '').toString();
+    return name ? name.toString() : '';
 }
 function getSelectIdIconFromObjects(objects, id, lang, imagePrefix) {
     // `admin` has prefix '.' and `web` has '../..'
@@ -3021,13 +3024,17 @@ class ObjectBrowserClass extends react_1.Component {
     }
     parseObjectForAdmins(columnsForAdmin, obj) {
         if (obj.common && obj.common.adminColumns && obj.common.name) {
-            let columns = obj.common.adminColumns;
+            const columns = obj.common.adminColumns;
+            let aColumns;
             if (columns && typeof columns !== 'object') {
-                columns = [columns];
+                aColumns = [columns];
+            }
+            else if (columns) {
+                aColumns = columns;
             }
             let cColumns;
             if (columns) {
-                cColumns = columns
+                cColumns = aColumns
                     .map((_item) => {
                     if (typeof _item !== 'object') {
                         return { path: _item, name: _item.split('.').pop() };
@@ -3063,7 +3070,7 @@ class ObjectBrowserClass extends react_1.Component {
                         objTypes: item.objTypes,
                     };
                 })
-                    .filter(item => item);
+                    .filter((item) => item);
             }
             else {
                 cColumns = null;
@@ -5282,21 +5289,29 @@ class ObjectBrowserClass extends react_1.Component {
     }
     /**
      * Find the id from the root
+     *
+     * @param root The current root
+     * @param id The object id to find
      */
-    static getItemFromRoot(
-    /** The current root */
-    root, 
-    /** the object id to find */
-    id) {
-        var _b;
+    static getItemFromRoot(root, id) {
         const idArr = id.split('.');
         let currId = '';
         let _root = root;
-        for (const idEntry of idArr) {
+        for (let i = 0; i < idArr.length; i++) {
+            const idEntry = idArr[i];
             currId = currId ? `${currId}.${idEntry}` : idEntry;
-            _root = (_b = _root.children) === null || _b === void 0 ? void 0 : _b.find(item => item.data.id === currId);
-            if (!_root) {
-                break;
+            let found = false;
+            if (_root.children) {
+                for (let j = 0; j < _root.children.length; j++) {
+                    if (_root.children[j].data.id === currId) {
+                        _root = _root.children[j];
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                return null;
             }
         }
         return _root || null;
@@ -5662,7 +5677,6 @@ class ObjectBrowserClass extends react_1.Component {
                 visibility: !!(!this.props.notEditable &&
                     this.props.objectBrowserAliasEditor &&
                     this.props.objectBrowserEditObject &&
-                    this.state.filter.expertMode &&
                     (obj === null || obj === void 0 ? void 0 : obj.type) === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     ((_e = obj.common) === null || _e === void 0 ? void 0 : _e.type) !== 'file'),
@@ -5765,7 +5779,7 @@ class ObjectBrowserClass extends react_1.Component {
                         react_1.default.createElement(material_1.ListItemText, null,
                             ITEMS[key].label,
                             "..."),
-                        react_1.default.createElement(material_1.ListItemSecondaryAction, null,
+                        react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.contextMenuKeys), { opacity: 1 }) },
                             react_1.default.createElement(icons_material_1.ArrowRight, null))));
                     if (((_b = this.state.showContextMenu) === null || _b === void 0 ? void 0 : _b.subItem) === key) {
                         items.push(react_1.default.createElement(material_1.Menu, { key: "subContextMenu", open: !0, anchorEl: this.state.showContextMenu.subAnchor, onClose: () => {

package/Components/Schedule.d.ts

@@ -47,7 +47,7 @@ declare class Schedule extends Component<ScheduleProps, ScheduleState> {
     getTimeExactElements(): JSX.Element;
     static getDivider(): JSX.Element;
     getPeriodModes(): JSX.Element[];
-    getPeriodSettingsMinutes(): JSX.Element;
+    getPeriodSettingsMinutes(fromTo: boolean): JSX.Element;
     getPeriodSettingsWeekdays(): JSX.Element[];
     getPeriodSettingsDaily(): JSX.Element[] | null;
     getPeriodSettingsWeekly(): JSX.Element[] | null;

package/Components/Schedule.js

@@ -526,7 +526,7 @@ class Schedule extends react_1.Component {
                     desc.push(i18n_1.default.t('sch_desc_everyMinute'));
                 }
                 else {
-                    // every N minutes
+                    // every N minute
                     desc.push(i18n_1.default.t('sch_desc_everyNMinutes', schedule.time.interval.toString()));
                 }
             }
@@ -535,7 +535,7 @@ class Schedule extends react_1.Component {
                 desc.push(i18n_1.default.t('sch_desc_everyHour'));
             }
             else {
-                // every N minutes
+                // every N minute
                 desc.push(i18n_1.default.t('sch_desc_everyNHours', schedule.time.interval.toString()));
             }
             const start = ASTRO.indexOf(schedule.time.start) !== -1
@@ -648,7 +648,7 @@ class Schedule extends react_1.Component {
                                     _schedule.time.end = 'sunrise';
                                     this.onChange(_schedule);
                                 } }), label: i18n_1.default.t('sch_astroNight') })))),
-                !schedule.time.exactTime && this.getPeriodSettingsMinutes())));
+                !schedule.time.exactTime && this.getPeriodSettingsMinutes(fromTo))));
     }
     getTimeExactElements() {
         const isAstro = ASTRO.includes(this.state.schedule.time.start);
@@ -868,9 +868,9 @@ class Schedule extends react_1.Component {
                             MONTHS.map((month, i) => (react_1.default.createElement(material_1.MenuItem, { key: month, value: i + 1 }, i18n_1.default.t(month))))))))),
         ];
     }
-    getPeriodSettingsMinutes() {
-        return (react_1.default.createElement("div", { style: { display: 'inline-block' } },
-            react_1.default.createElement("label", null, i18n_1.default.t('sch_every')),
+    getPeriodSettingsMinutes(fromTo) {
+        return (react_1.default.createElement("div", { style: { display: 'inline-block', marginTop: fromTo ? 15 : 'inherit' } },
+            react_1.default.createElement("label", { style: { marginLeft: 4, marginRight: 4 } }, i18n_1.default.t('sch_every')),
             react_1.default.createElement(material_1.Input, { value: this.state.schedule.time.interval, style: Object.assign(Object.assign({}, styles.inputEvery), { verticalAlign: 'bottom' }), type: "number", inputProps: { min: 1 }, onChange: e => {
                     const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                     _schedule.time.interval = parseInt(e.target.value, 10);

package/Components/SimpleCron/index.js

@@ -681,7 +681,9 @@ class SimpleCron extends react_1.default.Component {
         return (react_1.default.createElement("div", { style: styles.mainDiv },
             react_1.default.createElement("div", { style: { paddingLeft: 8, width: 'calc(100% - 8px)' } },
                 react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: '100%' }, value: this.state.cron, disabled: true, error: this.state.cron.includes('_') })),
-            react_1.default.createElement("div", { style: { paddingLeft: 8, width: 'calc(100% - 8px)', height: 60 } }, this.state.cron.includes('_') ? i18n_1.default.t('sc_invalid_cron') : (0, cronText_1.default)(this.state.cron, this.props.language || 'en')),
+            react_1.default.createElement("div", { style: { paddingLeft: 8, width: 'calc(100% - 8px)', height: 60 } }, this.state.cron.includes('_')
+                ? i18n_1.default.t('sc_invalid_cron')
+                : (0, cronText_1.default)(this.state.cron, this.props.language || 'en')),
             react_1.default.createElement("div", null,
                 react_1.default.createElement(material_1.FormControl, { variant: "standard", style: Object.assign(Object.assign({}, styles.formControl), { marginLeft: 8, marginTop: 8 }) },
                     react_1.default.createElement(material_1.InputLabel, null, i18n_1.default.t('ra_Repeat')),

package/README.md

@@ -13,7 +13,7 @@ If you want to create the configuration page with ReactJS:
     - Change `name` from `src` to `ADAPTERNAME-admin` (Of course replace `ADAPTERNAME` with yours)
     - Add to devDependencies:
         ```
-        "@iobroker/adapter-react-v5": "^7.2.3",
+        "@iobroker/adapter-react-v5": "^7.2.4",
         ```
         Versions can be higher.
         So your `src/package.json` should look like:
@@ -24,7 +24,7 @@ If you want to create the configuration page with ReactJS:
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@iobroker/adapter-react-v5": "^7.2.3",
+        "@iobroker/adapter-react-v5": "^7.2.4",
         "@iobroker/build-tools": "^1.0.0",
         "@iobroker/eslint-config": "^0.1.2",
         "@mui/material": "^6.0.2",
@@ -697,12 +697,12 @@ You can find the migration instructions:
 -->
 
 ## Changelog
-### 7.2.3 (2024-10-05)
+### 7.2.4 (2024-10-07)
 
--   (@GermanBluefox) Corrected error in the simple CRON dialog
+-   (@GermanBluefox) Corrected file browser
+-   (@GermanBluefox) Changed Open/Close Folder icons
 
 ### 7.2.2 (2024-10-04)
-
 -   (@GermanBluefox) Small layout change for Icon Picker
 
 ### 7.2.1 (2024-09-30)

package/i18n/de.json

@@ -115,8 +115,8 @@
   "sc_to": "Bis",
   "sc_wizard": "Wizard",
   "sch_all": "alle",
-  "sch_astroDay": "Astronomisch Tag",
-  "sch_astroNight": "Astronomisch Nacht",
+  "sch_astroDay": "Astronomischer Tag",
+  "sch_astroNight": "Astronomische Nacht",
   "sch_astro_dawn": "Morgendämmerung",
   "sch_astro_dusk": "Abenddämmerung",
   "sch_astro_goldenHour": "Goldene Stunde",
@@ -446,4 +446,4 @@
   "ra_Friday": "Freitag",
   "ra_Saturday": "Samstag",
   "sc_invalid_cron": "Ungültiger CRON"
-}
+}

package/icons/IconClosed.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
 const IconClosed = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", onClick: e => props.onClick && props.onClick(e), viewBox: "0 0 650 512", width: props.width || (props.fontSize === 'small' ? 16 : 20), height: props.height || props.width || (props.fontSize === 'small' ? 16 : 20), className: props.className, style: props.style },
-    react_1.default.createElement("path", { fill: "currentColor", d: "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" })));
+    react_1.default.createElement("path", { fill: "currentColor", d: "m524,128l-192,0l-64,-64l-160,0c-26.51,0 -48,21.49 -48,48l0,288c0,26.51 21.49,48 48,48l416,0c26.51,0 48,-21.49 48,-48l0,-224c0,-26.51 -21.49,-48 -48,-48z" })));
 exports.default = IconClosed;

package/icons/IconOpen.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // Icon copied from https://github.com/FortAwesome/Font-Awesome/blob/0d1f27efb836eb2ab994ba37221849ed64a73e5c/svgs/regular/
 const IconOpen = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", onClick: e => props.onClick && props.onClick(e), viewBox: "0 0 650 512", width: props.width || (props.fontSize === 'small' ? 16 : 20), height: props.height || props.width || (props.fontSize === 'small' ? 16 : 20), className: props.className, style: props.style },
-    react_1.default.createElement("path", { fill: "currentColor", d: "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" })));
+    react_1.default.createElement("path", { fill: "currentColor", d: "m631.75617,292.093l-72.424,124.155a63.997,63.997 0 0 1 -55.281,31.752l-399.964,0c-18.523,0 -30.064,-20.093 -20.731,-36.093l72.424,-124.155a64,64 0 0 1 55.282,-31.752l399.964,0c18.523,0 30.064,20.093 20.73,36.093zm-420.694,-68.093l328,0l0,-48c0,-26.51 -21.49,-48 -48,-48l-160,0l-64,-64l-160,0c-26.51,0 -48,21.49 -48,48l0,278.046l69.077,-118.418c17.137,-29.378 48.912,-47.628 82.923,-47.628z" })));
 exports.default = IconOpen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "7.2.3",
+  "version": "7.2.4",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -27,21 +27,22 @@
   "homepage": "https://github.com/ioBroker/adapter-react-v5#readme",
   "devDependencies": {},
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@iobroker/socket-client": "^3.1.0",
+    "@iobroker/socket-client": "^3.1.1",
     "@iobroker/types": "^6.0.11",
     "@iobroker/js-controller-common": "^6.0.11",
     "@iobroker/js-controller-common-db": "^6.0.11",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
-    "@mui/x-date-pickers": "^7.18.0",
-    "@sentry/browser": "^8.32.0",
+    "@mui/icons-material": "^6.1.2",
+    "@mui/material": "^6.1.2",
+    "@mui/x-date-pickers": "^7.19.0",
+    "@sentry/browser": "^8.33.1",
     "cronstrue": "^2.50.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^14.2.9",
     "react-icons": "^5.3.0",
     "react-inlinesvg": "^4.1.3"
   }

package/src/Components/FileBrowser.tsx

@@ -4,7 +4,7 @@
  * MIT License
  *
  */
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 import Dropzone from 'react-dropzone';
 
 import {
@@ -102,9 +102,6 @@ const FILE_TYPE_ICONS: Record<string, React.FC<{ fontSize?: 'small' }>> = {
 };
 
 const styles: Record<string, any> = {
-    dialog: (theme: IobTheme) => ({
-        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
-    }),
     root: {
         width: '100%',
         overflow: 'hidden',
@@ -147,7 +144,8 @@ const styles: Record<string, any> = {
         textAlign: 'center',
         opacity: 0.1,
         transition: 'opacity 1s',
-        margin: 4,
+        margin: '4px',
+        borderRadius: '4px',
         '&:hover': {
             background: theme.palette.secondary.light,
             color: Utils.invertColor(theme.palette.secondary.main, true),
@@ -270,8 +268,8 @@ const styles: Record<string, any> = {
         opacity: 0.4,
     },
     itemFolderIconTable: (theme: IobTheme) => ({
-        marginTop: 1,
-        marginLeft: 8,
+        marginTop: '1px',
+        marginLeft: '8px',
         display: 'inline-block',
         width: 30,
         height: 30,
@@ -406,6 +404,9 @@ const styles: Record<string, any> = {
             background: theme.palette.primary.main,
         },
     }),
+    pathDivBreadcrumbSelected: {
+        // todo: add style
+    },
     backgroundImageLight: {
         background: 'white',
     },
@@ -500,7 +501,7 @@ export interface FileBrowserProps {
 
     restrictToFolder?: string;
 
-    modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
+    modalEditOfAccessControl?: (obj: FileBrowserClass) => JSX.Element | null;
 
     allowNonRestricted?: boolean;
 
@@ -1026,7 +1027,17 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         const relPath = parts.join('/');
 
         // make all requests here serial
-        const files = await this.readDirSerial(adapter || '', relPath);
+        let files: ioBroker.ReadDirResult[];
+        try {
+            files = await this.readDirSerial(adapter || '', relPath);
+        } catch (error: unknown) {
+            // work around: 0_userdata.0 is a special folder, that should exist event when other folders and itself do not exit, as the browser shows it anyway.
+            if (error === 'Not exists' && adapter === '0_userdata.0') {
+                files = [];
+            } else {
+                throw error;
+            }
+        }
         try {
             const _folders: FolderOrFileItem[] = [];
 
@@ -1090,7 +1101,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return newFoldersNotNull;
     }
 
-    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>): void {
+    toggleFolder(item: FolderOrFileItem, e: React.MouseEvent): void {
         e?.stopPropagation();
         const expanded = [...this.state.expanded];
         const pos = expanded.indexOf(item.id);
@@ -1142,9 +1153,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
     };
 
     changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void {
-        if (e) {
-            e.stopPropagation();
-        }
+        e?.stopPropagation();
 
         this.lastSelect = Date.now();
 
@@ -1157,9 +1166,11 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         this.localStorage.setItem('files.currentDir', _folder);
 
         if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
-            return this.setState({ selected: _folder });
+            this.setState({ selected: _folder });
+            return;
         }
 
+        // If desired folder is not yet loaded
         if (_folder && !this.state.folders[_folder]) {
             this.browseFolder(_folder)
                 .then(folders =>
@@ -1178,7 +1189,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
             return;
         }
 
-        return this.setState(
+        this.setState(
             {
                 currentDir: _folder,
                 selected: _folder,
@@ -1226,7 +1237,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return undefined;
     }
 
-    renderFolder(item: FolderOrFileItem, expanded?: boolean): React.JSX.Element | null {
+    renderFolder(item: FolderOrFileItem, expanded?: boolean): JSX.Element | null {
         if (
             this.state.viewType === TABLE &&
             this.state.filterEmpty &&
@@ -1241,6 +1252,11 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
 
+        const iconStyle = Utils.getStyle(
+            this.props.theme,
+            styles[`itemFolderIcon${this.state.viewType}`],
+            isSpecialData && styles.specialFolder,
+        );
         return (
             <Box
                 component="div"
@@ -1260,15 +1276,9 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 )}
             >
                 <IconEl
-                    style={Utils.getStyle(
-                        this.props.theme,
-                        styles[`itemFolderIcon${this.state.viewType}`],
-                        isSpecialData && styles.specialFolder,
-                    )}
+                    style={iconStyle}
                     onClick={
-                        this.state.viewType === TABLE
-                            ? (e: React.MouseEvent<Element>) => this.toggleFolder(item, e)
-                            : undefined
+                        this.state.viewType === TABLE ? (e: React.MouseEvent) => this.toggleFolder(item, e) : undefined
                     }
                 />
 
@@ -1340,7 +1350,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    renderBackFolder(): React.JSX.Element {
+    renderBackFolder(): JSX.Element {
         return (
             <Box
                 component="div"
@@ -1355,7 +1365,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                     styles[`itemFolder${this.state.viewType}`],
                 )}
             >
-                <IconClosed style={styles[`itemFolderIcon${this.state.viewType}`]} />
+                <IconClosed style={Utils.getStyle(this.props.theme, styles[`itemFolderIcon${this.state.viewType}`])} />
                 <IconBack sx={styles.itemFolderIconBack} />
 
                 <Box
@@ -1372,7 +1382,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    formatSize(size: number | null | undefined): React.JSX.Element {
+    formatSize(size: number | null | undefined): JSX.Element {
         return (
             <div style={styles[`itemSize${this.state.viewType}`]}>
                 {size || size === 0 ? Utils.formatBytes(size) : ''}
@@ -1380,7 +1390,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined): React.JSX.Element {
+    formatAcl(acl: ioBroker.EvaluatedFileACL | MetaACL | undefined): JSX.Element {
         const access: number = acl ? (acl as ioBroker.EvaluatedFileACL).permissions || (acl as MetaACL).file : 0;
         let accessStr: string;
         if (access) {
@@ -1406,7 +1416,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    getFileIcon(ext: string | null): React.JSX.Element {
+    getFileIcon(ext: string | null): JSX.Element {
         switch (ext) {
             case 'json':
             case 'json5':
@@ -1483,7 +1493,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     };
 
-    renderFile(item: FolderOrFileItem): React.JSX.Element {
+    renderFile(item: FolderOrFileItem): JSX.Element {
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const ext = Utils.getFileExtension(item.name);
 
@@ -1639,11 +1649,11 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    renderItems(folderId: string): React.JSX.Element | (React.JSX.Element | null)[] {
+    renderItems(folderId: string): JSX.Element | (JSX.Element | null)[] {
         if (this.state.folders && this.state.folders[folderId]) {
             // tile
             if (this.state.viewType === TILE) {
-                const res: (React.JSX.Element | null)[] = [];
+                const res: (JSX.Element | null)[] = [];
                 if (folderId && folderId !== '/') {
                     res.push(this.renderBackFolder());
                 }
@@ -1662,7 +1672,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
                 return res;
             }
 
-            const totalResult: (React.JSX.Element | null)[] = [];
+            const totalResult: (JSX.Element | null)[] = [];
             this.state.folders[folderId].forEach(item => {
                 if (item.folder) {
                     const expanded = this.state.expanded.includes(item.id);
@@ -1716,7 +1726,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    renderToolbar(): React.JSX.Element {
+    renderToolbar(): JSX.Element {
         const IconType: React.FC<{ fontSize?: 'small' }> | null = this.props.showTypeSelector
             ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all
             : null;
@@ -1965,7 +1975,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return folders[parentFolder].find(item => item.id === id) || null;
     }
 
-    renderInputDialog(): React.JSX.Element | null {
+    renderInputDialog(): JSX.Element | null {
         if (this.state.addFolder) {
             const parentFolder = this.findFirstFolder(this.state.selected);
 
@@ -2074,7 +2084,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }
     }
 
-    renderUpload(): React.JSX.Element[] | null {
+    renderUpload(): JSX.Element[] | null {
         if (this.state.uploadFile) {
             return [
                 <Fab
@@ -2274,7 +2284,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    renderDeleteDialog(): React.JSX.Element | null {
+    renderDeleteDialog(): JSX.Element | null {
         if (this.state.deleteItem) {
             return (
                 <Dialog
@@ -2322,7 +2332,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         return null;
     }
 
-    renderViewDialog(): React.JSX.Element | null {
+    renderViewDialog(): JSX.Element | null {
         return this.state.viewer ? (
             <FileViewer
                 supportSubscribes={this.supportSubscribes}
@@ -2341,7 +2351,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         ) : null;
     }
 
-    renderError(): React.JSX.Element | null {
+    renderError(): JSX.Element | null {
         if (this.state.errorText) {
             return (
                 <ErrorDialog
@@ -2415,7 +2425,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         }, 100);
     }
 
-    renderBreadcrumb(): React.JSX.Element {
+    renderBreadcrumb(): JSX.Element {
         const parts = this.state.currentDir.startsWith('/')
             ? this.state.currentDir.split('/')
             : `/${this.state.currentDir}`.split('/');
@@ -2454,7 +2464,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    renderPath(): React.JSX.Element {
+    renderPath(): JSX.Element {
         return (
             <Box
                 component="div"
@@ -2490,7 +2500,7 @@ export class FileBrowserClass extends Component<FileBrowserProps, FileBrowserSta
         );
     }
 
-    render(): React.JSX.Element {
+    render(): JSX.Element {
         if (!this.props.ready) {
             return <LinearProgress />;
         }

package/src/Components/FileViewer.tsx

@@ -1,6 +1,6 @@
 // File viewer in adapter-react does not support write
 // import { Buffer } from 'buffer';
-import React, { Component } from 'react';
+import React, { Component, type JSX } from 'react';
 
 import { TextField, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
 
@@ -338,7 +338,7 @@ class FileViewer extends Component<FileViewerProps, FileViewerState> {
         return null;
     }
 
-    render(): React.JSX.Element {
+    render(): JSX.Element {
         return (
             <Dialog
                 sx={{

package/src/Components/ObjectBrowser.tsx

@@ -28,7 +28,6 @@ import {
     ListItem,
     ListItemButton,
     ListItemIcon,
-    ListItemSecondaryAction,
     ListItemText,
     Menu,
     MenuItem,
@@ -1111,11 +1110,14 @@ function binarySearch(list: string[], find: string, _start?: number, _end?: numb
 }
 
 function getName(name: ioBroker.StringOrTranslated, lang: ioBroker.Languages): string {
-    if (name && typeof name === 'object') {
+    if (typeof name === 'object') {
+        if (!name) {
+            return '';
+        }
         return (name[lang] || name.en || '').toString();
     }
 
-    return (name || '').toString();
+    return name ? name.toString() : '';
 }
 
 export function getSelectIdIconFromObjects(
@@ -3824,13 +3826,16 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         obj: ioBroker.AdapterObject,
     ): Record<string, CustomAdminColumnStored[]> | null {
         if (obj.common && obj.common.adminColumns && obj.common.name) {
-            let columns: string | (string | ioBroker.CustomAdminColumn)[] = obj.common.adminColumns;
+            const columns: string | (string | ioBroker.CustomAdminColumn)[] = obj.common.adminColumns;
+            let aColumns: (string | ioBroker.CustomAdminColumn)[] | undefined;
             if (columns && typeof columns !== 'object') {
-                columns = [columns];
+                aColumns = [columns];
+            } else if (columns) {
+                aColumns = columns as (string | ioBroker.CustomAdminColumn)[];
             }
             let cColumns: CustomAdminColumnStored[] | null;
             if (columns) {
-                cColumns = (columns as (string | ioBroker.CustomAdminColumn)[])
+                cColumns = aColumns
                     .map((_item: string | ioBroker.CustomAdminColumn) => {
                         if (typeof _item !== 'object') {
                             return { path: _item, name: _item.split('.').pop() };
@@ -3866,7 +3871,7 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                             objTypes: item.objTypes,
                         } as CustomAdminColumnStored;
                     })
-                    .filter(item => item) as CustomAdminColumnStored[];
+                    .filter((item: CustomAdminColumnStored) => item);
             } else {
                 cColumns = null;
             }
@@ -7753,22 +7758,30 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
 
     /**
      * Find the id from the root
+     *
+     * @param root The current root
+     * @param id The object id to find
      */
-    private static getItemFromRoot(
-        /** The current root */
-        root: TreeItem,
-        /** the object id to find */
-        id: string,
-    ): TreeItem | null {
+    private static getItemFromRoot(root: TreeItem, id: string): TreeItem | null {
         const idArr = id.split('.');
         let currId = '';
         let _root: TreeItem | null | undefined = root;
 
-        for (const idEntry of idArr) {
+        for (let i = 0; i < idArr.length; i++) {
+            const idEntry = idArr[i];
             currId = currId ? `${currId}.${idEntry}` : idEntry;
-            _root = _root.children?.find(item => item.data.id === currId);
-            if (!_root) {
-                break;
+            let found = false;
+            if (_root.children) {
+                for (let j = 0; j < _root.children.length; j++) {
+                    if (_root.children[j].data.id === currId) {
+                        _root = _root.children[j];
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            if (!found) {
+                return null;
             }
         }
 
@@ -8495,7 +8508,6 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                     !this.props.notEditable &&
                     this.props.objectBrowserAliasEditor &&
                     this.props.objectBrowserEditObject &&
-                    this.state.filter.expertMode &&
                     obj?.type === 'state' &&
                     // @ts-expect-error deprecated from js-controller 6
                     obj.common?.type !== 'file'
@@ -8630,9 +8642,9 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                                 {ITEMS[key].label}
                                 ...
                             </ListItemText>
-                            <ListItemSecondaryAction>
+                            <div style={{ ...styles.contextMenuKeys, opacity: 1 }}>
                                 <ArrowRightIcon />
-                            </ListItemSecondaryAction>
+                            </div>
                         </MenuItem>,
                     );
 

package/src/Components/Schedule.tsx

@@ -10,7 +10,7 @@ import {
     Select,
     TextField,
     Box,
-    type Theme
+    type Theme,
 } from '@mui/material';
 
 import I18n from '../i18n';
@@ -558,14 +558,14 @@ class Schedule extends Component<ScheduleProps, ScheduleState> {
                     // every minute
                     desc.push(I18n.t('sch_desc_everyMinute'));
                 } else {
-                    // every N minutes
+                    // every N minute
                     desc.push(I18n.t('sch_desc_everyNMinutes', schedule.time.interval.toString()));
                 }
             } else if (schedule.time.interval === 1) {
                 // every minute
                 desc.push(I18n.t('sch_desc_everyHour'));
             } else {
-                // every N minutes
+                // every N minute
                 desc.push(I18n.t('sch_desc_everyNHours', schedule.time.interval.toString()));
             }
 
@@ -767,7 +767,7 @@ class Schedule extends Component<ScheduleProps, ScheduleState> {
                             </div>
                         )}
                     </div>
-                    {!schedule.time.exactTime && this.getPeriodSettingsMinutes()}
+                    {!schedule.time.exactTime && this.getPeriodSettingsMinutes(fromTo)}
                 </div>
             </div>
         );
@@ -1202,13 +1202,16 @@ class Schedule extends Component<ScheduleProps, ScheduleState> {
         ];
     }
 
-    getPeriodSettingsMinutes(): JSX.Element {
+    getPeriodSettingsMinutes(fromTo: boolean): JSX.Element {
         return (
-            <div style={{ display: 'inline-block' }}>
-                <label>{I18n.t('sch_every')}</label>
+            <div style={{ display: 'inline-block', marginTop: fromTo ? 15 : 'inherit' }}>
+                <label style={{ marginLeft: 4, marginRight: 4 }}>{I18n.t('sch_every')}</label>
                 <Input
                     value={this.state.schedule.time.interval}
-                    style={{ ...styles.inputEvery, verticalAlign: 'bottom' }}
+                    style={{
+                        ...styles.inputEvery,
+                        verticalAlign: 'bottom',
+                    }}
                     type="number"
                     inputProps={{ min: 1 }}
                     onChange={e => {

package/src/icons/IconClosed.tsx

@@ -14,7 +14,7 @@ const IconClosed = (props: IconProps): React.JSX.Element => (
     >
         <path
             fill="currentColor"
-            d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
+            d="m524,128l-192,0l-64,-64l-160,0c-26.51,0 -48,21.49 -48,48l0,288c0,26.51 21.49,48 48,48l416,0c26.51,0 48,-21.49 48,-48l0,-224c0,-26.51 -21.49,-48 -48,-48z"
         />
     </svg>
 );

package/src/icons/IconOpen.tsx

@@ -14,7 +14,7 @@ const IconOpen = (props: IconProps): JSX.Element => (
     >
         <path
             fill="currentColor"
-            d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
+            d="m631.75617,292.093l-72.424,124.155a63.997,63.997 0 0 1 -55.281,31.752l-399.964,0c-18.523,0 -30.064,-20.093 -20.731,-36.093l72.424,-124.155a64,64 0 0 1 55.282,-31.752l399.964,0c18.523,0 30.064,20.093 20.73,36.093zm-420.694,-68.093l328,0l0,-48c0,-26.51 -21.49,-48 -48,-48l-160,0l-64,-64l-160,0c-26.51,0 -48,21.49 -48,48l0,278.046l69.077,-118.418c17.137,-29.378 48.912,-47.628 82.923,-47.628z"
         />
     </svg>
 );