@iobroker/adapter-react-v5 8.0.9 → 8.0.11

package/README.md

@@ -691,6 +691,9 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 8.0.11 (2025-11-09)
+- (@GermanBluefox) Fixing ref for Icon and TabContent components
+
 ### 8.0.9 (2025-11-02)
 - (@GermanBluefox) Added possibility to import objects from text
 - (@GermanBluefox) Object browser was split into a few files

package/build/Components/Icon.d.ts

@@ -27,9 +27,7 @@ export interface IconProps {
     styleUTF8?: React.CSSProperties;
     /** On error handler */
     onError?: ReactEventHandler<HTMLImageElement>;
-    /** Reference to image */
-    ref?: React.RefObject<HTMLImageElement>;
     /** Alternative text for image */
     alt?: string;
 }
-export declare function Icon(props: IconProps): React.JSX.Element | null;
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement | HTMLImageElement>>;

package/build/Components/Icon.js

@@ -3,7 +3,6 @@ import SVG from 'react-inlinesvg';
 import { Box } from '@mui/material';
 import { SettingsApplications as IconSystem, Photo as IconPhoto, SupervisedUserCircle as IconGroup, PersonOutlined as IconUser, Router as IconHost, Wifi as IconConnection, Info as IconInfo, Description as IconMeta, } from '@mui/icons-material';
 import { IconAlias } from '../icons/IconAlias';
