@iobroker/gui-components 10.3.14 → 10.3.16

package/build/Components/AnimatedIcons/IconResult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconResult.js","sourceRoot":"./src/","sources":["Components/AnimatedIcons/IconResult.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,SAAS,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AASpF;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC7C,qBAAqB,EAAE,CAAC;IACxB,IAAI,IAAuB,CAAC;IAC5B,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC3B,IAAI,GAAG,CACH,8BACI,SAAS,EAAC,kBAAkB,EAC5B,CAAC,EAAC,qBAAqB,EACvB,UAAU,EAAE,CAAC,GACf,CACL,CAAC;IACN,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAClC,IAAI,GAAG,CACH;YACI,8BACI,SAAS,EAAC,kBAAkB,EAC5B,CAAC,EAAC,WAAW,EACb,UAAU,EAAE,CAAC,GACf;YACF,8BACI,SAAS,EAAC,mBAAmB,EAC7B,CAAC,EAAC,aAAa,EACf,UAAU,EAAE,CAAC,GACf,CACH,CACN,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,IAAI,GAAG,CACH;YACI,8BACI,SAAS,EAAC,kBAAkB,EAC5B,CAAC,EAAC,kBAAkB,EACpB,UAAU,EAAE,CAAC,GACf;YACF,8BACI,SAAS,EAAC,mBAAmB,EAC7B,CAAC,EAAC,oBAAoB,EACtB,UAAU,EAAE,CAAC,GACf,CACH,CACN,CAAC;IACN,CAAC;IAED,OAAO,CACH,iCAAU,SAAS,CAAC,KAAK,EAAE,2BAA2B,KAAK,CAAC,IAAI,EAAE,CAAC;QAC/D,6BACI,GAAG,EAAE,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,EAAE,EAAE,EAC1C,OAAO,EAAC,WAAW;YAEnB,gCACI,SAAS,EAAC,oBAAoB,EAC9B,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,UAAU,EAAE,CAAC,GACf;YACD,IAAI,CACH,CACH,CACV,CAAC;AACN,CAAC","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n */\nimport React from 'react';\nimport { type AnimatedIconProps, rootProps, useAnimatedIconStyles } from './common';\n\nexport interface IconResultProps extends AnimatedIconProps {\n    /** success: check mark (green), warning: exclamation mark (orange), error: cross (red). The color can be changed with `style.color`. */\n    type: 'success' | 'warning' | 'error';\n    /** Every change of this value draws the icon again, e.g. a counter of the save clicks */\n    replay?: string | number;\n}\n\n/**\n * Result of an action: a circle and the mark draw themselves, a warning or an error shakes once.\n *\n * ```tsx\n * {saved ? <IconResult type=\"success\" replay={saveCount} /> : null}\n * ```\n */\nexport function IconResult(props: IconResultProps): React.JSX.Element {\n    useAnimatedIconStyles();\n    let mark: React.JSX.Element;\n    if (props.type === 'success') {\n        mark = (\n            <path\n                className=\"iob-ani-res-mark\"\n                d=\"M7.5 12.5l3 3 6-6.5\"\n                pathLength={1}\n            />\n        );\n    } else if (props.type === 'warning') {\n        mark = (\n            <>\n                <path\n                    className=\"iob-ani-res-mark\"\n                    d=\"M12 7.5v5\"\n                    pathLength={1}\n                />\n                <path\n                    className=\"iob-ani-res-mark2\"\n                    d=\"M12 16.4v.1\"\n                    pathLength={1}\n                />\n            </>\n        );\n    } else {\n        mark = (\n            <>\n                <path\n                    className=\"iob-ani-res-mark\"\n                    d=\"M8.7 8.7l6.6 6.6\"\n                    pathLength={1}\n                />\n                <path\n                    className=\"iob-ani-res-mark2\"\n                    d=\"M15.3 8.7l-6.6 6.6\"\n                    pathLength={1}\n                />\n            </>\n        );\n    }\n\n    return (\n        <span {...rootProps(props, `iob-ani-res iob-ani-res-${props.type}`)}>\n            <svg\n                key={`${props.type}-${props.replay ?? ''}`}\n                viewBox=\"0 0 24 24\"\n            >\n                <circle\n                    className=\"iob-ani-res-circle\"\n                    cx=\"12\"\n                    cy=\"12\"\n                    r=\"10\"\n                    pathLength={1}\n                />\n                {mark}\n            </svg>\n        </span>\n    );\n}\n"]}

package/build/Components/AnimatedIcons/IconStatusLed.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ */
+import React from 'react';
+import { type AnimatedIconProps } from './common';
+export interface IconStatusLedProps extends AnimatedIconProps {
+    /** 'green', 'orange', 'yellow', 'red', 'blue', 'grey' or any CSS color */
+    color: string;
+    /** Every change of this value sends one pulse, e.g. the timestamp of the last `alive` update */
+    beat?: string | number | boolean | null;
+    /** Waiting, e.g. while the instance starts: the LED breathes */
+    blink?: boolean;
+    /** Own status symbol instead of the round LED. Pulse, pop and shake stay, the pulse has the size of the icon. */
+    children?: React.ReactNode;
+}
+/**
+ * Status LED. It pops when its color changes, shakes when it turns red and sends a pulse on every `beat`.
+ *
+ * ```tsx
+ * <IconStatusLed color={alive ? 'green' : 'red'} beat={aliveState?.ts} />
+ * ```
+ */
+export declare function IconStatusLed(props: IconStatusLedProps): React.JSX.Element;

package/build/Components/AnimatedIcons/IconStatusLed.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ */
+import React, { useRef } from 'react';
+import { play, rootProps, useAnimatedIconStyles, useChange } from './common';
+/** Colors of the named states; any other CSS color can be given too */
+const COLORS = {
+    green: '#4CAF50',
+    orange: '#FF9800',
+    yellow: '#FFC107',
+    red: '#F44336',
+    blue: '#2196F3',
+    grey: '#9E9E9E',
+};
+/**
+ * Status LED. It pops when its color changes, shakes when it turns red and sends a pulse on every `beat`.
+ *
+ * ```tsx
+ * <IconStatusLed color={alive ? 'green' : 'red'} beat={aliveState?.ts} />
+ * ```
+ */
+export function IconStatusLed(props) {
+    useAnimatedIconStyles();
+    const root = useRef(null);
+    const dot = useRef(null);
+    const ping = useRef(null);
+    const color = COLORS[props.color] || props.color;
+    useChange(props.beat, () => play(ping.current, [
+        { transform: 'scale(1)', opacity: 0.55 },
+        // an own symbol fills the icon, its pulse grows less
+        { transform: `scale(${props.children ? 1.7 : 2.3})`, opacity: 0 },
+    ], { duration: 750, easing: 'cubic-bezier(0, 0, 0.2, 1)' }));
+    useChange(color, () => {
+        if (color === COLORS.red) {
+            play(root.current, [
+                { transform: 'translateX(0)' },
+                { transform: 'translateX(-0.09em)' },
+                { transform: 'translateX(0.09em)' },
+                { transform: 'translateX(-0.06em)' },
+                { transform: 'translateX(0.06em)' },
+                { transform: 'translateX(0)' },
+            ], { duration: 450, easing: 'ease-in-out' });
+        }
+        else {
+            play(dot.current, [{ transform: 'scale(0.55)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], {
+                duration: 380,
+                easing: 'ease-out',
+            });
+        }
+    });
+    const ledProps = rootProps(props, `iob-ani-led${props.blink ? ' iob-ani-led-blink' : ''}`);
+    return (React.createElement("span", { ...ledProps, ref: root, style: { ...ledProps.style, '--iob-ani-led': color } },
+        React.createElement("span", { className: props.children ? 'iob-ani-led-ping iob-ani-led-full' : 'iob-ani-led-ping', ref: ping }),
+        props.children ? (React.createElement("span", { className: "iob-ani-layer iob-ani-led-own", ref: dot }, props.children)) : (React.createElement("span", { className: "iob-ani-led-dot", ref: dot }))));
+}
+//# sourceMappingURL=IconStatusLed.js.map

package/build/Components/AnimatedIcons/IconStatusLed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconStatusLed.js","sourceRoot":"./src/","sources":["Components/AnimatedIcons/IconStatusLed.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n */\nimport React, { useRef, type CSSProperties } from 'react';\nimport { type AnimatedIconProps, play, rootProps, useAnimatedIconStyles, useChange } from './common';\n\n/** Colors of the named states; any other CSS color can be given too */\nconst COLORS: Record<string, string> = {\n    green: '#4CAF50',\n    orange: '#FF9800',\n    yellow: '#FFC107',\n    red: '#F44336',\n    blue: '#2196F3',\n    grey: '#9E9E9E',\n};\n\nexport interface IconStatusLedProps extends AnimatedIconProps {\n    /** 'green', 'orange', 'yellow', 'red', 'blue', 'grey' or any CSS color */\n    color: string;\n    /** Every change of this value sends one pulse, e.g. the timestamp of the last `alive` update */\n    beat?: string | number | boolean | null;\n    /** Waiting, e.g. while the instance starts: the LED breathes */\n    blink?: boolean;\n    /** Own status symbol instead of the round LED. Pulse, pop and shake stay, the pulse has the size of the icon. */\n    children?: React.ReactNode;\n}\n\n/**\n * Status LED. It pops when its color changes, shakes when it turns red and sends a pulse on every `beat`.\n *\n * ```tsx\n * <IconStatusLed color={alive ? 'green' : 'red'} beat={aliveState?.ts} />\n * ```\n */\nexport function IconStatusLed(props: IconStatusLedProps): React.JSX.Element {\n    useAnimatedIconStyles();\n    const root = useRef<HTMLSpanElement>(null);\n    const dot = useRef<HTMLSpanElement>(null);\n    const ping = useRef<HTMLSpanElement>(null);\n    const color = COLORS[props.color] || props.color;\n\n    useChange(props.beat, () =>\n        play(\n            ping.current,\n            [\n                { transform: 'scale(1)', opacity: 0.55 },\n                // an own symbol fills the icon, its pulse grows less\n                { transform: `scale(${props.children ? 1.7 : 2.3})`, opacity: 0 },\n            ],\n            { duration: 750, easing: 'cubic-bezier(0, 0, 0.2, 1)' },\n        ),\n    );\n\n    useChange(color, () => {\n        if (color === COLORS.red) {\n            play(\n                root.current,\n                [\n                    { transform: 'translateX(0)' },\n                    { transform: 'translateX(-0.09em)' },\n                    { transform: 'translateX(0.09em)' },\n                    { transform: 'translateX(-0.06em)' },\n                    { transform: 'translateX(0.06em)' },\n                    { transform: 'translateX(0)' },\n                ],\n                { duration: 450, easing: 'ease-in-out' },\n            );\n        } else {\n            play(dot.current, [{ transform: 'scale(0.55)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], {\n                duration: 380,\n                easing: 'ease-out',\n            });\n        }\n    });\n\n    const ledProps = rootProps(props, `iob-ani-led${props.blink ? ' iob-ani-led-blink' : ''}`);\n    return (\n        <span\n            {...ledProps}\n            ref={root}\n            style={{ ...ledProps.style, '--iob-ani-led': color } as CSSProperties}\n        >\n            <span\n                className={props.children ? 'iob-ani-led-ping iob-ani-led-full' : 'iob-ani-led-ping'}\n                ref={ping}\n            />\n            {props.children ? (\n                <span\n                    className=\"iob-ani-layer iob-ani-led-own\"\n                    ref={dot}\n                >\n                    {props.children}\n                </span>\n            ) : (\n                <span\n                    className=\"iob-ani-led-dot\"\n                    ref={dot}\n                />\n            )}\n        </span>\n    );\n}\n"]}

package/build/Components/AnimatedIcons/IconTrash.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ */
+import React from 'react';
+import { type AnimatedIconProps } from './common';
+export interface IconTrashProps extends AnimatedIconProps {
+    /** Keeps the lid open, e.g. while a delete confirmation is shown */
+    open?: boolean;
+}
+/**
+ * Trash can for delete buttons. The lid opens when the mouse is over the icon or over the button around it
+ * (`IconButton`, the start icon of a `Button`, a link...), or when that button has the keyboard focus.
+ *
+ * ```tsx
+ * <IconButton onClick={...}><IconTrash /></IconButton>
+ * ```
+ */
+export declare function IconTrash(props: IconTrashProps): React.JSX.Element;

package/build/Components/AnimatedIcons/IconTrash.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ */
+import React from 'react';
+import { rootProps, useAnimatedIconStyles } from './common';
+/**
+ * Trash can for delete buttons. The lid opens when the mouse is over the icon or over the button around it
+ * (`IconButton`, the start icon of a `Button`, a link...), or when that button has the keyboard focus.
+ *
+ * ```tsx
+ * <IconButton onClick={...}><IconTrash /></IconButton>
+ * ```
+ */
+export function IconTrash(props) {
+    useAnimatedIconStyles();
+    return (React.createElement("span", { ...rootProps(props, `iob-ani-trash${props.open ? ' iob-ani-trash-open' : ''}`) },
+        React.createElement("svg", { viewBox: "0 0 24 24" },
+            React.createElement("path", { className: "iob-ani-trash-lid", fill: "currentColor", d: "M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }),
+            React.createElement("path", { fill: "currentColor", d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z" }))));
+}
+//# sourceMappingURL=IconTrash.js.map

package/build/Components/AnimatedIcons/IconTrash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTrash.js","sourceRoot":"./src/","sources":["Components/AnimatedIcons/IconTrash.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,SAAS,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAOpF;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC3C,qBAAqB,EAAE,CAAC;IACxB,OAAO,CACH,iCAAU,SAAS,CAAC,KAAK,EAAE,gBAAgB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACjF,6BAAK,OAAO,EAAC,WAAW;YACpB,8BACI,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,mCAAmC,GACvC;YACF,8BACI,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,8CAA8C,GAClD,CACA,CACH,CACV,CAAC;AACN,CAAC","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n */\nimport React from 'react';\nimport { type AnimatedIconProps, rootProps, useAnimatedIconStyles } from './common';\n\nexport interface IconTrashProps extends AnimatedIconProps {\n    /** Keeps the lid open, e.g. while a delete confirmation is shown */\n    open?: boolean;\n}\n\n/**\n * Trash can for delete buttons. The lid opens when the mouse is over the icon or over the button around it\n * (`IconButton`, the start icon of a `Button`, a link...), or when that button has the keyboard focus.\n *\n * ```tsx\n * <IconButton onClick={...}><IconTrash /></IconButton>\n * ```\n */\nexport function IconTrash(props: IconTrashProps): React.JSX.Element {\n    useAnimatedIconStyles();\n    return (\n        <span {...rootProps(props, `iob-ani-trash${props.open ? ' iob-ani-trash-open' : ''}`)}>\n            <svg viewBox=\"0 0 24 24\">\n                <path\n                    className=\"iob-ani-trash-lid\"\n                    fill=\"currentColor\"\n                    d=\"M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"\n                />\n                <path\n                    fill=\"currentColor\"\n                    d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z\"\n                />\n            </svg>\n        </span>\n    );\n}\n"]}

package/build/Components/AnimatedIcons/common.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Shared parts of the animated icons: props, size, the style sheet and helpers.
+ * The icons are plain CSS/SVG (no animation library). They use `currentColor`, so they take the color of the
+ * surrounding text or button, and they have the size of the MUI icons.
+ */
+import type React from 'react';
+import { type CSSProperties } from 'react';
+export interface AnimatedIconProps {
+    /** Size like the MUI icons: 'small' (20 px), 'medium' (24 px, default), 'large' (35 px), 'inherit', pixels or e.g. '2em' */
+    fontSize?: 'inherit' | 'small' | 'medium' | 'large' | number | `${number}${'px' | 'em' | 'rem' | '%'}`;
+    /** Class name for the root element */
+    className?: string;
+    /** Styles for the root element, e.g. `color` */
+    style?: CSSProperties;
+    /** Accessible name. Without it, the icon is decorative and hidden from screen readers. */
+    ariaLabel?: string;
+}
+/** Puts the style sheet of the animated icons into the page, once and before the first paint */
+export declare function useAnimatedIconStyles(): void;
+/** Properties of the root element: class, size and accessibility */
+export declare function rootProps(props: AnimatedIconProps, className: string): React.HTMLAttributes<HTMLSpanElement>;
+/** True if the user asked the system for less motion */
+export declare function prefersReducedMotion(): boolean;
+/** Plays a one-time animation (Web Animations API), unless the user wants less motion */
+export declare function play(element: Element | null | undefined, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+/** Calls `onChange` when `value` changes, but not on the first render */
+export declare function useChange<T>(value: T, onChange: (value: T, previous: T) => void): void;

package/build/Components/AnimatedIcons/common.js

@@ -0,0 +1,164 @@
+import { useEffect, useInsertionEffect, useRef } from 'react';
+const SIZES = {
+    small: '1.25rem',
+    medium: '1.5rem',
+    large: '2.1875rem',
+    inherit: 'inherit',
+};
+const STYLE_ID = 'iob-animated-icons';
+const styles = `
+/* zero specificity: MUI may set the size, e.g. 20 px for the start icon of a Button, like for its own icons */
+:where(.iob-ani) { font-size: 1.5rem; }
+.iob-ani { display: inline-block; position: relative; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; line-height: 0; user-select: none; }
+.iob-ani > svg, .iob-ani-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
+
+/* Play / pause: two halves of the triangle become the two bars */
+.iob-ani-pp-a, .iob-ani-pp-b { position: absolute; inset: 0; background: currentColor; transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease; }
+.iob-ani-pp-a { clip-path: polygon(33.33% 20.83%, 56.25% 35.42%, 56.25% 64.58%, 33.33% 79.17%); }
+.iob-ani-pp-b { clip-path: polygon(56.25% 35.42%, 79.17% 50%, 79.17% 50%, 56.25% 64.58%); }
+.iob-ani-on .iob-ani-pp-a { clip-path: polygon(25% 20.83%, 41.67% 20.83%, 41.67% 79.17%, 25% 79.17%); }
+.iob-ani-on .iob-ani-pp-b { clip-path: polygon(58.33% 20.83%, 75% 20.83%, 75% 79.17%, 58.33% 79.17%); }
+.iob-ani-pp-ring { opacity: 0; transition: opacity 0.2s; }
+.iob-ani-pp-ring circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.22 0.78; }
+.iob-ani-pp-pending .iob-ani-pp-ring { opacity: 1; animation: iob-ani-spin 0.9s linear infinite; }
+.iob-ani-pp-pending .iob-ani-pp-a, .iob-ani-pp-pending .iob-ani-pp-b { transform: scale(0.72); }
+
+/* Status LED */
+.iob-ani-led-dot, .iob-ani-led-ping { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; background-color: var(--iob-ani-led); }
+.iob-ani-led-dot { transition: background-color 0.3s; box-shadow: inset 0 -0.05em 0.1em rgba(0, 0, 0, 0.28); }
+.iob-ani-led-ping { opacity: 0; }
+.iob-ani-led-blink .iob-ani-led-dot, .iob-ani-led-blink .iob-ani-led-own { animation: iob-ani-breathe 1.6s ease-in-out infinite; }
+.iob-ani-led-ping.iob-ani-led-full { left: 0; top: 0; width: 100%; height: 100%; }
+.iob-ani-led-own { display: flex; align-items: center; justify-content: center; line-height: normal; }
+
+/* Result: circle and mark draw themselves */
+:where(.iob-ani-res-success) { color: #4CAF50; }
+:where(.iob-ani-res-warning) { color: #FF9800; }
+:where(.iob-ani-res-error) { color: #F44336; }
+.iob-ani-res svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
+.iob-ani-res-circle { transform: rotate(-90deg); transform-origin: 12px 12px; animation: iob-ani-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
+.iob-ani-res-mark { animation: iob-ani-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
+.iob-ani-res-mark2 { animation: iob-ani-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards; }
+.iob-ani-res-error svg, .iob-ani-res-warning svg { animation: iob-ani-shake 0.4s 0.75s; }
+
+/* Refresh */
+.iob-ani-rf-done { opacity: 0; }
+.iob-ani-rf-done path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
+
+/* Bell */
+.iob-ani-bell-body { transform-origin: 12px 3px; }
+
+/* Menu / arrow: three bars, the icon turns by 180 degrees */
+.iob-ani-menu-rot { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
+.iob-ani-menu-open .iob-ani-menu-rot { transform: rotate(180deg); }
+.iob-ani-menu-right .iob-ani-menu-flip { transform: scaleX(-1); }
+.iob-ani-menu-bar { position: absolute; left: 0.125em; width: 0.75em; height: 0.0834em; margin-top: -0.0417em; border-radius: 0.02em; background: currentColor; transform-origin: 100% 50%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
+.iob-ani-menu-b1 { top: 0.2917em; }
+.iob-ani-menu-b2 { top: 0.5em; }
+.iob-ani-menu-b3 { top: 0.7083em; }
+.iob-ani-menu-open .iob-ani-menu-b1 { transform: translate(-0.0417em, 0.2083em) rotate(45deg) scaleX(0.63); }
+.iob-ani-menu-open .iob-ani-menu-b2 { transform: translateX(-0.0417em) scaleX(0.889); }
+.iob-ani-menu-open .iob-ani-menu-b3 { transform: translate(-0.0417em, -0.2083em) rotate(-45deg) scaleX(0.63); }
+
+/* Trash: the lid opens on hover of the icon or of its button */
+.iob-ani-trash-lid { transform-origin: 5px 6px; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1); }
+.iob-ani-trash-open .iob-ani-trash-lid,
+.iob-ani-trash:hover .iob-ani-trash-lid,
+:is(button, a, [role="button"]):hover .iob-ani-trash .iob-ani-trash-lid,
+:is(button, a, [role="button"]):focus-visible .iob-ani-trash .iob-ani-trash-lid { transform: translateY(-1.5px) rotate(-18deg); }
+
+/* Expert mode: mortarboard, outlined when off and filled when on */
+.iob-ani-expert-hat { transform-origin: 12px 12px; }
+.iob-ani-expert-shape { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill-opacity 0.18s ease; }
+.iob-ani-expert-on .iob-ani-expert-shape { fill-opacity: 1; transition-delay: 0.12s; }
+.iob-ani-expert-tassel { transform-origin: 21.2px 9.1px; }
+.iob-ani-expert-cord { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
+.iob-ani-expert-tuft { fill: currentColor; stroke: currentColor; stroke-width: 0.8; stroke-linejoin: round; }
+
+/* Folder: closed, the front flap lies on the back like a closed folder; open, it folds down. The closed
+   shape covers both until the flap starts to move, so the closed folder looks exactly like IconClosed */
+.iob-ani-folder path { fill: currentColor; }
+.iob-ani-folder-front { transform-origin: 104px 448px; transform: scaleY(1.1667) skewX(29.1deg); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
+.iob-ani-folder-open .iob-ani-folder-front { transform: none; transition: transform 0.32s cubic-bezier(0.3, 1.35, 0.5, 1); }
+.iob-ani-folder-closed { transition: opacity 0.06s linear 0.18s; }
+.iob-ani-folder-open .iob-ani-folder-closed { opacity: 0; transition-delay: 0s; }
+
+/* Connection */
+.iob-ani-wifi path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: opacity 0.3s; }
+.iob-ani-wifi circle { fill: currentColor; transition: opacity 0.3s; }
+.iob-ani-wifi .iob-ani-wifi-slash { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1); }
+.iob-ani-wifi-disconnected .iob-ani-wifi-slash { stroke-dashoffset: 0; }
+.iob-ani-wifi-disconnected .iob-ani-wifi-w { opacity: 0.35; }
+.iob-ani-wifi-connecting .iob-ani-wifi-w { animation: iob-ani-wave 1.5s ease-in-out infinite; }
+.iob-ani-wifi-connecting .iob-ani-wifi-w1 { animation-delay: 0.18s; }
+.iob-ani-wifi-connecting .iob-ani-wifi-w2 { animation-delay: 0.36s; }
+.iob-ani-wifi-connecting .iob-ani-wifi-w3 { animation-delay: 0.54s; }
+
+@keyframes iob-ani-spin { to { transform: rotate(360deg); } }
+@keyframes iob-ani-draw { to { stroke-dashoffset: 0; } }
+@keyframes iob-ani-breathe { 50% { opacity: 0.35; } }
+@keyframes iob-ani-wave { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
+@keyframes iob-ani-shake { 20% { transform: translateX(-1.5px); } 40% { transform: translateX(1.5px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } }
+
+@media (prefers-reduced-motion: reduce) {
+    .iob-ani-pp-a, .iob-ani-pp-b, .iob-ani-menu-rot, .iob-ani-menu-bar, .iob-ani-trash-lid, .iob-ani-expert-shape, .iob-ani-folder-front, .iob-ani-folder-closed { transition-duration: 0.01ms; transition-delay: 0s; }
+    .iob-ani-pp-pending .iob-ani-pp-ring { animation: iob-ani-breathe 1.2s ease-in-out infinite; }
+    .iob-ani-res svg, .iob-ani-res svg * { animation: none !important; stroke-dashoffset: 0; }
+}
+`;
+/** Puts the style sheet of the animated icons into the page, once and before the first paint */
+export function useAnimatedIconStyles() {
+    useInsertionEffect(() => {
+        if (!window.document.getElementById(STYLE_ID)) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', STYLE_ID);
+            style.innerHTML = styles;
+            window.document.head.appendChild(style);
+        }
+    }, []);
+}
+/** Properties of the root element: class, size and accessibility */
+export function rootProps(props, className) {
+    // Without fontSize the size comes from the style sheet (24 px), so that MUI can change it like for its own icons
+    let fontSize;
+    if (typeof props.fontSize === 'number') {
+        fontSize = props.fontSize;
+    }
+    else if (props.fontSize) {
+        fontSize = SIZES[props.fontSize] || props.fontSize;
+    }
+    return {
+        className: `iob-ani ${className}${props.className ? ` ${props.className}` : ''}`,
+        style: fontSize === undefined ? props.style : { fontSize, ...props.style },
+        role: props.ariaLabel ? 'img' : undefined,
+        'aria-label': props.ariaLabel,
+        'aria-hidden': props.ariaLabel ? undefined : true,
+    };
+}
+/** True if the user asked the system for less motion */
+export function prefersReducedMotion() {
+    return !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+/** Plays a one-time animation (Web Animations API), unless the user wants less motion */
+export function play(element, keyframes, options) {
+    if (!element?.animate || prefersReducedMotion()) {
+        return null;
+    }
+    return element.animate(keyframes, options);
+}
+/** Calls `onChange` when `value` changes, but not on the first render */
+export function useChange(value, onChange) {
+    const previous = useRef(value);
+    const callback = useRef(onChange);
+    useEffect(() => {
+        callback.current = onChange;
+    });
+    useEffect(() => {
+        if (!Object.is(previous.current, value)) {
+            const old = previous.current;
+            previous.current = value;
+            callback.current(value, old);
+        }
+    }, [value]);
+}
+//# sourceMappingURL=common.js.map

package/build/Components/AnimatedIcons/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"./src/","sources":["Components/AnimatedIcons/common.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2026 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n * Shared parts of the animated icons: props, size, the style sheet and helpers.\n * The icons are plain CSS/SVG (no animation library). They use `currentColor`, so they take the color of the\n * surrounding text or button, and they have the size of the MUI icons.\n */\nimport type React from 'react';\nimport { useEffect, useInsertionEffect, useRef, type CSSProperties } from 'react';\n\nexport interface AnimatedIconProps {\n    /** Size like the MUI icons: 'small' (20 px), 'medium' (24 px, default), 'large' (35 px), 'inherit', pixels or e.g. '2em' */\n    fontSize?: 'inherit' | 'small' | 'medium' | 'large' | number | `${number}${'px' | 'em' | 'rem' | '%'}`;\n    /** Class name for the root element */\n    className?: string;\n    /** Styles for the root element, e.g. `color` */\n    style?: CSSProperties;\n    /** Accessible name. Without it, the icon is decorative and hidden from screen readers. */\n    ariaLabel?: string;\n}\n\nconst SIZES: Record<string, string> = {\n    small: '1.25rem',\n    medium: '1.5rem',\n    large: '2.1875rem',\n    inherit: 'inherit',\n};\n\nconst STYLE_ID = 'iob-animated-icons';\n\nconst styles = `\n/* zero specificity: MUI may set the size, e.g. 20 px for the start icon of a Button, like for its own icons */\n:where(.iob-ani) { font-size: 1.5rem; }\n.iob-ani { display: inline-block; position: relative; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; line-height: 0; user-select: none; }\n.iob-ani > svg, .iob-ani-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }\n\n/* Play / pause: two halves of the triangle become the two bars */\n.iob-ani-pp-a, .iob-ani-pp-b { position: absolute; inset: 0; background: currentColor; transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease; }\n.iob-ani-pp-a { clip-path: polygon(33.33% 20.83%, 56.25% 35.42%, 56.25% 64.58%, 33.33% 79.17%); }\n.iob-ani-pp-b { clip-path: polygon(56.25% 35.42%, 79.17% 50%, 79.17% 50%, 56.25% 64.58%); }\n.iob-ani-on .iob-ani-pp-a { clip-path: polygon(25% 20.83%, 41.67% 20.83%, 41.67% 79.17%, 25% 79.17%); }\n.iob-ani-on .iob-ani-pp-b { clip-path: polygon(58.33% 20.83%, 75% 20.83%, 75% 79.17%, 58.33% 79.17%); }\n.iob-ani-pp-ring { opacity: 0; transition: opacity 0.2s; }\n.iob-ani-pp-ring circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.22 0.78; }\n.iob-ani-pp-pending .iob-ani-pp-ring { opacity: 1; animation: iob-ani-spin 0.9s linear infinite; }\n.iob-ani-pp-pending .iob-ani-pp-a, .iob-ani-pp-pending .iob-ani-pp-b { transform: scale(0.72); }\n\n/* Status LED */\n.iob-ani-led-dot, .iob-ani-led-ping { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; background-color: var(--iob-ani-led); }\n.iob-ani-led-dot { transition: background-color 0.3s; box-shadow: inset 0 -0.05em 0.1em rgba(0, 0, 0, 0.28); }\n.iob-ani-led-ping { opacity: 0; }\n.iob-ani-led-blink .iob-ani-led-dot, .iob-ani-led-blink .iob-ani-led-own { animation: iob-ani-breathe 1.6s ease-in-out infinite; }\n.iob-ani-led-ping.iob-ani-led-full { left: 0; top: 0; width: 100%; height: 100%; }\n.iob-ani-led-own { display: flex; align-items: center; justify-content: center; line-height: normal; }\n\n/* Result: circle and mark draw themselves */\n:where(.iob-ani-res-success) { color: #4CAF50; }\n:where(.iob-ani-res-warning) { color: #FF9800; }\n:where(.iob-ani-res-error) { color: #F44336; }\n.iob-ani-res svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }\n.iob-ani-res-circle { transform: rotate(-90deg); transform-origin: 12px 12px; animation: iob-ani-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards; }\n.iob-ani-res-mark { animation: iob-ani-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }\n.iob-ani-res-mark2 { animation: iob-ani-draw 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards; }\n.iob-ani-res-error svg, .iob-ani-res-warning svg { animation: iob-ani-shake 0.4s 0.75s; }\n\n/* Refresh */\n.iob-ani-rf-done { opacity: 0; }\n.iob-ani-rf-done path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }\n\n/* Bell */\n.iob-ani-bell-body { transform-origin: 12px 3px; }\n\n/* Menu / arrow: three bars, the icon turns by 180 degrees */\n.iob-ani-menu-rot { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }\n.iob-ani-menu-open .iob-ani-menu-rot { transform: rotate(180deg); }\n.iob-ani-menu-right .iob-ani-menu-flip { transform: scaleX(-1); }\n.iob-ani-menu-bar { position: absolute; left: 0.125em; width: 0.75em; height: 0.0834em; margin-top: -0.0417em; border-radius: 0.02em; background: currentColor; transform-origin: 100% 50%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }\n.iob-ani-menu-b1 { top: 0.2917em; }\n.iob-ani-menu-b2 { top: 0.5em; }\n.iob-ani-menu-b3 { top: 0.7083em; }\n.iob-ani-menu-open .iob-ani-menu-b1 { transform: translate(-0.0417em, 0.2083em) rotate(45deg) scaleX(0.63); }\n.iob-ani-menu-open .iob-ani-menu-b2 { transform: translateX(-0.0417em) scaleX(0.889); }\n.iob-ani-menu-open .iob-ani-menu-b3 { transform: translate(-0.0417em, -0.2083em) rotate(-45deg) scaleX(0.63); }\n\n/* Trash: the lid opens on hover of the icon or of its button */\n.iob-ani-trash-lid { transform-origin: 5px 6px; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1); }\n.iob-ani-trash-open .iob-ani-trash-lid,\n.iob-ani-trash:hover .iob-ani-trash-lid,\n:is(button, a, [role=\"button\"]):hover .iob-ani-trash .iob-ani-trash-lid,\n:is(button, a, [role=\"button\"]):focus-visible .iob-ani-trash .iob-ani-trash-lid { transform: translateY(-1.5px) rotate(-18deg); }\n\n/* Expert mode: mortarboard, outlined when off and filled when on */\n.iob-ani-expert-hat { transform-origin: 12px 12px; }\n.iob-ani-expert-shape { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill-opacity 0.18s ease; }\n.iob-ani-expert-on .iob-ani-expert-shape { fill-opacity: 1; transition-delay: 0.12s; }\n.iob-ani-expert-tassel { transform-origin: 21.2px 9.1px; }\n.iob-ani-expert-cord { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }\n.iob-ani-expert-tuft { fill: currentColor; stroke: currentColor; stroke-width: 0.8; stroke-linejoin: round; }\n\n/* Folder: closed, the front flap lies on the back like a closed folder; open, it folds down. The closed\n   shape covers both until the flap starts to move, so the closed folder looks exactly like IconClosed */\n.iob-ani-folder path { fill: currentColor; }\n.iob-ani-folder-front { transform-origin: 104px 448px; transform: scaleY(1.1667) skewX(29.1deg); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); }\n.iob-ani-folder-open .iob-ani-folder-front { transform: none; transition: transform 0.32s cubic-bezier(0.3, 1.35, 0.5, 1); }\n.iob-ani-folder-closed { transition: opacity 0.06s linear 0.18s; }\n.iob-ani-folder-open .iob-ani-folder-closed { opacity: 0; transition-delay: 0s; }\n\n/* Connection */\n.iob-ani-wifi path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: opacity 0.3s; }\n.iob-ani-wifi circle { fill: currentColor; transition: opacity 0.3s; }\n.iob-ani-wifi .iob-ani-wifi-slash { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1); }\n.iob-ani-wifi-disconnected .iob-ani-wifi-slash { stroke-dashoffset: 0; }\n.iob-ani-wifi-disconnected .iob-ani-wifi-w { opacity: 0.35; }\n.iob-ani-wifi-connecting .iob-ani-wifi-w { animation: iob-ani-wave 1.5s ease-in-out infinite; }\n.iob-ani-wifi-connecting .iob-ani-wifi-w1 { animation-delay: 0.18s; }\n.iob-ani-wifi-connecting .iob-ani-wifi-w2 { animation-delay: 0.36s; }\n.iob-ani-wifi-connecting .iob-ani-wifi-w3 { animation-delay: 0.54s; }\n\n@keyframes iob-ani-spin { to { transform: rotate(360deg); } }\n@keyframes iob-ani-draw { to { stroke-dashoffset: 0; } }\n@keyframes iob-ani-breathe { 50% { opacity: 0.35; } }\n@keyframes iob-ani-wave { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } }\n@keyframes iob-ani-shake { 20% { transform: translateX(-1.5px); } 40% { transform: translateX(1.5px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } }\n\n@media (prefers-reduced-motion: reduce) {\n    .iob-ani-pp-a, .iob-ani-pp-b, .iob-ani-menu-rot, .iob-ani-menu-bar, .iob-ani-trash-lid, .iob-ani-expert-shape, .iob-ani-folder-front, .iob-ani-folder-closed { transition-duration: 0.01ms; transition-delay: 0s; }\n    .iob-ani-pp-pending .iob-ani-pp-ring { animation: iob-ani-breathe 1.2s ease-in-out infinite; }\n    .iob-ani-res svg, .iob-ani-res svg * { animation: none !important; stroke-dashoffset: 0; }\n}\n`;\n\n/** Puts the style sheet of the animated icons into the page, once and before the first paint */\nexport function useAnimatedIconStyles(): void {\n    useInsertionEffect(() => {\n        if (!window.document.getElementById(STYLE_ID)) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', STYLE_ID);\n            style.innerHTML = styles;\n            window.document.head.appendChild(style);\n        }\n    }, []);\n}\n\n/** Properties of the root element: class, size and accessibility */\nexport function rootProps(props: AnimatedIconProps, className: string): React.HTMLAttributes<HTMLSpanElement> {\n    // Without fontSize the size comes from the style sheet (24 px), so that MUI can change it like for its own icons\n    let fontSize: string | number | undefined;\n    if (typeof props.fontSize === 'number') {\n        fontSize = props.fontSize;\n    } else if (props.fontSize) {\n        fontSize = SIZES[props.fontSize] || props.fontSize;\n    }\n    return {\n        className: `iob-ani ${className}${props.className ? ` ${props.className}` : ''}`,\n        style: fontSize === undefined ? props.style : { fontSize, ...props.style },\n        role: props.ariaLabel ? 'img' : undefined,\n        'aria-label': props.ariaLabel,\n        'aria-hidden': props.ariaLabel ? undefined : true,\n    };\n}\n\n/** True if the user asked the system for less motion */\nexport function prefersReducedMotion(): boolean {\n    return !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n\n/** Plays a one-time animation (Web Animations API), unless the user wants less motion */\nexport function play(\n    element: Element | null | undefined,\n    keyframes: Keyframe[],\n    options: KeyframeAnimationOptions,\n): Animation | null {\n    if (!element?.animate || prefersReducedMotion()) {\n        return null;\n    }\n    return element.animate(keyframes, options);\n}\n\n/** Calls `onChange` when `value` changes, but not on the first render */\nexport function useChange<T>(value: T, onChange: (value: T, previous: T) => void): void {\n    const previous = useRef(value);\n    const callback = useRef(onChange);\n    useEffect(() => {\n        callback.current = onChange;\n    });\n    useEffect(() => {\n        if (!Object.is(previous.current, value)) {\n            const old = previous.current;\n            previous.current = value;\n            callback.current(value, old);\n        }\n    }, [value]);\n}\n"]}

package/build/Components/FileBrowser.js

@@ -13,9 +13,9 @@ import { DialogError } from '../Dialogs/Error';
 import { Utils } from './Utils';
 import { DialogTextInput } from '../Dialogs/TextInput';
 // Custom Icons
-import { IconExpert } from '../icons/IconExpert';
+import { IconExpertMode } from './AnimatedIcons/IconExpertMode';
+import { IconFolder } from './AnimatedIcons/IconFolder';
 import { IconClosed } from '../icons/IconClosed';
-import { IconOpen } from '../icons/IconOpen';
 import { IconNoIcon } from '../icons/IconNoIcon';
 import { Icon } from './Icon';
 import { withWidth } from './withWidth';
@@ -1005,7 +1005,6 @@ export class FileBrowserClass extends Component {
             !item.temp) {
             return null;
         }
-        const IconEl = expanded ? IconOpen : IconClosed;
         const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
         const isUserData = item.name === USER_DATA;
         const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
@@ -1013,7 +1012,7 @@ export class FileBrowserClass extends Component {
         return (React.createElement(Box, { component: "div", key: item.id, id: item.id, style: this.state.viewType === TABLE
                 ? { marginLeft: padding, width: `calc(100% - ${padding}px)` }
                 : undefined, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: "browserItem", sx: Utils.getStyle(this.props.theme, styles[`item${this.state.viewType}`], styles[`itemFolder${this.state.viewType}`], this.state.selected === item.id ? styles.itemSelected : {}, item.temp ? styles.itemFolderTemp : {}) },
-            React.createElement(IconEl, { style: iconStyle, onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
+            React.createElement(IconFolder, { open: !!expanded, style: iconStyle, onClick: this.state.viewType === TABLE ? (e) => this.toggleFolder(item, e) : undefined }),
             React.createElement(Box, { component: "div", sx: Utils.getStyle(this.props.theme, styles[`itemName${this.state.viewType}`], styles[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
             React.createElement(Box, { component: "div", style: styles[`itemSize${this.state.viewType}`], sx: { display: { md: 'inline-block', sm: 'none' } } }, this.state.viewType === TABLE && this.state.folders[item.id]
                 ? this.state.folders[item.id].length
@@ -1263,7 +1262,7 @@ export class FileBrowserClass extends Component {
                     ...styles.menuButton,
                     ...(this.state.expertMode ? styles.menuButtonExpertActive : undefined),
                 }, "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
-                React.createElement(IconExpert, null))) : null,
+                React.createElement(IconExpertMode, { active: !!this.state.expertMode }))) : null,
             this.props.showViewTypeButton ? (React.createElement(IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), style: styles.menuButton, "aria-label": "view mode", onClick: () => {
                     const viewType = this.state.viewType === TABLE ? TILE : TABLE;
                     this.localStorage.setItem('files.viewType', viewType);