@iobroker/adapter-react-v5 5.0.8 → 6.0.1

package/Dialogs/SelectFile.js

@@ -11,10 +11,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
 const react_1 = __importDefault(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("../Components/Utils"));
 const i18n_1 = __importDefault(require("../i18n"));
 const FileBrowser_1 = __importDefault(require("../Components/FileBrowser"));
 const styles = {
@@ -26,7 +24,8 @@ const styles = {
         height: '95%',
     },
     dialogMobile: {
-        padding: 4,
+        // it is sx
+        padding: '4px',
         width: '100%',
         maxWidth: '100%',
         maxHeight: 'calc(100% - 16px)',
@@ -89,7 +88,7 @@ class DialogSelectFile extends react_1.default.Component {
                     react_1.default.createElement("span", { key: "selected" },
                         i18n_1.default.t('ra_Selected'),
                         "\u00A0"),
-                    react_1.default.createElement("span", { key: "id", className: this.props.classes.headerID }, this.state.selected),
+                    react_1.default.createElement("span", { key: "id", style: styles.headerID }, this.state.selected),
                 ];
             }
             else {
@@ -97,16 +96,16 @@ class DialogSelectFile extends react_1.default.Component {
                     react_1.default.createElement("span", { key: "selected" },
                         i18n_1.default.t('ra_Selected'),
                         "\u00A0"),
-                    react_1.default.createElement("span", { key: "id", className: this.props.classes.headerID }, i18n_1.default.t('%s items', this.state.selected.length)),
+                    react_1.default.createElement("span", { key: "id", style: styles.headerID }, i18n_1.default.t('%s items', this.state.selected.length)),
                 ];
             }
         }
         else {
             title = this.props.title || i18n_1.default.t('ra_Please select file...');
         }
