@iobroker/adapter-react-v5 4.0.3 → 4.0.5

package/Components/ColorPicker.js

@@ -80,8 +80,8 @@ var styles = function styles(theme) {
       background: "".concat(theme.palette.background.paper, " !important")
     },
     iconButton: {
-      width: 24,
-      height: 24
+      width: 16,
+      height: 16
     },
     button: {
       width: 32,

package/Components/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["styles","theme","color","width","height","borderRadius","delButton","marginTop","swatch","padding","background","boxShadow","display","cursor","verticalAlign","swatchDisabled","opacity","popover","backgroundColor","textAlign","popoverList","closeButton","palette","paper","secondary","main","cover","position","top","right","bottom","left","textDense","marginBottom","picker","iconButton","button","minWidth","minHeight","ColorPicker","props","e","setState","displayColorPicker","state","anchorEl","currentTarget","onChange","getColor","value","customPalette","flexWrap","map","classes","handleChange","setTimeout","handleClose","style","className","disabled","marginRight","name","root","target","handleClick","list","_color","renderCustomPalette","pColor","sColor","isHex","rgb","r","toString","padStart","g","b","a","rgb2hex","m","match","parseInt","length","React","Component","propTypes","PropTypes","bool","string","func","isRequired","object","array","_export","withStyles"],"sources":["ColorPicker.js"],"sourcesContent":["/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { ChromePicker } from 'react-color';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport { TextField, Menu, IconButton, Button } from '@mui/material';\nimport { Delete as IconDelete, Close as IconClose } from '@mui/icons-material';\n\nconst styles = theme => ({\n    color: {\n        width: 36,\n        height: 14,\n        borderRadius: 2,\n    },\n    delButton: {\n        // width: 32,\n        // height: 32,\n        marginTop: 16,\n    },\n    swatch: {\n        marginTop: 16,\n        padding: 5,\n        background: '#fff',\n        borderRadius: 1,\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer',\n        verticalAlign: 'middle',\n    },\n    swatchDisabled: {\n        opacity: 0.5,\n        cursor: 'default',\n    },\n    popover: {\n        // position: 'absolute',\n        // zIndex: 2,\n        backgroundColor: '#00000000',\n        textAlign: 'right',\n    },\n    popoverList: {\n        padding: 0,\n    },\n    closeButton: {\n        backgroundColor: `${theme.palette.background.paper} !important`,\n        borderRadius: '0 0 25% 25%',\n        '&:hover': {\n            backgroundColor: `${theme.palette.secondary.main} !important`,\n        },\n    },\n    cover: {\n        position: 'fixed',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n    },\n    textDense: {\n        marginTop: 0,\n        marginBottom: 0,\n    },\n    picker: {\n        background: `${theme.palette.background.paper} !important`,\n    },\n    iconButton: {\n        width: 24,\n        height: 24,\n    },\n    button: {\n        width: 32,\n        height: 32,\n        minWidth: 32,\n        minHeight: 32,\n    },\n});\n\n/**\n * @typedef {object} Rgb\n * @property {number} r The red component of the color (0-255).\n * @property {number} g The green component of the color (0-255).\n * @property {number} b The blue component of the color (0-255).\n * @property {number} a The alpha component of the color (0-255).\n *\n * @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.\n *\n * @typedef {object} ColorPickerProps\n * @property {boolean} [disabled] Set to true to disable the color picker.\n * @property {Color} [value] The currently selected color.\n * @property {(rgba: string) => void} [onChange] The color change callback.\n * @property {string} [name] The name.\n * @property {React.CSSProperties} [style] Additional styling for this component.\n * @property {string} [className] The CSS class name.\n * @property {boolean} [openAbove] Open the color picker above the field?\n *\n * @extends {React.Component<ColorPickerProps>}\n */\nclass ColorPicker extends React.Component {\n    /**\n     * @param {Readonly<ColorPickerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        this.state = {\n            displayColorPicker: false,\n            color: this.props.value || this.props.color,\n            anchorEl: null,\n        };\n    }\n\n    /**\n     * Get the state derived from the given properties and state.\n     * @param {{ color: Color; }} props\n     * @param {{ color: Color; }} state\n     */\n    static getDerivedStateFromProps(props, state) {\n        const pColor = ColorPicker.getColor(props.value || props.color);\n        const sColor = ColorPicker.getColor(state.color);\n        if (pColor !== sColor) {\n            return {  color: props.value || props.color };\n        }\n        return null;\n    }\n\n    /**\n     * @private\n     */\n    handleClick = e => {\n        this.setState({ displayColorPicker: !this.state.displayColorPicker, anchorEl: this.state.displayColorPicker ? null : e.currentTarget });\n    };\n\n    /**\n     * @private\n     */\n    handleClose = () => {\n        this.setState({ displayColorPicker: false, anchorEl: null });\n    };\n\n    /**\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\n     * @param {Color} [color]\n     * @param {boolean} [isHex] The returning string should be in hex format\n     * @returns {string} the hex or rgba representation of the given color.\n     */\n    static getColor(color, isHex) {\n        if (color && typeof color === 'object') {\n            if (color.rgb) {\n                if (isHex) {\n                    return `#${color.rgb.r.toString(16).padStart(2, '0')}${color.rgb.g.toString(16).padStart(2, '0')}${color.rgb.b.toString(16).padStart(2, '0')}`;\n                }\n                return `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`;\n            }\n            if (isHex) {\n                return `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;\n            }\n            return `rgba(${color.r},${color.g},${color.b},${color.a})`;\n        }\n        return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\n    }\n\n    /**\n     * Convert rgb() or rgba() format to hex format #rrggbb.\n     * @param {string} rgb\n     * @returns {string}\n     */\n    static rgb2hex(rgb) {\n        const m = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n\n        const r = parseInt(m[1], 10).toString(16).padStart(2, '0');\n        const g = parseInt(m[2], 10).toString(16).padStart(2, '0');\n        const b = parseInt(m[3], 10).toString(16).padStart(2, '0');\n\n        return m && m.length === 4 ? `#${r}${g}${b}` : rgb;\n    }\n\n    /**\n     * @private\n     */\n    handleChange = color => {\n        this.setState({ color }, () =>\n            this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));\n    };\n\n    renderCustomPalette() {\n        if (!this.props.customPalette) {\n            return null;\n        }\n        return <div style={{ width: '100%', display: 'flex', flexWrap: 'flex' }}>\n            {this.props.customPalette.map(color =>\n                <Button\n                    className={this.props.classes.button}\n                    key={color}\n                    onClick={() => {\n                        this.handleChange(color);\n                        setTimeout(() => this.handleClose(), 300);\n                    }}\n                >\n                    <div className={this.props.classes.iconButton} style={{ background: color }} />\n                </Button>)}\n        </div>;\n    }\n\n    render() {\n        const color = ColorPicker.getColor(this.state.color);\n\n        const style = {...(this.props.style || {})};\n        style.position = 'relative';\n\n        return <div\n            style={ style }\n            className={this.props.className || ''}\n        >\n            <TextField\n                disabled={this.props.disabled}\n                variant=\"standard\"\n                id=\"name\"\n                style={color ? { width: 'calc(100% - 80px)' } : { width: 'calc(100% - 54px)', marginRight: 8 }}\n                label={ this.props.name || 'color' }\n                value={color}\n                margin=\"dense\"\n                classes={{ root: this.props.classes.textDense }}\n                onChange={e => this.handleChange(e.target.value)}\n            />\n            {color ? <IconButton\n                disabled={this.props.disabled}\n                onClick={() => this.handleChange('')}\n                size=\"small\"\n                className={this.props.classes.delButton}\n                style={color ? {} : { opacity: 0, cursor: 'default' }}\n            >\n                <IconDelete />\n            </IconButton> : null}\n            <div className={`${this.props.classes.swatch}${this.props.disabled ? ` ${this.props.classes.swatchDisabled}` : ''}`} onClick={e => !this.props.disabled && this.handleClick(e)}>\n                <div className={this.props.classes.color} style={{ background: color }} />\n            </div>\n            { this.state.displayColorPicker && !this.props.disabled ? <Menu\n                classes={{ paper: this.props.classes.popover, list: this.props.classes.popoverList }}\n                anchorEl={this.state.anchorEl}\n                open={!0}\n                onClose={() => this.handleClose()}\n            >\n                <ChromePicker\n                    className={this.props.classes.picker}\n                    color={this.state.color}\n                    onChangeComplete={_color => this.handleChange(_color)}\n                    styles={{ picker: { background: '#112233' } }}\n                />\n                <IconButton className={this.props.classes.closeButton} onClick={() => this.handleClose()}><IconClose /></IconButton>\n                {this.renderCustomPalette()}\n            </Menu> : null }\n        </div>;\n    }\n}\n\nColorPicker.propTypes = {\n    disabled: PropTypes.bool,\n    value: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    name: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    customPalette: PropTypes.array,\n};\n\n/** @type {typeof ColorPicker} */\nconst _export = withStyles(styles)(ColorPicker);\nexport default _export;\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["styles","theme","color","width","height","borderRadius","delButton","marginTop","swatch","padding","background","boxShadow","display","cursor","verticalAlign","swatchDisabled","opacity","popover","backgroundColor","textAlign","popoverList","closeButton","palette","paper","secondary","main","cover","position","top","right","bottom","left","textDense","marginBottom","picker","iconButton","button","minWidth","minHeight","ColorPicker","props","e","setState","displayColorPicker","state","anchorEl","currentTarget","onChange","getColor","value","customPalette","flexWrap","map","classes","handleChange","setTimeout","handleClose","style","className","disabled","marginRight","name","root","target","handleClick","list","_color","renderCustomPalette","pColor","sColor","isHex","rgb","r","toString","padStart","g","b","a","rgb2hex","m","match","parseInt","length","React","Component","propTypes","PropTypes","bool","string","func","isRequired","object","array","_export","withStyles"],"sources":["ColorPicker.js"],"sourcesContent":["/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport { ChromePicker } from 'react-color';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport { TextField, Menu, IconButton, Button } from '@mui/material';\nimport { Delete as IconDelete, Close as IconClose } from '@mui/icons-material';\n\nconst styles = theme => ({\n    color: {\n        width: 36,\n        height: 14,\n        borderRadius: 2,\n    },\n    delButton: {\n        // width: 32,\n        // height: 32,\n        marginTop: 16,\n    },\n    swatch: {\n        marginTop: 16,\n        padding: 5,\n        background: '#fff',\n        borderRadius: 1,\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer',\n        verticalAlign: 'middle',\n    },\n    swatchDisabled: {\n        opacity: 0.5,\n        cursor: 'default',\n    },\n    popover: {\n        // position: 'absolute',\n        // zIndex: 2,\n        backgroundColor: '#00000000',\n        textAlign: 'right',\n    },\n    popoverList: {\n        padding: 0,\n    },\n    closeButton: {\n        backgroundColor: `${theme.palette.background.paper} !important`,\n        borderRadius: '0 0 25% 25%',\n        '&:hover': {\n            backgroundColor: `${theme.palette.secondary.main} !important`,\n        },\n    },\n    cover: {\n        position: 'fixed',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n    },\n    textDense: {\n        marginTop: 0,\n        marginBottom: 0,\n    },\n    picker: {\n        background: `${theme.palette.background.paper} !important`,\n    },\n    iconButton: {\n        width: 16,\n        height: 16,\n    },\n    button: {\n        width: 32,\n        height: 32,\n        minWidth: 32,\n        minHeight: 32,\n    },\n});\n\n/**\n * @typedef {object} Rgb\n * @property {number} r The red component of the color (0-255).\n * @property {number} g The green component of the color (0-255).\n * @property {number} b The blue component of the color (0-255).\n * @property {number} a The alpha component of the color (0-255).\n *\n * @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.\n *\n * @typedef {object} ColorPickerProps\n * @property {boolean} [disabled] Set to true to disable the color picker.\n * @property {Color} [value] The currently selected color.\n * @property {(rgba: string) => void} [onChange] The color change callback.\n * @property {string} [name] The name.\n * @property {React.CSSProperties} [style] Additional styling for this component.\n * @property {string} [className] The CSS class name.\n * @property {boolean} [openAbove] Open the color picker above the field?\n *\n * @extends {React.Component<ColorPickerProps>}\n */\nclass ColorPicker extends React.Component {\n    /**\n     * @param {Readonly<ColorPickerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        this.state = {\n            displayColorPicker: false,\n            color: this.props.value || this.props.color,\n            anchorEl: null,\n        };\n    }\n\n    /**\n     * Get the state derived from the given properties and state.\n     * @param {{ color: Color; }} props\n     * @param {{ color: Color; }} state\n     */\n    static getDerivedStateFromProps(props, state) {\n        const pColor = ColorPicker.getColor(props.value || props.color);\n        const sColor = ColorPicker.getColor(state.color);\n        if (pColor !== sColor) {\n            return {  color: props.value || props.color };\n        }\n        return null;\n    }\n\n    /**\n     * @private\n     */\n    handleClick = e => {\n        this.setState({ displayColorPicker: !this.state.displayColorPicker, anchorEl: this.state.displayColorPicker ? null : e.currentTarget });\n    };\n\n    /**\n     * @private\n     */\n    handleClose = () => {\n        this.setState({ displayColorPicker: false, anchorEl: null });\n    };\n\n    /**\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\n     * @param {Color} [color]\n     * @param {boolean} [isHex] The returning string should be in hex format\n     * @returns {string} the hex or rgba representation of the given color.\n     */\n    static getColor(color, isHex) {\n        if (color && typeof color === 'object') {\n            if (color.rgb) {\n                if (isHex) {\n                    return `#${color.rgb.r.toString(16).padStart(2, '0')}${color.rgb.g.toString(16).padStart(2, '0')}${color.rgb.b.toString(16).padStart(2, '0')}`;\n                }\n                return `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`;\n            }\n            if (isHex) {\n                return `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b.toString(16).padStart(2, '0')}`;\n            }\n            return `rgba(${color.r},${color.g},${color.b},${color.a})`;\n        }\n        return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\n    }\n\n    /**\n     * Convert rgb() or rgba() format to hex format #rrggbb.\n     * @param {string} rgb\n     * @returns {string}\n     */\n    static rgb2hex(rgb) {\n        const m = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n\n        const r = parseInt(m[1], 10).toString(16).padStart(2, '0');\n        const g = parseInt(m[2], 10).toString(16).padStart(2, '0');\n        const b = parseInt(m[3], 10).toString(16).padStart(2, '0');\n\n        return m && m.length === 4 ? `#${r}${g}${b}` : rgb;\n    }\n\n    /**\n     * @private\n     */\n    handleChange = color => {\n        this.setState({ color }, () =>\n            this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));\n    };\n\n    renderCustomPalette() {\n        if (!this.props.customPalette) {\n            return null;\n        }\n        return <div style={{ width: '100%', display: 'flex', flexWrap: 'flex' }}>\n            {this.props.customPalette.map(color =>\n                <Button\n                    className={this.props.classes.button}\n                    key={color}\n                    onClick={() => {\n                        this.handleChange(color);\n                        setTimeout(() => this.handleClose(), 300);\n                    }}\n                >\n                    <div className={this.props.classes.iconButton} style={{ background: color }} />\n                </Button>)}\n        </div>;\n    }\n\n    render() {\n        const color = ColorPicker.getColor(this.state.color);\n\n        const style = {...(this.props.style || {})};\n        style.position = 'relative';\n\n        return <div\n            style={ style }\n            className={this.props.className || ''}\n        >\n            <TextField\n                disabled={this.props.disabled}\n                variant=\"standard\"\n                id=\"name\"\n                style={color ? { width: 'calc(100% - 80px)' } : { width: 'calc(100% - 54px)', marginRight: 8 }}\n                label={ this.props.name || 'color' }\n                value={color}\n                margin=\"dense\"\n                classes={{ root: this.props.classes.textDense }}\n                onChange={e => this.handleChange(e.target.value)}\n            />\n            {color ? <IconButton\n                disabled={this.props.disabled}\n                onClick={() => this.handleChange('')}\n                size=\"small\"\n                className={this.props.classes.delButton}\n                style={color ? {} : { opacity: 0, cursor: 'default' }}\n            >\n                <IconDelete />\n            </IconButton> : null}\n            <div className={`${this.props.classes.swatch}${this.props.disabled ? ` ${this.props.classes.swatchDisabled}` : ''}`} onClick={e => !this.props.disabled && this.handleClick(e)}>\n                <div className={this.props.classes.color} style={{ background: color }} />\n            </div>\n            { this.state.displayColorPicker && !this.props.disabled ? <Menu\n                classes={{ paper: this.props.classes.popover, list: this.props.classes.popoverList }}\n                anchorEl={this.state.anchorEl}\n                open={!0}\n                onClose={() => this.handleClose()}\n            >\n                <ChromePicker\n                    className={this.props.classes.picker}\n                    color={this.state.color}\n                    onChangeComplete={_color => this.handleChange(_color)}\n                    styles={{ picker: { background: '#112233' } }}\n                />\n                <IconButton className={this.props.classes.closeButton} onClick={() => this.handleClose()}><IconClose /></IconButton>\n                {this.renderCustomPalette()}\n            </Menu> : null }\n        </div>;\n    }\n}\n\nColorPicker.propTypes = {\n    disabled: PropTypes.bool,\n    value: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    name: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    customPalette: PropTypes.array,\n};\n\n/** @type {typeof ColorPicker} */\nconst _export = withStyles(styles)(ColorPicker);\nexport default _export;\n"],"mappings":"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"}

package/Components/ObjectBrowser.js

@@ -19,7 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _copyToClipboard = _interopRequireDefault(require("./copy-to-clipboard"));
 var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -294,6 +293,18 @@ var styles = function styles(theme) {
       height: SMALL_BUTTON_SIZE
     },
     cellIdIconOwn: {},
+    cellIdTooltip: {
+      fontSize: 14
+    },
+    cellIdTooltipLink: {
+      color: "#7ec2fd",
+      "&:hover": {
+        color: "#7ec2fd"
+      },
+      "&:visited": {
+        color: "#7ec2fd"
+      }
+    },
     cellCopyButton: {
       width: SMALL_BUTTON_SIZE,
       height: SMALL_BUTTON_SIZE,
@@ -788,17 +799,17 @@ function getSelectIdIcon(objects, id, imagePrefix) {
       } else {
         return null; // '<i class="material-icons iob-list-icon">' + objects[_id_].common.icon + '</i>';
       }
-    }
-
-    if (aIcon.startsWith('data:image/svg')) {
-      src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
-        className: "iconOwn",
-        src: aIcon,
-        width: 28,
-        height: 28
-      });
     } else {
-      src = aIcon;
+      if (aIcon.startsWith('data:image/svg')) {
+        src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
+          className: "iconOwn",
+          src: aIcon,
+          width: 28,
+          height: 28
+        });
+      } else {
+        src = aIcon;
+      }
     }
   } else {
     var common = objects[id] && objects[id].common;
@@ -1079,6 +1090,34 @@ function getSystemIcon(objects, id, k, imagePrefix) {
   }
   return icon || null;
 }
