@iobroker/adapter-react-v5 7.2.2 → 7.2.4

package/i18n/en.json

@@ -92,6 +92,7 @@
   "sc_date": "Date",
   "sc_dates": "Dates",
   "sc_dows": "Day of week",
+  "sc_dow": "Day",
   "sc_every": "Every",
   "sc_everyN_dates": "every N days",
   "sc_everyN_dows": "every N day of week",
@@ -435,5 +436,14 @@
   "ra_warning_every_second": "Warning: The CRON job will run every second during the specified period!",
   "ra_warning_every_minute": "Warning: The CRON job will run every minute during the specified period!",
   "ra_The schedule will be executed every second. Are you sure?": "The schedule will be executed every second. Are you sure?",
-  "ra_The schedule will be executed every minute. Are you sure?": "The schedule will be executed every minute. Are you sure?"
+  "ra_The schedule will be executed every minute. Are you sure?": "The schedule will be executed every minute. Are you sure?",
+  "ra_Define CRON...": "Define CRON...",
+  "ra_Sunday": "Sunday",
+  "ra_Monday": "Monday",
+  "ra_Tuesday": "Tuesday",
+  "ra_Wednesday": "Wednesday",
+  "ra_Thursday": "Thursday",
+  "ra_Friday": "Friday",
+  "ra_Saturday": "Saturday",
+  "sc_invalid_cron": "Invalid CRON"
 }

package/i18n/es.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Advertencia: ¡El trabajo CRON se ejecutará cada segundo durante el período especificado!",
   "ra_warning_every_minute": "Advertencia: ¡El trabajo CRON se ejecutará cada minuto durante el período especificado!",
   "ra_The schedule will be executed every second. Are you sure?": "El cronograma se ejecutará cada segundo. ¿Estás seguro?",
-  "ra_The schedule will be executed every minute. Are you sure?": "El cronograma se ejecutará cada minuto. ¿Estás seguro?"
+  "ra_The schedule will be executed every minute. Are you sure?": "El cronograma se ejecutará cada minuto. ¿Estás seguro?",
+  "sc_dow": "Día",
+  "ra_Define CRON...": "Definir CRON...",
+  "ra_Sunday": "Domingo",
+  "ra_Monday": "Lunes",
+  "ra_Tuesday": "Martes",
+  "ra_Wednesday": "Miércoles",
+  "ra_Thursday": "Jueves",
+  "ra_Friday": "Viernes",
+  "ra_Saturday": "Sábado",
+  "sc_invalid_cron": "CRON no válido"
 }

package/i18n/fr.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Attention : la tâche CRON s’exécutera toutes les secondes pendant la période spécifiée !",
   "ra_warning_every_minute": "Attention : la tâche CRON s’exécutera toutes les minutes pendant la période spécifiée !",
   "ra_The schedule will be executed every second. Are you sure?": "Le planning sera exécuté toutes les secondes. Êtes-vous sûr ?",
-  "ra_The schedule will be executed every minute. Are you sure?": "Le planning sera exécuté toutes les minutes. Êtes-vous sûr ?"
+  "ra_The schedule will be executed every minute. Are you sure?": "Le planning sera exécuté toutes les minutes. Êtes-vous sûr ?",
+  "sc_dow": "Jour",
+  "ra_Define CRON...": "Définir CRON...",
+  "ra_Sunday": "Dimanche",
+  "ra_Monday": "Lundi",
+  "ra_Tuesday": "Mardi",
+  "ra_Wednesday": "Mercredi",
+  "ra_Thursday": "Jeudi",
+  "ra_Friday": "Vendredi",
+  "ra_Saturday": "Samedi",
+  "sc_invalid_cron": "CRON non valide"
 }

package/i18n/it.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Attenzione: il processo CRON verrà eseguito ogni secondo durante il periodo specificato!",
   "ra_warning_every_minute": "Attenzione: il processo CRON verrà eseguito ogni minuto durante il periodo specificato!",
   "ra_The schedule will be executed every second. Are you sure?": "La pianificazione verrà eseguita ogni secondo. Sei sicuro?",