-import { Utils } from './Utils';
 /**
  * Get icon by object type (state, channel, device, ...).
  *
@@ -67,7 +66,7 @@ export function getSelectIdIcon(obj, imagePrefix) {
                     if (obj.type === 'instance' || obj.type === 'adapter') {
                         src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
                     }
-                    else if (obj._id && obj._id.startsWith('system.adapter.')) {
+                    else if (obj._id?.startsWith('system.adapter.')) {
                         instance = obj._id.split('.', 3);
                         if (cIcon[0] === '/') {
                             instance[2] += cIcon;
@@ -102,18 +101,18 @@ export function getSelectIdIcon(obj, imagePrefix) {
 }
 const REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');
 const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
-export function Icon(props) {
+export const Icon = React.forwardRef(function IconComponent(props, ref) {
     if (props.src) {
         if (typeof props.src === 'string') {
             if (props.src.length < 3) {
                 // utf-8 char
                 if (props.sx) {
-                    return (React.createElement(Box, { component: "span", sx: props.sx, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: Utils.clsx(props.className, 'iconOwn') }, props.src));
+                    return (React.createElement(Box, { component: "span", sx: props.sx, ref: ref, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: props.className ? `iconOwn ${props.className}` : 'iconOwn' }, props.src));
                 }
-                return (React.createElement("span", { title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: Utils.clsx(props.className, 'iconOwn') }, props.src));
+                return (React.createElement("span", { ref: ref, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: props.className ? `iconOwn ${props.className}` : 'iconOwn' }, props.src));
             }
             if (props.src.startsWith('data:image/svg')) {
-                return (React.createElement(SVG, { title: props.title || undefined, src: props.src, className: Utils.clsx(props.className, 'iconOwn'), width: props.style?.width || 28, height: props.style?.height || props.style?.width || 28, style: props.style || undefined }));
+                return (React.createElement(SVG, { title: props.title || undefined, src: props.src, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', width: props.style?.width || 28, height: props.style?.height || props.style?.width || 28, style: props.style || undefined }));
             }
             if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
                 let src = props.src;
@@ -124,17 +123,18 @@ export function Icon(props) {
                     src = REMOTE_PREFIX + src;
                 }
                 if (props.sx) {
-                    return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
+                    return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: ref, onError: e => props.onError?.(e) }));
                 }
-                return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
+                return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: ref, onError: e => props.onError?.(e) }));
             }
             if (props.sx) {
-                return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
+                return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: props.src, alt: props.alt || undefined, ref: ref, onError: props.onError }));
             }
-            return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
+            return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: props.className ? `iconOwn ${props.className}` : 'iconOwn', src: props.src, alt: props.alt || undefined, ref: ref, onError: props.onError }));
         }
         return props.src;
     }
     return null;
-}
+});
+Icon.displayName = 'Icon';
 //# sourceMappingURL=Icon.js.map

package/build/Components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"./src/","sources":["Components/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactEventHandler } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { Box } from '@mui/material';\n\nimport {\n    SettingsApplications as IconSystem,\n    Photo as IconPhoto,\n    SupervisedUserCircle as IconGroup,\n    PersonOutlined as IconUser,\n    Router as IconHost,\n    Wifi as IconConnection,\n    Info as IconInfo,\n    Description as IconMeta,\n} from '@mui/icons-material';\n\nimport { IconAlias } from '../icons/IconAlias';\nimport { Utils } from './Utils';\n\n/**\n * Get icon by object type (state, channel, device, ...).\n *\n * @param obj Object\n */\nexport function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null {\n    let icon;\n    const id = obj?._id;\n\n    if (!id) {\n        return null;\n    }\n\n    // system or design has special icons\n    if (id.startsWith('_design/') || id === 'system') {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === '0_userdata' || id === '0_userdata.0') {\n        icon = <IconPhoto className=\"iconOwn\" />;\n    } else if (id === 'alias' || id === 'alias.0') {\n        icon = <IconAlias className=\"iconOwn\" />;\n    } else if (id === 'system.adapter') {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === 'system.group') {\n        icon = <IconGroup className=\"iconOwn\" />;\n    } else if (id === 'system.user') {\n        icon = <IconUser className=\"iconOwn\" />;\n    } else if (id === 'system.host') {\n        icon = <IconHost className=\"iconOwn\" />;\n    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {\n        icon = <IconConnection className=\"iconOwn\" />;\n    } else if (id.endsWith('.info')) {\n        icon = <IconInfo className=\"iconOwn\" />;\n    } else if (obj?.type === 'meta') {\n        icon = <IconMeta className=\"iconOwn\" />;\n    }\n\n    return icon || null;\n}\n\n/**\n * Get icon from the object.\n *\n * @param obj Object\n * @param imagePrefix Prefix for image\n */\nexport function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null {\n    imagePrefix = imagePrefix || '.'; // http://localhost:8081';\n    let src = '';\n    const common = obj?.common;\n\n    if (common) {\n        const cIcon = common.icon;\n        if (cIcon) {\n            if (!cIcon.startsWith('data:image/')) {\n                if (cIcon.includes('.')) {\n                    let instance;\n                    if (obj.type === 'instance' || obj.type === 'adapter') {\n                        src = `${imagePrefix}/adapter/${common.name as string}/${cIcon}`;\n                    } else if (obj._id && obj._id.startsWith('system.adapter.')) {\n                        instance = obj._id.split('.', 3);\n                        if (cIcon[0] === '/') {\n                            instance[2] += cIcon;\n                        } else {\n                            instance[2] += `/${cIcon}`;\n                        }\n                        src = `${imagePrefix}/adapter/${instance[2]}`;\n                    } else {\n                        instance = obj._id.split('.', 2);\n                        if (cIcon[0] === '/') {\n                            instance[0] += cIcon;\n                        } else {\n                            instance[0] += `/${cIcon}`;\n                        }\n                        src = `${imagePrefix}/adapter/${instance[0]}`;\n                    }\n                } else {\n                    return null;\n                }\n            } else {\n                // base 64 image\n                src = cIcon;\n            }\n        }\n    }\n\n    return src || null;\n}\n\nexport interface IconProps {\n    /** URL, UTF-8 character, or svg code (data:image/svg...) */\n    src: string | React.JSX.Element | null | undefined;\n    /** Class name */\n    className?: string;\n    /** Style for image */\n    style?: React.CSSProperties;\n    /** Styles for mui */\n    sx?: Record<string, any>;\n    /** Tooltip */\n    title?: string;\n    /** Styles for utf-8 characters */\n    styleUTF8?: React.CSSProperties;\n    /** On error handler */\n    onError?: ReactEventHandler<HTMLImageElement>;\n    /** Reference to image */\n    ref?: React.RefObject<HTMLImageElement>;\n    /** Alternative text for image */\n    alt?: string;\n}\n\nconst REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');\nconst REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);\n\nexport function Icon(props: IconProps): React.JSX.Element | null {\n    if (props.src) {\n        if (typeof props.src === 'string') {\n            if (props.src.length < 3) {\n                // utf-8 char\n                if (props.sx) {\n                    return (\n                        <Box\n                            component=\"span\"\n                            sx={props.sx}\n                            title={props.title || undefined}\n                            style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\n                            className={Utils.clsx(props.className, 'iconOwn')}\n                        >\n                            {props.src}\n                        </Box>\n                    );\n                }\n                return (\n                    <span\n                        title={props.title || undefined}\n                        style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\n                        className={Utils.clsx(props.className, 'iconOwn')}\n                    >\n                        {props.src}\n                    </span>\n                );\n            }\n            if (props.src.startsWith('data:image/svg')) {\n                return (\n                    <SVG\n                        title={props.title || undefined}\n                        src={props.src}\n                        className={Utils.clsx(props.className, 'iconOwn')}\n                        width={props.style?.width || 28}\n                        height={props.style?.height || props.style?.width || 28}\n                        style={props.style || undefined}\n                    />\n                );\n            }\n            if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {\n                let src = props.src;\n                if (src.startsWith('./')) {\n                    src = REMOTE_PREFIX + src.substring(2);\n                } else if (!src.startsWith('/')) {\n                    src = REMOTE_PREFIX + src;\n                }\n\n                if (props.sx) {\n                    return (\n                        <Box\n                            component=\"img\"\n                            sx={props.sx}\n                            title={props.title || undefined}\n                            style={props.style || undefined}\n                            className={Utils.clsx(props.className, 'iconOwn')}\n                            src={`https://remote-files.iobroker.in${src}`}\n                            alt={props.alt || undefined}\n                            ref={props.ref}\n                            onError={e => props.onError && props.onError(e)}\n                        />\n                    );\n                }\n                return (\n                    <img\n                        title={props.title || undefined}\n                        style={props.style || undefined}\n                        className={Utils.clsx(props.className, 'iconOwn')}\n                        src={`https://remote-files.iobroker.in${src}`}\n                        alt={props.alt || undefined}\n                        ref={props.ref}\n                        onError={e => props.onError && props.onError(e)}\n                    />\n                );\n            }\n            if (props.sx) {\n                return (\n                    <Box\n                        component=\"img\"\n                        sx={props.sx}\n                        title={props.title || undefined}\n                        style={props.style || undefined}\n                        className={Utils.clsx(props.className, 'iconOwn')}\n                        src={props.src}\n                        alt={props.alt || undefined}\n                        ref={props.ref}\n                        onError={props.onError}\n                    />\n                );\n            }\n            return (\n                <img\n                    title={props.title || undefined}\n                    style={props.style || undefined}\n                    className={Utils.clsx(props.className, 'iconOwn')}\n                    src={props.src}\n                    alt={props.alt || undefined}\n                    ref={props.ref}\n                    onError={props.onError}\n                />\n            );\n        }\n\n        return props.src;\n    }\n    return null;\n}\n"]}
+{"version":3,"file":"Icon.js","sourceRoot":"./src/","sources":["Components/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactEventHandler } from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { Box } from '@mui/material';\n\nimport {\n    SettingsApplications as IconSystem,\n    Photo as IconPhoto,\n    SupervisedUserCircle as IconGroup,\n    PersonOutlined as IconUser,\n    Router as IconHost,\n    Wifi as IconConnection,\n    Info as IconInfo,\n    Description as IconMeta,\n} from '@mui/icons-material';\n\nimport { IconAlias } from '../icons/IconAlias';\n\n/**\n * Get icon by object type (state, channel, device, ...).\n *\n * @param obj Object\n */\nexport function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null {\n    let icon;\n    const id = obj?._id;\n\n    if (!id) {\n        return null;\n    }\n\n    // system or design has special icons\n    if (id.startsWith('_design/') || id === 'system') {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === '0_userdata' || id === '0_userdata.0') {\n        icon = <IconPhoto className=\"iconOwn\" />;\n    } else if (id === 'alias' || id === 'alias.0') {\n        icon = <IconAlias className=\"iconOwn\" />;\n    } else if (id === 'system.adapter') {\n        icon = <IconSystem className=\"iconOwn\" />;\n    } else if (id === 'system.group') {\n        icon = <IconGroup className=\"iconOwn\" />;\n    } else if (id === 'system.user') {\n        icon = <IconUser className=\"iconOwn\" />;\n    } else if (id === 'system.host') {\n        icon = <IconHost className=\"iconOwn\" />;\n    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {\n        icon = <IconConnection className=\"iconOwn\" />;\n    } else if (id.endsWith('.info')) {\n        icon = <IconInfo className=\"iconOwn\" />;\n    } else if (obj?.type === 'meta') {\n        icon = <IconMeta className=\"iconOwn\" />;\n    }\n\n    return icon || null;\n}\n\n/**\n * Get icon from the object.\n *\n * @param obj Object\n * @param imagePrefix Prefix for image\n */\nexport function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null {\n    imagePrefix = imagePrefix || '.'; // http://localhost:8081';\n    let src = '';\n    const common = obj?.common;\n\n    if (common) {\n        const cIcon = common.icon;\n        if (cIcon) {\n            if (!cIcon.startsWith('data:image/')) {\n                if (cIcon.includes('.')) {\n                    let instance;\n                    if (obj.type === 'instance' || obj.type === 'adapter') {\n                        src = `${imagePrefix}/adapter/${common.name as string}/${cIcon}`;\n                    } else if (obj._id?.startsWith('system.adapter.')) {\n                        instance = obj._id.split('.', 3);\n                        if (cIcon[0] === '/') {\n                            instance[2] += cIcon;\n                        } else {\n                            instance[2] += `/${cIcon}`;\n                        }\n                        src = `${imagePrefix}/adapter/${instance[2]}`;\n                    } else {\n                        instance = obj._id.split('.', 2);\n                        if (cIcon[0] === '/') {\n                            instance[0] += cIcon;\n                        } else {\n                            instance[0] += `/${cIcon}`;\n                        }\n                        src = `${imagePrefix}/adapter/${instance[0]}`;\n                    }\n                } else {\n                    return null;\n                }\n            } else {\n                // base 64 image\n                src = cIcon;\n            }\n        }\n    }\n\n    return src || null;\n}\n\nexport interface IconProps {\n    /** URL, UTF-8 character, or svg code (data:image/svg...) */\n    src: string | React.JSX.Element | null | undefined;\n    /** Class name */\n    className?: string;\n    /** Style for image */\n    style?: React.CSSProperties;\n    /** Styles for mui */\n    sx?: Record<string, any>;\n    /** Tooltip */\n    title?: string;\n    /** Styles for utf-8 characters */\n    styleUTF8?: React.CSSProperties;\n    /** On error handler */\n    onError?: ReactEventHandler<HTMLImageElement>;\n    /** Alternative text for image */\n    alt?: string;\n}\n\nconst REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');\nconst REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);\n\nexport const Icon = React.forwardRef<HTMLImageElement | HTMLSpanElement, IconProps>(\n    function IconComponent(props, ref): React.JSX.Element | null {\n        if (props.src) {\n            if (typeof props.src === 'string') {\n                if (props.src.length < 3) {\n                    // utf-8 char\n                    if (props.sx) {\n                        return (\n                            <Box\n                                component=\"span\"\n                                sx={props.sx}\n                                ref={ref as React.Ref<HTMLSpanElement>}\n                                title={props.title || undefined}\n                                style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\n                                className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                            >\n                                {props.src}\n                            </Box>\n                        );\n                    }\n                    return (\n                        <span\n                            ref={ref as React.Ref<HTMLSpanElement>}\n                            title={props.title || undefined}\n                            style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\n                            className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                        >\n                            {props.src}\n                        </span>\n                    );\n                }\n                if (props.src.startsWith('data:image/svg')) {\n                    return (\n                        <SVG\n                            title={props.title || undefined}\n                            src={props.src}\n                            className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                            width={props.style?.width || 28}\n                            height={props.style?.height || props.style?.width || 28}\n                            style={props.style || undefined}\n                        />\n                    );\n                }\n                if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {\n                    let src = props.src;\n                    if (src.startsWith('./')) {\n                        src = REMOTE_PREFIX + src.substring(2);\n                    } else if (!src.startsWith('/')) {\n                        src = REMOTE_PREFIX + src;\n                    }\n\n                    if (props.sx) {\n                        return (\n                            <Box\n                                component=\"img\"\n                                sx={props.sx}\n                                title={props.title || undefined}\n                                style={props.style || undefined}\n                                className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                                src={`https://remote-files.iobroker.in${src}`}\n                                alt={props.alt || undefined}\n                                ref={ref as React.Ref<HTMLImageElement>}\n                                onError={e => props.onError?.(e)}\n                            />\n                        );\n                    }\n                    return (\n                        <img\n                            title={props.title || undefined}\n                            style={props.style || undefined}\n                            className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                            src={`https://remote-files.iobroker.in${src}`}\n                            alt={props.alt || undefined}\n                            ref={ref as React.Ref<HTMLImageElement>}\n                            onError={e => props.onError?.(e)}\n                        />\n                    );\n                }\n                if (props.sx) {\n                    return (\n                        <Box\n                            component=\"img\"\n                            sx={props.sx}\n                            title={props.title || undefined}\n                            style={props.style || undefined}\n                            className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                            src={props.src}\n                            alt={props.alt || undefined}\n                            ref={ref as React.Ref<HTMLImageElement>}\n                            onError={props.onError}\n                        />\n                    );\n                }\n                return (\n                    <img\n                        title={props.title || undefined}\n                        style={props.style || undefined}\n                        className={props.className ? `iconOwn ${props.className}` : 'iconOwn'}\n                        src={props.src}\n                        alt={props.alt || undefined}\n                        ref={ref as React.Ref<HTMLImageElement>}\n                        onError={props.onError}\n                    />\n                );\n            }\n\n            return props.src;\n        }\n        return null;\n    },\n);\n\nIcon.displayName = 'Icon';\n"]}

package/build/Components/TabContent.d.ts

@@ -7,5 +7,5 @@ interface TabContentProps {
     style?: React.CSSProperties;
     ref?: React.RefObject<HTMLDivElement>;
 }
-export declare function TabContent(props: TabContentProps): React.JSX.Element;
+export declare const TabContent: React.ForwardRefExoticComponent<Omit<TabContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/build/Components/TabContent.js

@@ -10,11 +10,11 @@ const styles = {
         overflow: 'auto',
     },
 };