+function getIdFieldTooltip(data, classes, lang) {
+  var _data$obj2, _data$obj2$common;
+  if (data !== null && data !== void 0 && (_data$obj2 = data.obj) !== null && _data$obj2 !== void 0 && (_data$obj2$common = _data$obj2.common) !== null && _data$obj2$common !== void 0 && _data$obj2$common.desc && data.obj.common.desc !== '') {
+    var _data$obj3, _data$obj3$common, _data$obj4, _data$obj4$common, _data$obj5, _data$obj5$common, _tooltip;
+    var tooltip = '';
+    if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj3 = data.obj) === null || _data$obj3 === void 0 ? void 0 : (_data$obj3$common = _data$obj3.common) === null || _data$obj3$common === void 0 ? void 0 : _data$obj3$common.desc) === 'object' && data.obj.common.desc[lang] !== undefined) {
+      tooltip = data.obj.common.desc[lang];
+    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj4 = data.obj) === null || _data$obj4 === void 0 ? void 0 : (_data$obj4$common = _data$obj4.common) === null || _data$obj4$common === void 0 ? void 0 : _data$obj4$common.desc) === 'object' && data.obj.common.desc['en'] !== undefined) {
+      tooltip = data.obj.common.desc['en'];
+    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj5 = data.obj) === null || _data$obj5 === void 0 ? void 0 : (_data$obj5$common = _data$obj5.common) === null || _data$obj5$common === void 0 ? void 0 : _data$obj5$common.desc) === 'object' && data.obj.common.desc[lang] === undefined) {
+      return data.id;
+    } else {
+      tooltip = data.obj.common.desc;
+    }
+    if ((_tooltip = tooltip) !== null && _tooltip !== void 0 && _tooltip.startsWith('http')) {
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        className: _Utils["default"].clsx(classes.cellIdTooltipLink),
+        href: tooltip,
+        target: "_blank",
+        rel: "noreferrer"
+      }, tooltip);
+    }
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _Utils["default"].clsx(classes.cellIdTooltip)
+    }, tooltip);
+  }
+  return data.id;
+}
 function buildTree(objects, options) {
   options = options || {};
   var imagePrefix = options.imagePrefix || '.';
@@ -3952,7 +3991,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     value: function onCopy(e, text) {
       e.stopPropagation();
       e.preventDefault();
-      (0, _copyToClipboard["default"])(text, null);
+      _Utils["default"].copyToClipboard(text, null);
       if (text.length < 50) {
         this.setState({
           toast: this.props.t('ra_Copied %s', text)
@@ -3994,7 +4033,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "delete",
           title: this.texts.deleteObject,
           onClick: function onClick() {
-            return _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false);
+            // calculate number of children
+            var keys = Object.keys(_this27.objects);
+            keys.sort();
+            var count = 0;
+            var start = "".concat(id, ".");
+            for (var i = 0; i < keys.length; i++) {
+              if (keys[i].startsWith(start)) {
+                count++;
+              } else if (keys[i] > start) {
+                break;
+              }
+            }
+            _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
           }
         }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
           className: classes.cellButtonsButtonIcon
@@ -4041,7 +4092,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "delete",
         onClick: function onClick() {
           var _item$children3, _item$data$obj$common2;
-          return _this27.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete));
+          var keys = Object.keys(_this27.objects);
+          keys.sort();
+          var count = 0;
+          var start = "".concat(id, ".");
+          for (var i = 0; i < keys.length; i++) {
+            if (keys[i].startsWith(start)) {
+              count++;
+            } else if (keys[i] > start) {
+              break;
+            }
+          }
+          _this27.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete), count);
         },
         title: this.texts.deleteObject
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
@@ -4774,7 +4836,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           invertBackground = this.props.themeType === 'dark' ? '#9a9a9a' : '#565656';
         }
       }