-  "ra_The schedule will be executed every minute. Are you sure?": "La pianificazione verrà eseguita ogni minuto. Sei sicuro?"
+  "ra_The schedule will be executed every minute. Are you sure?": "La pianificazione verrà eseguita ogni minuto. Sei sicuro?",
+  "sc_dow": "Giorno",
+  "ra_Define CRON...": "Definisci CRON...",
+  "ra_Sunday": "Domenica",
+  "ra_Monday": "Lunedi",
+  "ra_Tuesday": "Martedì",
+  "ra_Wednesday": "Mercoledì",
+  "ra_Thursday": "Giovedì",
+  "ra_Friday": "Venerdì",
+  "ra_Saturday": "Sabato",
+  "sc_invalid_cron": "CRON non valido"
 }

package/i18n/nl.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Waarschuwing: De CRON-taak wordt elke seconde uitgevoerd gedurende de opgegeven periode!",
   "ra_warning_every_minute": "Waarschuwing: De CRON-taak wordt elke minuut uitgevoerd gedurende de opgegeven periode!",
   "ra_The schedule will be executed every second. Are you sure?": "Het schema wordt elke seconde uitgevoerd. Weet je het zeker?",
-  "ra_The schedule will be executed every minute. Are you sure?": "Het schema wordt elke minuut uitgevoerd. Weet u het zeker?"
+  "ra_The schedule will be executed every minute. Are you sure?": "Het schema wordt elke minuut uitgevoerd. Weet u het zeker?",
+  "sc_dow": "Dag",
+  "ra_Define CRON...": "Definieer CRON...",
+  "ra_Sunday": "Zondag",
+  "ra_Monday": "Maandag",
+  "ra_Tuesday": "Dinsdag",
+  "ra_Wednesday": "Woensdag",
+  "ra_Thursday": "Donderdag",
+  "ra_Friday": "Vrijdag",
+  "ra_Saturday": "Zaterdag",
+  "sc_invalid_cron": "Ongeldige CRON"
 }

package/i18n/pl.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Ostrzeżenie: Zadanie CRON będzie uruchamiane co sekundę w określonym przedziale czasowym!",
   "ra_warning_every_minute": "Ostrzeżenie: Zadanie CRON będzie uruchamiane co minutę w określonym przedziale czasowym!",
   "ra_The schedule will be executed every second. Are you sure?": "Harmonogram będzie wykonywany co sekundę. Czy jesteś pewien?",
-  "ra_The schedule will be executed every minute. Are you sure?": "Harmonogram będzie wykonywany co minutę. Czy jesteś pewien?"
+  "ra_The schedule will be executed every minute. Are you sure?": "Harmonogram będzie wykonywany co minutę. Czy jesteś pewien?",
+  "sc_dow": "Dzień",
+  "ra_Define CRON...": "Zdefiniuj CRON...",
+  "ra_Sunday": "Niedziela",
+  "ra_Monday": "Poniedziałek",
+  "ra_Tuesday": "Wtorek",
+  "ra_Wednesday": "Środa",
+  "ra_Thursday": "Czwartek",
+  "ra_Friday": "Piątek",
+  "ra_Saturday": "Sobota",
+  "sc_invalid_cron": "Nieprawidłowy CRON"
 }

package/i18n/pt.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Aviso: O trabalho CRON será executado a cada segundo durante o período especificado!",
   "ra_warning_every_minute": "Aviso: O trabalho CRON será executado a cada minuto durante o período especificado!",
   "ra_The schedule will be executed every second. Are you sure?": "O agendamento será executado a cada segundo. Tem certeza?",
-  "ra_The schedule will be executed every minute. Are you sure?": "O agendamento será executado a cada minuto. Tem certeza?"
+  "ra_The schedule will be executed every minute. Are you sure?": "O agendamento será executado a cada minuto. Tem certeza?",
+  "sc_dow": "Dia",
+  "ra_Define CRON...": "Defina CRON...",
+  "ra_Sunday": "Domingo",
+  "ra_Monday": "Segunda-feira",
+  "ra_Tuesday": "Terça-feira",
+  "ra_Wednesday": "Quarta-feira",
+  "ra_Thursday": "Quinta-feira",
+  "ra_Friday": "Sexta-feira",
+  "ra_Saturday": "Sábado",
+  "sc_invalid_cron": "CRON inválido"
 }

package/i18n/ru.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Внимание: задание CRON будет выполняться каждую секунду в течение указанного периода!",
   "ra_warning_every_minute": "Внимание: задание CRON будет запускаться каждую минуту в течение указанного периода!",
   "ra_The schedule will be executed every second. Are you sure?": "Расписание будет выполняться каждую секунду. Вы уверены?",
