@iobroker/adapter-react-v5 6.0.1 → 6.0.3

package/Components/FileBrowser.js

@@ -1231,7 +1231,7 @@ class FileBrowserClass extends react_1.Component {
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), style: styles.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
                 react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" })) : null,
-            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files') },
+            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files'), componentsProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
                     react_1.default.createElement(IconType, { fontSize: "small" }))) : null,
             this.state.showTypesMenu ? react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {

package/Components/Icon.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectIdIcon = exports.getSystemIcon = void 0;
+exports.getSystemIcon = getSystemIcon;
+exports.getSelectIdIcon = getSelectIdIcon;
+exports.default = Icon;
 const react_1 = __importDefault(require("react"));
 const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
 const icons_material_1 = require("@mui/icons-material");
@@ -49,7 +51,6 @@ function getSystemIcon(obj) {
     }
     return icon || null;
 }
-exports.getSystemIcon = getSystemIcon;
 function getSelectIdIcon(obj, imagePrefix) {
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -96,7 +97,6 @@ function getSelectIdIcon(obj, imagePrefix) {
     }
     return src || null;
 }
-exports.getSelectIdIcon = getSelectIdIcon;
 const REMOTE_SERVER = window.location.hostname.includes('iobroker.in');
 const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
 function Icon(props) {
@@ -135,4 +135,3 @@ function Icon(props) {
     }
     return null;
 }
-exports.default = Icon;

package/Components/ObjectBrowser.js

@@ -32,7 +32,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a, _ObjectBrowserClass_NON_EXPERT_NAMESPACES;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectBrowserClass = exports.ITEM_IMAGES = exports.getSelectIdIconFromObjects = void 0;
+exports.ObjectBrowserClass = exports.ITEM_IMAGES = void 0;
+exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
 /**
  * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
  *
@@ -916,7 +917,6 @@ function getSelectIdIconFromObjects(objects, id, imagePrefix) {
     }
     return src || null;
 }
-exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
 function applyFilter(item, filters, lang, objects, context, counter, customFilter, selectedTypes, _depth) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     _depth = _depth || 0;

package/Components/SimpleCron/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cron2state = void 0;
+exports.cron2state = cron2state;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const cronText_1 = __importDefault(require("./cronText"));
@@ -213,7 +213,6 @@ function cron2state(cron, force) {
     }
     return state;
 }
-exports.cron2state = cron2state;
 class SimpleCron extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -604,7 +603,7 @@ class SimpleCron extends react_1.default.Component {
     render() {
         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, { style: { width: '100%' }, value: this.state.cron, disabled: true })),
+                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 } }, (0, cronText_1.default)(this.state.cron, this.props.language || 'en')),
             react_1.default.createElement("div", null,
                 react_1.default.createElement(material_1.FormControl, { variant: "standard", style: Object.assign(Object.assign({}, styles.formControl), { marginLeft: 8, marginTop: 8 }) },

package/Components/TabContainer.d.ts

@@ -2,10 +2,13 @@ import React from 'react';
 interface TabContainerProps {
     elevation?: number;
     overflow?: string;
-    className?: string;
-    style?: React.CSSProperties;
+    styles?: {
+        root?: React.CSSProperties;
+        container?: React.CSSProperties;
+    };
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     tabIndex?: number;
+    /** The content of the component. */
     children: React.ReactNode;
 }
 declare function TabContainer(props: TabContainerProps): React.JSX.Element;

package/Components/TabContainer.js

@@ -18,7 +18,8 @@ const styles = {
     },
 };
 function TabContainer(props) {
-    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, className: props.className, style: Object.assign(Object.assign(Object.assign({}, styles.root), (props.overflow !== 'visible' ? styles.overflowHidden : undefined)), props.style), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
+    var _a;
+    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, style: Object.assign(Object.assign(Object.assign({}, styles.root), (((_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) || undefined)), (props.overflow !== 'visible' ? styles.overflowHidden : undefined)), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
         react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", sx: styles.container }, props.children));
 }
 exports.default = TabContainer;

package/Components/TabContent.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 interface TabContentProps {
-    overflow?: string;
-    children: React.ReactNode;
+    /** The content of the component. */
+    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];
+    /** Overflow behavior */
+    overflow?: 'auto';
+    style?: React.CSSProperties;
 }
 declare function TabContent(props: TabContentProps): React.JSX.Element;
 export default TabContent;

