@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/Components/404.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
-declare function Page404(): React.JSX.Element;
+import { type JSX } from 'react';
+/** Generates the 404 error page */
+declare function Page404(): JSX.Element;
 export default Page404;

package/Components/404.js

@@ -28,17 +28,17 @@ const styles = {
         fontFamily: "'Inconsolata', Helvetica, sans-serif",
         fontSize: '1.5rem',
         color: 'rgba(128, 175, 255, 0.8)',
-        textShadow: `0 0 1ex rgba(51, 70, 255, 1),
+        textShadow: `0 0 1ex rgba(51, 70, 255, 1),
         0 0 2px rgba(255, 255, 255, 0.8)`,
     },
     overlay: {
         pointerEvents: 'none',
         width: '100%',
         height: '100%',
-        background: `repeating-linear-gradient(
-                180deg,
-            rgba(0, 0, 0, 0) 0,
-            rgba(0, 0, 0, 0.3) 50%,
+        background: `repeating-linear-gradient(
+                180deg,
+            rgba(0, 0, 0, 0) 0,
+            rgba(0, 0, 0, 0.3) 50%,
             rgba(0, 0, 0, 0) 100%)`,
         backgroundSize: 'auto 4px',
         zIndex: 99,
@@ -53,12 +53,12 @@ const styles = {
             bottom: 0,
             width: '100%',
             height: '100%',
-            backgroundImage: `linear-gradient(
-                0deg,
-                transparent 0%,
-                rgba(32, 50, 128, 0.2) 2%,
-                rgba(32, 50, 128, 0.8) 3%,
-                rgba(32, 50, 128, 0.2) 3%,
+            backgroundImage: `linear-gradient(
+                0deg,
+                transparent 0%,
+                rgba(32, 50, 128, 0.2) 2%,
+                rgba(32, 50, 128, 0.8) 3%,
+                rgba(32, 50, 128, 0.2) 3%,
                 transparent 100%)`,
             backgroundRepeat: 'no-repeat',
             animation: 'scan 7.5s linear 0s infinite',
@@ -75,8 +75,8 @@ const styles = {
     },
     output: {
         color: 'rgba(128, 175, 255, 0.8)',
-        textShadow: `
-        0 0 1px rgba(51, 70, 255, 0.4),
+        textShadow: `
+        0 0 1px rgba(51, 70, 255, 0.4),
             0 0 2px rgba(255, 255, 255, 0.8)`,
         '&::before': {
             content: '"> "',
@@ -86,8 +86,9 @@ const styles = {
         color: 'white',
     },
 };
+/** Generates the 404 error page */
 function Page404() {
-    return react_1.default.createElement("div", { style: styles.content },
+    return (react_1.default.createElement("div", { style: styles.content },
         react_1.default.createElement("div", { style: styles.root },
             react_1.default.createElement(material_1.Box, { component: "div", sx: styles.overlay },
                 react_1.default.createElement("div", { style: styles.terminal },
@@ -95,6 +96,6 @@ function Page404() {
                         i18n_1.default.t('ra_Error'),
                         react_1.default.createElement("span", { style: styles.errorCode }, "404")),
                     react_1.default.createElement(material_1.Box, { component: "p", sx: styles.output }, i18n_1.default.t('ra_The page you are looking for was not found')),
-                    react_1.default.createElement(material_1.Box, { component: "p", sx: styles.output }, i18n_1.default.t('ra_Good luck'))))));
+                    react_1.default.createElement(material_1.Box, { component: "p", sx: styles.output }, i18n_1.default.t('ra_Good luck')))))));
 }
 exports.default = Page404;

package/Components/ColorPicker.d.ts

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { Component } from 'react';
+import React, { Component, type CSSProperties } from 'react';
 import { type RGBColor } from 'react-color';