-export function TabContent(props) {
+export const TabContent = React.forwardRef(function TabContentComponent(props, ref) {
     return (React.createElement(Grid2, { sx: {
             ...styles.root,
             ...(props?.style || undefined),
             ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),
-        }, ref: props.ref }, props.children));
-}
+        }, ref: ref }, props.children));
+});
 //# sourceMappingURL=TabContent.js.map

package/build/Components/TabContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabContent.js","sourceRoot":"./src/","sources":["Components/TabContent.tsx"],"names":[],"mappings":"AAAA,uHAAuH;AACvH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,MAAM,GAAwC;IAChD,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB;IACD,YAAY,EAAE;QACV,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC;AAWF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC7C,OAAO,CACH,oBAAC,KAAK,IACF,EAAE,EAAE;YACA,GAAG,MAAM,CAAC,IAAI;YACd,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,SAAS,CAAC;YAC9B,GAAG,CAAC,KAAK,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;SACnE,EACD,GAAG,EAAE,KAAK,CAAC,GAAG,IAEb,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC","sourcesContent":["// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined\nimport React from 'react';\nimport { Grid2 } from '@mui/material';\n\nconst styles: Record<string, React.CSSProperties> = {\n    root: {\n        height: '100%',\n        overflow: 'hidden',\n    },\n    overflowAuto: {\n        overflow: 'auto',\n    },\n};\n\ninterface TabContentProps {\n    /** The content of the component. */\n    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];\n    /** Overflow behavior */\n    overflow?: 'auto';\n    style?: React.CSSProperties;\n    ref?: React.RefObject<HTMLDivElement>;\n}\n\nexport function TabContent(props: TabContentProps): React.JSX.Element {\n    return (\n        <Grid2\n            sx={{\n                ...styles.root,\n                ...(props?.style || undefined),\n                ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),\n            }}\n            ref={props.ref}\n        >\n            {props.children}\n        </Grid2>\n    );\n}\n"]}
+{"version":3,"file":"TabContent.js","sourceRoot":"./src/","sources":["Components/TabContent.tsx"],"names":[],"mappings":"AAAA,uHAAuH;AACvH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,MAAM,GAAwC;IAChD,IAAI,EAAE;QACF,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACrB;IACD,YAAY,EAAE;QACV,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC;AAUF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACtC,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACnC,OAAO,CACH,oBAAC,KAAK,IACF,EAAE,EAAE;YACA,GAAG,MAAM,CAAC,IAAI;YACd,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,SAAS,CAAC;YAC9B,GAAG,CAAC,KAAK,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;SACnE,EACD,GAAG,EAAE,GAAG,IAEP,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC,CACJ,CAAC","sourcesContent":["// please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined\nimport React from 'react';\nimport { Grid2 } from '@mui/material';\nimport { IconProps } from './Icon';\n\nconst styles: Record<string, React.CSSProperties> = {\n    root: {\n        height: '100%',\n        overflow: 'hidden',\n    },\n    overflowAuto: {\n        overflow: 'auto',\n    },\n};\n\ninterface TabContentProps {\n    /** The content of the component. */\n    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];\n    /** Overflow behavior */\n    overflow?: 'auto';\n    style?: React.CSSProperties;\n    ref?: React.RefObject<HTMLDivElement>;\n}\nexport const TabContent = React.forwardRef<HTMLDivElement, TabContentProps>(\n    function TabContentComponent(props, ref): React.JSX.Element | null {\n        return (\n            <Grid2\n                sx={{\n                    ...styles.root,\n                    ...(props?.style || undefined),\n                    ...(props.overflow === 'auto' ? styles.overflowAuto : undefined),\n                }}\n                ref={ref}\n            >\n                {props.children}\n            </Grid2>\n        );\n    },\n);\n"]}

