@iobroker/adapter-react-v5 5.0.7 → 6.0.0

package/Components/404.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-interface Page404Props {
-    classes: Record<string, string>;
-}
-declare const _default: React.JSXElementConstructor<Omit<Page404Props, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+declare function Page404(): React.JSX.Element;
+export default Page404;

package/Components/404.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
 /*
 Copyright 2019 Robin Selmer
 https://codepen.io/robinselmer/pen/vJjbOZ
@@ -86,15 +86,15 @@ const styles = {
         color: 'white',
     },
 };
-function Page404(props) {
-    return react_1.default.createElement("div", { className: props.classes.content },
-        react_1.default.createElement("div", { className: props.classes.root },
-            react_1.default.createElement("div", { className: props.classes.overlay },
-                react_1.default.createElement("div", { className: props.classes.terminal },
+function Page404() {
+    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 },
                     react_1.default.createElement("h1", null,
                         i18n_1.default.t('ra_Error'),
-                        react_1.default.createElement("span", { className: props.classes.errorCode }, "404")),
-                    react_1.default.createElement("p", { className: props.classes.output }, i18n_1.default.t('ra_The page you are looking for was not found')),
-                    react_1.default.createElement("p", { className: props.classes.output }, i18n_1.default.t('ra_Good luck'))))));
+                        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'))))));
 }
-exports.default = (0, styles_1.withStyles)(styles)(Page404);
+exports.default = Page404;

package/Components/ColorPicker.d.ts

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { Component } from 'react';
+import { type RGBColor } from 'react-color';
 interface ColorPickerProps {
     /** Set to true to disable the color picker. */
     disabled?: boolean;
@@ -35,7 +36,43 @@ interface ColorPickerProps {
     customPalette?: string[];
     noInputField?: boolean;
     barWidth?: number;
-    classes: Record<string, string>;
 }
