@iobroker/gui-components 8.0.1 → 10.0.1

package/build/Components/DeviceType/DeviceTypeIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceTypeIcon.js","sourceRoot":"./src/","sources":["Components/DeviceType/DeviceTypeIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Box, Tooltip } from '@mui/material';\n\nimport { AiOutlineLineChart as TypeIconChart } from 'react-icons/ai';\nimport { GoDeviceCameraVideo as TypeIconCamera } from 'react-icons/go';\n\nimport {\n    // FaExternalLinkSquareAlt as TypeIconURL,\n    FaImage as TypeIconImage,\n    FaRegLightbulb as TypeIconDimmer,\n    FaInfoCircle as TypeIconInfo,\n    FaLightbulb as TypeIconLight,\n    FaLock as TypeIconLock,\n    FaStreetView as TypeIconLocation,\n    FaStepForward as TypeIconMedia,\n    FaSlidersH as TypeIconSlider,\n    FaVolumeDown as TypeIconVolume,\n    FaVolumeUp as TypeIconVolumeGroup,\n    FaFan as TypeIconAC,\n    FaWrench as TypeIconInstance,\n} from 'react-icons/fa';\n\nimport {\n    MdFormatColorFill as TypeIconHUE,\n    MdFormatColorFill as TypeIconCT,\n    MdWarning as TypeIconWarning,\n    MdQuestionMark as TypeIconUnknown,\n    MdOutlineMyLocation as TypeIconLocationOne,\n    MdDeviceHub as TypeIconHub3,\n    MdPolyline as TypeIconNode,\n    MdHub as TypeIconHub5,\n    MdControlCamera as TypeIconController,\n} from 'react-icons/md';\nimport { WiCloudy as TypeIconWeather } from 'react-icons/wi';\nimport { IoIosRadioButtonOn as TypeIconButtonSensor } from 'react-icons/io';\nimport { TbSunElectricity as TypeIconIlluminance } from 'react-icons/tb';\nimport { PiPaletteDuotone as TypeIconRGBWSingle } from 'react-icons/pi';\n\nimport { Types } from '@iobroker/type-detector';\n\nimport { I18n } from '../../i18n';\nimport { Icon } from '../Icon';\n\nimport {\n    Cleaner as TypeIconVacuumCleaner,\n    Humidity as TypeIconHumidity,\n    Jalousie as TypeIconBlinds,\n    PushButton as TypeIconButton,\n    DoorOpened as TypeIconDoor,\n    FireOn as TypeIconFireAlarm,\n    FloodOn as TypeIconFloodAlarm,\n    Gate as TypeIconGate,\n    MotionOn as TypeIconMotion,\n    RGB as TypeIconRGB,\n    Socket as TypeIconSocket,\n    Thermometer as TypeIconTemperature,\n    Thermostat as TypeIconThermostat,\n    // HeatValve as TypeIconValve,\n    WindowOpened as TypeIconWindow,\n    WindowTilted as TypeIconWindowTilt,\n    type IconPropsSVG,\n} from './icons';\nimport { extendDeviceTypeTranslation } from './deviceTypeTranslations';\n\nexport type TypesExtended = Types | 'invalid' | 'hub3' | 'node' | 'hub5' | 'controller';\n\nconst TYPE_ICONS: Record<TypesExtended, React.FC<IconPropsSVG>> = {\n    [Types.airCondition]: TypeIconAC,\n    [Types.blind]: TypeIconBlinds,\n    [Types.blindButtons]: TypeIconBlinds,\n    [Types.button]: TypeIconButton,\n    [Types.buttonSensor]: TypeIconButtonSensor,\n    [Types.camera]: TypeIconCamera,\n    [Types.chart]: TypeIconChart,\n    // [Types.url]: TypeIconURL,\n    [Types.image]: TypeIconImage,\n    [Types.dimmer]: TypeIconDimmer,\n    [Types.door]: TypeIconDoor,\n    [Types.fireAlarm]: TypeIconFireAlarm,\n    // @ts-expect-error special case\n    'sensor.alarm.fire': TypeIconFireAlarm,\n    [Types.floodAlarm]: TypeIconFloodAlarm,\n    'sensor.alarm.flood': TypeIconFloodAlarm,\n    [Types.gate]: TypeIconGate,\n    [Types.humidity]: TypeIconHumidity,\n    [Types.illuminance]: TypeIconIlluminance,\n    [Types.info]: TypeIconInfo,\n    [Types.light]: TypeIconLight,\n    [Types.lock]: TypeIconLock,\n    [Types.location]: TypeIconLocation,\n    [Types.locationOne]: TypeIconLocationOne,\n    [Types.media]: TypeIconMedia,\n    [Types.motion]: TypeIconMotion,\n    [Types.ct]: TypeIconCT,\n    [Types.rgb]: TypeIconRGB,\n    [Types.rgbSingle]: TypeIconRGB,\n    [Types.rgbwSingle]: TypeIconRGBWSingle,\n    [Types.hue]: TypeIconHUE,\n    [Types.cie]: TypeIconRGB,\n    [Types.slider]: TypeIconSlider,\n    [Types.socket]: TypeIconSocket,\n    [Types.temperature]: TypeIconTemperature,\n    [Types.thermostat]: TypeIconThermostat,\n    // [Types.valve]: TypeIconValve,\n    [Types.vacuumCleaner]: TypeIconVacuumCleaner,\n    [Types.volume]: TypeIconVolume,\n    [Types.volumeGroup]: TypeIconVolumeGroup,\n    [Types.window]: TypeIconWindow,\n    [Types.windowTilt]: TypeIconWindowTilt,\n    [Types.weatherCurrent]: TypeIconWeather,\n    [Types.weatherForecast]: TypeIconWeather,\n    [Types.warning]: TypeIconWarning,\n\n    [Types.unknown]: TypeIconUnknown,\n    [Types.instance]: TypeIconInstance,\n\n    // Special matter types\n    invalid: TypeIconWarning,\n    hub3: TypeIconHub3,\n    node: TypeIconNode,\n    hub5: TypeIconHub5,\n    controller: TypeIconController,\n};\n\nconst defaultStyle: React.CSSProperties = {\n    width: 32,\n    height: 32,\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 | true;\n    /** Styles for utf-8 characters */\n    styleUTF8?: React.CSSProperties;\n    /** On error handler */\n    onError?: React.ReactEventHandler<HTMLImageElement>;\n    /** Reference to image */\n    ref?: React.RefObject<HTMLImageElement>;\n    /** Alternative text for image */\n    alt?: string;\n    /** On click handler */\n    onClick?: React.MouseEventHandler<any>;\n}\n\nexport type TypeIconProps = IconProps & { type?: TypesExtended };\n\nexport function DeviceTypeIcon(props: TypeIconProps): React.JSX.Element | null {\n    const [loaded, setLoaded] = React.useState(false);\n\n    useEffect(() => {\n        if (props.title && !loaded) {\n            extendDeviceTypeTranslation();\n            setLoaded(true);\n        }\n    }, [props.title, loaded]);\n\n    if (!loaded && props.title) {\n        return (\n            <Box\n                style={{ ...defaultStyle, ...(props.style || undefined) }}\n                className={props.className}\n                sx={props.sx}\n            />\n        );\n    }\n    // src could contain a device type too, so detect if it is a type\n    const type: TypesExtended | undefined =\n        props.type ||\n        (props.src ? (Object.keys(TYPE_ICONS).find(type => props.src === type) as TypesExtended) : undefined);\n\n    if (!type && props.src) {\n        return (\n            <Icon\n                style={defaultStyle}\n                {...props}\n                title={props.title === true ? undefined : props.title}\n                src={props.src}\n            />\n        );\n    }\n\n    const TypeIcon = type && TYPE_ICONS[type];\n    if (!TypeIcon) {\n        // Show the first letter of a type\n        return type ? (\n            <span style={{ ...defaultStyle, ...(props.style || undefined) }}>{type[0].toUpperCase()}</span>\n        ) : null;\n    }\n\n    const icon = (\n        <TypeIcon\n            style={{ ...defaultStyle, ...(props.style || undefined) }}\n            onClick={props.onClick}\n            className={props.className}\n            sx={props.sx}\n        />\n    );\n\n    if (props.title) {\n        return (\n            <Tooltip\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                title={props.title === true ? I18n.t(`type-${type}`) : props.title}\n            >\n                <div style={{ display: 'flex' }}>{icon}</div>\n            </Tooltip>\n        );\n    }\n\n    return icon;\n}\n"]}
+{"version":3,"file":"DeviceTypeIcon.js","sourceRoot":"./src/","sources":["Components/DeviceType/DeviceTypeIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Box, Tooltip } from '@mui/material';\n\nimport { AiOutlineLineChart as TypeIconChart } from 'react-icons/ai';\nimport { GoDeviceCameraVideo as TypeIconCamera } from 'react-icons/go';\n\nimport {\n    // FaExternalLinkSquareAlt as TypeIconURL,\n    FaImage as TypeIconImage,\n    FaRegLightbulb as TypeIconDimmer,\n    FaInfoCircle as TypeIconInfo,\n    FaLightbulb as TypeIconLight,\n    FaLock as TypeIconLock,\n    FaStreetView as TypeIconLocation,\n    FaStepForward as TypeIconMedia,\n    FaSlidersH as TypeIconSlider,\n    FaVolumeDown as TypeIconVolume,\n    FaVolumeUp as TypeIconVolumeGroup,\n    FaFan as TypeIconAC,\n    FaWrench as TypeIconInstance,\n} from 'react-icons/fa';\n\nimport {\n    MdFormatColorFill as TypeIconHUE,\n    MdFormatColorFill as TypeIconCT,\n    MdWarning as TypeIconWarning,\n    MdQuestionMark as TypeIconUnknown,\n    MdOutlineMyLocation as TypeIconLocationOne,\n    MdDeviceHub as TypeIconHub3,\n    MdPolyline as TypeIconNode,\n    MdHub as TypeIconHub5,\n    MdControlCamera as TypeIconController,\n} from 'react-icons/md';\nimport { WiCloudy as TypeIconWeather } from 'react-icons/wi';\nimport { IoIosRadioButtonOn as TypeIconButtonSensor } from 'react-icons/io';\nimport { TbSunElectricity as TypeIconIlluminance } from 'react-icons/tb';\nimport { PiPaletteDuotone as TypeIconRGBWSingle } from 'react-icons/pi';\n\nimport { Types } from '@iobroker/type-detector';\n\nimport { I18n } from '../../i18n';\nimport { Icon } from '../Icon';\n\nimport {\n    Cleaner as TypeIconVacuumCleaner,\n    Humidity as TypeIconHumidity,\n    Jalousie as TypeIconBlinds,\n    PushButton as TypeIconButton,\n    DoorOpened as TypeIconDoor,\n    FireOn as TypeIconFireAlarm,\n    FloodOn as TypeIconFloodAlarm,\n    Gate as TypeIconGate,\n    MotionOn as TypeIconMotion,\n    RGB as TypeIconRGB,\n    Socket as TypeIconSocket,\n    Thermometer as TypeIconTemperature,\n    Thermostat as TypeIconThermostat,\n    // HeatValve as TypeIconValve,\n    WindowOpened as TypeIconWindow,\n    WindowTilted as TypeIconWindowTilt,\n    type IconPropsSVG,\n} from './icons';\nimport { extendDeviceTypeTranslation } from './deviceTypeTranslations';\n\nexport type TypesExtended = Types | 'invalid' | 'hub3' | 'node' | 'hub5' | 'controller';\n\nconst TYPE_ICONS: Record<TypesExtended, React.FC<IconPropsSVG>> = {\n    [Types.airCondition]: TypeIconAC,\n    [Types.blind]: TypeIconBlinds,\n    [Types.blindButtons]: TypeIconBlinds,\n    [Types.button]: TypeIconButton,\n    [Types.buttonSensor]: TypeIconButtonSensor,\n    [Types.camera]: TypeIconCamera,\n    [Types.chart]: TypeIconChart,\n    // [Types.url]: TypeIconURL,\n    [Types.image]: TypeIconImage,\n    [Types.dimmer]: TypeIconDimmer,\n    [Types.door]: TypeIconDoor,\n    [Types.fireAlarm]: TypeIconFireAlarm,\n    // @ts-expect-error special case\n    'sensor.alarm.fire': TypeIconFireAlarm,\n    [Types.floodAlarm]: TypeIconFloodAlarm,\n    'sensor.alarm.flood': TypeIconFloodAlarm,\n    [Types.gate]: TypeIconGate,\n    [Types.humidity]: TypeIconHumidity,\n    [Types.illuminance]: TypeIconIlluminance,\n    [Types.info]: TypeIconInfo,\n    [Types.light]: TypeIconLight,\n    [Types.lock]: TypeIconLock,\n    [Types.location]: TypeIconLocation,\n    [Types.locationOne]: TypeIconLocationOne,\n    [Types.media]: TypeIconMedia,\n    [Types.motion]: TypeIconMotion,\n    [Types.ct]: TypeIconCT,\n    [Types.percentage]: TypeIconSlider,\n    [Types.rgb]: TypeIconRGB,\n    [Types.rgbSingle]: TypeIconRGB,\n    [Types.rgbwSingle]: TypeIconRGBWSingle,\n    [Types.hue]: TypeIconHUE,\n    [Types.cie]: TypeIconRGB,\n    [Types.slider]: TypeIconSlider,\n    [Types.socket]: TypeIconSocket,\n    [Types.temperature]: TypeIconTemperature,\n    [Types.thermostat]: TypeIconThermostat,\n    // [Types.valve]: TypeIconValve,\n    [Types.vacuumCleaner]: TypeIconVacuumCleaner,\n    [Types.volume]: TypeIconVolume,\n    [Types.volumeGroup]: TypeIconVolumeGroup,\n    [Types.window]: TypeIconWindow,\n    [Types.windowTilt]: TypeIconWindowTilt,\n    [Types.weatherCurrent]: TypeIconWeather,\n    [Types.weatherForecast]: TypeIconWeather,\n    [Types.warning]: TypeIconWarning,\n\n    [Types.unknown]: TypeIconUnknown,\n    [Types.instance]: TypeIconInstance,\n\n    // Special matter types\n    invalid: TypeIconWarning,\n    hub3: TypeIconHub3,\n    node: TypeIconNode,\n    hub5: TypeIconHub5,\n    controller: TypeIconController,\n};\n\nconst defaultStyle: React.CSSProperties = {\n    width: 32,\n    height: 32,\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 | true;\n    /** Styles for utf-8 characters */\n    styleUTF8?: React.CSSProperties;\n    /** On error handler */\n    onError?: React.ReactEventHandler<HTMLImageElement>;\n    /** Reference to image */\n    ref?: React.RefObject<HTMLImageElement>;\n    /** Alternative text for image */\n    alt?: string;\n    /** On click handler */\n    onClick?: React.MouseEventHandler<any>;\n}\n\nexport type TypeIconProps = IconProps & { type?: TypesExtended };\n\nexport function DeviceTypeIcon(props: TypeIconProps): React.JSX.Element | null {\n    const [loaded, setLoaded] = React.useState(false);\n\n    useEffect(() => {\n        if (props.title && !loaded) {\n            extendDeviceTypeTranslation();\n            setLoaded(true);\n        }\n    }, [props.title, loaded]);\n\n    if (!loaded && props.title) {\n        return (\n            <Box\n                style={{ ...defaultStyle, ...(props.style || undefined) }}\n                className={props.className}\n                sx={props.sx}\n            />\n        );\n    }\n    // src could contain a device type too, so detect if it is a type\n    const type: TypesExtended | undefined =\n        props.type ||\n        (props.src ? (Object.keys(TYPE_ICONS).find(type => props.src === type) as TypesExtended) : undefined);\n\n    if (!type && props.src) {\n        return (\n            <Icon\n                style={defaultStyle}\n                {...props}\n                title={props.title === true ? undefined : props.title}\n                src={props.src}\n            />\n        );\n    }\n\n    const TypeIcon = type && TYPE_ICONS[type];\n    if (!TypeIcon) {\n        // Show the first letter of a type\n        return type ? (\n            <span style={{ ...defaultStyle, ...(props.style || undefined) }}>{type[0].toUpperCase()}</span>\n        ) : null;\n    }\n\n    const icon = (\n        <TypeIcon\n            style={{ ...defaultStyle, ...(props.style || undefined) }}\n            onClick={props.onClick}\n            className={props.className}\n            sx={props.sx}\n        />\n    );\n\n    if (props.title) {\n        return (\n            <Tooltip\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n                title={props.title === true ? I18n.t(`type-${type}`) : props.title}\n            >\n                <div style={{ display: 'flex' }}>{icon}</div>\n            </Tooltip>\n        );\n    }\n\n    return icon;\n}\n"]}

package/build/Components/DeviceType/DeviceTypeSelector.js

@@ -53,7 +53,7 @@ export function DeviceTypeSelector(props) {
             if (_typesWords[a] === _typesWords[b]) {
                 return 0;
             }
-            return _typesWords[a].localeCompare(_typesWords[b], 'de');
+            return _typesWords[a]?.localeCompare(_typesWords[b] || '', 'de') || 0;
         });
         extendDeviceTypeTranslation();
         setTypes(_types);
