@iobroker/adapter-react-v5 6.0.13 → 6.0.14

package/Components/Utils.js

@@ -1199,7 +1199,7 @@ class Utils {
         if (window.vendorPrefix && window.vendorPrefix !== '@@vendorPrefix@@') {
             return 'light';
         }
-        themeName = themeName || (window._localStorage || window.localStorage).getItem('App.themeName');
+        themeName = themeName || Utils.getThemeName();
         return themeName === 'dark' || themeName === 'blue' ? 'dark' : 'light';
     }
     /**

package/GenericApp.js

@@ -299,7 +299,7 @@ class GenericApp extends Router_1.default {
                         console.log('Sentry initialized');
                     }
                     // read UUID and init sentry with it.
-                    // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
+                    // for backward compatibility it will be processed separately from the above logic: some adapters could still have this.sentryDSN as undefined
                     if (!this.sentryInited && sentryEnabled) {
                         this.sentryInited = true;
                         waitPromise = this.socket.getObject('system.meta.uuid')

package/README.md

@@ -699,6 +699,11 @@ const styles: Record<string, any> = (theme: IobTheme) => ({
    dialog: {
       height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
       padding: theme.spacing(1),
+      margin: theme.spacing(2),
+      gap: 5,
+      borderRadius: 5,
+      marginLeft: 10, // marginTop, marginRight, marginBottom
+      paddingLeft: 10, // paddingTop, paddingRight, paddingBottom
    },
    ...
 });
@@ -709,7 +714,12 @@ After:
 const styles: Record<string, any> = {
    dialog: (theme: IobTheme) => ({
       height: `calc(100% - ${theme => theme.mixins.toolbar.minHeight}px)`,
-      p: 1,
+      p: 1, // or 8px, padding is OK too
+      m: '16px', // or 2, margin is OK too
+      gap: '5px',
+      borderRadius: '5px',
+      ml: '10px', // mt, mr, mb, but marginLeft, marginRight, marginBottom is OK too
+      pl: '10px', // pt, pr, pb, but paddingTop, paddingRight, paddingBottom is OK too
    }),
 };
 ```
@@ -717,11 +727,11 @@ const styles: Record<string, any> = {
 - Modify `className`:
 Before: `<div className={this.props.classes.box}>`
 
-After: `<Box component="div" sx={styles.box}>`
+After: `<Box sx={styles.box}>`
 
-Before: `<div className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
+Before: `<span 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)}>`
+After: `<Box component="span" 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.
@@ -759,7 +769,7 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
   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')} elr>`
+  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
   Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
 
@@ -771,6 +781,9 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.0.14 (2024-07-07)
+* (bluefox) Corrected theme type selection
+
 ### 6.0.13 (2024-06-30)
 * (bluefox) Corrected color picker
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.13",
+  "version": "6.0.14",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -30,13 +30,13 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@iobroker/socket-client": "^2.4.18",
-    "@iobroker/types": "^6.0.6-alpha.0-20240624-92c3310c8",
-    "@iobroker/js-controller-common": "^6.0.5",
-    "@iobroker/js-controller-common-db": "^6.0.5",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
-    "@mui/x-date-pickers": "^7.8.0",
-    "@sentry/browser": "^8.13.0",
+    "@iobroker/types": "^6.0.7-alpha.0-20240702-5c723a4ac",
+    "@iobroker/js-controller-common": "^6.0.6",
+    "@iobroker/js-controller-common-db": "^6.0.6",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@mui/x-date-pickers": "^7.9.0",
+    "@sentry/browser": "^8.15.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",