-import { IobTheme } from '../types';
+import type { IobTheme } from '../types';
 interface ColorPickerProps {
     /** Set to true to disable the color picker. */
     disabled?: boolean;
@@ -30,7 +30,7 @@ interface ColorPickerProps {
     /** @deprecated TLabel of the color picker use label */
     name?: string;
     /** Additional styling for this component. */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** The CSS class name. */
     className?: string;
     customPalette?: string[];
@@ -44,29 +44,43 @@ interface ColorPickerState {
     color: string | RGBColor;
     anchorEl: HTMLDivElement | null;
 }
+/**
+ * A color picker component.
+ */
 declare class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
+    /**
+     * Constructor for the color picker.
+     *
+     * @param props The properties.
+     */
     constructor(props: ColorPickerProps);
     private handleClick;
     private handleClose;
     /**
      * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
+     *
+     * @param color The color to convert.
+     * @param isHex If true, the color will be converted to hex format.
      * @returns the hex or rgba representation of the given color.
      */
     static getColor(color: string | {
         rgb: RGBColor;
-    } | RGBColor, 
-    /** The returning string should be in hex format */
-    isHex?: boolean): string;
+    } | RGBColor, isHex?: boolean): string;
     /**
      * Convert rgb() or rgba() format to hex format #rrggbb.
+     *
+     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.
      */
     static rgb2hex(rgb: string): string;
     private handleChange;
     /**
-     * IF the props are updated from outside, they should override the state
+     * If the props are updated from outside, they should override the state
+     *
+     * @param _prevProps The previous properties.
+     * @param prevState The previous state.
      */
     componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void;
-    renderCustomPalette(): React.JSX.Element;
+    renderCustomPalette(): React.JSX.Element | null;
     render(): React.JSX.Element;
 }
 export default ColorPicker;

package/Components/ColorPicker.js

@@ -111,7 +111,15 @@ const styles = {
         minHeight: 32,
     },
 };