-  "ra_The schedule will be executed every minute. Are you sure?": "Расписание будет выполняться каждую минуту. Вы уверены?"
+  "ra_The schedule will be executed every minute. Are you sure?": "Расписание будет выполняться каждую минуту. Вы уверены?",
+  "sc_dow": "День",
+  "ra_Define CRON...": "Определите CRON...",
+  "ra_Sunday": "Воскресенье",
+  "ra_Monday": "Понедельник",
+  "ra_Tuesday": "Вторник",
+  "ra_Wednesday": "Среда",
+  "ra_Thursday": "Четверг",
+  "ra_Friday": "Пятница",
+  "ra_Saturday": "Суббота",
+  "sc_invalid_cron": "Неверный CRON"
 }

package/i18n/uk.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "Попередження: завдання CRON виконуватиметься кожну секунду протягом зазначеного періоду!",
   "ra_warning_every_minute": "Попередження: завдання CRON виконуватиметься щохвилини протягом зазначеного періоду!",
   "ra_The schedule will be executed every second. Are you sure?": "Розклад буде виконуватися щосекунди. Ви впевнені?",
-  "ra_The schedule will be executed every minute. Are you sure?": "Розклад буде виконуватися щохвилини. Ви впевнені?"
+  "ra_The schedule will be executed every minute. Are you sure?": "Розклад буде виконуватися щохвилини. Ви впевнені?",
+  "sc_dow": "День",
+  "ra_Define CRON...": "Визначити CRON...",
+  "ra_Sunday": "неділя",
+  "ra_Monday": "понеділок",
+  "ra_Tuesday": "вівторок",
+  "ra_Wednesday": "Середа",
+  "ra_Thursday": "четвер",
+  "ra_Friday": "П'ятниця",
+  "ra_Saturday": "Субота",
+  "sc_invalid_cron": "Недійсний CRON"
 }

package/i18n/zh-cn.json

@@ -435,5 +435,15 @@
   "ra_warning_every_second": "警告：CRON 作业将在指定期间内每秒运行一次！",
   "ra_warning_every_minute": "警告：CRON 作业将在指定期间内每分钟运行一次！",
   "ra_The schedule will be executed every second. Are you sure?": "该计划将每秒执行一次。你确定吗？",
-  "ra_The schedule will be executed every minute. Are you sure?": "该计划将每分钟执行一次。您确定吗？"
+  "ra_The schedule will be executed every minute. Are you sure?": "该计划将每分钟执行一次。您确定吗？",
+  "sc_dow": "天",
+  "ra_Define CRON...": "定义 CRON...",
+  "ra_Sunday": "星期日",
+  "ra_Monday": "周一",
+  "ra_Tuesday": "周二",
+  "ra_Wednesday": "周三",
+  "ra_Thursday": "周四",
+  "ra_Friday": "星期五",
+  "ra_Saturday": "周六",
+  "sc_invalid_cron": "无效的 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.2",
+  "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/ComplexCron.tsx

@@ -13,7 +13,7 @@ const styles: Record<string, React.CSSProperties> = {
     periodSelect: {
         // margin: '0 10px 60px 10px',
         display: 'block',
-        width: 200,
+        width: 250,
     },
     slider: {
         marginTop: 20,
@@ -479,7 +479,7 @@ class ComplexCron extends Component<ComplexCronProps, ComplexCronState> {
 
         return (
             <div style={styles.mainDiv}>
-                <div style={{ paddingLeft: 8, width: '100%' }}>
+                <div style={{ paddingLeft: 8, width: 'calc(100% - px)' }}>
                     <TextField
                         variant="standard"
                         style={{ width: '100%' }}
@@ -487,7 +487,7 @@ class ComplexCron extends Component<ComplexCronProps, ComplexCronState> {
                         disabled
                     />
                 </div>
-                <div style={{ paddingLeft: 8, width: '100%', height: 60 }}>
+                <div style={{ paddingLeft: 8, width: 'calc(100% - px)', height: 60 }}>
                     {ComplexCron.convertCronToText(this.state.cron, this.props.language || 'en')}
                     <span style={styles.warning}>
                         {everySecond

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={{