package/build/Components/objectBrowser.types.d.ts

@@ -0,0 +1,472 @@
+import type React from 'react';
+import type { IobTheme, ThemeName, ThemeType, Translate } from '../types';
+import type { Connection } from '../Connection';
+import type { Router } from './Router';
+import type { ObjectBrowserClass } from './ObjectBrowser';
+import type { AdapterColumn, ObjectBrowserCustomFilter } from './objectBrowserUtils';
+
+type ObjectEventType = 'new' | 'changed' | 'deleted';
+
+interface ObjectEvent {
+    id: string;
+    obj?: ioBroker.Object;
+    type: ObjectEventType;
+    oldObj?: ioBroker.Object;
+}
+
+interface ObjectsWorker {
+    getObjects(update?: boolean): Promise<void | Record<string, ioBroker.Object>>;
+    registerHandler(cb: (events: ObjectEvent[]) => void): void;
+    unregisterHandler(cb: (events: ObjectEvent[]) => void, doNotUnsubscribe?: boolean): void;
+}
+
+interface CustomAdminColumnStored {
+    path: string;
+    name: string;
+    objTypes?: ioBroker.ObjectType[];
+    width?: number;
+    edit?: boolean;
+    type?: ioBroker.CommonType;
+}
+
+export interface ContextMenuItem {
+    /** hotkey */
+    key?: string;
+    visibility: boolean;
+    icon: React.JSX.Element | string;
+    label: string;
+    onClick?: () => void;
+    listItemIconStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    subMenu?: {
+        label: string;
+        visibility: boolean;
+        icon: React.JSX.Element;
+        onClick: () => void;
+        iconStyle?: React.CSSProperties;
+        style?: React.CSSProperties;
+        listItemIconStyle?: React.CSSProperties;
+    }[];
+    iconStyle?: React.CSSProperties;
+}
+
+export type ioBrokerObjectForExport = ioBroker.Object & Partial<ioBroker.State>;
+
+export interface ObjectBrowserEditRoleProps {
+    roleArray: { role: string; type: ioBroker.CommonType }[];
+    id: string;
+    socket: Connection;
+    onClose: (obj?: ioBroker.Object | null) => void;
+    t: Translate;
+    commonType: ioBroker.CommonType;
+}
+
+export interface ObjectViewFileDialogProps {
+    t: Translate;
+    socket: Connection;
+    obj: ioBroker.AnyObject;
+    onClose: () => void;
+}
+
+export interface InsertJsonObjectsDialogProps {
+    t: Translate;
+    onClose: (json?: string) => void;
+    themeType: ThemeType;
+    themeName: ThemeName;
+}
+
+export interface TreeItemData {
+    id: string;
+    name: string;
+    obj?: ioBroker.Object;
+    /** Object ID in lower case for filtering */
+    fID?: string;
+    /** translated common.name in lower case for filtering */
+    fName?: string;
+    /** Link to parent item */
+    parent?: TreeItem;
+    level?: number;
+    icon?: string | React.JSX.Element | null;
+    /** If the item existing object or generated folder */
+    generated?: boolean;
+    title?: string;
+    /** if the item has "write" button (value=true, ack=false) */
+    button?: boolean;
+    /** If the item has read and write and is boolean */
+    switch?: boolean;
+    /** If the item is url linke */
+    url?: boolean;
+    /** if the item has custom settings in `common.custom` */
+    hasCustoms?: boolean;
+    /** If this item is visible */
+    visible?: boolean;
+    /** Is any of the children visible (not only directly children) */
+    hasVisibleChildren?: boolean;
+    /** Is any of the parents visible (not only directly parent) */
+    hasVisibleParent?: boolean;
+    /** Combination of `visible || hasVisibleChildren` */
+    sumVisibility?: boolean;
+    /** translated names of enumerations (functions) where this object is the member (or the parent), divided by comma */
+    funcs?: string;
+    /** is if the enums are from parent */
+    pef?: boolean;
+    /** translated names of enumerations (rooms) where this object is the member (or the parent), divided by comma */
+    rooms?: string;
+    /** is if the enums are from parent */
+    per?: boolean;
+    // language in what the rooms and functions where translated
+    lang?: ioBroker.Languages;
+    state?: {
+        valTextRx?: React.JSX.Element[] | null;
+        style?: React.CSSProperties;
+    };
+    aclTooltip?: null | React.JSX.Element;
+}
+
+export interface TreeItem {
+    id?: string;
+    data: TreeItemData;
+    children?: TreeItem[];
+}
+
+interface DragWrapperProps {
+    item: TreeItem;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.JSX.Element | null;
+}
+
+export interface ObjectCustomDialogProps {
+    allVisibleObjects: boolean;
+    customsInstances: string[];
+    expertMode?: boolean;
+    isFloatComma: boolean;
+    lang: ioBroker.Languages;
+    objectIDs: string[];
+    objects: Record<string, ioBroker.Object>;
+    onClose: () => void;
+    reportChangedIds: (ids: string[]) => void;
+    socket: Connection;
+    systemConfig: ioBroker.SystemConfigObject;
+    t: Translate;
+    theme: IobTheme;
+    themeName: ThemeName;
+    themeType: ThemeType;
+}
+
+export interface ObjectMoveRenameDialogProps {
+    childrenIds: string[];
+    expertMode: boolean;
+    id: string;
+    objectType: ioBroker.ObjectType | undefined;
+    onClose: () => void;
+    socket: Connection;
+    t: Translate;
+    theme: IobTheme;
+}
+
+export interface ObjectBrowserValueProps {
+    /** State type */
+    type: 'states' | 'string' | 'number' | 'boolean' | 'json';
+    /** State role */
+    role: string;
+    /** common.states */
+    states: Record<string, string> | null;
+    /** The state value */
+    value: string | number | boolean | null;
+    /** If expert mode is enabled */
+    expertMode: boolean;
+    onClose: (newValue?: {
+        val: ioBroker.StateValue;
+        ack: boolean;
+        q: ioBroker.STATE_QUALITY[keyof ioBroker.STATE_QUALITY];
+        expire: number | undefined;
+    }) => void;
+    /** Configured theme */
+    themeType: ThemeType;
+    theme: IobTheme;
+    socket: Connection;
+    defaultHistory: string;
+    dateFormat: string;
+    object: ioBroker.StateObject;
+    isFloatComma: boolean;
+    t: Translate;
+    lang: ioBroker.Languages;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export interface ObjectBrowserEditObjectProps {
+    socket: Connection;
+    obj: ioBroker.AnyObject;
+    roleArray: { role: string; type: ioBroker.CommonType }[];
+    expertMode: boolean;
+    themeType: ThemeType;
+    theme: IobTheme;
+    aliasTab: boolean;
+    onClose: (obj?: ioBroker.AnyObject) => void;
+    dialogName?: string;
+    objects: Record<string, ioBroker.AnyObject>;
+    dateFormat: string;
+    isFloatComma: boolean;
+    onNewObject: (obj: ioBroker.AnyObject) => void;
+    t: Translate;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export interface ObjectAliasEditorProps {
+    t: Translate;
+    roleArray: { role: string; type: ioBroker.CommonType }[];
+    socket: Connection;
+    objects: Record<string, ioBroker.AnyObject>;
+    onRedirect: (id: string, delay?: number) => void;
+    obj: ioBroker.AnyObject;
+    onClose: () => void;
+}
+
+export type ObjectBrowserColumn = 'name' | 'type' | 'role' | 'room' | 'func' | 'val' | 'buttons';
+
+export type ObjectBrowserPossibleColumns =
+    | 'name'
+    | 'type'
+    | 'role'
+    | 'room'
+    | 'func'
+    | 'val'
+    | 'buttons'
+    | 'changedFrom'
+    | 'qualityCode'
+    | 'timestamp'
+    | 'lastChange'
+    | 'id';
+
+export interface FormatValueOptions {
+    state: ioBroker.State;
+    obj: ioBroker.StateObject;
+    texts: Record<string, string>;
+    dateFormat: string;
+    isFloatComma: boolean;
+    full?: boolean;
+}
+
+export interface TreeInfo {
+    funcEnums: string[];
+    roomEnums: string[];
+    roles: { role: string; type: ioBroker.CommonType }[];
+    ids: string[];
+    types: string[];
+    objects: Record<string, ioBroker.Object>;
+    customs: string[];
+    enums: string[];
+    hasSomeCustoms: boolean;
+    // List of all aliases that shows to this state
+    aliasesMap: { [stateId: string]: string[] };
+}
+
+export interface GetValueStyleOptions {
+    state: ioBroker.State;
+    isExpertMode?: boolean;
+    isButton?: boolean;
+}
+
+export interface ObjectBrowserCustomFilter {
+    type?: ioBroker.ObjectType | ioBroker.ObjectType[];
+    common?: {
+        type?: ioBroker.CommonType | ioBroker.CommonType[];
+        role?: string | string[];
+        // If "_" - no custom set
+        // If "_dataSources" - only data sources (history, sql, influxdb, ...)
+        // Else "telegram." or something like this
+        // `true` - If common.custom not empty
+        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+        custom?: '_' | '_dataSources' | true | string | string[];
+    };
+}
+
+export interface InputSelectItem {
+    value: string;
+    name: string;
+    icon?: null | React.JSX.Element;
+}
+
+export interface AdapterColumn {
+    adapter: string;
+    id: string;
+    name: string;
+    path: string[];
+    pathText: string;
+    edit?: boolean;
+    type?: 'boolean' | 'string' | 'number';
+    objTypes?: ioBroker.ObjectType[];
+    align?: 'center' | 'left' | 'right';
+}
+
+export interface ObjectBrowserFilter {
+    id?: string;
+    name?: string;
+    room?: string[];
+    func?: string[];
+    role?: string[];
+    type?: string[];
+    custom?: string[];
+    expertMode?: boolean;
+}
+
+export interface ObjectBrowserProps {
+    /** where to store settings in localStorage */
+    dialogName?: string;
+    defaultFilters?: ObjectBrowserFilter;
+    selected?: string | string[];
+    onSelect?: (selected: string | string[], name: string | null, isDouble?: boolean) => void;
+    onFilterChanged?: (newFilter: ObjectBrowserFilter) => void;
+    socket: Connection;
+    showExpertButton?: boolean;
+    expertMode?: boolean;
+    imagePrefix?: string;
+    themeName: ThemeName;
+    themeType: ThemeType;
+    /** will be filled by withWidth */
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    theme: IobTheme;
+    t: Translate;
+    lang: ioBroker.Languages;
+    multiSelect?: boolean;
+    notEditable?: boolean;
+    foldersFirst?: boolean;
+    disableColumnSelector?: boolean;
+    isFloatComma?: boolean;
+    dateFormat?: string;
+    levelPadding?: number;
+    /** Allow selection of non-objects (virtual branches) */
+    allowNonObjects?: boolean;
+    /** Called when all objects are loaded */
+    onAllLoaded?: () => void;
+
+    // components
+    objectCustomDialog?: React.FC<ObjectCustomDialogProps>;
+    objectMoveRenameDialog?: React.FC<ObjectMoveRenameDialogProps>;
+    objectAddBoolean?: boolean; // optional toolbar button
+    objectEditBoolean?: boolean; // optional toolbar button
+    objectStatesView?: boolean; // optional toolbar button
+    objectImportExport?: boolean; // optional toolbar button
+    objectEditOfAccessControl?: boolean; // Access Control
+    /** modal add object */
+    modalNewObject?: (oBrowser: ObjectBrowserClass) => React.JSX.Element;
+    /** modal Edit Of Access Control */
+    modalEditOfAccessControl: (oBrowser: ObjectBrowserClass, data: TreeItemData) => React.JSX.Element;
+    onObjectDelete?: (id: string, hasChildren: boolean, objectExists: boolean, childrenCount: number) => void;
+
+    /**
+     * Optional filter
+     *   `{common: {custom: true}}` - show only objects with some custom settings
+     *   `{common: {custom: 'sql.0'}}` - show only objects with `sql.0` custom settings (only of the specific instance)
+     *   `{common: {custom: '_dataSources'}}` - show only objects of adapters `influxdb' or 'sql' or 'history'
+     *   `{common: {custom: 'adapterName.'}}` - show only objects of custom settings of specific adapter (all instances)
+     *   `{type: 'channel'}` - show only channels
+     *   `{type: ['channel', 'device']}` - show only channels and devices
+     *   `{common: {type: 'number'}` - show only states of type 'number
+     *   `{common: {type: ['number', 'string']}` - show only states of type 'number and string
+     *   `{common: {role: ['switch']}` - show only states with roles starting from switch
+     *   `{common: {role: ['switch', 'button']}` - show only states with roles starting from `switch` and `button`
+     */
+    customFilter: ObjectBrowserCustomFilter;
+    objectBrowserValue?: React.FC<ObjectBrowserValueProps>;
+    objectBrowserEditObject?: React.FC<ObjectBrowserEditObjectProps>;
+    /** on edit alias */
+    objectBrowserAliasEditor?: React.FC<ObjectAliasEditorProps>;
+    /** on Edit role */
+    objectBrowserEditRole?: React.FC<ObjectBrowserEditRoleProps>;
+    /** on view file state */
+    objectBrowserViewFile?: React.FC<ObjectViewFileDialogProps>;
+    objectBrowserInsertJsonObjects?: React.FC<InsertJsonObjectsDialogProps>;
+    router?: typeof Router;
+    types?: ioBroker.ObjectType[];
+    /** Possible columns: ['name', 'type', 'role', 'room', 'func', 'val', 'buttons'] */
+    columns?: ObjectBrowserColumn[];
+    /** Shows only elements of this root */
+    root?: string;
+
+    /** cache of objects */
+    objectsWorker?: ObjectsWorker;
+    /**
+     * function to filter out all unnecessary objects. It cannot be used together with "types"
+     * Example for function: `obj => obj.common?.type === 'boolean'` to show only boolean states
+     */
+    filterFunc?: (obj: ioBroker.Object) => boolean;
+    /** Used for enums dragging */
+    DragWrapper?: React.FC<DragWrapperProps>;
+    /** let DragWrapper know about objects to get the icons */
+    setObjectsReference?: (objects: Record<string, ioBroker.Object>) => void;
+    dragEnabled?: boolean;
+}
+
+export interface ObjectBrowserState {
+    loaded: boolean;
+    foldersFirst: boolean;
+    selected: string[];
+    focused: string;
+    selectedNonObject: string;
+    filter: ObjectBrowserFilter;
+    filterKey: number;
+    depth: number;
+    expandAllVisible: boolean;
+    expanded: string[];
+    toast: string;
+    scrollBarWidth: number;
+    customDialog: null | string[];
+    customDialogAll?: boolean;
+    editObjectDialog: string;
+    editObjectAlias: boolean; // open the edit object dialog on alias tab
+    viewFileDialog: string;
+    showAliasEditor: string;
+    enumDialog: null | {
+        item: TreeItem;
+        type: 'room' | 'func';
+        enumsOriginal: string;
+    };
+    enumDialogEnums?: null | string[];
+    roleDialog: null | string;
+    statesView: boolean;
+    /** ['name', 'type', 'role', 'room', 'func', 'val', 'buttons'] */
+    columns: ObjectBrowserPossibleColumns[] | null;
+    columnsForAdmin: Record<string, CustomAdminColumnStored[]> | null;
+    columnsSelectorShow: boolean;
+    columnsAuto: boolean;
+    columnsWidths: Record<string, number>;
+    columnsDialogTransparent: number;
+    columnsEditCustomDialog: null | {
+        obj: ioBroker.Object;
+        item: TreeItem;
+        it: AdapterColumn;
+    };
+    customColumnDialogValueChanged: boolean;
+    showExportDialog: false | number;
+    showImportDialog: boolean;
+    showAllExportOptions: boolean;
+    linesEnabled: boolean;
+    showDescription: boolean;
+    showContextMenu: {
+        item: TreeItem;
+        position: { left: number; top: number };
+        subItem?: string;
+        subAnchor?: HTMLLIElement;
+    } | null;
+    noStatesByExportImport: boolean;
+    beautifyJsonExport: boolean;
+    excludeSystemRepositoriesFromExport: boolean;
+    excludeTranslations: boolean;
+    updating?: boolean;
+    modalNewObj?: null | { id: string; initialType?: ioBroker.ObjectType; initialStateType?: ioBroker.CommonType };
+    error?: any;
+    modalEditOfAccess?: boolean;
+    modalEditOfAccessObjData?: TreeItemData;
+    updateOpened?: boolean;
+    tooltipInfo: null | { el: React.JSX.Element[]; id: string };
+    /** Show the menu with aliases for state */
+    aliasMenu: string;
+    /** Show rename dialog */
+    showRenameDialog: {
+        id: string;
+        childrenIds: string[];
+    } | null;
+    showImportMenu: HTMLButtonElement | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "8.0.9",
+  "version": "8.0.11",
   "description": "React components to develop ioBroker interfaces with react.",
   "author": {
     "name": "bluefox",