package/Components/TabContent.js

@@ -16,6 +16,6 @@ const styles = {
     },
 };
 function TabContent(props) {
-    return react_1.default.createElement(material_1.Grid, { item: true, sx: Object.assign(Object.assign({}, styles.root), (props.overflow === 'auto' ? styles.overflowAuto : undefined)) }, props.children);
+    return react_1.default.createElement(material_1.Grid, { item: true, sx: Object.assign(Object.assign(Object.assign({}, styles.root), ((props === null || props === void 0 ? void 0 : props.style) || undefined)), (props.overflow === 'auto' ? styles.overflowAuto : undefined)) }, props.children);
 }
 exports.default = TabContent;

package/Components/ToggleThemeMenu.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToggleThemeMenu;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
@@ -15,4 +16,3 @@ function ToggleThemeMenu({ themeName, toggleTheme, t, className, style, size, })
                 themeName === 'colored' && react_1.default.createElement(icons_material_1.Brightness6, { className: className }),
                 themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && react_1.default.createElement(icons_material_1.Brightness7, { className: className }))));
 }
-exports.default = ToggleThemeMenu;

package/Dialogs/SelectFile.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Connection } from '@iobroker/socket-client';
+import { IobTheme } from '../types';
 interface DialogSelectFileProps {
     /** where to store settings in localStorage * @property {string} [title] The dialog title; default: Please select object ID... (translated) */
     dialogName?: string;
@@ -21,6 +22,8 @@ interface DialogSelectFileProps {
     themeName?: string;
     /** Theme type. */
     themeType?: 'dark' | 'light';
+    /** Theme object. */
+    theme: IobTheme;
     /** The selected IDs. */
     selected?: string | string[];
     /** The ok button text; default: OK (translated) */

package/Dialogs/SelectFile.js

@@ -108,7 +108,7 @@ class DialogSelectFile extends react_1.default.Component {
             react_1.default.createElement(material_1.DialogContent, { style: Object.assign(Object.assign({}, styles.content), styles.contentMobile) },
                 react_1.default.createElement(FileBrowser_1.default, { ready: true, imagePrefix: this.props.imagePrefix || this.props.prefix || '../', allowUpload: !!this.props.allowUpload, allowDownload: this.props.allowDownload !== false, allowCreateFolder: !!this.props.allowCreateFolder, allowDelete: !!this.props.allowDelete, allowView: this.props.allowView !== false, showViewTypeButton: this.props.showViewTypeButton !== false, showToolbar: this.props.showToolbar !== false, limitPath: this.props.limitPath, filterFiles: this.props.filterFiles, filterByType: this.props.filterByType, selected: this.props.selected, restrictToFolder: this.props.restrictToFolder, allowNonRestricted: this.props.allowNonRestricted, onSelect: (selected, isDoubleClick, isFolder) => {
                         this.setState({ selected: Array.isArray(selected) ? selected : [selected] }, () => isDoubleClick && (!this.props.selectOnlyFolders || isFolder) && this.handleOk());
-                    }, t: this.props.t || i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, themeType: this.props.themeType, themeName: this.props.themeName, showExpertButton: this.props.showExpertButton, expertMode: this.props.expertMode, showTypeSelector: this.props.showTypeSelector })),
+                    }, t: this.props.t || i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, themeType: this.props.themeType, themeName: this.props.themeName, theme: this.props.theme, showExpertButton: this.props.showExpertButton, expertMode: this.props.expertMode, showTypeSelector: this.props.showTypeSelector })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleOk(), startIcon: react_1.default.createElement(icons_material_1.Check, null), disabled: !this.state.selected.length, color: "primary" }, this.props.ok || i18n_1.default.t('ra_Ok')),
                 react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.handleCancel(), startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));

package/Dialogs/SelectID.d.ts