-declare const _default: React.JSXElementConstructor<Omit<ColorPickerProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface ColorPickerState {
+    displayColorPicker: boolean;
+    color: string | RGBColor;
+    anchorEl: HTMLDivElement | null;
+}
+declare class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
+    constructor(props: ColorPickerProps);
+    /**
+     * @private
+     */
+    handleClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * @private
+     */
+    handleClose: () => void;
+    /**
+     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') 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;
+    /**
+     * Convert rgb() or rgba() format to hex format #rrggbb.
+     */
+    static rgb2hex(rgb: string): string;
+    private handleChange;
+    /**
+     * IF the props are updated from outside, they should override the state
+     * @param _prevProps
+     * @param prevState
+     */
+    componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void;
+    renderCustomPalette(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ColorPicker;

package/Components/ColorPicker.js

@@ -43,12 +43,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 const react_1 = __importStar(require("react"));
 const react_color_1 = require("react-color");
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const i18n_1 = __importDefault(require("../i18n"));
-const Utils_1 = __importDefault(require("./Utils"));
-const styles = (theme) => ({
+const styles = {
     color: {
         width: 36,
         height: 14,
@@ -62,7 +60,7 @@ const styles = (theme) => ({
     swatch: {
         marginTop: 16,
         padding: 5,
-        background: theme.palette.background.paper,
+        background: 'background.paper',
         borderRadius: 1,
         boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
         display: 'inline-block',
@@ -82,13 +80,13 @@ const styles = (theme) => ({
     popoverList: {
         padding: 0,
     },
-    closeButton: {
+    closeButton: (theme) => ({
         backgroundColor: `${theme.palette.background.paper} !important`,
         borderRadius: '0 0 25% 25%',
         '&:hover': {
             backgroundColor: `${theme.palette.secondary.main} !important`,
         },
-    },
+    }),
     cover: {
         position: 'fixed',
         top: 0,
@@ -97,12 +95,12 @@ const styles = (theme) => ({
         left: 0,
     },
     textDense: {
-        marginTop: 0,
-        marginBottom: 0,
+        mt: 0,
+        mb: 0,
     },
-    picker: {
+    picker: (theme) => ({
         background: `${theme.palette.background.paper} !important`,
-    },
+    }),
     iconButton: {
         width: 16,
         height: 16,
@@ -113,7 +111,7 @@ const styles = (theme) => ({
         minWidth: 32,
         minHeight: 32,
     },
-});
+};
 class ColorPicker extends react_1.Component {
     constructor(props) {
         super(props);
@@ -121,7 +119,10 @@ class ColorPicker extends react_1.Component {
          * @private
          */
         this.handleClick = (e) => {
-            this.setState({ displayColorPicker: !this.state.displayColorPicker, anchorEl: this.state.displayColorPicker ? null : e.currentTarget });
+            this.setState({
+                displayColorPicker: !this.state.displayColorPicker,
+                anchorEl: this.state.displayColorPicker ? null : e.currentTarget,
+            });
         };
         /**
          * @private
@@ -189,43 +190,45 @@ 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, { className: this.props.classes.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", { className: this.props.classes.iconButton, style: { background: color } }))));
+            react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.iconButton), { background: color }) }))));
     }
     render() {
         const style = Object.assign({}, (this.props.style || {}));
         style.position = 'relative';
         const { color } = this.state;
-        return react_1.default.createElement("div", { style: style, 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", style: color ? { width: 'calc(100% - 80px)' } : { width: 'calc(100% - 56px)', marginRight: 8 }, label: this.props.label || this.props.name || 'color', value: color || '', margin: "dense", classes: { root: this.props.classes.textDense }, 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", className: this.props.classes.delButton, style: color ? {} : { opacity: 0, cursor: 'default' } },
+        return react_1.default.createElement(material_1.Box, { component: "div", style: style, 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 || 'color', 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({}, styles.delButton), (color ? undefined : { opacity: 0, cursor: 'default' })) },
                 react_1.default.createElement(icons_material_1.Delete, null)) : null,
-            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.swatch, this.props.disabled && this.props.classes.swatchDisabled), onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), style: {
-                    background: color ? undefined : 'transparent',
-                    border: color ? undefined : '1px dashed #ccc',
-                    boxSizing: 'border-box',
-                    marginTop: this.props.noInputField ? 0 : undefined,
-                } },
-                react_1.default.createElement("div", { className: this.props.classes.color, style: {
-                        background: ColorPicker.getColor(color),
-                        width: this.props.noInputField ? (this.props.barWidth || 16) : (this.props.barWidth || undefined),
-                    } })),
-            this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { classes: { paper: this.props.classes.popover, list: this.props.classes.popoverList }, anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
-                react_1.default.createElement(react_color_1.ChromePicker, { className: this.props.classes.picker, color: this.state.color || undefined, onChangeComplete: _color => this.handleChange(_color.rgb), styles: {
+            react_1.default.createElement("div", { onClick: e => !this.props.disabled && this.handleClick(e), title: i18n_1.default.t('ra_Select color'), style: 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 ? 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 || undefined) }) })),
+            this.state.displayColorPicker && !this.props.disabled ? react_1.default.createElement(material_1.Menu, { classes: { paper: styles.popover, list: styles.popoverList }, anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
+                react_1.default.createElement(react_color_1.ChromePicker
+                // todo
+                // sx={styles.picker}
+                , { 
+                    // todo
+                    // sx={styles.picker}
+                    color: this.state.color || undefined, onChangeComplete: _color => this.handleChange(_color.rgb), styles: {
                         default: {
                             picker: {
                                 backgroundColor: '#112233',
                             },
                         },
                     } }),
-                color && this.props.noInputField ? react_1.default.createElement(material_1.IconButton, { className: this.props.classes.closeButton, onClick: () => this.handleChange('') },
+                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, { className: this.props.classes.closeButton, onClick: () => this.handleClose() },
+                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);
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(ColorPicker);
+exports.default = ColorPicker;

package/Components/ComplexCron.d.ts

@@ -1,9 +1,40 @@
-import React from 'react';
+import React, { Component } from 'react';
+type CronNames = 'seconds' | 'minutes' | 'hours' | 'dates' | 'months' | 'dow';
+interface CronProps {
+    seconds: string | false | null;
+    minutes: string | null;
+    hours: string | null;
+    dates: string | null;
+    months: string | null;
+    dow: string | null;
+}
 interface ComplexCronProps {
     cronExpression: string;
     onChange: (cron: string) => void;
     language: ioBroker.Languages;
-    classes: Record<string, any>;
 }
-declare const _default: React.JSXElementConstructor<Omit<ComplexCronProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface ComplexCronState {
+    extended: boolean;
+    tab: number;
+    cron: string;
+    seconds?: string | false;
+    minutes?: string;
+    hours?: string;
+    dates?: string;
+    months?: string;
+    dow?: string;
+    modes: CronProps;
+}
+declare class ComplexCron extends Component<ComplexCronProps, ComplexCronState> {
+    constructor(props: ComplexCronProps);
+    static cron2state(cron: string): CronProps;
+    static state2cron(state: ComplexCronState | CronProps): string;
+    recalcCron(): void;
+    onToggle(i: boolean | number, type: CronNames, max: number): void;
+    getDigitsSelector(type: CronNames, max: number): React.JSX.Element[];
+    getPeriodsTab(type: CronNames, max: number): React.JSX.Element | null;
+    static convertCronToText(cron: string, lang: ioBroker.Languages): string;
+    setCronAttr(attr: CronNames, value: string, modes?: CronProps): void;
+    render(): React.JSX.Element;
+}
+export default ComplexCron;

package/Components/ComplexCron.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const i18n_1 = __importDefault(require("../i18n"));
 const cronText_1 = __importDefault(require("./SimpleCron/cronText"));
@@ -278,18 +277,18 @@ class ComplexCron extends react_1.Component {
         }
         const parts = convertMinusIntoArray(this.state[type], max);
         return [
-            react_1.default.createElement(material_1.Button, { key: "removeall", variant: "outlined", className: this.props.classes.numberButton, 
+            react_1.default.createElement(material_1.Button, { key: "removeall", variant: "outlined", style: styles.numberButton, 
                 // style={{paddingBottom: 20}}
                 color: "primary", onClick: () => this.onToggle(false, type, max) }, i18n_1.default.t('ra_Deselect all')),
             react_1.default.createElement(material_1.Button, { key: "addall", variant: "contained", 
                 // style={{paddingBottom: 20}}
-                className: this.props.classes.numberButton, color: "secondary", onClick: () => this.onToggle(true, type, max) }, i18n_1.default.t('ra_Select all')),
+                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) ||
                     (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', className: this.props.classes.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)),
+                    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)),
             ])),
         ];
     }
@@ -313,7 +312,7 @@ class ComplexCron extends react_1.Component {
             valueNumber = parseInt(value.replace('*/', ''), 10) || 1;
         }
         return react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.Select, { variant: "standard", className: this.props.classes.periodSelect, style: { verticalAlign: 'bottom' }, value: select, onChange: e => {
+            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;
                     if (e.target.value === 'every') {
@@ -392,25 +391,25 @@ 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", { className: this.props.classes.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", classes: { root: this.props.classes.appBar }, color: "secondary" },
-                react_1.default.createElement(material_1.Tabs, { value: this.state.tab, className: this.props.classes.appBar, color: "secondary", onChange: (active, _tab) => this.setState({ tab: _tab }) },
+            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') }),
                     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') }),
                     react_1.default.createElement(material_1.Tab, { id: "months", label: i18n_1.default.t('sc_months') }),
                     react_1.default.createElement(material_1.Tab, { id: "dow", label: i18n_1.default.t('sc_dows') }))),
-            tab === 0 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('seconds', 60)),
-            tab === 1 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('minutes', 60)),
-            tab === 2 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('hours', 24)),
-            tab === 3 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('dates', 31)),
-            tab === 4 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('months', 12)),
-            tab === 5 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('dow', 7)));
+            tab === 0 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('seconds', 60)),
+            tab === 1 && react_1.default.createElement("div", { style: styles.tabContent }, this.getPeriodsTab('minutes', 60)),
+            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)));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(ComplexCron);
+exports.default = ComplexCron;

package/Components/CustomModal.d.ts

@@ -17,9 +17,8 @@ interface CustomModalProps {
     toggleTranslation?: () => void;
     title?: string;
     progress?: boolean;
-    classes: Record<string, string>;
     textInput?: boolean;
     defaultValue?: string;
 }
-declare const _default: React.JSXElementConstructor<Omit<CustomModalProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+declare const CustomModal: (props: CustomModalProps) => React.JSX.Element;
+export default CustomModal;

package/Components/CustomModal.js

@@ -27,12 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
-const Utils_1 = __importDefault(require("./Utils"));
 const i18n_1 = __importDefault(require("../i18n"));
-const styles = (theme) => ({
+const Utils_1 = __importDefault(require("./Utils"));
+const styles = {
     modalDialog: {
         minWidth: 400,
         maxWidth: 800,
@@ -47,17 +46,17 @@ const styles = (theme) => ({
     content: {
         fontSize: 16,
     },
-    languageButton: {
+    languageButton: (theme) => ({
         position: 'absolute',
-        right: theme.spacing(1),
-        top: theme.spacing(1),
-    },
-    languageButtonActive: {
+        right: 8,
+        top: 8,
+    }),
+    languageButtonActive: (theme) => ({
         color: theme.palette.primary.main,
-    },
-});
+    }),
+};
 const CustomModal = (props) => {
-    const { open, toggleTranslation, noTranslation, title, fullWidth, help, maxWidth, progress, icon, applyDisabled, applyButton, classes, onClose, children, titleButtonApply, titleButtonClose, onApply, textInput, defaultValue, overflowHidden, } = props;
+    const { open, toggleTranslation, noTranslation, title, fullWidth, help, maxWidth, progress, icon, applyDisabled, applyButton, onClose, children, titleButtonApply, titleButtonClose, onApply, textInput, defaultValue, overflowHidden, } = props;
     const [value, setValue] = (0, react_1.useState)(defaultValue || '');
     (0, react_1.useEffect)(() => {
         setValue(defaultValue || '');
@@ -66,13 +65,13 @@ 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, classes: { paper: classes.modalDialog /* paper: classes.background */ } },
+    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, { className: classes.titleIcon }) : 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", className: Utils_1.default.clsx(classes.languageButton, noTranslation && classes.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
+            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(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, { className: Utils_1.default.clsx(overflowHidden ? classes.overflowHidden : null, classes.content), style: { paddingTop: 8 } },
+        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
             // className={className}
             , { 
@@ -86,4 +85,4 @@ const CustomModal = (props) => {
             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 = (0, styles_1.withStyles)(styles)(CustomModal);
+exports.default = CustomModal;

package/Components/FileBrowser.d.ts

@@ -4,9 +4,15 @@
  * MIT License
  *
  * */
-import React from 'react';
+import React, { Component } from 'react';
 import type { Connection } from '@iobroker/socket-client';
-import { ThemeName, ThemeType, Translate } from '../types';
+import { ThemeName, ThemeType, Translate, IobTheme } from '../types';
+export interface MetaACL extends ioBroker.ObjectACL {
+    file: number;
+}
+export interface MetaObject extends ioBroker.MetaObject {
+    acl: MetaACL;
+}
 export interface FileBrowserProps {
     /** The key to identify this component. */
     key?: string;
@@ -58,13 +64,119 @@ export interface FileBrowserProps {
     themeName?: ThemeName;
     /** Theme type. */
     themeType?: ThemeType;
+    /** Theme object. */
+    theme: IobTheme;
     /** Padding in pixels for folder levels */
     levelPadding?: number;
     restrictToFolder?: string;
-    classes: Record<string, string>;
-    modalEditOfAccessControl?: (obj: any) => React.JSX.Element | null;
+    modalEditOfAccessControl?: (obj: FileBrowserClass) => React.JSX.Element | null;
     allowNonRestricted?: boolean;
     showTypeSelector?: boolean;
 }
+export interface FolderOrFileItem {
+    id: string;
+    level: number;
+    name: string;
+    folder: boolean;
+    temp?: boolean;
+    size?: number | undefined;
+    ext?: string | null;
+    modified?: number;
+    title?: ioBroker.StringOrTranslated;
+    meta?: boolean;
+    from?: string;
+    ts?: number;
+    color?: string;
+    icon?: string;
+    acl?: ioBroker.EvaluatedFileACL | MetaACL;
+}
+export type Folders = Record<string, FolderOrFileItem[]>;
+interface FileBrowserState {
+    viewType: string;
+    folders: Folders;
+    filterEmpty: boolean;
+    expanded: string[];
+    currentDir: string;
+    expertMode: boolean;
+    addFolder: boolean;
+    uploadFile: boolean | 'dragging';
+    deleteItem: string;
+    viewer: string;
+    formatEditFile: string | null;
+    path: string;
+    selected: string;
+    errorText: string;
+    modalEditOfAccess: boolean;
+    backgroundImage: string | null;
+    queueLength: number;
+    loadAllFolders: boolean;
+    fileErrors: string[];
+    filterByType: string;
+    showTypesMenu: HTMLButtonElement | null;
+    restrictToFolder: string;
+    pathFocus: boolean;
+}
+export declare class FileBrowserClass extends Component<FileBrowserProps, FileBrowserState> {
+    private readonly imagePrefix;
+    private readonly levelPadding;
+    private mounted;
+    private suppressDeleteConfirm;
+    private browseList;
+    private browseListRunning;
+    private initialReadFinished;
+    private supportSubscribes;
+    private _tempTimeout;
+    private readonly limitToObjectID;
+    private readonly limitToPath;
+    private lastSelect;
+    private setOpacityTimer;
+    private cacheFoldersTimeout;
+    private foldersLoading;
+    private cacheFolders;
+    private readonly localStorage;
+    constructor(props: FileBrowserProps);
+    static getDerivedStateFromProps(props: FileBrowserProps, state: FileBrowserState): Partial<FileBrowserState> | null;
+    loadFolders(): Promise<void>;
+    scrollToSelected(): void;
+    componentDidMount(): Promise<void>;
+    componentWillUnmount(): void;
+    browseFoldersCb(foldersList: string[], newFoldersNotNull: Folders, cb: (folders: Folders) => void): void;
+    browseFolders(foldersList: string[], _newFolders?: Folders | null): Promise<Folders>;
+    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;
+    onFileChange: (id: string, fileName: string, size: number | null) => void;
+    changeFolder(e: React.MouseEvent<HTMLDivElement>, folder?: string): void | Promise<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;
+    static getEditFile(ext: string | null): boolean;
+    setStateBackgroundImage: () => void;
+    getStyleBackgroundImage: () => any;
+    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;
+    componentDidUpdate(): void;
+    findFirstFolder(id: string): string;
+    uploadFile(fileName: string, data: string): Promise<void>;
+    renderUpload(): React.JSX.Element[];
+    deleteRecursive(id: string): Promise<void>;
+    deleteItem(deleteItem: string): void;
+    renderDeleteDialog(): false | React.JSX.Element;
+    renderViewDialog(): React.JSX.Element;
+    renderError(): React.JSX.Element;
+    updateItemsAcl(info: FolderOrFileItem[]): void;
+    changeToPath(): void;
+    renderBreadcrumb(): React.JSX.Element;
+    renderPath(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
 declare const _default: (props: Record<string, any>) => React.JSX.Element;
 export default _default;