@@ -78,6 +78,6 @@ export function DeviceTypeSelector(props) {
                             color: props.themeType === 'dark' ? '#FFFFFF' : '#000',
                         } }),
                     React.createElement("span", { style: styles.selectText }, typesWords[typeId])),
-                props.showApplications?.TYPE_OPTIONS[typeId] ? (React.createElement("div", { style: styles.iconWrapper }, Object.keys(props.showApplications.TYPE_OPTIONS[typeId]).map(key => props.showApplications.TYPE_OPTIONS[typeId][key] ? (React.createElement(Icon, { key: key, style: styles.iconStyle, src: props.showApplications.ICONS_TYPE[key] })) : (React.createElement("div", { key: key, style: styles.emptyIcon }))))) : null)))))));
+                props.showApplications?.TYPE_OPTIONS[typeId] ? (React.createElement("div", { style: styles.iconWrapper }, Object.keys(props.showApplications.TYPE_OPTIONS[typeId]).map(key => props.showApplications?.TYPE_OPTIONS[typeId]?.[key] ? (React.createElement(Icon, { key: key, style: styles.iconStyle, src: props.showApplications.ICONS_TYPE[key] })) : (React.createElement("div", { key: key, style: styles.emptyIcon }))))) : null)))))));
 }
 //# sourceMappingURL=DeviceTypeSelector.js.map