-        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: false, classes: { paper: Utils_1.default.clsx(this.props.classes.dialog, this.props.classes.dialogMobile) }, fullWidth: true, open: !0, "aria-labelledby": "ar_dialog_selectfile_title" },
-            react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_selectfile_title", classes: { root: this.props.classes.titleRoot } }, title),
-            react_1.default.createElement(material_1.DialogContent, { className: Utils_1.default.clsx(this.props.classes.content, this.props.classes.contentMobile) },
+        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: false, sx: { '& .MuiDialog-paper': Object.assign(Object.assign({}, styles.dialog), styles.dialogMobile) }, fullWidth: true, open: !0, "aria-labelledby": "ar_dialog_selectfile_title" },
+            react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_selectfile_title", sx: { '&.MuiDialogTitle-root': styles.titleRoot } }, title),
+            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 })),
@@ -115,4 +114,4 @@ class DialogSelectFile extends react_1.default.Component {
                 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'))));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(DialogSelectFile);
+exports.default = DialogSelectFile;

package/Dialogs/SelectID.d.ts

@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import type Connection from '../Connection';
 import { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
-interface SelectIDFilters {
+export interface SelectIDFilters {
     id?: string;
     name?: string;
     room?: string;

package/Dialogs/SelectID.js

@@ -111,7 +111,7 @@ class DialogSelectID extends react_1.Component {
         return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: false, sx: {
                 '& .MuiDialog-paper': {
                     height: '95%',
-                    padding: 4,
+                    p: '4px',
                     width: '100%',
                     maxWidth: '100%',
                     maxHeight: 'calc(100% - 16px)',

package/Dialogs/SimpleCron.d.ts

@@ -6,7 +6,14 @@ interface DialogCronProps {
     cron?: string;
     cancel?: string;
     ok?: string;
-    classes: Record<string, string>;
 }
-declare const _default: React.JSXElementConstructor<Omit<DialogCronProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface DialogCronState {
+    cron: string;
+}
+declare class DialogSimpleCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps);
+    handleCancel(): void;
+    handleOk(): void;
+    render(): React.JSX.Element;
+}
+export default DialogSimpleCron;

package/Dialogs/SimpleCron.js

@@ -4,20 +4,12 @@ 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");
 const icons_material_1 = require("@mui/icons-material");
 const SimpleCron_1 = __importDefault(require("../Components/SimpleCron"));
 const i18n_1 = __importDefault(require("../i18n"));
 // Generates cron expression
 const styles = {
-    headerID: {
-        fontWeight: 'bold',
-        fontStyle: 'italic',
-    },
-    radio: {
-        display: 'inline-block',
-    },
     dialogPaper: {
         height: 'calc(100% - 96px)',
     },
@@ -47,7 +39,7 @@ class DialogSimpleCron extends react_1.default.Component {
         this.props.onClose();
     }
     render() {
-        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, classes: { paper: this.props.classes.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
+        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, sx: { '& .MuiDialog-paper': styles.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
             react_1.default.createElement(material_1.DialogTitle, { id: "cron-dialog-title" }, this.props.title || i18n_1.default.t('ra_Define CRON...')),
             react_1.default.createElement(material_1.DialogContent, { style: { height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(SimpleCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() })),
@@ -56,4 +48,4 @@ class DialogSimpleCron extends react_1.default.Component {
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleCancel(), color: "grey", startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(DialogSimpleCron);
+exports.default = DialogSimpleCron;

package/README.md

@@ -686,6 +686,76 @@ class JsonComponent extends ConfigGeneric {
 ...
 }
 ```
+## Migration from v5 to v6
+The main change is that the `withStyles` was removed. So you have to replace all `withStyles` with `sx` or `style` properties.
+
+You can read more about sx [here](https://mui.com/system/getting-started/the-sx-prop/).
+- Remove at start of the file `import { withStyles } from '@mui/styles';`
+- Replace at the very end of the file `export default withStyles(styles)(MyComponent);` with `export default MyComponent;`
+- Modify `const styles`:
+Before:
+```
+const styles: Record<string, any> = (theme: IobTheme) => ({
+   dialog: {
+      height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
+      padding: theme.spacing(1),
+   },
+   ...
+});
+```
+
+After:
+```
+const styles: Record<string, any> = {
+   dialog: (theme: IobTheme) => ({
+      height: `calc(100% - ${theme => theme.mixins.toolbar.minHeight}px)`,
+      p: 1,
+   }),
+};
+```
+
+- Modify `className`:
+Before: `<div className={this.props.classes.box}>`
+
+After: `<Box component="div" sx={styles.box}>`
+
+Before: `<div className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
+
+After: `<Box component="div" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>`
+Or if no one style is a function: `<Box component="div" sx={{ ...this.props.classes.box1, ...(condition ? this.props.classes.box2 : undefined) }}>`
+
+Do not use `sx` if the style is not dynamic (not a function). Use `style` instead.
+
+Be aware, that all paddings and margins are now in `theme.spacing(1)` format.
+So you have to replace all `padding: 8` with `padding: 1` or with `padding: '8px'`.
+
+The best practice is to replace `padding` with `p` and `margin` with `m`, so you will see immediately that it is a padding or margin for `sx` property.
+
+- Modify `classes`:
+  Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
+
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+
+  Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
+
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+
+  Before: `<ListItem classes={{ root: styles.listItem }} >`
+  
+  After: `<ListItem sx={{ '&.MuiListItem-root': styles.listItem }} >`
+
+  Before: `<Typography component="h2" variant="h6" classes={{ root: styles.typography }}>`
+  
+  After: `<Typography component="h2" variant="h6" sx={{ '&.MuiTypography-root': styles.typography }}>`
+
+  Before: `<Badge classes={{ 'badge': styles.expertBadge }}>`
+  
+  After: `<Badge sx={{ '& .MuiBadge-badge': styles.expertBadge }}>`
+
+  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.  
@@ -695,6 +765,10 @@ class JsonComponent extends ConfigGeneric {
 -->
 
 ## Changelog
+### 6.0.1 (2024-06-19)
+* (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
+
 ### 5.0.8 (2024-06-15)
 * (bluefox) Added `modulefederation.admin.config.js` for module federation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "5.0.8",
+  "version": "6.0.1",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -30,12 +30,11 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@iobroker/socket-client": "^2.4.18",
-    "@iobroker/types": "^6.0.4",
-    "@iobroker/js-controller-common": "^6.0.4",
-    "@iobroker/js-controller-common-db": "^6.0.4",
+    "@iobroker/types": "^6.0.5",
+    "@iobroker/js-controller-common": "^6.0.5",
+    "@iobroker/js-controller-common-db": "^6.0.5",
     "@mui/icons-material": "^5.15.20",
-    "@mui/material": "5.14.14",
-    "@mui/styles": "5.14.14",
+    "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.0",
     "@sentry/browser": "^8.9.2",
     "react-color": "^2.19.3",
@@ -43,6 +42,6 @@
     "react-cropper": "^2.3.3",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
-    "react-inlinesvg": "4.0.3"
+    "react-inlinesvg": "4.1.3"
   }
 }