@iobroker/gui-components 10.3.16 → 10.4.0

package/build/Components/ObjectBrowser/rowAnimation.d.ts

@@ -1,9 +1,33 @@
+export interface RowParts {
+    /** Lower edge of the row of the node (and of its details panel) */
+    top: number;
+    /** The rendered rows of the children (and of their children) */
+    block: HTMLElement[];
+    /** The rendered rows below the children */
+    below: HTMLElement[];
+    /** How far the rows move: the height of the children, at most down to the end of the visible area */
+    distance: number;
+}
+/**
+ * Measures the rows of a node that is unfolded or folded
+ *
+ * @param container the scrolling container of the rows; the rows move at most down to its lower edge
+ * @param nodeRow the (last) element of the row of the node
+ * @param block the rendered rows of its children
+ * @param below the rendered rows below the children
+ * @returns null if nothing can be animated
+ */
+export declare function measureRows(container: HTMLElement | null, nodeRow: HTMLElement | null, block: HTMLElement[], below: HTMLElement[]): RowParts | null;
 /** The node was unfolded and its children are rendered: let them slide out from under its row */
-export declare function unfold(container: HTMLElement | null, id: string): Animation[];
+export declare function unfoldRows(parts: RowParts | null): Animation[];
 /**
  * The node is about to be folded: its children slide back under its row. The rows stay in their end
  * position until `onFinished` removed them and canceled the animations.
  *
  * @returns null if nothing can be animated, then fold at once
  */
+export declare function foldRows(parts: RowParts | null, onFinished: () => void): Animation[] | null;
+/** Object browser: the node `id` was unfolded, see `unfoldRows` */
+export declare function unfold(container: HTMLElement | null, id: string): Animation[];
+/** Object browser: the node `id` is about to be folded, see `foldRows` */
 export declare function fold(container: HTMLElement | null, id: string, onFinished: () => void): Animation[] | null;

package/build/Components/ObjectBrowser/rowAnimation.js

@@ -6,6 +6,8 @@
  * Unfolding and folding of a node in the table: the children slide out from under the row of the node
  * (or back under it), and the rows below them move along. Only `transform` and `clip-path` are animated,
  * so the layout is the final one from the start, and `measureRenderedRows` still reads the real heights.
+ *
+ * `unfoldRows`, `foldRows` and `measureRows` work with any list of rows, e.g. the rows of `TreeTable`.
  */
 import { prefersReducedMotion } from '../AnimatedIcons/common';
 const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
@@ -17,12 +19,40 @@ function rowIdOf(element) {
     const row = (element.id ? element : element.firstElementChild);
     return row?.id || undefined;
 }