+/**
+ * A color picker component.
+ */
 class ColorPicker extends react_1.Component {
+    /**
+     * Constructor for the color picker.
+     *
+     * @param props The properties.
+     */
     constructor(props) {
         super(props);
         this.handleClick = (e) => {
@@ -134,11 +142,12 @@ class ColorPicker extends react_1.Component {
     }
     /**
      * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
+     *
+     * @param color The color to convert.
+     * @param isHex If true, the color will be converted to hex format.
      * @returns the hex or rgba representation of the given color.
      */
-    static getColor(color, 
-    /** The returning string should be in hex format */
-    isHex) {
+    static getColor(color, isHex) {
         if (color && typeof color === 'object') {
             const oColor = color;
             if (oColor.rgb) {
@@ -153,10 +162,15 @@ class ColorPicker extends react_1.Component {
             }
             return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a})`;
         }
-        return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
+        if (typeof color === 'string') {
+            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
+        }
+        return '';
     }
     /**
      * Convert rgb() or rgba() format to hex format #rrggbb.
+     *
+     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.
      */
     static rgb2hex(rgb) {
         const m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
@@ -169,7 +183,10 @@ class ColorPicker extends react_1.Component {
         return rgb;
     }
     /**
-     * IF the props are updated from outside, they should override the state
+     * If the props are updated from outside, they should override the state
+     *
+     * @param _prevProps The previous properties.
+     * @param prevState The previous state.
      */
     componentDidUpdate(_prevProps, prevState) {
         const color = ColorPicker.getColor(this.props.color || this.props.value || '');
@@ -181,28 +198,28 @@ class ColorPicker extends react_1.Component {
         if (!this.props.customPalette) {
             return null;
         }
-        return react_1.default.createElement("div", { style: { width: '100%', display: 'flex', flexWrap: 'wrap' } }, this.props.customPalette.map(color => react_1.default.createElement(material_1.Button, { style: styles.button, key: color, onClick: () => {
+        return (react_1.default.createElement("div", { style: { width: '100%', display: 'flex', flexWrap: 'wrap' } }, this.props.customPalette.map(color => (react_1.default.createElement(material_1.Button, { style: styles.button, key: color, onClick: () => {
                 this.handleChange(color);
                 setTimeout(() => this.handleClose(), 300);
             } },
-            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.iconButton), { background: color }) }))));
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.iconButton), { background: color }) }))))));
     }
     render() {
         var _a;
         const style = Object.assign({}, (this.props.style || {}));
         style.position = 'relative';
         const { color } = this.state;
-        return react_1.default.createElement(material_1.Box, { component: "div", style: style, sx: this.props.sx || undefined, className: this.props.className || '' },
-            this.props.noInputField ? null : react_1.default.createElement(material_1.TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", label: this.props.label || this.props.name, value: color || '', margin: "dense", sx: {
+        return (react_1.default.createElement(material_1.Box, { component: "div", style: style, sx: this.props.sx || undefined, className: this.props.className || '' },
+            this.props.noInputField ? null : (react_1.default.createElement(material_1.TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", label: this.props.label || this.props.name, value: color || '', margin: "dense", sx: {
                     '&.MuiFormControl-root': styles.textDense,
                     width: color ? 'calc(100% - 80px)' : 'calc(100% - 56px)',
                     mr: color ? undefined : 1,
-                }, onChange: e => this.handleChange(e.target.value) }),
-            !this.props.noInputField && color ? react_1.default.createElement(material_1.IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", style: Object.assign(Object.assign({}, (this.props.label || this.props.name ? styles.delButton : undefined)), (color ? undefined : { opacity: 0, cursor: 'default' })) },
-                react_1.default.createElement(icons_material_1.Delete, null)) : null,
+                }, onChange: e => this.handleChange(e.target.value) })),
+            !this.props.noInputField && color ? (react_1.default.createElement(material_1.IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", style: Object.assign(Object.assign({}, (this.props.label || this.props.name ? styles.delButton : undefined)), (color ? undefined : { opacity: 0, cursor: 'default' })) },
+                react_1.default.createElement(icons_material_1.Delete, null))) : null,
             react_1.default.createElement(material_1.Box, { component: "div", onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), sx: Object.assign(Object.assign(Object.assign({}, styles.swatch), (this.props.disabled ? styles.swatchDisabled : undefined)), { background: color ? undefined : 'transparent', border: color ? undefined : '1px dashed #ccc', boxSizing: 'border-box', marginTop: this.props.noInputField || !(this.props.label || this.props.name) ? 0 : undefined }) },
-                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.color), { background: ColorPicker.getColor(color), width: this.props.noInputField ? (this.props.barWidth || 16) : this.props.barWidth || 36 }) })),
-            this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { sx: Object.assign(Object.assign({}, styles.popover), { '&. MuiMenu-list': styles.popoverList }), anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
+                react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.color), { background: ColorPicker.getColor(color), width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || 36 }) })),
+            this.state.displayColorPicker && !this.props.disabled ? (react_1.default.createElement(material_1.Menu, { sx: Object.assign(Object.assign({}, styles.popover), { '&. MuiMenu-list': styles.popoverList }), anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
                 react_1.default.createElement(react_color_1.ChromePicker, { color: this.state.color || undefined, onChangeComplete: (_color) => this.handleChange(_color.rgb), styles: {
                         default: {
                             picker: {
@@ -210,11 +227,11 @@ class ColorPicker extends react_1.Component {
                             },
                         },
                     } }),
-                color && this.props.noInputField ? react_1.default.createElement(material_1.IconButton, { sx: styles.closeButton, onClick: () => this.handleChange('') },
-                    react_1.default.createElement(icons_material_1.Delete, null)) : null,
+                color && this.props.noInputField ? (react_1.default.createElement(material_1.IconButton, { sx: styles.closeButton, onClick: () => this.handleChange('') },
+                    react_1.default.createElement(icons_material_1.Delete, null))) : null,
                 react_1.default.createElement(material_1.IconButton, { sx: styles.closeButton, onClick: () => this.handleClose() },
                     react_1.default.createElement(icons_material_1.Close, null)),
-                this.renderCustomPalette()) : null);
+                this.renderCustomPalette())) : null));
     }
 }
 exports.default = ColorPicker;

package/Components/ComplexCron.js

@@ -62,16 +62,7 @@ const styles = {
         color: 'white',
     },
 };
-const WEEKDAYS = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-];
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 const MONTHS = [
     'January',
     'February',
@@ -172,8 +163,9 @@ function convertArrayIntoMinus(value, max) {
 class ComplexCron extends react_1.Component {
     constructor(props) {
         super(props);
-        let cron = typeof this.props.cronExpression === 'string' ?
-            this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '') : '';
+        let cron = typeof this.props.cronExpression === 'string'
+            ? this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '')
+            : '';
         if (cron[0] === '{') {
             cron = '';
         }
@@ -283,12 +275,13 @@ class ComplexCron extends react_1.Component {
             react_1.default.createElement(material_1.Button, { key: "addall", variant: "contained", 
                 // style={{paddingBottom: 20}}
                 style: styles.numberButton, color: "secondary", onClick: () => this.onToggle(true, type, max) }, i18n_1.default.t('ra_Select all')),
-            react_1.default.createElement("div", { key: "all" }, values.map(i => [((max === 7 && i === 4) ||
+            react_1.default.createElement("div", { key: "all" }, values.map(i => [
+                (max === 7 && i === 4) ||
                     (max === 12 && i === 7) ||
                     (max === 31 && !((i - 1) % 10)) ||
                     (max === 60 && i && !(i % 10)) ||
-                    (max === 24 && i && !(i % 6))) ?
-                    react_1.default.createElement("div", { key: `allInner${i}`, style: { width: '100%' } }) : null, react_1.default.createElement(material_1.Button, { key: `_${i}`, variant: parts.indexOf(i) !== -1 ? 'contained' : 'outlined', style: styles.numberButton, color: parts.indexOf(i) !== -1 ? 'secondary' : 'primary', onClick: () => this.onToggle(i, type, max) }, max === 7 ? i18n_1.default.t(WEEKDAYS[i]) : (max === 12 ? MONTHS[i - 1] : i)),
+                    (max === 24 && i && !(i % 6)) ? (react_1.default.createElement("div", { key: `allInner${i}`, style: { width: '100%' } })) : null,
+                react_1.default.createElement(material_1.Button, { key: `_${i}`, variant: parts.indexOf(i) !== -1 ? 'contained' : 'outlined', style: styles.numberButton, color: parts.indexOf(i) !== -1 ? 'secondary' : 'primary', onClick: () => this.onToggle(i, type, max) }, max === 7 ? i18n_1.default.t(WEEKDAYS[i]) : max === 12 ? MONTHS[i - 1] : i),
             ])),
         ];
     }
@@ -298,7 +291,7 @@ class ComplexCron extends react_1.Component {
         let everyN = value === undefined || value === null ? false : value.toString().includes('/');
         let select;
         if (this.state.modes[type] === null) {
-            select = every ? 'every' : (everyN ? 'everyN' : 'specific');
+            select = every ? 'every' : everyN ? 'everyN' : 'specific';
             const modes = JSON.parse(JSON.stringify(this.state.modes));
             modes[type] = select;
             setTimeout(() => this.setState({ modes }, () => this.recalcCron()), 100);
@@ -311,7 +304,7 @@ class ComplexCron extends react_1.Component {
         if (everyN && value) {
             valueNumber = parseInt(value.replace('*/', ''), 10) || 1;
         }
-        return react_1.default.createElement("div", null,
+        return (react_1.default.createElement("div", null,
             react_1.default.createElement(material_1.Select, { variant: "standard", style: Object.assign(Object.assign({}, styles.periodSelect), { verticalAlign: 'bottom' }), value: select, onChange: e => {
                     const modes = JSON.parse(JSON.stringify(this.state.modes));
                     modes[type] = e.target.value;
@@ -333,12 +326,19 @@ class ComplexCron extends react_1.Component {
                 react_1.default.createElement(material_1.MenuItem, { key: "every", value: "every" }, i18n_1.default.t(`sc_every_${type}`)),
                 react_1.default.createElement(material_1.MenuItem, { key: "everyN", value: "everyN" }, i18n_1.default.t(`sc_everyN_${type}`)),
                 react_1.default.createElement(material_1.MenuItem, { key: "specific", value: "specific" }, i18n_1.default.t(`sc_specific_${type}`))),
-            everyN && false && react_1.default.createElement("span", null, value),
-            everyN && react_1.default.createElement(material_1.TextField, { variant: "standard", key: "interval", label: i18n_1.default.t(`sc_${type}`), value: valueNumber, inputProps: { min: 1, max }, onChange: e => {
+            everyN && (react_1.default.createElement(material_1.TextField, { variant: "standard", key: "interval", label: i18n_1.default.t(`sc_${type}`), value: valueNumber, slotProps: {
+                    htmlInput: {
+                        min: 1,
+                        max,
+                    },
+                    inputLabel: {
+                        shrink: true,
+                    },
+                }, onChange: e => {
                     // @ts-expect-error is allowed
                     this.setState({ [type]: `*/${e.target.value}` }, () => this.recalcCron());
-                }, InputLabelProps: { shrink: true }, type: "number", margin: "normal" }),
-            !every && !everyN && this.getDigitsSelector(type, max));
+                }, type: "number", margin: "normal" })),
+            !every && !everyN && this.getDigitsSelector(type, max)));
     }
     static convertCronToText(cron, lang) {
         if (cron.split(' ').includes('-')) {
@@ -391,14 +391,14 @@ class ComplexCron extends react_1.Component {
     }
     render() {
         const tab = this.state.seconds !== false ? this.state.tab : this.state.tab + 1;
-        return react_1.default.createElement("div", { style: styles.mainDiv },
+        return (react_1.default.createElement("div", { style: styles.mainDiv },
             react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%' } },
                 react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: '100%' }, value: this.state.cron, disabled: true })),
             react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%', height: 60 } }, ComplexCron.convertCronToText(this.state.cron, this.props.language || 'en')),
             react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: !!this.state.seconds, onChange: e => this.setState({ seconds: e.target.checked ? '*' : false }, () => this.recalcCron()) }), label: i18n_1.default.t('ra_use seconds') }),
             react_1.default.createElement(material_1.AppBar, { position: "static", sx: { '&.MuiAppBar-root': styles.appBar }, color: "secondary" },
                 react_1.default.createElement(material_1.Tabs, { value: this.state.tab, style: styles.appBar, color: "secondary", onChange: (active, _tab) => this.setState({ tab: _tab }) },
-                    this.state.seconds !== false && react_1.default.createElement(material_1.Tab, { id: "sc_seconds", label: i18n_1.default.t('sc_seconds') }),
+                    this.state.seconds !== false && (react_1.default.createElement(material_1.Tab, { id: "sc_seconds", label: i18n_1.default.t('sc_seconds') })),
                     react_1.default.createElement(material_1.Tab, { id: "minutes", label: i18n_1.default.t('sc_minutes') }),
                     react_1.default.createElement(material_1.Tab, { id: "hours", label: i18n_1.default.t('sc_hours') }),
                     react_1.default.createElement(material_1.Tab, { id: "dates", label: i18n_1.default.t('sc_dates') }),
@@ -409,7 +409,7 @@ class ComplexCron extends react_1.Component {
             tab === 2 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('hours', 24)),
             tab === 3 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('dates', 31)),
             tab === 4 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('months', 12)),
-            tab === 5 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('dow', 7)));
+            tab === 5 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('dow', 7))));
     }
 }
 exports.default = ComplexCron;

package/Components/CopyToClipboard.d.ts

@@ -1,6 +1,15 @@
+/**
+ * Copy text to clipboard
+ *
+ * @param text Text to copy
+ * @param options Options
+ * @param options.debug Debug mode
+ * @param options.format Format of the data
+ * @param options.message Message to show in prompt
+ */
 declare function copy(text: string, options?: {
     debug?: boolean;
-    format?: string;
+    format?: 'text/plain' | 'text/html';
     message?: string;
 }): boolean;
 export default copy;

package/Components/CopyToClipboard.js

@@ -34,7 +34,8 @@ function deselectCurrent() {
     for (let i = 0; i < selection.rangeCount; i++) {
         ranges.push(selection.getRangeAt(i));
     }
-    switch (active === null || active === void 0 ? void 0 : active.tagName.toUpperCase()) { // .toUpperCase handles XHTML
+    switch (active === null || active === void 0 ? void 0 : active.tagName.toUpperCase() // .toUpperCase handles XHTML
+    ) {
         case 'INPUT':
         case 'TEXTAREA':
             active.blur();
@@ -45,8 +46,7 @@ function deselectCurrent() {
     }
     selection.removeAllRanges();
     return () => {
-        selection.type === 'Caret' &&
-            selection.removeAllRanges();
+        selection.type === 'Caret' && selection.removeAllRanges();
         if (!selection.rangeCount) {
             ranges.forEach(range => selection.addRange(range));
         }
@@ -64,6 +64,15 @@ function format(message) {
     const copyKey = `${/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl'}+C`;
     return message.replace(/#{\s*key\s*}/g, copyKey);
 }
+/**
+ * Copy text to clipboard
+ *
+ * @param text Text to copy
+ * @param options Options
+ * @param options.debug Debug mode
+ * @param options.format Format of the data
+ * @param options.message Message to show in prompt
+ */
 function copy(text, options) {
     let reselectPrevious;
     let range;
@@ -89,23 +98,22 @@ function copy(text, options) {
         // used to preserve spaces and line breaks
         mark.style.whiteSpace = 'pre';
         // do not inherit user-select (it may be `none`)
-        mark.style.webkitUserSelect = 'text';
-        mark.style.MozUserSelect = 'text';
-        mark.style.msUserSelect = 'text';
         mark.style.userSelect = 'text';
         mark.addEventListener('copy', e => {
             var _a, _b, _c, _d;
             e.stopPropagation();
             if (options === null || options === void 0 ? void 0 : options.format) {
                 e.preventDefault();
-                if (typeof e.clipboardData === 'undefined') { // IE 11
+                if (typeof e.clipboardData === 'undefined') {
+                    // IE 11
                     debug && console.warn('unable to use e.clipboardData');
                     debug && console.warn('trying IE specific stuff');
                     (_a = window.clipboardData) === null || _a === void 0 ? void 0 : _a.clearData();
                     const _format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting.default;
                     (_b = window.clipboardData) === null || _b === void 0 ? void 0 : _b.setData(_format, text);
                 }
-                else { // all other browsers
+                else {
+                    // all other browsers
                     (_c = e.clipboardData) === null || _c === void 0 ? void 0 : _c.clearData();
                     (_d = e.clipboardData) === null || _d === void 0 ? void 0 : _d.setData(options.format, text);
                 }
@@ -114,6 +122,7 @@ function copy(text, options) {
         document.body.appendChild(mark);
         range.selectNodeContents(mark);
         selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+        // there is no alternative for execCommand
         const successful = document.execCommand('copy');
         if (!successful) {
             throw new Error('copy command was unsuccessful');

package/Components/CustomModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IobTheme } from '../types';
+import { type IobTheme } from '../types';
 interface CustomModalProps {
     icon?: any;
     open: boolean;

package/Components/CustomModal.js

@@ -65,24 +65,24 @@ const CustomModal = (props) => {
     if (icon) {
         Icon = icon;
     }
-    return react_1.default.createElement(material_1.Dialog, { open: open, maxWidth: maxWidth || 'md', fullWidth: !!fullWidth, disableEscapeKeyDown: false, onClose: onClose, sx: { '& .MuiDialog-paper': styles.modalDialog } },
-        title && react_1.default.createElement(material_1.DialogTitle, null,
+    return (react_1.default.createElement(material_1.Dialog, { open: open, maxWidth: maxWidth || 'md', fullWidth: !!fullWidth, disableEscapeKeyDown: false, onClose: onClose, sx: { '& .MuiDialog-paper': styles.modalDialog } },
+        title && (react_1.default.createElement(material_1.DialogTitle, null,
             icon ? react_1.default.createElement(Icon, { style: styles.titleIcon }) : null,
             title,
-            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(props.theme, styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
-                react_1.default.createElement(icons_material_1.Language, null)) : null),
+            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? (react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(props.theme, styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
+                react_1.default.createElement(icons_material_1.Language, null))) : null)),
         react_1.default.createElement(material_1.DialogContent, { style: Object.assign(Object.assign(Object.assign({}, styles.content), (overflowHidden ? styles.overflowHidden : undefined)), { paddingTop: 8 }) },
-            textInput && react_1.default.createElement(material_1.TextField
+            textInput && (react_1.default.createElement(material_1.TextField
             // className={className}
             , { 
                 // className={className}
                 autoComplete: "off", fullWidth: true, autoFocus: true, variant: "outlined", size: "medium", 
                 // rows={10}
-                multiline: true, value: value, onChange: e => setValue(e.target.value) }),
+                multiline: true, value: value, onChange: e => setValue(e.target.value) })),
             children,
             help ? react_1.default.createElement("div", null, help) : null),
         react_1.default.createElement(material_1.DialogActions, null,
-            applyButton !== false && react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Check, null), disabled: progress || (applyDisabled && defaultValue === value), onClick: () => onApply(textInput ? value : ''), variant: "contained", color: "primary" }, i18n_1.default.t(titleButtonApply || 'ra_Ok')),
-            react_1.default.createElement(material_1.Button, { color: "grey", onClick: onClose, disabled: progress, variant: "contained", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, i18n_1.default.t(titleButtonClose || 'ra_Cancel'))));
+            applyButton !== false && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Check, null), disabled: progress || (applyDisabled && defaultValue === value), onClick: () => onApply(textInput ? value : ''), variant: "contained", color: "primary" }, i18n_1.default.t(titleButtonApply || 'ra_Ok'))),
+            react_1.default.createElement(material_1.Button, { color: "grey", onClick: onClose, disabled: progress, variant: "contained", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, i18n_1.default.t(titleButtonClose || 'ra_Cancel')))));
 };
 exports.default = CustomModal;

package/Components/FileBrowser.d.ts

@@ -3,10 +3,10 @@
  *
  * MIT License
  *
- * */
+ */
 import React, { Component } from 'react';
 import type { Connection } from '@iobroker/socket-client';
-import { ThemeName, ThemeType, Translate, IobTheme } from '../types';
+import type { ThemeName, ThemeType, Translate, IobTheme } from '../types';
 export interface MetaACL extends ioBroker.ObjectACL {
     file: number;
 }
@@ -147,7 +147,7 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     browseFolder(folderId: string, _newFolders?: Folders | null, _checkEmpty?: boolean, force?: boolean): Promise<Folders>;
     toggleFolder(item: FolderOrFileItem, e: React.MouseEvent<Element>): void;
     onFileChange: (id: string, fileName: string, size: number | null) => void;
-    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void | Promise<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;
@@ -157,21 +157,21 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     getFileIcon(ext: string | null): React.JSX.Element;
     static getEditFile(ext: string | null): boolean;
     setStateBackgroundImage: () => void;
-    getStyleBackgroundImage: () => any;
+    getStyleBackgroundImage: () => React.CSSProperties | null;
     renderFile(item: FolderOrFileItem): React.JSX.Element;
     renderItems(folderId: string): React.JSX.Element | (React.JSX.Element | null)[];
     renderToolbar(): React.JSX.Element;
-    findItem(id: string, folders?: Folders | null): FolderOrFileItem;
-    renderInputDialog(): React.JSX.Element;
+    findItem(id: string, folders?: Folders | null): null | FolderOrFileItem;
+    renderInputDialog(): React.JSX.Element | null;
     componentDidUpdate(): void;
-    findFirstFolder(id: string): string;
+    findFirstFolder(id: string): string | null;
     uploadFile(fileName: string, data: string): Promise<void>;
-    renderUpload(): React.JSX.Element[];
+    renderUpload(): React.JSX.Element[] | null;
     deleteRecursive(id: string): Promise<void>;
     deleteItem(deleteItem: string): void;
-    renderDeleteDialog(): false | React.JSX.Element;
-    renderViewDialog(): React.JSX.Element;
-    renderError(): React.JSX.Element;
+    renderDeleteDialog(): React.JSX.Element | null;
+    renderViewDialog(): React.JSX.Element | null;
+    renderError(): React.JSX.Element | null;
     updateItemsAcl(info: FolderOrFileItem[]): void;
     changeToPath(): void;
     renderBreadcrumb(): React.JSX.Element;