package/build/Components/DeviceType/DeviceTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceTypeSelector.js","sourceRoot":"./src/","sources":["Components/DeviceType/DeviceTypeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,MAAM,GAGR;IACA,mBAAmB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,eAAe;KAClC;IACD,IAAI,EAAE;QACF,SAAS,EAAE,EAAE;KAChB;IACD,UAAU,EAAE;QACR,YAAY,EAAE,CAAC;QACf,aAAa,EAAE,QAAQ;QACvB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACb;IACD,UAAU,EAAE;QACR,aAAa,EAAE,QAAQ;KAC1B;IACD,WAAW,EAAE;QACT,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACvB;IACD,SAAS,EAAE;QACP,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,OAAO;KAClB;IACD,SAAS,EAAE;QACP,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,OAAO;KAClB;CACJ,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAAC,KAgBlC;IACG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiC,EAAE,CAAC,CAAC;IACvF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,WAAW,GAAmC,EAAE,CAAC;QACvD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;aACb,MAAM,CACH,EAAE,CAAC,EAAE,CACD,CAAC,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAW,CAAC,CAAC;YAC1E,CAAC,KAAK,CAAC,kBAAkB,EAAE,QAAQ,CAAC,EAAW,CAAC,CACvD;aACA,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,MAAe,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,MAAe,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAElG,4CAA4C;QAC5C,MAAM,MAAM,GAAY,MAAM,CAAC,IAAI,CAAC,WAAW,CAAY,CAAC;QAE5D,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACjB,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpC,OAAO,CAAC,CAAC;YACb,CAAC;YACD,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;QAEH,2BAA2B,EAAE,CAAC;QAE9B,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjB,aAAa,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEvD,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,CACH,oBAAC,GAAG,IACA,KAAK,EAAE;gBACH,GAAG,MAAM,CAAC,IAAI;gBACd,GAAG,KAAK,CAAC,KAAK;aACjB,EACD,EAAE,EAAE,KAAK,CAAC,EAAE,GACd,CACL,CAAC;IACN,CAAC;IAED,OAAO,CACH,oBAAC,WAAW,IACR,KAAK,EAAE;YACH,GAAG,MAAM,CAAC,IAAI;YACd,GAAG,KAAK,CAAC,KAAK;SACjB,EACD,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK;QAEpB,oBAAC,UAAU,QAAE,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAc;QACpE,oBAAC,MAAM,IACH,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAc,CAAC,IAErD,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACjB,oBAAC,QAAQ,IACL,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,EAClB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC;YAEpB,6BAAK,KAAK,EAAE,MAAM,CAAC,mBAAmB;gBAClC;oBACI,oBAAC,cAAc,IACX,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE;4BACH,GAAG,MAAM,CAAC,UAAU;4BACpB,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;yBACzD,GACH;oBACF,8BAAM,KAAK,EAAE,MAAM,CAAC,UAAU,IAAG,UAAU,CAAC,MAAM,CAAC,CAAQ,CACzD;gBACL,KAAK,CAAC,gBAAgB,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAC5C,6BAAK,KAAK,EAAE,MAAM,CAAC,WAAW,IACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAChE,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/C,oBAAC,IAAI,IACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG,CAAC,GAC7C,CACL,CAAC,CAAC,CAAC,CACA,6BACI,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,SAAS,GACzB,CACL,CACJ,CACC,CACT,CAAC,CAAC,CAAC,IAAI,CACN,CACC,CACd,CAAC,CACG,CACC,CACjB,CAAC;AACN,CAAC","sourcesContent":["import React, { useEffect } from 'react';\nimport { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';\n\nimport { Types } from '@iobroker/type-detector';\n\nimport { I18n } from '../../i18n';\nimport { Icon } from '../Icon';\nimport type { ThemeType } from '../../types';\n\nimport { DeviceTypeIcon } from './DeviceTypeIcon';\nimport { extendDeviceTypeTranslation } from './deviceTypeTranslations';\n\nconst styles: Record<\n    'itemChildrenWrapper' | 'type' | 'selectIcon' | 'selectText' | 'iconWrapper' | 'iconStyle' | 'emptyIcon',\n    React.CSSProperties\n> = {\n    itemChildrenWrapper: {\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n    },\n    type: {\n        marginTop: 10,\n    },\n    selectIcon: {\n        paddingRight: 8,\n        verticalAlign: 'middle',\n        width: 20,\n        height: 20,\n    },\n    selectText: {\n        verticalAlign: 'middle',\n    },\n    iconWrapper: {\n        display: 'flex',\n        alignItems: 'center',\n    },\n    iconStyle: {\n        width: 16,\n        height: 16,\n        margin: '0 3px',\n    },\n    emptyIcon: {\n        width: 16,\n        height: 16,\n        margin: '0 3px',\n    },\n};\n\nexport function DeviceTypeSelector(props: {\n    themeType: ThemeType;\n    supportedDevices?: Types[];\n    unsupportedDevices?: Types[];\n    value?: Types | '';\n    onChange: (value: Types) => void;\n    label?: string;\n    style?: React.CSSProperties;\n    sx?: Record<string, any>;\n    disabled?: boolean;\n    error?: boolean;\n    /** Show icons for applications: google, amazon, material, alias. Used in devices */\n    showApplications?: {\n        TYPE_OPTIONS: Partial<Record<Types, Record<string, boolean>>>;\n        ICONS_TYPE: Record<string, React.JSX.Element>;\n    };\n}): React.JSX.Element {\n    const [typesWords, setTypesWords] = React.useState<Partial<Record<Types, string>>>({});\n    const [types, setTypes] = React.useState<Types[] | null>([]);\n\n    useEffect(() => {\n        const _typesWords: Partial<Record<Types, string>> = {};\n        Object.keys(Types)\n            .filter(\n                id =>\n                    (!props.supportedDevices || props.supportedDevices?.includes(id as Types)) &&\n                    !props.unsupportedDevices?.includes(id as Types),\n            )\n            .forEach(typeId => (_typesWords[typeId as Types] = I18n.t(`type-${Types[typeId as Types]}`)));\n\n        // sort types by ABC in the current language\n        const _types: Types[] = Object.keys(_typesWords) as Types[];\n\n        _types.sort((a, b) => {\n            if (_typesWords[a] === _typesWords[b]) {\n                return 0;\n            }\n            return _typesWords[a].localeCompare(_typesWords[b], 'de');\n        });\n\n        extendDeviceTypeTranslation();\n\n        setTypes(_types);\n        setTypesWords(_typesWords);\n    }, [props.supportedDevices, props.unsupportedDevices]);\n\n    if (!types) {\n        return (\n            <Box\n                style={{\n                    ...styles.type,\n                    ...props.style,\n                }}\n                sx={props.sx}\n            />\n        );\n    }\n\n    return (\n        <FormControl\n            style={{\n                ...styles.type,\n                ...props.style,\n            }}\n            sx={props.sx}\n            variant=\"standard\"\n            error={!!props.error}\n        >\n            <InputLabel>{props.label || I18n.t('type-Device type')}</InputLabel>\n            <Select\n                variant=\"standard\"\n                disabled={!!props.disabled}\n                value={props.value}\n                onChange={e => props.onChange(e.target.value as Types)}\n            >\n                {types.map(typeId => (\n                    <MenuItem\n                        key={Types[typeId]}\n                        value={Types[typeId]}\n                    >\n                        <div style={styles.itemChildrenWrapper}>\n                            <div>\n                                <DeviceTypeIcon\n                                    type={Types[typeId]}\n                                    style={{\n                                        ...styles.selectIcon,\n                                        color: props.themeType === 'dark' ? '#FFFFFF' : '#000',\n                                    }}\n                                />\n                                <span style={styles.selectText}>{typesWords[typeId]}</span>\n                            </div>\n                            {props.showApplications?.TYPE_OPTIONS[typeId] ? (\n                                <div style={styles.iconWrapper}>\n                                    {Object.keys(props.showApplications.TYPE_OPTIONS[typeId]).map(key =>\n                                        props.showApplications.TYPE_OPTIONS[typeId][key] ? (\n                                            <Icon\n                                                key={key}\n                                                style={styles.iconStyle}\n                                                src={props.showApplications.ICONS_TYPE[key]}\n                                            />\n                                        ) : (\n                                            <div\n                                                key={key}\n                                                style={styles.emptyIcon}\n                                            />\n                                        ),\n                                    )}\n                                </div>\n                            ) : null}\n                        </div>\n                    </MenuItem>\n                ))}\n            </Select>\n        </FormControl>\n    );\n}\n"]}
+{"version":3,"file":"DeviceTypeSelector.js","sourceRoot":"./src/","sources":["Components/DeviceType/DeviceTypeSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';\n\nimport { Types } from '@iobroker/type-detector';\n\nimport { I18n } from '../../i18n';\nimport { Icon } from '../Icon';\nimport type { ThemeType } from '../../types';\n\nimport { DeviceTypeIcon } from './DeviceTypeIcon';\nimport { extendDeviceTypeTranslation } from './deviceTypeTranslations';\n\nconst styles: Record<\n    'itemChildrenWrapper' | 'type' | 'selectIcon' | 'selectText' | 'iconWrapper' | 'iconStyle' | 'emptyIcon',\n    React.CSSProperties\n> = {\n    itemChildrenWrapper: {\n        display: 'flex',\n        width: '100%',\n        justifyContent: 'space-between',\n    },\n    type: {\n        marginTop: 10,\n    },\n    selectIcon: {\n        paddingRight: 8,\n        verticalAlign: 'middle',\n        width: 20,\n        height: 20,\n    },\n    selectText: {\n        verticalAlign: 'middle',\n    },\n    iconWrapper: {\n        display: 'flex',\n        alignItems: 'center',\n    },\n    iconStyle: {\n        width: 16,\n        height: 16,\n        margin: '0 3px',\n    },\n    emptyIcon: {\n        width: 16,\n        height: 16,\n        margin: '0 3px',\n    },\n};\n\nexport function DeviceTypeSelector(props: {\n    themeType: ThemeType;\n    supportedDevices?: Types[];\n    unsupportedDevices?: Types[];\n    value?: Types | '';\n    onChange: (value: Types) => void;\n    label?: string;\n    style?: React.CSSProperties;\n    sx?: Record<string, any>;\n    disabled?: boolean;\n    error?: boolean;\n    /** Show icons for applications: google, amazon, material, alias. Used in devices */\n    showApplications?: {\n        TYPE_OPTIONS: Partial<Record<Types, Record<string, boolean>>>;\n        ICONS_TYPE: Record<string, React.JSX.Element>;\n    };\n}): React.JSX.Element {\n    const [typesWords, setTypesWords] = React.useState<Partial<Record<Types, string>>>({});\n    const [types, setTypes] = React.useState<Types[] | null>([]);\n\n    useEffect(() => {\n        const _typesWords: Partial<Record<Types, string>> = {};\n        Object.keys(Types)\n            .filter(\n                id =>\n                    (!props.supportedDevices || props.supportedDevices?.includes(id as Types)) &&\n                    !props.unsupportedDevices?.includes(id as Types),\n            )\n            .forEach(typeId => (_typesWords[typeId as Types] = I18n.t(`type-${Types[typeId as Types]}`)));\n\n        // sort types by ABC in the current language\n        const _types: Types[] = Object.keys(_typesWords) as Types[];\n\n        _types.sort((a, b) => {\n            if (_typesWords[a] === _typesWords[b]) {\n                return 0;\n            }\n            return _typesWords[a]?.localeCompare(_typesWords[b] || '', 'de') || 0;\n        });\n\n        extendDeviceTypeTranslation();\n\n        setTypes(_types);\n        setTypesWords(_typesWords);\n    }, [props.supportedDevices, props.unsupportedDevices]);\n\n    if (!types) {\n        return (\n            <Box\n                style={{\n                    ...styles.type,\n                    ...props.style,\n                }}\n                sx={props.sx}\n            />\n        );\n    }\n\n    return (\n        <FormControl\n            style={{\n                ...styles.type,\n                ...props.style,\n            }}\n            sx={props.sx}\n            variant=\"standard\"\n            error={!!props.error}\n        >\n            <InputLabel>{props.label || I18n.t('type-Device type')}</InputLabel>\n            <Select\n                variant=\"standard\"\n                disabled={!!props.disabled}\n                value={props.value}\n                onChange={e => props.onChange(e.target.value)}\n            >\n                {types.map(typeId => (\n                    <MenuItem\n                        key={Types[typeId]}\n                        value={Types[typeId]}\n                    >\n                        <div style={styles.itemChildrenWrapper}>\n                            <div>\n                                <DeviceTypeIcon\n                                    type={Types[typeId]}\n                                    style={{\n                                        ...styles.selectIcon,\n                                        color: props.themeType === 'dark' ? '#FFFFFF' : '#000',\n                                    }}\n                                />\n                                <span style={styles.selectText}>{typesWords[typeId]}</span>\n                            </div>\n                            {props.showApplications?.TYPE_OPTIONS[typeId] ? (\n                                <div style={styles.iconWrapper}>\n                                    {Object.keys(props.showApplications.TYPE_OPTIONS[typeId]).map(key =>\n                                        props.showApplications?.TYPE_OPTIONS[typeId]?.[key] ? (\n                                            <Icon\n                                                key={key}\n                                                style={styles.iconStyle}\n                                                src={props.showApplications.ICONS_TYPE[key]}\n                                            />\n                                        ) : (\n                                            <div\n                                                key={key}\n                                                style={styles.emptyIcon}\n                                            />\n                                        ),\n                                    )}\n                                </div>\n                            ) : null}\n                        </div>\n                    </MenuItem>\n                ))}\n            </Select>\n        </FormControl>\n    );\n}\n"]}

package/build/Components/DeviceType/i18n/de.json

@@ -26,6 +26,7 @@
     "type-lock": "Schloss",
     "type-media": "Mediaplayer",
     "type-motion": "Bewegungssensor",
+    "type-percentage": "Prozentsatz",
     "type-rgb": "RGB-Licht",
     "type-rgbSingle": "R,G,B-Licht Einzelwerte",
     "type-rgbwSingle": "R,G,B,W-Licht Einzelwerte",

package/build/Components/DeviceType/i18n/en.json

@@ -26,6 +26,7 @@
     "type-lock": "Lock",
     "type-media": "Media-player",
     "type-motion": "Motion sensor",
+    "type-percentage": "Percentage",
     "type-rgb": "RGB light",
     "type-rgbSingle": "R,G,B light - single states",
     "type-rgbwSingle": "R,G,B,W light - single states",

package/build/Components/DeviceType/i18n/fr.json

@@ -26,6 +26,7 @@
     "type-lock": "verrouillage",
     "type-media": "médias",
     "type-motion": "mouvement",
+    "type-percentage": "Pourcentage",
     "type-rgb": "lumière RVB",
     "type-rgbSingle": "Lumière RVB simple",
     "type-rgbwSingle": "RGBW comme valeur unique",

package/build/Components/DeviceType/i18n/it.json

@@ -26,6 +26,7 @@
     "type-lock": "serratura",
     "type-media": "media",
     "type-motion": "movimento",
+    "type-percentage": "Percentuale",
     "type-rgb": "luce RGB",
     "type-rgbSingle": "Luce RGB singola",
     "type-rgbwSingle": "RGBW come valore singolo",

package/build/Components/DeviceType/i18n/nl.json

@@ -26,6 +26,7 @@
     "type-lock": "slot",
     "type-media": "media",
     "type-motion": "beweging",
+    "type-percentage": "Percentage",
     "type-rgb": "RGB-licht",
     "type-rgbSingle": "RGB-licht enkel",
     "type-rgbwSingle": "RGBW als enkele waarde",

package/build/Components/DeviceType/i18n/pl.json

@@ -26,6 +26,7 @@
     "type-lock": "zamek",
     "type-media": "głoska bezdźwięczna",
     "type-motion": "ruch",
+    "type-percentage": "Procent",
     "type-rgb": "Światło RGB",
     "type-rgbSingle": "Pojedyncze światło RGB",
     "type-rgbwSingle": "RGBW jako pojedyncza wartość",

package/build/Components/DeviceType/i18n/pt.json

@@ -26,6 +26,7 @@
     "type-lock": "trancar",
     "type-media": "mídia",
     "type-motion": "movimento",
+    "type-percentage": "Percentagem",
     "type-rgb": "Luz RGB",
     "type-rgbSingle": "Luz RGB única",
     "type-rgbwSingle": "RGBW como valor único",

package/build/Components/DeviceType/i18n/ru.json

@@ -26,6 +26,7 @@
     "type-lock": "Замок",
     "type-media": "Медиа-плейер",
     "type-motion": "Датчик движения",
+    "type-percentage": "Проценты",
     "type-rgb": "RGB свет",
     "type-rgbSingle": "R,G,B как отдельные значение",
     "type-rgbwSingle": "R,G,B,W как отдельные значение",

package/build/Components/DeviceType/i18n/uk.json

@@ -26,6 +26,7 @@
     "type-lock": "замок",
     "type-media": "ЗМІ",
     "type-motion": "руху",
+    "type-percentage": "Відсоток",
     "type-rgb": "RGB світло",
     "type-rgbSingle": "Одиночне світло RGB",
     "type-rgbwSingle": "RGBW як одне значення",

package/build/Components/DeviceType/i18n/zh-cn.json

@@ -26,6 +26,7 @@
     "type-lock": "锁",
     "type-media": "媒体",
     "type-motion": "运动",
+    "type-percentage": "百分比",
     "type-rgb": "RGB灯",
     "type-rgbSingle": "RGB灯单",
     "type-rgbwSingle": "RGBW 作为单一值",

package/build/Components/FileBrowser.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025, Denis Haev <dogafox@gmail.com>
+ * Copyright 2020-2026, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
@@ -14,9 +14,18 @@ export interface MetaACL extends ioBroker.ObjectACL {
 export interface MetaObject extends ioBroker.MetaObject {
     acl: MetaACL;
 }
+/**
+ * A navigation target the parent can use to drive the browser (and that the browser reports back).
+ * Maps cleanly to a route like `#tab-files/<mode>/<encoded-id>` (the parent encodes the file path,
+ * whose `/` separators would otherwise clash with the hash). The browser never reads the URL.
+ */
+export interface FileBrowserNavigation {
+    /** `select` = just highlight the file; `view` = open the file viewer. */
+    mode: 'select' | 'view';
+    /** The file path/ID (e.g. `email.admin/custom/assets/Components.js`). */
+    id: string;
+}
 export interface FileBrowserProps {
-    /** The key to identify this component. */
-    key?: string;
     /** Additional styling for this component. */
     style?: React.CSSProperties;
     /** The CSS class name. */
@@ -61,6 +70,17 @@ export interface FileBrowserProps {
     filterByType?: 'images' | 'code' | 'txt';
     /** Callback for file selection. */
     onSelect?: (id: string | string[], isDoubleClick?: boolean, isFolder?: boolean) => void;
+    /**
+     * Drive selection and the file viewer from the parent (e.g. from the URL). When this prop
+     * changes the browser selects the file and opens the requested viewer. The browser does NOT
+     * read the URL itself — all URL parsing/writing lives in the parent component.
+     */
+    navigateTo?: FileBrowserNavigation | null;
+    /**
+     * Called when the user navigates inside the browser (selects a file or opens/closes the viewer)
+     * so the parent can reflect it in the URL. The browser never touches the URL itself.
+     */
+    onNavigateTo?: (navigation: FileBrowserNavigation | null) => void;
     /** Theme name */
     themeName?: ThemeName;
     /** Theme type. */
@@ -132,6 +152,10 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     private readonly limitToObjectID;
     private readonly limitToPath;
     private lastSelect;
+    /** Last navigation applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
+    private lastNav;
+    /** True while applying `navigateTo`, so the derived-state watcher does not echo it back. */
+    private applyingNav;
     private setOpacityTimer;
     private cacheFoldersTimeout;
     private foldersLoading;
@@ -168,7 +192,18 @@ export declare class FileBrowserClass extends Component<FileBrowserProps, FileBr
     renderToolbar(): JSX.Element;
     findItem(id: string, folders?: Folders | null): null | FolderOrFileItem;
     renderInputDialog(): JSX.Element | null;
-    componentDidUpdate(): void;
+    /** Strip the image prefix from a viewer href to get back the raw file path. */
+    private viewerToId;
+    /** Derive the current navigation target from the viewer/selection state. */
+    private getStateNav;
+    private static navEqual;
+    /** Apply a navigation target coming from the parent (`navigateTo`): select + open the viewer. */
+    private applyNavigateTo;
+    /** Apply the initial `navigateTo` once the browser is ready (called from componentDidMount). */
+    applyInitialNavigateTo(): void;
+    /** Reconcile `navigateTo` (parent/URL) with the browser's selection/viewer state. */
+    private reconcileNavigation;
+    componentDidUpdate(prevProps: FileBrowserProps): void;
     findFirstFolder(id: string): string | null;
     uploadFile(fileName: string, data: string): Promise<void>;
     renderUpload(): JSX.Element[] | null;

package/build/Components/FileBrowser.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2020-2025, Denis Haev <dogafox@gmail.com>
+ * Copyright 2020-2026, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
@@ -394,6 +394,10 @@ export class FileBrowserClass extends Component {
     limitToObjectID = null;
     limitToPath = null;
     lastSelect = null;
+    /** Last navigation applied from `navigateTo` or reported via `onNavigateTo` (loop guard). */
+    lastNav = null;
+    /** True while applying `navigateTo`, so the derived-state watcher does not echo it back. */
+    applyingNav = false;
     setOpacityTimer = null;
     cacheFoldersTimeout = null;
     foldersLoading = null;
@@ -505,14 +509,14 @@ export class FileBrowserClass extends Component {
     }
     async loadFolders() {
         this.initialReadFinished = false;
-        let folders = (await this.browseFolder('/'));
+        let folders = await this.browseFolder('/');
         if (this.state.viewType === TABLE) {
-            folders = (await this.browseFolders([...this.state.expanded], folders));
+            folders = await this.browseFolders([...this.state.expanded], folders);
         }
         else if (this.state.currentDir &&
             this.state.currentDir !== '/' &&
             (!this.limitToObjectID || this.state.currentDir.startsWith(this.limitToObjectID))) {
-            folders = (await this.browseFolder(this.state.currentDir, folders));
+            folders = await this.browseFolder(this.state.currentDir, folders);
         }
         this.setState({ folders }, () => {
             if (this.state.viewType === TABLE && !this.findItem(this.state.selected)) {
@@ -543,7 +547,9 @@ export class FileBrowserClass extends Component {
     }
     async componentDidMount() {
         this.mounted = true;
-        this.loadFolders().catch(error => console.error(`Cannot load folders: ${error}`));
+        this.loadFolders()
+            .then(() => this.applyInitialNavigateTo())
+            .catch(error => console.error(`Cannot load folders: ${error}`));
         this.browseList = [];
         this.browseListRunning = false;
         this.supportSubscribes = await this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT');
@@ -604,7 +610,7 @@ export class FileBrowserClass extends Component {
             if (this.browseList) {
                 // if component still mounted
                 this.browseList.push({
-                    resolve: resolve,
+                    resolve,
                     reject,
                     adapter,
                     relPath,
@@ -1341,8 +1347,8 @@ export class FileBrowserClass extends Component {
                 return null;
             }
             return (React.createElement(DialogTextInput, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => this.state.folders[parentFolder].find(item => item.name === text)
-                    ? ''
-                    : this.props.t('ra_Duplicate name'), onClose: (name) => {
+                    ? this.props.t('ra_Duplicate name')
+                    : '', onClose: (name) => {
                     if (name) {
                         const folders = {};
                         Object.keys(this.state.folders).forEach(folder => (folders[folder] = this.state.folders[folder]));
@@ -1372,7 +1378,86 @@ export class FileBrowserClass extends Component {
         }
         return null;
     }
-    componentDidUpdate( /* prevProps , prevState, snapshot */) {
+    // --- Routing (navigateTo / onNavigateTo) ---
+    // The browser never reads the URL; the parent drives it via `navigateTo` and is informed of user
+    // navigation via `onNavigateTo`. All URL parsing/encoding lives in the parent component.
+    /** Strip the image prefix from a viewer href to get back the raw file path. */
+    viewerToId(viewer) {
+        return viewer.startsWith(this.imagePrefix) ? viewer.substring(this.imagePrefix.length) : viewer;
+    }
+    /** Derive the current navigation target from the viewer/selection state. */
+    getStateNav() {
+        if (this.state.viewer) {
+            return { mode: 'view', id: this.viewerToId(this.state.viewer) };
+        }
+        if (this.state.selected) {
+            return { mode: 'select', id: this.state.selected };
+        }
+        return null;
+    }
+    static navEqual(a, b) {
+        if (!a || !b) {
+            return !a && !b;
+        }
+        return a.mode === b.mode && a.id === b.id;
+    }
+    /** Apply a navigation target coming from the parent (`navigateTo`): select + open the viewer. */
+    applyNavigateTo(nav) {
+        this.applyingNav = true;
+        const done = () => {
+            this.applyingNav = false;
+        };
+        if (!nav?.id) {
+            this.setState({ viewer: '', formatEditFile: '' }, done);
+            return;
+        }
+        const { id } = nav;
+        this.select(id, null, () => {
+            this.scrollToSelected();
+            if (nav.mode === 'view') {
+                this.setState({ viewer: this.imagePrefix + id, formatEditFile: Utils.getFileExtension(id) }, done);
+            }
+            else {
+                this.setState({ viewer: '', formatEditFile: '' }, done);
+            }
+        });
+    }
+    /** Apply the initial `navigateTo` once the browser is ready (called from componentDidMount). */
+    applyInitialNavigateTo() {
+        const nav = this.props.navigateTo ?? null;
+        if (nav?.id) {
+            this.lastNav = nav;
+            this.applyNavigateTo(nav);
+        }
+        else {
+            // Don't push the restored-from-localStorage selection into the URL on load.
+            this.lastNav = this.getStateNav();
+        }
+    }
+    /** Reconcile `navigateTo` (parent/URL) with the browser's selection/viewer state. */
+    reconcileNavigation(prevProps) {
+        if (this.props.navigateTo === undefined && !this.props.onNavigateTo) {
+            return; // routing not used by this consumer
+        }
+        if (this.applyingNav) {
+            return;
+        }
+        const propNav = this.props.navigateTo ?? null;
+        const stateNav = this.getStateNav();
+        if (FileBrowserClass.navEqual(propNav, stateNav)) {
+            this.lastNav = stateNav;
+            return;
+        }
+        if (!FileBrowserClass.navEqual(propNav, prevProps.navigateTo ?? null)) {
+            this.lastNav = propNav;
+            this.applyNavigateTo(propNav);
+        }
+        else if (!FileBrowserClass.navEqual(stateNav, this.lastNav)) {
+            this.lastNav = stateNav;
+            this.props.onNavigateTo?.(stateNav);
+        }
+    }
+    componentDidUpdate(prevProps /* , prevState, snapshot */) {
         if (this.setOpacityTimer) {
             clearTimeout(this.setOpacityTimer);
         }
@@ -1383,6 +1468,7 @@ export class FileBrowserClass extends Component {
                 items[i].style.opacity = '1';
             }
         }, 100);
+        this.reconcileNavigation(prevProps);
     }
     findFirstFolder(id) {
         let parentFolder = id;
@@ -1561,7 +1647,7 @@ export class FileBrowserClass extends Component {
     renderDeleteDialog() {
         if (this.state.deleteItem) {
             return (React.createElement(Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
-                React.createElement(DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())),
+                React.createElement(DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop() || '')),
                 React.createElement(DialogContent, null,
                     React.createElement(DialogContentText, null, this.props.t('ra_Are you sure?')),
                     React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: this.state.suppressDeleteConfirm, onChange: () => {
@@ -1682,7 +1768,14 @@ export class FileBrowserClass extends Component {
             this.state.viewType === TILE ? this.renderPath() : null,
             React.createElement("div", { style: {
                     ...styles.filesDiv,
-                    ...styles[`filesDiv${this.state.viewType}`],
+                    ...styles[this.state.viewType === 'Tile' ? 'filesDivTile' : 'filesDivTable'],
+                    height: this.props.showToolbar
+                        ? this.state.viewType === 'Tile'
+                            ? `calc(100% - ${48 + 8}px)`
+                            : 'calc(100% - 56px)'
+                        : this.state.viewType === 'Tile'
+                            ? `calc(100% - ${48 * 2 + 8}px)`
+                            : 'calc(100% - 8px)',
                 }, onClick: e => {
                     if (this.state.viewType !== TABLE) {
                         if (this.state.selected !== (this.state.currentDir || '/')) {