+/** True if the rows can be animated: the browser can do it, and the user did not ask for less motion */
+function canAnimate() {
+    return typeof Element !== 'undefined' && !!Element.prototype.animate && !prefersReducedMotion();
+}
+/**
+ * Measures the rows of a node that is unfolded or folded
+ *
+ * @param container the scrolling container of the rows; the rows move at most down to its lower edge
+ * @param nodeRow the (last) element of the row of the node
+ * @param block the rendered rows of its children
+ * @param below the rendered rows below the children
+ * @returns null if nothing can be animated
+ */
+export function measureRows(container, nodeRow, block, below) {
+    if (!container || !nodeRow || !block.length || !canAnimate()) {
+        return null;
+    }
+    const top = nodeRow.getBoundingClientRect().bottom;
+    const blockBottom = below.length
+        ? below[0].getBoundingClientRect().top
+        : block[block.length - 1].getBoundingClientRect().bottom;
+    const distance = Math.min(blockBottom, container.getBoundingClientRect().bottom, window.innerHeight) - top;
+    if (distance < 2) {
+        return null;
+    }
+    return { top, block, below, distance };
+}
+/** The rows of the object browser: the children of a node have IDs that begin with the ID of the node */
 function collectParts(container, id) {
-    if (!container || !id || typeof Element === 'undefined' || !Element.prototype.animate || prefersReducedMotion()) {
+    if (!container || !id || !canAnimate()) {
         return null;
     }
     const prefix = `${id}.`;
-    let top = null;
+    let nodeRow = null;
     const block = [];
     const below = [];
     for (const child of Array.from(container.children)) {
@@ -32,9 +62,10 @@ function collectParts(container, id) {
             continue;
         }
         if (rowId === id) {
-            top = child.getBoundingClientRect().bottom;
+            // the row of the node, or its details panel below it
+            nodeRow = child;
         }
-        else if (top !== null) {
+        else if (nodeRow) {
             if (!below.length && rowId.startsWith(prefix)) {
                 block.push(child);
             }
@@ -43,17 +74,7 @@ function collectParts(container, id) {
             }
         }
     }
-    if (top === null || !block.length) {
-        return null;
-    }
-    const blockBottom = below.length
-        ? below[0].getBoundingClientRect().top
-        : block[block.length - 1].getBoundingClientRect().bottom;
-    const distance = Math.min(blockBottom, container.getBoundingClientRect().bottom) - top;
-    if (distance < 2) {
-        return null;
-    }
-    return { top, block, below, distance };
+    return measureRows(container, nodeRow, block, below);
 }
 /**
  * Key frames of a row of the children: it moves down from under the row of the node and is cut off,
@@ -92,8 +113,7 @@ function duration(distance) {
     return Math.round(Math.min(340, 140 + distance * 0.4));
 }
 /** The node was unfolded and its children are rendered: let them slide out from under its row */
-export function unfold(container, id) {
-    const parts = collectParts(container, id);
+export function unfoldRows(parts) {
     if (!parts) {
         return [];
     }
@@ -105,8 +125,7 @@ export function unfold(container, id) {
  *
  * @returns null if nothing can be animated, then fold at once
  */
-export function fold(container, id, onFinished) {
-    const parts = collectParts(container, id);
+export function foldRows(parts, onFinished) {
     if (!parts) {
         return null;
     }
@@ -119,4 +138,12 @@ export function fold(container, id, onFinished) {
     animations[0].onfinish = onFinished;
     return animations;
 }
+/** Object browser: the node `id` was unfolded, see `unfoldRows` */
+export function unfold(container, id) {
+    return unfoldRows(collectParts(container, id));
+}
+/** Object browser: the node `id` is about to be folded, see `foldRows` */
+export function fold(container, id, onFinished) {
+    return foldRows(collectParts(container, id), onFinished);
+}
 //# sourceMappingURL=rowAnimation.js.map

package/build/Components/ObjectBrowser/rowAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"rowAnimation.js","sourceRoot":"./src/","sources":["Components/ObjectBrowser/rowAnimation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Unfolding and folding of a node in the table: the children slide out from under the row of the node\n * (or back under it), and the rows below them move along. Only `transform` and `clip-path` are animated,\n * so the layout is the final one from the start, and `measureRenderedRows` still reads the real heights.\n */\nimport { prefersReducedMotion } from '../AnimatedIcons/common';\n\nconst EASING = 'cubic-bezier(0.2, 0, 0, 1)';\n\ninterface RowParts {\n    /** Lower edge of the row of the node (and of its details panel) */\n    top: number;\n    /** The rendered rows of the children (and of their children) */\n    block: HTMLElement[];\n    /** The rendered rows below the children */\n    below: HTMLElement[];\n    /** How far the rows move: the height of the children, at most down to the end of the visible area */\n    distance: number;\n}\n\n/** The row a child of the table container belongs to (rows in a drag-and-drop wrapper too) */\nfunction rowIdOf(element: HTMLElement): string | undefined {\n    if (element.dataset.detailsOf) {\n        return element.dataset.detailsOf;\n    }\n    const row = (element.id ? element : element.firstElementChild) as HTMLElement | null;\n    return row?.id || undefined;\n}\n\nfunction collectParts(container: HTMLElement | null, id: string): RowParts | null {\n    if (!container || !id || typeof Element === 'undefined' || !Element.prototype.animate || prefersReducedMotion()) {\n        return null;\n    }\n    const prefix = `${id}.`;\n    let top: number | null = null;\n    const block: HTMLElement[] = [];\n    const below: HTMLElement[] = [];\n    for (const child of Array.from(container.children) as HTMLElement[]) {\n        const rowId = rowIdOf(child);\n        if (!rowId) {\n            // the spacers above and below the rendered rows\n            continue;\n        }\n        if (rowId === id) {\n            top = child.getBoundingClientRect().bottom;\n        } else if (top !== null) {\n            if (!below.length && rowId.startsWith(prefix)) {\n                block.push(child);\n            } else {\n                below.push(child);\n            }\n        }\n    }\n    if (top === null || !block.length) {\n        return null;\n    }\n    const blockBottom = below.length\n        ? below[0].getBoundingClientRect().top\n        : block[block.length - 1].getBoundingClientRect().bottom;\n    const distance = Math.min(blockBottom, container.getBoundingClientRect().bottom) - top;\n    if (distance < 2) {\n        return null;\n    }\n    return { top, block, below, distance };\n}\n\n/**\n * Key frames of a row of the children: it moves down from under the row of the node and is cut off,\n * as long as it is still under it\n */\nfunction childFrames(element: HTMLElement, top: number, distance: number): Keyframe[] {\n    const rect = element.getBoundingClientRect();\n    const y = rect.top - top;\n    const height = rect.height;\n    const from = `translateY(${-distance}px)`;\n    if (y >= distance || !height) {\n        return [{ transform: from }, { transform: 'translateY(0)' }];\n    }\n    // the part above the lower edge of the node row is hidden: distance * (1 - progress) - y\n    const frames: Keyframe[] = [\n        { offset: 0, transform: from, clipPath: `inset(${Math.min(height, distance - y)}px 0 0 0)` },\n    ];\n    const startsToShow = 1 - (y + height) / distance;\n    if (startsToShow > 0) {\n        frames.push({ offset: startsToShow, clipPath: `inset(${height}px 0 0 0)` });\n    }\n    const fullyShown = 1 - y / distance;\n    if (fullyShown < 1) {\n        frames.push({ offset: fullyShown, clipPath: 'inset(0px 0 0 0)' });\n    }\n    frames.push({ offset: 1, transform: 'translateY(0)', clipPath: 'inset(0px 0 0 0)' });\n    return frames;\n}\n\nfunction animate(parts: RowParts, options: KeyframeAnimationOptions): Animation[] {\n    const animations = parts.block.map(element =>\n        element.animate(childFrames(element, parts.top, parts.distance), options),\n    );\n    const frames: Keyframe[] = [{ transform: `translateY(${-parts.distance}px)` }, { transform: 'translateY(0)' }];\n    parts.below.forEach(element => animations.push(element.animate(frames, options)));\n    return animations;\n}\n\nfunction duration(distance: number): number {\n    return Math.round(Math.min(340, 140 + distance * 0.4));\n}\n\n/** The node was unfolded and its children are rendered: let them slide out from under its row */\nexport function unfold(container: HTMLElement | null, id: string): Animation[] {\n    const parts = collectParts(container, id);\n    if (!parts) {\n        return [];\n    }\n    return animate(parts, { duration: duration(parts.distance), easing: EASING });\n}\n\n/**\n * The node is about to be folded: its children slide back under its row. The rows stay in their end\n * position until `onFinished` removed them and canceled the animations.\n *\n * @returns null if nothing can be animated, then fold at once\n */\nexport function fold(container: HTMLElement | null, id: string, onFinished: () => void): Animation[] | null {\n    const parts = collectParts(container, id);\n    if (!parts) {\n        return null;\n    }\n    const animations = animate(parts, {\n        duration: Math.round(duration(parts.distance) * 0.8),\n        easing: EASING,\n        direction: 'reverse',\n        fill: 'forwards',\n    });\n    animations[0].onfinish = onFinished;\n    return animations;\n}\n"]}
+{"version":3,"file":"rowAnimation.js","sourceRoot":"./src/","sources":["Components/ObjectBrowser/rowAnimation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Unfolding and folding of a node in the table: the children slide out from under the row of the node\n * (or back under it), and the rows below them move along. Only `transform` and `clip-path` are animated,\n * so the layout is the final one from the start, and `measureRenderedRows` still reads the real heights.\n *\n * `unfoldRows`, `foldRows` and `measureRows` work with any list of rows, e.g. the rows of `TreeTable`.\n */\nimport { prefersReducedMotion } from '../AnimatedIcons/common';\n\nconst EASING = 'cubic-bezier(0.2, 0, 0, 1)';\n\nexport interface RowParts {\n    /** Lower edge of the row of the node (and of its details panel) */\n    top: number;\n    /** The rendered rows of the children (and of their children) */\n    block: HTMLElement[];\n    /** The rendered rows below the children */\n    below: HTMLElement[];\n    /** How far the rows move: the height of the children, at most down to the end of the visible area */\n    distance: number;\n}\n\n/** The row a child of the table container belongs to (rows in a drag-and-drop wrapper too) */\nfunction rowIdOf(element: HTMLElement): string | undefined {\n    if (element.dataset.detailsOf) {\n        return element.dataset.detailsOf;\n    }\n    const row = (element.id ? element : element.firstElementChild) as HTMLElement | null;\n    return row?.id || undefined;\n}\n\n/** True if the rows can be animated: the browser can do it, and the user did not ask for less motion */\nfunction canAnimate(): boolean {\n    return typeof Element !== 'undefined' && !!Element.prototype.animate && !prefersReducedMotion();\n}\n\n/**\n * Measures the rows of a node that is unfolded or folded\n *\n * @param container the scrolling container of the rows; the rows move at most down to its lower edge\n * @param nodeRow the (last) element of the row of the node\n * @param block the rendered rows of its children\n * @param below the rendered rows below the children\n * @returns null if nothing can be animated\n */\nexport function measureRows(\n    container: HTMLElement | null,\n    nodeRow: HTMLElement | null,\n    block: HTMLElement[],\n    below: HTMLElement[],\n): RowParts | null {\n    if (!container || !nodeRow || !block.length || !canAnimate()) {\n        return null;\n    }\n    const top = nodeRow.getBoundingClientRect().bottom;\n    const blockBottom = below.length\n        ? below[0].getBoundingClientRect().top\n        : block[block.length - 1].getBoundingClientRect().bottom;\n    const distance = Math.min(blockBottom, container.getBoundingClientRect().bottom, window.innerHeight) - top;\n    if (distance < 2) {\n        return null;\n    }\n    return { top, block, below, distance };\n}\n\n/** The rows of the object browser: the children of a node have IDs that begin with the ID of the node */\nfunction collectParts(container: HTMLElement | null, id: string): RowParts | null {\n    if (!container || !id || !canAnimate()) {\n        return null;\n    }\n    const prefix = `${id}.`;\n    let nodeRow: HTMLElement | null = null;\n    const block: HTMLElement[] = [];\n    const below: HTMLElement[] = [];\n    for (const child of Array.from(container.children) as HTMLElement[]) {\n        const rowId = rowIdOf(child);\n        if (!rowId) {\n            // the spacers above and below the rendered rows\n            continue;\n        }\n        if (rowId === id) {\n            // the row of the node, or its details panel below it\n            nodeRow = child;\n        } else if (nodeRow) {\n            if (!below.length && rowId.startsWith(prefix)) {\n                block.push(child);\n            } else {\n                below.push(child);\n            }\n        }\n    }\n    return measureRows(container, nodeRow, block, below);\n}\n\n/**\n * Key frames of a row of the children: it moves down from under the row of the node and is cut off,\n * as long as it is still under it\n */\nfunction childFrames(element: HTMLElement, top: number, distance: number): Keyframe[] {\n    const rect = element.getBoundingClientRect();\n    const y = rect.top - top;\n    const height = rect.height;\n    const from = `translateY(${-distance}px)`;\n    if (y >= distance || !height) {\n        return [{ transform: from }, { transform: 'translateY(0)' }];\n    }\n    // the part above the lower edge of the node row is hidden: distance * (1 - progress) - y\n    const frames: Keyframe[] = [\n        { offset: 0, transform: from, clipPath: `inset(${Math.min(height, distance - y)}px 0 0 0)` },\n    ];\n    const startsToShow = 1 - (y + height) / distance;\n    if (startsToShow > 0) {\n        frames.push({ offset: startsToShow, clipPath: `inset(${height}px 0 0 0)` });\n    }\n    const fullyShown = 1 - y / distance;\n    if (fullyShown < 1) {\n        frames.push({ offset: fullyShown, clipPath: 'inset(0px 0 0 0)' });\n    }\n    frames.push({ offset: 1, transform: 'translateY(0)', clipPath: 'inset(0px 0 0 0)' });\n    return frames;\n}\n\nfunction animate(parts: RowParts, options: KeyframeAnimationOptions): Animation[] {\n    const animations = parts.block.map(element =>\n        element.animate(childFrames(element, parts.top, parts.distance), options),\n    );\n    const frames: Keyframe[] = [{ transform: `translateY(${-parts.distance}px)` }, { transform: 'translateY(0)' }];\n    parts.below.forEach(element => animations.push(element.animate(frames, options)));\n    return animations;\n}\n\nfunction duration(distance: number): number {\n    return Math.round(Math.min(340, 140 + distance * 0.4));\n}\n\n/** The node was unfolded and its children are rendered: let them slide out from under its row */\nexport function unfoldRows(parts: RowParts | null): Animation[] {\n    if (!parts) {\n        return [];\n    }\n    return animate(parts, { duration: duration(parts.distance), easing: EASING });\n}\n\n/**\n * The node is about to be folded: its children slide back under its row. The rows stay in their end\n * position until `onFinished` removed them and canceled the animations.\n *\n * @returns null if nothing can be animated, then fold at once\n */\nexport function foldRows(parts: RowParts | null, onFinished: () => void): Animation[] | null {\n    if (!parts) {\n        return null;\n    }\n    const animations = animate(parts, {\n        duration: Math.round(duration(parts.distance) * 0.8),\n        easing: EASING,\n        direction: 'reverse',\n        fill: 'forwards',\n    });\n    animations[0].onfinish = onFinished;\n    return animations;\n}\n\n/** Object browser: the node `id` was unfolded, see `unfoldRows` */\nexport function unfold(container: HTMLElement | null, id: string): Animation[] {\n    return unfoldRows(collectParts(container, id));\n}\n\n/** Object browser: the node `id` is about to be folded, see `foldRows` */\nexport function fold(container: HTMLElement | null, id: string, onFinished: () => void): Animation[] | null {\n    return foldRows(collectParts(container, id), onFinished);\n}\n"]}

package/build/Components/ObjectBrowser/skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Part of the object browser, see ./ObjectBrowserClass.tsx
+ *
+ * Placeholder while the objects are loading: a toolbar, a header and rows that look like an object tree,
+ * with a shimmer running over them. With many objects the loading takes some seconds, and so the page
+ * does not stay empty.
+ */
+import { type JSX } from 'react';
+import type { ObjectBrowserClass } from './ObjectBrowserClass';
+/** The placeholder of the object browser while the objects are loading */
+export declare function renderSkeleton(that: ObjectBrowserClass): JSX.Element;

package/build/Components/ObjectBrowser/skeleton.js

@@ -0,0 +1,106 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Part of the object browser, see ./ObjectBrowserClass.tsx
+ *
+ * Placeholder while the objects are loading: a toolbar, a header and rows that look like an object tree,
+ * with a shimmer running over them. With many objects the loading takes some seconds, and so the page
+ * does not stay empty.
+ */
+import React from 'react';
+import { Box, Skeleton } from '@mui/material';
+import { prefersReducedMotion } from '../AnimatedIcons/common';
+import { ROW_HEIGHT } from './utils';
+/** Level, width of the ID and width of the name (0: no name, like a folder) of the placeholder rows, in % */
+const ROWS = [
+    [0, 30, 0],
+    [1, 42, 0],
+    [2, 55, 46],
+    [2, 48, 38],
+    [2, 60, 52],
+    [1, 38, 30],
+    [2, 52, 0],
+    [3, 64, 44],
+    [3, 58, 56],
+    [0, 26, 0],
+    [1, 46, 40],
+    [1, 40, 34],
+    [2, 57, 48],
+    [0, 34, 0],
+    [1, 50, 42],
+    [2, 62, 36],
+    [2, 54, 50],
+    [1, 44, 0],
+    [2, 59, 39],
+    [2, 51, 47],
+];
+const styles = {
+    root: {
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    toolbar: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        minHeight: 48,
+        padding: '0 12px',
+        flexShrink: 0,
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        height: 38,
+        padding: '0 8px',
+        flexShrink: 0,
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        height: ROW_HEIGHT,
+        paddingRight: 8,
+        flexShrink: 0,
+    },
+    id: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width: '45%',
+        // the indentation of the level is inside of the width, so the name column starts at the same place
+        boxSizing: 'border-box',
+        flexShrink: 0,
+        minWidth: 0,
+    },
+    name: {
+        flexGrow: 1,
+        minWidth: 0,
+        paddingLeft: 8,
+    },
+    value: {
+        width: '14%',
+        flexShrink: 0,
+        display: 'flex',
+        justifyContent: 'flex-end',
+    },
+};
+/** The placeholder of the object browser while the objects are loading */
+export function renderSkeleton(that) {
+    const animation = prefersReducedMotion() ? false : 'wave';
+    return (React.createElement(Box, { key: `${that.props.dialogName}_c`, style: { ...styles.root, ...that.props.style }, "aria-busy": "true" },
+        React.createElement("div", { style: styles.toolbar }, [0, 1, 2, 3, 4, 5, 6].map(i => (React.createElement(Skeleton, { key: i, variant: "circular", width: 28, height: 28, animation: animation })))),
+        React.createElement("div", { style: styles.header },
+            React.createElement(Skeleton, { variant: "rounded", width: "42%", height: 26, animation: animation }),
+            React.createElement(Skeleton, { variant: "rounded", width: "30%", height: 26, animation: animation })),
+        ROWS.map(([level, idWidth, nameWidth], i) => (React.createElement("div", { key: i, style: styles.row },
+            React.createElement("div", { style: { ...styles.id, paddingLeft: 8 + level * 20 } },
+                React.createElement(Skeleton, { variant: "rounded", width: 18, height: 18, animation: animation, sx: { flexShrink: 0 } }),
+                React.createElement(Skeleton, { variant: "text", width: `${idWidth}%`, animation: animation })),
+            React.createElement("div", { style: styles.name }, nameWidth ? (React.createElement(Skeleton, { variant: "text", width: `${nameWidth}%`, animation: animation })) : null),
+            React.createElement("div", { style: styles.value }, nameWidth ? (React.createElement(Skeleton, { variant: "text", width: "60%", animation: animation })) : null))))));
+}
+//# sourceMappingURL=skeleton.js.map

package/build/Components/ObjectBrowser/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"./src/","sources":["Components/ObjectBrowser/skeleton.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Part of the object browser, see ./ObjectBrowserClass.tsx\n *\n * Placeholder while the objects are loading: a toolbar, a header and rows that look like an object tree,\n * with a shimmer running over them. With many objects the loading takes some seconds, and so the page\n * does not stay empty.\n */\nimport React, { type JSX } from 'react';\nimport { Box, Skeleton } from '@mui/material';\nimport { prefersReducedMotion } from '../AnimatedIcons/common';\nimport { ROW_HEIGHT } from './utils';\nimport type { ObjectBrowserClass } from './ObjectBrowserClass';\n\n/** Level, width of the ID and width of the name (0: no name, like a folder) of the placeholder rows, in % */\nconst ROWS: [number, number, number][] = [\n    [0, 30, 0],\n    [1, 42, 0],\n    [2, 55, 46],\n    [2, 48, 38],\n    [2, 60, 52],\n    [1, 38, 30],\n    [2, 52, 0],\n    [3, 64, 44],\n    [3, 58, 56],\n    [0, 26, 0],\n    [1, 46, 40],\n    [1, 40, 34],\n    [2, 57, 48],\n    [0, 34, 0],\n    [1, 50, 42],\n    [2, 62, 36],\n    [2, 54, 50],\n    [1, 44, 0],\n    [2, 59, 39],\n    [2, 51, 47],\n];\n\nconst styles: Record<string, React.CSSProperties> = {\n    root: {\n        height: '100%',\n        overflow: 'hidden',\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    toolbar: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 12,\n        minHeight: 48,\n        padding: '0 12px',\n        flexShrink: 0,\n    },\n    header: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 16,\n        height: 38,\n        padding: '0 8px',\n        flexShrink: 0,\n    },\n    row: {\n        display: 'flex',\n        alignItems: 'center',\n        height: ROW_HEIGHT,\n        paddingRight: 8,\n        flexShrink: 0,\n    },\n    id: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        width: '45%',\n        // the indentation of the level is inside of the width, so the name column starts at the same place\n        boxSizing: 'border-box',\n        flexShrink: 0,\n        minWidth: 0,\n    },\n    name: {\n        flexGrow: 1,\n        minWidth: 0,\n        paddingLeft: 8,\n    },\n    value: {\n        width: '14%',\n        flexShrink: 0,\n        display: 'flex',\n        justifyContent: 'flex-end',\n    },\n};\n\n/** The placeholder of the object browser while the objects are loading */\nexport function renderSkeleton(that: ObjectBrowserClass): JSX.Element {\n    const animation = prefersReducedMotion() ? false : 'wave';\n    return (\n        <Box\n            key={`${that.props.dialogName}_c`}\n            style={{ ...styles.root, ...that.props.style }}\n            aria-busy=\"true\"\n        >\n            <div style={styles.toolbar}>\n                {[0, 1, 2, 3, 4, 5, 6].map(i => (\n                    <Skeleton\n                        key={i}\n                        variant=\"circular\"\n                        width={28}\n                        height={28}\n                        animation={animation}\n                    />\n                ))}\n            </div>\n            <div style={styles.header}>\n                <Skeleton\n                    variant=\"rounded\"\n                    width=\"42%\"\n                    height={26}\n                    animation={animation}\n                />\n                <Skeleton\n                    variant=\"rounded\"\n                    width=\"30%\"\n                    height={26}\n                    animation={animation}\n                />\n            </div>\n            {ROWS.map(([level, idWidth, nameWidth], i) => (\n                <div\n                    key={i}\n                    style={styles.row}\n                >\n                    <div style={{ ...styles.id, paddingLeft: 8 + level * 20 }}>\n                        <Skeleton\n                            variant=\"rounded\"\n                            width={18}\n                            height={18}\n                            animation={animation}\n                            sx={{ flexShrink: 0 }}\n                        />\n                        <Skeleton\n                            variant=\"text\"\n                            width={`${idWidth}%`}\n                            animation={animation}\n                        />\n                    </div>\n                    <div style={styles.name}>\n                        {nameWidth ? (\n                            <Skeleton\n                                variant=\"text\"\n                                width={`${nameWidth}%`}\n                                animation={animation}\n                            />\n                        ) : null}\n                    </div>\n                    <div style={styles.value}>\n                        {nameWidth ? (\n                            <Skeleton\n                                variant=\"text\"\n                                width=\"60%\"\n                                animation={animation}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            ))}\n        </Box>\n    );\n}\n"]}

package/build/Components/ObjectBrowser/styles.js

@@ -101,13 +101,16 @@ export const styles = {
         float: 'right',
         padding: 0,
     },
-    buttonClearFilterIcon: {
-        zIndex: 2,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        color: '#FF0000',
-        opacity: 0.7,
+    buttonClearFilterVisible: {
+        opacity: 1,
+        visibility: 'visible',
+        transition: 'opacity 0.15s',
+    },
+    /** Without a filter: the cross of the icon jumps away first, then the button fades out */
+    buttonClearFilterHidden: {
+        opacity: 0,
+        visibility: 'hidden',
+        transition: 'opacity 0.2s 0.3s, visibility 0s 0.5s',
     },
     // The header is rendered inside this container (see `headerRow`), so it uses the full height
     tableDiv: {
@@ -651,17 +654,19 @@ export const styles = {
         color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,
         opacity: 0.8,
         position: 'absolute',
-        top: 4,
+        // IconConnectionState is 20 px high; the error icon (MUI, 20 px wide, 24 px high, top: 4) draws its glyph 2 px lower
+        top: 6,
         right: 32,
-        width: 20,
+        transition: 'color 0.3s',
     }),
     iconDeviceDisconnected: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT,
         opacity: 0.8,
         position: 'absolute',
-        top: 4,
+        // IconConnectionState is 20 px high; the error icon (MUI, 20 px wide, 24 px high, top: 4) draws its glyph 2 px lower
+        top: 6,
         right: 32,
-        width: 20,
+        transition: 'color 0.3s',
     }),
     iconDeviceError: (theme) => ({
         color: theme.palette.mode === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT,

package/build/Components/ObjectBrowser/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"./src/","sources":["Components/ObjectBrowser/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2020-2026, Denis Haev <dogafox@gmail.com>\n *\n * MIT License\n *\n */\n\nimport type React from 'react';\nimport type { SxProps } from '@mui/material';\n\nimport type { IobTheme } from '../../types';\nimport { Utils } from '../Utils';\nimport { ICON_SIZE, ROW_HEIGHT, styles as utilStyles } from './utils';\nimport {\n    COLOR_NAME_CONNECTED_DARK,\n    COLOR_NAME_CONNECTED_LIGHT,\n    COLOR_NAME_DISCONNECTED_DARK,\n    COLOR_NAME_DISCONNECTED_LIGHT,\n    COLOR_NAME_ERROR_DARK,\n    COLOR_NAME_ERROR_LIGHT,\n    SMALL_BUTTON_SIZE,\n} from './constants';\n\nexport const styles: Record<string, any> = {\n    toolbar: {\n        minHeight: 38, // Theme.toolbar.height,\n        //        boxShadow: '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'\n    },\n    toolbarButtons: {\n        padding: 4,\n        marginLeft: 4,\n    },\n    switchColumnAuto: {\n        marginLeft: 16,\n    },\n    dialogColumns: {\n        transition: 'opacity 1s',\n    },\n    dialogColumnsLabel: {\n        fontSize: 12,\n        paddingTop: 8,\n    },\n    columnCustom: {\n        width: '100%',\n        display: 'inline-block',\n    },\n    columnCustomEditable: {\n        cursor: 'text',\n    },\n    columnCustom_center: {\n        textAlign: 'center',\n    },\n    columnCustom_left: {\n        textAlign: 'left',\n    },\n    columnCustom_right: {\n        textAlign: 'right',\n    },\n    width100: {\n        width: '100%',\n    },\n    transparent_10: {\n        opacity: 0.1,\n    },\n    transparent_20: {\n        opacity: 0.2,\n    },\n    transparent_30: {\n        opacity: 0.3,\n    },\n    transparent_40: {\n        opacity: 0.4,\n    },\n    transparent_50: {\n        opacity: 0.5,\n    },\n    transparent_60: {\n        opacity: 0.6,\n    },\n    transparent_70: {\n        opacity: 0.7,\n    },\n    transparent_80: {\n        opacity: 0.8,\n    },\n    transparent_90: {\n        opacity: 0.9,\n    },\n    transparent_100: {\n        opacity: 1,\n    },\n    // The header is a part of the scrolling container, so it scrolls horizontally together with the\n    // rows and no synchronisation is required. `top: 0` pins it only vertically.\n    headerRow: (theme: IobTheme): React.CSSProperties => ({\n        paddingLeft: 8,\n        height: 38,\n        whiteSpace: 'nowrap',\n        userSelect: 'none',\n        position: 'sticky',\n        top: 0,\n        zIndex: 2,\n        // the header uses the same layout rules as the rows, so both compute identical widths\n        display: 'flex',\n        flexWrap: 'nowrap',\n        // the rows can be wider than the visible area\n        width: 'fit-content',\n        minWidth: '100%',\n        // the rows are `border-box` (MUI), the padding must be inside of the width here too,\n        // otherwise the growing column would be wider in the header than in the rows\n        boxSizing: 'border-box',\n        backgroundColor: theme.palette.background.paper,\n    }),\n    buttonClearFilter: {\n        position: 'relative',\n        float: 'right',\n        padding: 0,\n    },\n    buttonClearFilterIcon: {\n        zIndex: 2,\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        color: '#FF0000',\n        opacity: 0.7,\n    },\n\n    // The header is rendered inside this container (see `headerRow`), so it uses the full height\n    tableDiv: {\n        paddingTop: 0,\n        paddingLeft: 0,\n        width: 'calc(100% - 8px)',\n        height: '100%',\n        overflow: 'auto',\n        position: 'relative',\n    },\n    tableRow: (theme: IobTheme): SxProps => ({\n        pl: 1,\n        height: ROW_HEIGHT,\n        lineHeight: `${ROW_HEIGHT}px`,\n        verticalAlign: 'top',\n        userSelect: 'none',\n        position: 'relative',\n        // Rows outside the viewport keep their size but skip layout and paint. The `auto` keyword\n        // makes the browser remember the last rendered size, which is needed because not every row\n        // is ROW_HEIGHT high: alias rows (`tableRowAlias`, `tableRowAliasReadWrite`) are higher and\n        // the focused row of the narrow view has no fixed height at all. `content-visibility`\n        // contains both axes, so the width is remembered as well - otherwise a skipped row would\n        // collapse to `minWidth` and re-expand when it scrolls into view.\n        contentVisibility: 'auto',\n        containIntrinsicHeight: `auto ${ROW_HEIGHT}px`,\n        containIntrinsicWidth: 'auto none',\n        // The row is as wide as the sum of the columns, exactly like the header. If that is wider\n        // than the container, the container scrolls horizontally and takes the header with it.\n        // Without `flexShrink: 0` the cells would be squeezed and would not match the header anymore.\n        width: 'fit-content',\n        minWidth: '100%',\n        '& > *': {\n            flexShrink: 0,\n            boxSizing: 'border-box',\n        },\n        '&:hover': {\n            background: `${\n                theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light\n            } !important`,\n            color: Utils.invertColor(theme.palette.primary.main, true),\n        },\n        whiteSpace: 'nowrap',\n        flexWrap: 'nowrap',\n    }),\n    tableRowLines: (theme: IobTheme): SxProps => ({\n        borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,\n        '& > div': {\n            borderRight: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,\n        },\n    }),\n    tableRowNoDragging: {\n        cursor: 'pointer',\n    },\n    tableRowAlias: {\n        height: ROW_HEIGHT + 10,\n    },\n    tableRowAliasReadWrite: {\n        height: ROW_HEIGHT + 22,\n    },\n    tableRowFocused: (theme: IobTheme): SxProps => ({\n        '&:after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 1,\n            left: 1,\n            right: 1,\n            bottom: 1,\n            border: theme.palette.mode ? '1px dotted #000' : '1px dotted #FFF',\n        },\n    }),\n    checkBox: {\n        padding: 0,\n    },\n    cellId: {\n        position: 'relative',\n        fontSize: '1rem',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        // verticalAlign: 'top',\n        // position: 'relative',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n        '& .iconOwn': {\n            display: 'block',\n            width: ROW_HEIGHT - 4,\n            height: ROW_HEIGHT - 4,\n            mt: '2px',\n            float: 'right',\n        },\n        '&:hover .iconOwn': {\n            display: 'none',\n        },\n        '& *': {\n            width: 'initial',\n        },\n    },\n    cellIdSpan: {\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n        // display: 'inline-block',\n        // verticalAlign: 'top',\n    },\n    // This style is used for simple div. Do not migrate it to \"secondary.main\"\n    cellIdIconFolder: (theme: IobTheme): React.CSSProperties => ({\n        marginRight: 8,\n        width: ROW_HEIGHT - 4,\n        height: ROW_HEIGHT - 4,\n        cursor: 'pointer',\n        color: theme.palette.secondary.main || '#fbff7d',\n        verticalAlign: 'top',\n    }),\n    cellIdIconDocument: {\n        verticalAlign: 'middle',\n        marginLeft: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        marginRight: 8,\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n    },\n    cellIdIconOwn: {},\n    cellCopyButton: {\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n        top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        opacity: 0.8,\n        position: 'absolute',\n        right: 3,\n    },\n    cellEditButton: {\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n        color: 'white',\n        position: 'absolute',\n        top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        right: SMALL_BUTTON_SIZE + 3,\n        opacity: 0.7,\n        '&:hover': {\n            opacity: 1,\n        },\n    },\n    cellName: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        fontSize: 14,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        position: 'relative',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n    },\n    cellNameWithDesc: {\n        lineHeight: 'normal',\n    },\n    cellNameDivDiv: {},\n    cellDescription: {\n        fontSize: 10,\n        opacity: 0.5,\n        fontStyle: 'italic',\n    },\n    cellIdAlias: (theme: IobTheme): SxProps => ({\n        fontStyle: 'italic',\n        fontSize: 12,\n        opacity: 0.7,\n        '&:hover': {\n            color: theme.palette.mode === 'dark' ? '#009900' : '#007700',\n        },\n    }),\n    cellIdAliasReadWriteDiv: {\n        height: 24,\n        marginTop: -5,\n    },\n    cellIdAliasAlone: {\n        lineHeight: 0,\n    },\n    cellIdAliasReadWrite: {\n        lineHeight: '12px',\n    },\n    cellType: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        '& .itemIcon': {\n            verticalAlign: 'middle',\n            width: ICON_SIZE,\n            height: ICON_SIZE,\n            display: 'inline-block',\n        },\n        '& .itemIconFolder': {\n            marginLeft: 3,\n        },\n    },\n    cellRole: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellRoom: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellEnumParent: {\n        opacity: 0.4,\n    },\n    cellFunc: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellValue: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellValueButton: {\n        marginTop: 5,\n    },\n    cellValueButtonFalse: {\n        opacity: 0.3,\n    },\n    cellAdapter: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n    },\n    cellValueTooltip: {\n        fontSize: 12,\n    },\n    cellValueText: {\n        width: '100%',\n        height: ROW_HEIGHT,\n        fontSize: 16,\n        display: 'flex',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        position: 'relative',\n        verticalAlign: 'top',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n    },\n    cellValueFile: {\n        color: '#2837b9',\n    },\n    cellValueTooltipTitle: {\n        fontStyle: 'italic',\n        width: 100,\n        display: 'inline-block',\n    },\n    cellValueTooltipValue: {\n        width: 120,\n        display: 'inline-block',\n        // overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        textOverflow: 'ellipsis',\n    },\n    cellValueTooltipImage: {\n        width: 100,\n        height: 'auto',\n    },\n    cellValueTooltipBoth: {\n        width: 220,\n        display: 'inline-block',\n        whiteSpace: 'nowrap',\n    },\n    cellValueTooltipBox: {\n        width: 250,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n    },\n    tooltip: {\n        pointerEvents: 'none',\n    },\n    cellValueTextUnit: {\n        marginLeft: 4,\n        opacity: 0.8,\n        display: 'inline-block',\n    },\n    cellValueTextState: {\n        opacity: 0.7,\n    },\n    cellValueTooltipCopy: {\n        position: 'absolute',\n        bottom: 3,\n        right: 3,\n    },\n    cellValueTooltipEdit: {\n        position: 'absolute',\n        bottom: 3,\n        right: 15,\n    },\n    cellButtons: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n    },\n    cellButtonsButton: {\n        display: 'inline-block',\n        opacity: 0.5,\n        width: SMALL_BUTTON_SIZE + 4,\n        height: SMALL_BUTTON_SIZE + 4,\n        '&:hover': {\n            opacity: 1,\n        },\n        p: 0,\n        mt: '-2px',\n    },\n    cellButtonsEmptyButton: {\n        fontSize: 12,\n    },\n    cellButtonMinWidth: {\n        minWidth: 40,\n    },\n    cellButtonsButtonAlone: {\n        ml: `${SMALL_BUTTON_SIZE + 6}px`,\n        pt: 0,\n        mt: '-2px',\n    },\n    cellButtonsButtonWithCustoms: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.secondary.main,\n    }),\n    cellButtonsButtonWithoutCustoms: {\n        opacity: 0.2,\n    },\n    cellButtonsValueButton: (theme: IobTheme): SxProps => ({\n        position: 'absolute',\n        top: SMALL_BUTTON_SIZE / 2 - 2,\n        opacity: 0.7,\n        width: SMALL_BUTTON_SIZE - 2,\n        height: SMALL_BUTTON_SIZE - 2,\n        color: theme.palette.action.active,\n        '&:hover': {\n            opacity: 1,\n        },\n    }),\n    cellButtonsValueButtonCopy: {\n        right: 8,\n        cursor: 'pointer',\n    },\n    cellButtonsValueButtonEdit: {\n        right: SMALL_BUTTON_SIZE / 2 + 16,\n    },\n    /** Details of the selected object in the narrow (xs) view, shown below its row */\n    cellDetails: {\n        width: '100%',\n        // the padding must be inside of the width, else the panel is wider than the table\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px',\n        pl: 1.5,\n        pr: 0.5,\n        py: 1,\n        borderRadius: 0,\n        borderLeft: '3px solid',\n        borderLeftColor: 'primary.main',\n        bgcolor: 'action.hover',\n    },\n    cellDetailsHeader: {\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: 8,\n    },\n    cellDetailsHeaderWithLines: {\n        paddingBottom: 6,\n        marginBottom: 4,\n        borderBottom: '1px solid rgba(128, 128, 128, 0.3)',\n    },\n    cellDetailsId: {\n        flexGrow: 1,\n        minWidth: 0,\n        pt: '6px',\n        fontFamily: 'monospace',\n        fontSize: 13,\n        lineHeight: '20px',\n        wordBreak: 'break-all',\n    },\n    cellDetailsLine: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        width: '100%',\n        minHeight: 32,\n        fontSize: 14,\n    },\n    cellDetailsName: {\n        flexShrink: 0,\n        width: 80,\n        fontSize: 13,\n        opacity: 0.7,\n    },\n    cellDetailsValue: {\n        flexGrow: 1,\n        minWidth: 0,\n        overflowWrap: 'anywhere',\n        // the cells are made for one line in the table, here they may wrap\n        '& > div': {\n            whiteSpace: 'normal',\n            overflow: 'visible',\n            height: 'auto',\n        },\n    },\n    cellDetailsEmpty: {\n        opacity: 0.5,\n    },\n    cellDetailsButton: {\n        flexShrink: 0,\n        color: 'text.secondary',\n    },\n    cellDetailsIcon: {\n        width: 18,\n        height: 18,\n    },\n    cellDetailsButtons: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-end',\n        // strings, because numbers are multiplied with the theme spacing in `sx`\n        gap: '4px',\n        pt: '6px',\n        mt: '4px',\n        borderTop: '1px solid rgba(128, 128, 128, 0.3)',\n        // `renderColumnButtons` may render only an empty container\n        '&:not(:has(button))': {\n            display: 'none',\n        },\n    },\n\n    filteredOut: {\n        opacity: 0.5,\n    },\n    filteredParentOut: {\n        opacity: 0.3,\n    },\n    filterInput: {\n        mt: 0,\n        mb: 0,\n    },\n    selectIcon: {\n        width: 24,\n        height: 24,\n        marginRight: 4,\n    },\n\n    itemSelected: (theme: IobTheme): React.CSSProperties => ({\n        background: `${theme.palette.primary.main} !important`,\n        color: `${Utils.invertColor(theme.palette.primary.main, true)} !important`,\n    }),\n    header: {\n        width: '100%',\n    },\n    headerCell: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        flexShrink: 0,\n        boxSizing: 'border-box',\n    },\n    headerCellValue: {\n        paddingTop: 4,\n        // paddingLeft: 5,\n        fontSize: 16,\n    },\n\n    visibleButtons: {\n        color: '#2196f3',\n        opacity: 0.7,\n    },\n    grow: {\n        flexGrow: 1,\n    },\n    enumIconDiv: {\n        marginRight: 8,\n        width: 32,\n        height: 32,\n        borderRadius: 8,\n        background: '#FFFFFF',\n    },\n    enumIcon: {\n        marginTop: 4,\n        marginLeft: 4,\n        width: 24,\n        height: 24,\n    },\n    enumDialog: {\n        overflow: 'hidden',\n    },\n    enumList: {\n        minWidth: 250,\n        height: 'calc(100% - 50px)',\n        overflow: 'auto',\n    },\n    enumCheckbox: {\n        minWidth: 0,\n    },\n    buttonDiv: {\n        display: 'flex',\n        height: '100%',\n        alignItems: 'center',\n    },\n    aclText: {\n        fontSize: 13,\n        marginTop: 6,\n    },\n    rightsObject: {\n        color: '#55ff55',\n        paddingLeft: 3,\n    },\n    rightsState: {\n        color: '#86b6ff',\n        paddingLeft: 3,\n    },\n    textCenter: {\n        padding: 12,\n        textAlign: 'center',\n    },\n    tooltipAccessControl: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    fontSizeTitle: {\n        '@media screen and (max-width: 465px)': {\n            '& *': {\n                fontSize: 12,\n            },\n        },\n    },\n    draggable: {\n        cursor: 'copy',\n    },\n    nonDraggable: {\n        cursor: 'no-drop',\n    },\n    iconDeviceConnected: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        top: 4,\n        right: 32,\n        width: 20,\n    }),\n    iconDeviceDisconnected: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        top: 4,\n        right: 32,\n        width: 20,\n    }),\n    iconDeviceError: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        top: 4,\n        right: 50,\n        width: 20,\n    }),\n    resizeHandle: {\n        display: 'block',\n        position: 'absolute',\n        cursor: 'col-resize',\n        width: 7,\n        top: 2,\n        bottom: 2,\n        zIndex: 1,\n    },\n    resizeHandleRight: {\n        right: 3,\n        borderRight: '2px dotted #888',\n        '&:hover': {\n            borderColor: '#ccc',\n            borderRightStyle: 'solid',\n        },\n        '&.active': {\n            borderColor: '#517ea5',\n            borderRightStyle: 'solid',\n        },\n    },\n    invertedBackground: (theme: IobTheme): React.CSSProperties => ({\n        backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',\n        padding: '0 3px',\n        borderRadius: '2px 0 0 2px',\n    }),\n    invertedBackgroundFlex: (theme: IobTheme): React.CSSProperties => ({\n        backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',\n        borderRadius: '0 2px 2px 0',\n    }),\n    contextMenuEdit: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ffee48' : '#cbb801',\n    }),\n    contextMenuEditValue: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#5dff45' : '#1cd301',\n    }),\n    contextMenuView: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',\n    }),\n    contextMenuCustom: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#42eaff' : '#01bbc2',\n    }),\n    contextMenuACL: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070',\n    }),\n    contextMenuRoom: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00',\n    }),\n    contextMenuRole: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00',\n    }),\n    contextMenuName: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#74b7ff' : '#00417a',\n    }),\n    contextMenuDelete: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000',\n    }),\n    contextMenuKeys: {\n        marginLeft: 8,\n        opacity: 0.7,\n        fontSize: 'smaller',\n    },\n    contextMenuWithSubMenu: {\n        display: 'flex',\n    },\n    ...utilStyles,\n};\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"./src/","sources":["Components/ObjectBrowser/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2020-2026, Denis Haev <dogafox@gmail.com>\n *\n * MIT License\n *\n */\n\nimport type React from 'react';\nimport type { SxProps } from '@mui/material';\n\nimport type { IobTheme } from '../../types';\nimport { Utils } from '../Utils';\nimport { ICON_SIZE, ROW_HEIGHT, styles as utilStyles } from './utils';\nimport {\n    COLOR_NAME_CONNECTED_DARK,\n    COLOR_NAME_CONNECTED_LIGHT,\n    COLOR_NAME_DISCONNECTED_DARK,\n    COLOR_NAME_DISCONNECTED_LIGHT,\n    COLOR_NAME_ERROR_DARK,\n    COLOR_NAME_ERROR_LIGHT,\n    SMALL_BUTTON_SIZE,\n} from './constants';\n\nexport const styles: Record<string, any> = {\n    toolbar: {\n        minHeight: 38, // Theme.toolbar.height,\n        //        boxShadow: '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)'\n    },\n    toolbarButtons: {\n        padding: 4,\n        marginLeft: 4,\n    },\n    switchColumnAuto: {\n        marginLeft: 16,\n    },\n    dialogColumns: {\n        transition: 'opacity 1s',\n    },\n    dialogColumnsLabel: {\n        fontSize: 12,\n        paddingTop: 8,\n    },\n    columnCustom: {\n        width: '100%',\n        display: 'inline-block',\n    },\n    columnCustomEditable: {\n        cursor: 'text',\n    },\n    columnCustom_center: {\n        textAlign: 'center',\n    },\n    columnCustom_left: {\n        textAlign: 'left',\n    },\n    columnCustom_right: {\n        textAlign: 'right',\n    },\n    width100: {\n        width: '100%',\n    },\n    transparent_10: {\n        opacity: 0.1,\n    },\n    transparent_20: {\n        opacity: 0.2,\n    },\n    transparent_30: {\n        opacity: 0.3,\n    },\n    transparent_40: {\n        opacity: 0.4,\n    },\n    transparent_50: {\n        opacity: 0.5,\n    },\n    transparent_60: {\n        opacity: 0.6,\n    },\n    transparent_70: {\n        opacity: 0.7,\n    },\n    transparent_80: {\n        opacity: 0.8,\n    },\n    transparent_90: {\n        opacity: 0.9,\n    },\n    transparent_100: {\n        opacity: 1,\n    },\n    // The header is a part of the scrolling container, so it scrolls horizontally together with the\n    // rows and no synchronisation is required. `top: 0` pins it only vertically.\n    headerRow: (theme: IobTheme): React.CSSProperties => ({\n        paddingLeft: 8,\n        height: 38,\n        whiteSpace: 'nowrap',\n        userSelect: 'none',\n        position: 'sticky',\n        top: 0,\n        zIndex: 2,\n        // the header uses the same layout rules as the rows, so both compute identical widths\n        display: 'flex',\n        flexWrap: 'nowrap',\n        // the rows can be wider than the visible area\n        width: 'fit-content',\n        minWidth: '100%',\n        // the rows are `border-box` (MUI), the padding must be inside of the width here too,\n        // otherwise the growing column would be wider in the header than in the rows\n        boxSizing: 'border-box',\n        backgroundColor: theme.palette.background.paper,\n    }),\n    buttonClearFilter: {\n        position: 'relative',\n        float: 'right',\n        padding: 0,\n    },\n    buttonClearFilterVisible: {\n        opacity: 1,\n        visibility: 'visible',\n        transition: 'opacity 0.15s',\n    },\n    /** Without a filter: the cross of the icon jumps away first, then the button fades out */\n    buttonClearFilterHidden: {\n        opacity: 0,\n        visibility: 'hidden',\n        transition: 'opacity 0.2s 0.3s, visibility 0s 0.5s',\n    },\n\n    // The header is rendered inside this container (see `headerRow`), so it uses the full height\n    tableDiv: {\n        paddingTop: 0,\n        paddingLeft: 0,\n        width: 'calc(100% - 8px)',\n        height: '100%',\n        overflow: 'auto',\n        position: 'relative',\n    },\n    tableRow: (theme: IobTheme): SxProps => ({\n        pl: 1,\n        height: ROW_HEIGHT,\n        lineHeight: `${ROW_HEIGHT}px`,\n        verticalAlign: 'top',\n        userSelect: 'none',\n        position: 'relative',\n        // Rows outside the viewport keep their size but skip layout and paint. The `auto` keyword\n        // makes the browser remember the last rendered size, which is needed because not every row\n        // is ROW_HEIGHT high: alias rows (`tableRowAlias`, `tableRowAliasReadWrite`) are higher and\n        // the focused row of the narrow view has no fixed height at all. `content-visibility`\n        // contains both axes, so the width is remembered as well - otherwise a skipped row would\n        // collapse to `minWidth` and re-expand when it scrolls into view.\n        contentVisibility: 'auto',\n        containIntrinsicHeight: `auto ${ROW_HEIGHT}px`,\n        containIntrinsicWidth: 'auto none',\n        // The row is as wide as the sum of the columns, exactly like the header. If that is wider\n        // than the container, the container scrolls horizontally and takes the header with it.\n        // Without `flexShrink: 0` the cells would be squeezed and would not match the header anymore.\n        width: 'fit-content',\n        minWidth: '100%',\n        '& > *': {\n            flexShrink: 0,\n            boxSizing: 'border-box',\n        },\n        '&:hover': {\n            background: `${\n                theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light\n            } !important`,\n            color: Utils.invertColor(theme.palette.primary.main, true),\n        },\n        whiteSpace: 'nowrap',\n        flexWrap: 'nowrap',\n    }),\n    tableRowLines: (theme: IobTheme): SxProps => ({\n        borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,\n        '& > div': {\n            borderRight: `1px solid ${theme.palette.mode === 'dark' ? '#8888882e' : '#8888882e'}`,\n        },\n    }),\n    tableRowNoDragging: {\n        cursor: 'pointer',\n    },\n    tableRowAlias: {\n        height: ROW_HEIGHT + 10,\n    },\n    tableRowAliasReadWrite: {\n        height: ROW_HEIGHT + 22,\n    },\n    tableRowFocused: (theme: IobTheme): SxProps => ({\n        '&:after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: 1,\n            left: 1,\n            right: 1,\n            bottom: 1,\n            border: theme.palette.mode ? '1px dotted #000' : '1px dotted #FFF',\n        },\n    }),\n    checkBox: {\n        padding: 0,\n    },\n    cellId: {\n        position: 'relative',\n        fontSize: '1rem',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        // verticalAlign: 'top',\n        // position: 'relative',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n        '& .iconOwn': {\n            display: 'block',\n            width: ROW_HEIGHT - 4,\n            height: ROW_HEIGHT - 4,\n            mt: '2px',\n            float: 'right',\n        },\n        '&:hover .iconOwn': {\n            display: 'none',\n        },\n        '& *': {\n            width: 'initial',\n        },\n    },\n    cellIdSpan: {\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n        // display: 'inline-block',\n        // verticalAlign: 'top',\n    },\n    // This style is used for simple div. Do not migrate it to \"secondary.main\"\n    cellIdIconFolder: (theme: IobTheme): React.CSSProperties => ({\n        marginRight: 8,\n        width: ROW_HEIGHT - 4,\n        height: ROW_HEIGHT - 4,\n        cursor: 'pointer',\n        color: theme.palette.secondary.main || '#fbff7d',\n        verticalAlign: 'top',\n    }),\n    cellIdIconDocument: {\n        verticalAlign: 'middle',\n        marginLeft: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        marginRight: 8,\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n    },\n    cellIdIconOwn: {},\n    cellCopyButton: {\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n        top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        opacity: 0.8,\n        position: 'absolute',\n        right: 3,\n    },\n    cellEditButton: {\n        width: SMALL_BUTTON_SIZE,\n        height: SMALL_BUTTON_SIZE,\n        color: 'white',\n        position: 'absolute',\n        top: (ROW_HEIGHT - SMALL_BUTTON_SIZE) / 2,\n        right: SMALL_BUTTON_SIZE + 3,\n        opacity: 0.7,\n        '&:hover': {\n            opacity: 1,\n        },\n    },\n    cellName: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        fontSize: 14,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        position: 'relative',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n    },\n    cellNameWithDesc: {\n        lineHeight: 'normal',\n    },\n    cellNameDivDiv: {},\n    cellDescription: {\n        fontSize: 10,\n        opacity: 0.5,\n        fontStyle: 'italic',\n    },\n    cellIdAlias: (theme: IobTheme): SxProps => ({\n        fontStyle: 'italic',\n        fontSize: 12,\n        opacity: 0.7,\n        '&:hover': {\n            color: theme.palette.mode === 'dark' ? '#009900' : '#007700',\n        },\n    }),\n    cellIdAliasReadWriteDiv: {\n        height: 24,\n        marginTop: -5,\n    },\n    cellIdAliasAlone: {\n        lineHeight: 0,\n    },\n    cellIdAliasReadWrite: {\n        lineHeight: '12px',\n    },\n    cellType: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        '& .itemIcon': {\n            verticalAlign: 'middle',\n            width: ICON_SIZE,\n            height: ICON_SIZE,\n            display: 'inline-block',\n        },\n        '& .itemIconFolder': {\n            marginLeft: 3,\n        },\n    },\n    cellRole: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellRoom: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellEnumParent: {\n        opacity: 0.4,\n    },\n    cellFunc: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellValue: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        textOverflow: 'ellipsis',\n        overflow: 'hidden',\n    },\n    cellValueButton: {\n        marginTop: 5,\n    },\n    cellValueButtonFalse: {\n        opacity: 0.3,\n    },\n    cellAdapter: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n    },\n    cellValueTooltip: {\n        fontSize: 12,\n    },\n    cellValueText: {\n        width: '100%',\n        height: ROW_HEIGHT,\n        fontSize: 16,\n        display: 'flex',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        position: 'relative',\n        verticalAlign: 'top',\n        '& .copyButton': {\n            display: 'none',\n        },\n        '&:hover .copyButton': {\n            display: 'block',\n        },\n    },\n    cellValueFile: {\n        color: '#2837b9',\n    },\n    cellValueTooltipTitle: {\n        fontStyle: 'italic',\n        width: 100,\n        display: 'inline-block',\n    },\n    cellValueTooltipValue: {\n        width: 120,\n        display: 'inline-block',\n        // overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        textOverflow: 'ellipsis',\n    },\n    cellValueTooltipImage: {\n        width: 100,\n        height: 'auto',\n    },\n    cellValueTooltipBoth: {\n        width: 220,\n        display: 'inline-block',\n        whiteSpace: 'nowrap',\n    },\n    cellValueTooltipBox: {\n        width: 250,\n        overflow: 'hidden',\n        pointerEvents: 'none',\n    },\n    tooltip: {\n        pointerEvents: 'none',\n    },\n    cellValueTextUnit: {\n        marginLeft: 4,\n        opacity: 0.8,\n        display: 'inline-block',\n    },\n    cellValueTextState: {\n        opacity: 0.7,\n    },\n    cellValueTooltipCopy: {\n        position: 'absolute',\n        bottom: 3,\n        right: 3,\n    },\n    cellValueTooltipEdit: {\n        position: 'absolute',\n        bottom: 3,\n        right: 15,\n    },\n    cellButtons: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n    },\n    cellButtonsButton: {\n        display: 'inline-block',\n        opacity: 0.5,\n        width: SMALL_BUTTON_SIZE + 4,\n        height: SMALL_BUTTON_SIZE + 4,\n        '&:hover': {\n            opacity: 1,\n        },\n        p: 0,\n        mt: '-2px',\n    },\n    cellButtonsEmptyButton: {\n        fontSize: 12,\n    },\n    cellButtonMinWidth: {\n        minWidth: 40,\n    },\n    cellButtonsButtonAlone: {\n        ml: `${SMALL_BUTTON_SIZE + 6}px`,\n        pt: 0,\n        mt: '-2px',\n    },\n    cellButtonsButtonWithCustoms: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.secondary.main,\n    }),\n    cellButtonsButtonWithoutCustoms: {\n        opacity: 0.2,\n    },\n    cellButtonsValueButton: (theme: IobTheme): SxProps => ({\n        position: 'absolute',\n        top: SMALL_BUTTON_SIZE / 2 - 2,\n        opacity: 0.7,\n        width: SMALL_BUTTON_SIZE - 2,\n        height: SMALL_BUTTON_SIZE - 2,\n        color: theme.palette.action.active,\n        '&:hover': {\n            opacity: 1,\n        },\n    }),\n    cellButtonsValueButtonCopy: {\n        right: 8,\n        cursor: 'pointer',\n    },\n    cellButtonsValueButtonEdit: {\n        right: SMALL_BUTTON_SIZE / 2 + 16,\n    },\n    /** Details of the selected object in the narrow (xs) view, shown below its row */\n    cellDetails: {\n        width: '100%',\n        // the padding must be inside of the width, else the panel is wider than the table\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px',\n        pl: 1.5,\n        pr: 0.5,\n        py: 1,\n        borderRadius: 0,\n        borderLeft: '3px solid',\n        borderLeftColor: 'primary.main',\n        bgcolor: 'action.hover',\n    },\n    cellDetailsHeader: {\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: 8,\n    },\n    cellDetailsHeaderWithLines: {\n        paddingBottom: 6,\n        marginBottom: 4,\n        borderBottom: '1px solid rgba(128, 128, 128, 0.3)',\n    },\n    cellDetailsId: {\n        flexGrow: 1,\n        minWidth: 0,\n        pt: '6px',\n        fontFamily: 'monospace',\n        fontSize: 13,\n        lineHeight: '20px',\n        wordBreak: 'break-all',\n    },\n    cellDetailsLine: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        width: '100%',\n        minHeight: 32,\n        fontSize: 14,\n    },\n    cellDetailsName: {\n        flexShrink: 0,\n        width: 80,\n        fontSize: 13,\n        opacity: 0.7,\n    },\n    cellDetailsValue: {\n        flexGrow: 1,\n        minWidth: 0,\n        overflowWrap: 'anywhere',\n        // the cells are made for one line in the table, here they may wrap\n        '& > div': {\n            whiteSpace: 'normal',\n            overflow: 'visible',\n            height: 'auto',\n        },\n    },\n    cellDetailsEmpty: {\n        opacity: 0.5,\n    },\n    cellDetailsButton: {\n        flexShrink: 0,\n        color: 'text.secondary',\n    },\n    cellDetailsIcon: {\n        width: 18,\n        height: 18,\n    },\n    cellDetailsButtons: {\n        display: 'flex',\n        flexWrap: 'wrap',\n        justifyContent: 'flex-end',\n        // strings, because numbers are multiplied with the theme spacing in `sx`\n        gap: '4px',\n        pt: '6px',\n        mt: '4px',\n        borderTop: '1px solid rgba(128, 128, 128, 0.3)',\n        // `renderColumnButtons` may render only an empty container\n        '&:not(:has(button))': {\n            display: 'none',\n        },\n    },\n\n    filteredOut: {\n        opacity: 0.5,\n    },\n    filteredParentOut: {\n        opacity: 0.3,\n    },\n    filterInput: {\n        mt: 0,\n        mb: 0,\n    },\n    selectIcon: {\n        width: 24,\n        height: 24,\n        marginRight: 4,\n    },\n\n    itemSelected: (theme: IobTheme): React.CSSProperties => ({\n        background: `${theme.palette.primary.main} !important`,\n        color: `${Utils.invertColor(theme.palette.primary.main, true)} !important`,\n    }),\n    header: {\n        width: '100%',\n    },\n    headerCell: {\n        display: 'inline-block',\n        verticalAlign: 'top',\n        flexShrink: 0,\n        boxSizing: 'border-box',\n    },\n    headerCellValue: {\n        paddingTop: 4,\n        // paddingLeft: 5,\n        fontSize: 16,\n    },\n\n    visibleButtons: {\n        color: '#2196f3',\n        opacity: 0.7,\n    },\n    grow: {\n        flexGrow: 1,\n    },\n    enumIconDiv: {\n        marginRight: 8,\n        width: 32,\n        height: 32,\n        borderRadius: 8,\n        background: '#FFFFFF',\n    },\n    enumIcon: {\n        marginTop: 4,\n        marginLeft: 4,\n        width: 24,\n        height: 24,\n    },\n    enumDialog: {\n        overflow: 'hidden',\n    },\n    enumList: {\n        minWidth: 250,\n        height: 'calc(100% - 50px)',\n        overflow: 'auto',\n    },\n    enumCheckbox: {\n        minWidth: 0,\n    },\n    buttonDiv: {\n        display: 'flex',\n        height: '100%',\n        alignItems: 'center',\n    },\n    aclText: {\n        fontSize: 13,\n        marginTop: 6,\n    },\n    rightsObject: {\n        color: '#55ff55',\n        paddingLeft: 3,\n    },\n    rightsState: {\n        color: '#86b6ff',\n        paddingLeft: 3,\n    },\n    textCenter: {\n        padding: 12,\n        textAlign: 'center',\n    },\n    tooltipAccessControl: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    fontSizeTitle: {\n        '@media screen and (max-width: 465px)': {\n            '& *': {\n                fontSize: 12,\n            },\n        },\n    },\n    draggable: {\n        cursor: 'copy',\n    },\n    nonDraggable: {\n        cursor: 'no-drop',\n    },\n    iconDeviceConnected: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        // IconConnectionState is 20 px high; the error icon (MUI, 20 px wide, 24 px high, top: 4) draws its glyph 2 px lower\n        top: 6,\n        right: 32,\n        transition: 'color 0.3s',\n    }),\n    iconDeviceDisconnected: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        // IconConnectionState is 20 px high; the error icon (MUI, 20 px wide, 24 px high, top: 4) draws its glyph 2 px lower\n        top: 6,\n        right: 32,\n        transition: 'color 0.3s',\n    }),\n    iconDeviceError: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT,\n        opacity: 0.8,\n        position: 'absolute',\n        top: 4,\n        right: 50,\n        width: 20,\n    }),\n    resizeHandle: {\n        display: 'block',\n        position: 'absolute',\n        cursor: 'col-resize',\n        width: 7,\n        top: 2,\n        bottom: 2,\n        zIndex: 1,\n    },\n    resizeHandleRight: {\n        right: 3,\n        borderRight: '2px dotted #888',\n        '&:hover': {\n            borderColor: '#ccc',\n            borderRightStyle: 'solid',\n        },\n        '&.active': {\n            borderColor: '#517ea5',\n            borderRightStyle: 'solid',\n        },\n    },\n    invertedBackground: (theme: IobTheme): React.CSSProperties => ({\n        backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',\n        padding: '0 3px',\n        borderRadius: '2px 0 0 2px',\n    }),\n    invertedBackgroundFlex: (theme: IobTheme): React.CSSProperties => ({\n        backgroundColor: theme.palette.mode === 'dark' ? '#9a9a9a' : '#565656',\n        borderRadius: '0 2px 2px 0',\n    }),\n    contextMenuEdit: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ffee48' : '#cbb801',\n    }),\n    contextMenuEditValue: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#5dff45' : '#1cd301',\n    }),\n    contextMenuView: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',\n    }),\n    contextMenuCustom: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#42eaff' : '#01bbc2',\n    }),\n    contextMenuACL: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#e079ff' : '#500070',\n    }),\n    contextMenuRoom: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ff9a33' : '#642a00',\n    }),\n    contextMenuRole: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ffdb43' : '#562d00',\n    }),\n    contextMenuName: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#74b7ff' : '#00417a',\n    }),\n    contextMenuDelete: (theme: IobTheme): React.CSSProperties => ({\n        color: theme.palette.mode === 'dark' ? '#ff4f4f' : '#cf0000',\n    }),\n    contextMenuKeys: {\n        marginLeft: 8,\n        opacity: 0.7,\n        fontSize: 'smaller',\n    },\n    contextMenuWithSubMenu: {\n        display: 'flex',\n    },\n    ...utilStyles,\n};\n"]}