-      if (!checkColor || this.state.selected.includes(id)) {
+      if (id === 'system') {
+        checkColor = COLOR_NAME_SYSTEM;
+      } else if (id === 'system.adapter') {
+        checkColor = COLOR_NAME_SYSTEM_ADAPTER;
+      } else if (!checkColor || this.state.selected.includes(id)) {
         checkColor = 'inherit';
       }
       var icons = [];
@@ -4910,12 +4976,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }, checkbox, iconFolder), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
-        title: id,
-        className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground),
         style: {
-          color: id === 'system' ? COLOR_NAME_SYSTEM : id === 'system.adapter' ? COLOR_NAME_SYSTEM_ADAPTER : checkColor
-        }
-      }, item.data.name, alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
+          color: checkColor
+        },
+        className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground)
+      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        title: getIdFieldTooltip(item.data, this.props.classes, this.props.lang)
+      }, /*#__PURE__*/_react["default"].createElement("div", null, item.data.name)), alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.grow, invertBackground && classes.invertedBackgroundFlex)
       }), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
@@ -5874,7 +5941,7 @@ ObjectBrowser.propTypes = {
   modalEditOfAccessControl: _propTypes["default"].func,
   // modal Edit Of Access Control
   onObjectDelete: _propTypes["default"].func,
-  // optional function (id, hasChildren, objectExists) {  }
+  // optional function (id, hasChildren, objectExists, childrenCount+1) {  }
   customFilter: _propTypes["default"].object,
   // optional
   // `{common: {custom: true}}` - show only objects with some custom settings