@@ -7,6 +7,7 @@
 import React, { Component } from 'react';
 import type Connection from '../Connection';
 import { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
+import { IobTheme } from '../types';
 export interface SelectIDFilters {
     id?: string;
     name?: string;
@@ -32,6 +33,8 @@ interface DialogSelectIDProps {
     notEditable?: boolean;
     themeName?: string;
     themeType?: string;
+    /** The theme object */
+    theme?: IobTheme;
     customFilter?: ObjectBrowserCustomFilter;
     selected?: string | string[];
     ok?: string;

package/Dialogs/SelectID.js

@@ -133,7 +133,7 @@ class DialogSelectID extends react_1.Component {
                     // style={{ width: '100%', height: '100%' }}
                     columns: this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val'], types: this.props.types ? (Array.isArray(this.props.types) ? this.props.types : [this.props.types]) : ['state'], root: this.props.root, t: i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, selected: this.state.selected, multiSelect: this.props.multiSelect, notEditable: this.props.notEditable === undefined ? true : this.props.notEditable, 
                     // name={this.state.name}
-                    themeName: this.props.themeName, themeType: this.props.themeType, customFilter: this.props.customFilter, onFilterChanged: (filterConfig) => {
+                    themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, customFilter: this.props.customFilter, onFilterChanged: (filterConfig) => {
                         this.filters = filterConfig;
                         (window._localStorage || window.localStorage).setItem(this.dialogName, JSON.stringify(filterConfig));
                     }, onSelect: (_selected, name, isDouble) => {

package/LegacyConnection.d.ts

@@ -4,7 +4,6 @@
  * MIT License
  *
  * */
-/// <reference types="node" />
 import { type HostInfo } from '@iobroker/js-controller-common-db/build/esm/lib/common/tools';
 import { type FilteredNotificationInformation } from '@iobroker/js-controller-common/build/esm/lib/common/notificationHandler';
 declare global {

package/LegacyConnection.js

@@ -6,7 +6,8 @@
  *
  * */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pattern2RegEx = exports.ERRORS = exports.PROGRESS = void 0;
+exports.ERRORS = exports.PROGRESS = void 0;
+exports.pattern2RegEx = pattern2RegEx;
 /** Possible progress states. */
 exports.PROGRESS = {
     /** The socket is connecting. */
@@ -95,7 +96,6 @@ function pattern2RegEx(pattern) {
         .replace(/\*/g, '.*');
     return (startsWithWildcard ? '' : '^') + pattern + (endsWithWildcard ? '' : '$');
 }
-exports.pattern2RegEx = pattern2RegEx;
 class Connection {
     constructor(props) {
         this.systemLang = 'en';

package/README.md

@@ -752,20 +752,26 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
   
   After: `<Badge sx={{ '& .MuiBadge-badge': styles.expertBadge }}>`
 
+  Before: `<Tab classes={{ selected: styles.selected }} />`
+  
+  After: `<Tab sx={{ '&.Mui-selected': styles.selected }} />`
+
   Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: styles.tooltip }}>`
   
   After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`
   Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
-## Warning
-`react-inlinesvg@4.0.5` cannot be used. Use `react-inlinesvg@4.0.3` instead.  
+  Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
+
+  After. `<AccordionSummary sx={{ '&.MuiAccordionSummary-root': styles.rootStyle, '& .MuiAccordionSummary-content': styles.content }}>`
+
 <!--
 	Placeholder for the next version (at the beginning of the line):
 	### **WORK IN PROGRESS**
 -->
 
 ## Changelog
-### 6.0.1 (2024-06-19)
+### 6.0.3 (2024-06-21)
 * (bluefox) Removed the usage of `withStyles` in favor of `sx` and `style` properties (see [Migration from v5 to v6](#migration-from-v5-to-v6)
 * (bluefox) (BREAKING) Higher version of `@mui/material` (5.15.20) is used
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -36,12 +36,12 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.0",
-    "@sentry/browser": "^8.9.2",
+    "@sentry/browser": "^8.10.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
-    "react-inlinesvg": "4.1.3"
+    "react-inlinesvg": "^4.1.3"
   }
 }