xmlui 0.10.19 → 0.10.21

package/dist/scripts/src/components/Theme/Theme.spec.js

@@ -122,3 +122,269 @@ fixtures_1.test.use({ viewport: { width: PAGE_WIDTH, height: PAGE_HEIGHT } });
     (0, fixtures_1.expect)(h1Color).toBe("rgb(255, 0, 0)");
     (0, fixtures_1.expect)(h2Color).toBe("rgb(0, 255, 0)");
 }));
+// =============================================================================
+// APPLYIF PROPERTY TESTS
+// =============================================================================
+fixtures_1.test.describe("applyIf Property", () => {
+    (0, fixtures_1.test)("applies theme when applyIf is true (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="${EXPECTED_COLOR}" applyIf="true">
+          <Button testId="themed-button">Themed Button</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("themed-button"), "background-color");
+        (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
+    }));
+    (0, fixtures_1.test)("applies theme when applyIf is omitted (defaults to true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_COLOR = "rgb(0, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="${EXPECTED_COLOR}">
+          <Button testId="themed-button">Themed Button</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("themed-button"), "background-color");
+        (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
+    }));
+    (0, fixtures_1.test)("does not apply theme when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const THEME_COLOR = "rgb(255, 0, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="${THEME_COLOR}" applyIf="false">
+          <Button testId="unthemed-button">Unthemed Button</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("unthemed-button"), "background-color");
+        // Should not have the theme color when applyIf is false
+        (0, fixtures_1.expect)(backgroundColor).not.toBe(THEME_COLOR);
+    }));
+    (0, fixtures_1.test)("renders children without theme wrapper when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <App>
+        <Theme tone="dark" applyIf="false">
+          <Button testId="button">Button Text</Button>
+          <H1 testId="header">Header Text</H1>
+        </Theme>
+      </App>
+    `);
+        // Children should still be rendered and visible
+        yield (0, fixtures_1.expect)(page.getByTestId("button")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("header")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("button")).toHaveText("Button Text");
+        yield (0, fixtures_1.expect)(page.getByTestId("header")).toHaveText("Header Text");
+    }));
+    (0, fixtures_1.test)("supports dynamic applyIf with binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState === true}">
+          <Button testId="conditional-button" onClick="testState = testState === true ? false : true">Toggle Theme</Button>
+        </Theme>
+      </App>
+    `);
+        // Initially testState is null, expression evaluates to false
+        const initialBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
+        (0, fixtures_1.expect)(initialBackground.backgroundColor).not.toBe("rgb(255, 0, 0)");
+        // Click to make testState true, theme should be applied
+        yield page.getByTestId("conditional-button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
+        const appliedBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
+        (0, fixtures_1.expect)(appliedBackground.backgroundColor).toBe("rgb(255, 0, 0)");
+        // Click again to make testState false, theme should not be applied
+        yield page.getByTestId("conditional-button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(false);
+        const removedBackground = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("conditional-button"), "background-color");
+        (0, fixtures_1.expect)(removedBackground.backgroundColor).not.toBe("rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("handles nested themes with different applyIf values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const OUTER_COLOR = "rgb(255, 0, 0)";
+        const INNER_COLOR = "rgb(0, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="${OUTER_COLOR}" applyIf="true">
+          <Button testId="outer-themed">Outer Themed</Button>
+          <Theme backgroundColor-Button="${INNER_COLOR}" applyIf="false">
+            <Button testId="inner-unthemed">Inner Unthemed</Button>
+          </Theme>
+        </Theme>
+      </App>
+    `);
+        // Outer button should have outer theme applied
+        const { backgroundColor: outerBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("outer-themed"), "background-color");
+        (0, fixtures_1.expect)(outerBg).toBe(OUTER_COLOR);
+        // Inner button should inherit outer theme (inner theme not applied due to applyIf=false)
+        const { backgroundColor: innerBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("inner-unthemed"), "background-color");
+        (0, fixtures_1.expect)(innerBg).toBe(OUTER_COLOR); // Should inherit from outer theme
+    }));
+    (0, fixtures_1.test)("applies multiple theme variables when applyIf is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const BG_COLOR = "rgb(255, 0, 0)";
+        const TEXT_COLOR = "rgb(0, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          backgroundColor-Button="${BG_COLOR}" 
+          textColor-Button="${TEXT_COLOR}"
+          applyIf="true"
+        >
+          <Button testId="multi-themed">Multi Themed</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("multi-themed"), "background-color");
+        const { color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("multi-themed"), "color");
+        (0, fixtures_1.expect)(backgroundColor).toBe(BG_COLOR);
+        (0, fixtures_1.expect)(color).toBe(TEXT_COLOR);
+    }));
+    (0, fixtures_1.test)("does not apply any theme variables when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const BG_COLOR = "rgb(255, 0, 0)";
+        const TEXT_COLOR = "rgb(0, 255, 0)";
+        yield initTestBed(`
+      <App>
+        <Theme 
+          backgroundColor-Button="${BG_COLOR}" 
+          textColor-Button="${TEXT_COLOR}"
+          applyIf="false"
+        >
+          <Button testId="no-theme">No Theme</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("no-theme"), "background-color");
+        const { color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("no-theme"), "color");
+        (0, fixtures_1.expect)(backgroundColor).not.toBe(BG_COLOR);
+        (0, fixtures_1.expect)(color).not.toBe(TEXT_COLOR);
+    }));
+});
+// =============================================================================
+// APPLYIF EDGE CASES
+// =============================================================================
+fixtures_1.test.describe("applyIf Edge Cases", () => {
+    (0, fixtures_1.test)("handles null applyIf value gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState === 'apply'}">
+          <Button testId="null-apply" onClick="testState = testState === 'apply' ? null : 'apply'">Button</Button>
+        </Theme>
+      </App>
+    `);
+        // Initially testState is null, expression evaluates to false
+        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
+        (0, fixtures_1.expect)(initialBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
+        // Button should still be visible
+        yield (0, fixtures_1.expect)(page.getByTestId("null-apply")).toBeVisible();
+        // Click to set testState to 'apply', theme should be applied
+        yield page.getByTestId("null-apply").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("apply");
+        const appliedBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
+        (0, fixtures_1.expect)(appliedBg.backgroundColor).toBe("rgb(255, 0, 0)");
+        // Click again to set testState to null, theme should not be applied
+        yield page.getByTestId("null-apply").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
+        const removedBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("null-apply"), "background-color");
+        (0, fixtures_1.expect)(removedBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("handles undefined applyIf value (defaults to true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState > 10 ? true : undefined}">
+          <Button testId="undefined-apply" onClick="testState = testState == null ? 5 : testState + 10">Button</Button>
+        </Theme>
+      </App>
+    `);
+        // Initially testState is null, expression evaluates to undefined (should use default true)
+        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
+        (0, fixtures_1.expect)(initialBg.backgroundColor).toBe("rgb(255, 0, 0)"); // undefined should default to true
+        // Button should still be visible
+        yield (0, fixtures_1.expect)(page.getByTestId("undefined-apply")).toBeVisible();
+        // Click to set testState to 5, expression evaluates to undefined (should use default true)
+        yield page.getByTestId("undefined-apply").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(5);
+        const afterFirstClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
+        (0, fixtures_1.expect)(afterFirstClickBg.backgroundColor).toBe("rgb(255, 0, 0)"); // undefined should default to true
+        // Click again to set testState to 15, expression evaluates to true (explicit true)
+        yield page.getByTestId("undefined-apply").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(15);
+        const afterSecondClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("undefined-apply"), "background-color");
+        (0, fixtures_1.expect)(afterSecondClickBg.backgroundColor).toBe("rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("handles string 'false' as truthy value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="false">
+          <Button testId="string-false">Button</Button>
+        </Theme>
+      </App>
+    `);
+        // String "false" should be treated as boolean false, so theme should not be applied
+        const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("string-false"), "background-color");
+        (0, fixtures_1.expect)(backgroundColor).not.toBe("rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("handles numeric values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const THEME_COLOR = "rgb(255, 0, 0)";
+        // Test with 0 (falsy)
+        yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="${THEME_COLOR}" applyIf="{0}">
+          <Button testId="zero-apply">Button Zero</Button>
+        </Theme>
+      </App>
+    `);
+        const { backgroundColor: zeroBg } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("zero-apply"), "background-color");
+        (0, fixtures_1.expect)(zeroBg).not.toBe(THEME_COLOR);
+    }));
+    (0, fixtures_1.test)("works with complex conditional expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const { testStateDriver } = yield initTestBed(`
+      <App>
+        <Theme backgroundColor-Button="rgb(255, 0, 0)" applyIf="{testState > 5}">
+          <Button testId="complex-condition" onClick="testState = testState == null ? 1 : testState + 3">
+            Increment by 3
+          </Button>
+        </Theme>
+      </App>
+    `);
+        // Initially testState is null, condition should be false
+        const initialBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
+        (0, fixtures_1.expect)(initialBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
+        // Click once: testState becomes 1 (1 > 5 is false)
+        yield page.getByTestId("complex-condition").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
+        const firstClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
+        (0, fixtures_1.expect)(firstClickBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
+        // Click again: testState becomes 4 (4 > 5 is false)
+        yield page.getByTestId("complex-condition").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(4);
+        const secondClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
+        (0, fixtures_1.expect)(secondClickBg.backgroundColor).not.toBe("rgb(255, 0, 0)");
+        // Click again: testState becomes 7 (7 > 5 is true, theme should apply)
+        yield page.getByTestId("complex-condition").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(7);
+        const thirdClickBg = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("complex-condition"), "background-color");
+        (0, fixtures_1.expect)(thirdClickBg.backgroundColor).toBe("rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("preserves children structure when applyIf is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <App>
+        <Theme applyIf="false">
+          <VStack testId="container">
+            <Button testId="first-button">First</Button>
+            <H1 testId="header">Header</H1>
+            <Button testId="second-button">Second</Button>
+          </VStack>
+        </Theme>
+      </App>
+    `);
+        // All children should be present and in correct order
+        yield (0, fixtures_1.expect)(page.getByTestId("container")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("first-button")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("header")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("second-button")).toBeVisible();
+        // Check text content is preserved
+        yield (0, fixtures_1.expect)(page.getByTestId("first-button")).toHaveText("First");
+        yield (0, fixtures_1.expect)(page.getByTestId("header")).toHaveText("Header");
+        yield (0, fixtures_1.expect)(page.getByTestId("second-button")).toHaveText("Second");
+    }));
+});

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -22,11 +22,12 @@ const StyleContext_1 = require("../../components-core/theming/StyleContext");
 const hooks_1 = require("../../components-core/utils/hooks");
 exports.defaultProps = {
     isRoot: false,
+    applyIf: true,
     toastDuration: 5000,
     themeVars: constants_1.EMPTY_OBJECT,
     root: false,
 };
-function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, tone, toastDuration = exports.defaultProps.toastDuration, themeVars = exports.defaultProps.themeVars, layoutContext, children, }) {
+function Theme({ id, isRoot = exports.defaultProps.isRoot, applyIf, renderChild, node, tone, toastDuration = exports.defaultProps.toastDuration, themeVars = exports.defaultProps.themeVars, layoutContext, children, }) {
     const generatedId = (0, react_1.useId)();
     const { themes, resources, resourceMap, activeThemeId } = (0, ThemeContext_1.useThemes)();
     const { activeTheme, activeThemeTone, root } = (0, ThemeContext_1.useTheme)();
@@ -115,6 +116,12 @@ function Theme({ id, isRoot = exports.defaultProps.isRoot, renderChild, node, to
     if (indexing) {
         return children;
     }
+    // Use default value if applyIf is undefined
+    const shouldApplyTheme = applyIf !== null && applyIf !== void 0 ? applyIf : exports.defaultProps.applyIf;
+    // If applyIf is false, render children unwrapped without theme context
+    if (!shouldApplyTheme) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderChild && renderChild(node.children), children] }));
+    }
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)(RootClasses, { classNames: rootClasses }), (0, jsx_runtime_1.jsxs)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "theme-root", children: [renderChild && renderChild(node.children), children] }), (0, jsx_runtime_1.jsx)(NotificationToast_1.NotificationToast, { toastDuration: toastDuration })] }));

package/dist/scripts/src/components/TimeInput/TimeInput.spec.js

@@ -328,18 +328,18 @@ fixtures_1.test.describe("Basic Functionality", () => {
         (0, fixtures_1.test)("clears value when clear button is clicked (clearToInitialValue is true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver, }) {
             yield initTestBed(`<TimeInput testId="timeInput" clearable="true" initialValue="14:30" />`);
             const driver = yield createTimeInputDriver("timeInput");
-            driver.hourInput.fill("05");
+            yield driver.hourInput.fill("05");
             yield driver.clearButton.click();
             yield (0, fixtures_1.expect)(driver.hourInput).toHaveValue("14");
             yield (0, fixtures_1.expect)(driver.minuteInput).toHaveValue("30");
         }));
         (0, fixtures_1.test)("clears value when clear button is clicked (clearToInitialValue is false)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTimeInputDriver, }) {
             yield initTestBed(`
-          <TimeInput testId="timeInput" clearable="true" 
+          <TimeInput testId="timeInput" clearable="true"
             clearToInitialValue="false" initialValue="14:30" />
       `);
             const driver = yield createTimeInputDriver("timeInput");
-            driver.hourInput.fill("05");
+            yield driver.hourInput.fill("05");
             yield driver.clearButton.click();
             yield (0, fixtures_1.expect)(driver.hourInput).toHaveValue("");
             yield (0, fixtures_1.expect)(driver.minuteInput).toHaveValue("");

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -357,7 +357,6 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
         return `${h24}:${m24}:${s24}`;
     }, [hour, minute, second, amPm, is12HourFormat]);
     // Component API registration
-    (0, react_1.useImperativeHandle)(ref, () => timeInputRef.current);
     (0, react_1.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi({

package/dist/scripts/src/components/Timer/TimerNative.js

@@ -86,7 +86,6 @@ exports.Timer = (0, react_1.forwardRef)(function Timer(_a, forwardedRef) {
         isRunning: () => isRunning && !isPaused,
     }), [pause, resume, isPaused, isRunning]);
     // Register both APIs together
-    (0, react_1.useImperativeHandle)(forwardedRef, () => timerApi, [timerApi]);
     (0, react_1.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi(timerApi);

package/dist/scripts/src/components/Tree/TreeNative.js

@@ -15,14 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeComponent = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_window_1 = require("react-window");
-const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+const virtua_1 = require("virtua");
 const classnames_1 = __importDefault(require("classnames"));
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const TreeComponent_module_scss_1 = __importDefault(require("./TreeComponent.module.scss"));
 const treeUtils_1 = require("../../components-core/utils/treeUtils");
-const TreeRow = (0, react_1.memo)(({ index, style, data }) => {
+const TreeRow = (0, react_1.memo)(({ index, data }) => {
     const { nodes, toggleNode, selectedId, itemRenderer, itemClickExpands, onItemClick, onSelection, focusedIndex, treeContainerRef, iconCollapsed, iconExpanded, iconSize, animateExpand, expandRotation, } = data;
     const treeItem = nodes[index];
     const isFocused = focusedIndex === index && focusedIndex >= 0;
@@ -64,7 +63,7 @@ const TreeRow = (0, react_1.memo)(({ index, style, data }) => {
     // Get loading state for styling and interaction
     const nodeWithState = treeItem;
     const isLoading = nodeWithState.loadingState === "loading";
-    return ((0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({}, style), { width: "auto", minWidth: "100%", display: "flex" }), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%", display: "flex" }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
                 [TreeComponent_module_scss_1.default.selected]: isSelected,
                 [TreeComponent_module_scss_1.default.focused]: isFocused,
             }), role: "treeitem", "aria-level": treeItem.depth + 1, "aria-expanded": treeItem.hasChildren ? treeItem.isExpanded : undefined, "aria-selected": isSelected, "aria-label": treeItem.displayName, "aria-busy": isLoading, tabIndex: isFocused ? 0 : -1, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: onToggleNode, className: TreeComponent_module_scss_1.default.gutter, style: { cursor: isLoading ? "default" : "pointer" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: treeItem.depth * 10 }, className: TreeComponent_module_scss_1.default.depthPlaceholder }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.toggleWrapper, {
@@ -156,7 +155,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
     // Helper function to update internal data and force re-render
     const updateInternalData = (0, react_1.useCallback)((updater) => {
         setInternalData(updater);
-        setDataRevision(prev => prev + 1);
+        setDataRevision((prev) => prev + 1);
     }, []);
     // Build field configuration
     const fieldConfig = (0, react_1.useMemo)(() => ({
@@ -265,9 +264,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
             return !!(fieldConfig.dynamicField && node[fieldConfig.dynamicField]);
         };
         if (defaultExpanded === "first-level") {
-            return treeData
-                .filter(node => !isDynamic(node))
-                .map((node) => node.key);
+            return treeData.filter((node) => !isDynamic(node)).map((node) => node.key);
         }
         else if (defaultExpanded === "all") {
             const allIds = [];
@@ -288,7 +285,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
             // Expand full paths to specified nodes by including all parent nodes
             // But exclude dynamic nodes from the expansion
             const expandedPaths = expandParentPaths(defaultExpanded, treeItemsById);
-            return expandedPaths.filter(nodeId => {
+            return expandedPaths.filter((nodeId) => {
                 const node = treeItemsById[String(nodeId)];
                 return !node || !isDynamic(node);
             });
@@ -417,7 +414,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     const currentData = prevData !== null && prevData !== void 0 ? prevData : data;
                     if (dataFormat === "flat" && Array.isArray(currentData)) {
                         // Remove existing children of this node
-                        return currentData.filter(item => String(item[fieldConfig.parentField || "parentId"]) !== String(node.key));
+                        return currentData.filter((item) => String(item[fieldConfig.parentField || "parentId"]) !== String(node.key));
                     }
                     else if (dataFormat === "hierarchy" && Array.isArray(currentData)) {
                         // For hierarchy format, clear children array
@@ -446,7 +443,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                             if (dataFormat === "flat" && Array.isArray(currentData)) {
                                 // Replace existing children with newly loaded data
                                 // Remove existing children of this node
-                                const filteredData = currentData.filter(item => String(item[fieldConfig.parentField || "parentId"]) !== String(node.key));
+                                const filteredData = currentData.filter((item) => String(item[fieldConfig.parentField || "parentId"]) !== String(node.key));
                                 // Add new children
                                 const newItems = loadedData.map((item) => (Object.assign(Object.assign({}, item), { [fieldConfig.parentField || "parentId"]: String(node.key) })));
                                 return [...filteredData, ...newItems];
@@ -518,7 +515,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     const currentNode = flatTreeData[currentIndex];
                     if (currentNode.hasChildren && !currentNode.isExpanded) {
                         // Expand node
-                        toggleNode(currentNode);
+                        void toggleNode(currentNode);
                     }
                     else if (currentNode.hasChildren &&
                         currentNode.isExpanded &&
@@ -535,7 +532,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     const currentNode = flatTreeData[currentIndex];
                     if (currentNode.hasChildren && currentNode.isExpanded) {
                         // Collapse node
-                        toggleNode(currentNode);
+                        void toggleNode(currentNode);
                     }
                     else if (currentNode.depth > 0) {
                         // Move to parent - find previous node with smaller depth
@@ -572,7 +569,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     }
                     // Handle expansion for Enter key
                     if (e.key === "Enter" && currentNode.hasChildren) {
-                        toggleNode(currentNode);
+                        void toggleNode(currentNode);
                     }
                 }
                 handled = true;
@@ -616,10 +613,6 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
         animateExpand,
         expandRotation,
     ]);
-    const getItemKey = (0, react_1.useCallback)((index, data) => {
-        const node = data.nodes[index];
-        return (node === null || node === void 0 ? void 0 : node.key) || (node === null || node === void 0 ? void 0 : node.id) || `fallback-${index}`;
-    }, []);
     // Shared API implementation to avoid duplication between ref and component APIs
     const treeApiMethods = (0, react_1.useMemo)(() => {
         return {
@@ -683,7 +676,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                                     if (dataFormat === "flat" && Array.isArray(currentData)) {
                                         // Replace existing children with newly loaded data
                                         // Remove existing children of this node
-                                        const filteredData = currentData.filter(item => String(item[fieldConfig.parentField || "parentId"]) !== String(nodeId));
+                                        const filteredData = currentData.filter((item) => String(item[fieldConfig.parentField || "parentId"]) !== String(nodeId));
                                         // Add new children
                                         const newItems = loadedData.map((item) => (Object.assign(Object.assign({}, item), { [fieldConfig.parentField || "parentId"]: String(nodeId) })));
                                         return [...filteredData, ...newItems];
@@ -792,8 +785,8 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                     const updatedFlatTreeData = (0, treeUtils_1.toFlatTree)(treeData, newExpandedIds, fieldConfig.dynamicField, nodeStates);
                     const nodeIndex = updatedFlatTreeData.findIndex((item) => String(item.key) === String(nodeId));
                     if (nodeIndex >= 0 && listRef.current) {
-                        // Scroll to the item using the FixedSizeList's scrollToItem method
-                        listRef.current.scrollToItem(nodeIndex, "center");
+                        // Scroll to the item using virtua's scrollToIndex method
+                        listRef.current.scrollToIndex(nodeIndex, { align: "center" });
                     }
                 }, 0);
             },
@@ -801,7 +794,7 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
                 // Simple scroll without expanding - just scroll to the item if it's visible
                 const nodeIndex = findNodeIndexById(nodeId);
                 if (nodeIndex >= 0 && listRef.current) {
-                    listRef.current.scrollToItem(nodeIndex, "center");
+                    listRef.current.scrollToIndex(nodeIndex, { align: "center" });
                 }
             },
             appendNode: (parentNodeId, nodeData) => {
@@ -1132,5 +1125,5 @@ exports.TreeComponent = (0, react_1.memo)((props) => {
             setFocusedIndex(-1);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: treeContainerRef, className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.wrapper, className), role: "tree", "aria-label": "Tree navigation", "aria-multiselectable": "false", tabIndex: 0, onFocus: handleTreeFocus, onBlur: handleTreeBlur, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { ref: listRef, height: height, itemCount: itemData.nodes.length, itemData: itemData, itemSize: itemHeight, itemKey: getItemKey, width: width, children: TreeRow })) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: treeContainerRef, className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.wrapper, className), role: "tree", "aria-label": "Tree navigation", "aria-multiselectable": "false", tabIndex: 0, onFocus: handleTreeFocus, onBlur: handleTreeBlur, onKeyDown: handleKeyDown, style: { height: "100%", overflow: "auto" }, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: listRef, children: flatTreeData.map((node, index) => ((0, jsx_runtime_1.jsx)(TreeRow, { index: index, data: itemData }, node.key))) }) }));
 });

package/dist/scripts/src/components-core/InspectorContext.js

@@ -175,7 +175,7 @@ function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setSh
             htmlElement.removeEventListener("mouseenter", mouseenter);
             htmlElement.removeEventListener("mouseleave", mouseleave);
         };
-    }, [inspectId, node, inspectMode, setShowCode]);
+    }, [inspectId, node, inspectMode, setShowCode, setInspectedNode]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inspectMode
             ? null
             : visible &&

package/dist/scripts/src/components-core/StandaloneApp.js

@@ -47,7 +47,7 @@ const metadataProvider = new metadata_utils_1.MetadataProvider(collectedComponen
  * representation); ApiInterceptor can emulate some backend functionality
  * running in the browser.
  */
-function StandaloneApp({ appDef, appGlobals: globals, decorateComponentsWithTestId, debugEnabled = false, runtime, extensionManager, waitForApiInterceptor = false, children }) {
+function StandaloneApp({ appDef, appGlobals: globals, decorateComponentsWithTestId, debugEnabled = false, runtime, extensionManager, waitForApiInterceptor = false, children, }) {
     var _a;
     // --- Fetch all files constituting the standalone app, including components,
     // --- themes, and other artifacts. Display the app version numbers in the
@@ -377,12 +377,10 @@ function loadThemeFile(url) {
  * @returns The source file contents response
  */
 function fetchWithoutCache(url) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return fetch((0, misc_1.normalizePath)(url), {
-            headers: {
-                "Cache-Control": "no-cache, no-store",
-            },
-        });
+    return fetch((0, misc_1.normalizePath)(url), {
+        headers: {
+            "Cache-Control": "no-cache, no-store",
+        },
     });
 }
 /**
@@ -412,7 +410,7 @@ function useStandalone(standaloneAppDef, runtime = constants_1.EMPTY_OBJECT, ext
     });
     const [projectCompilation, setProjectCompilation] = (0, react_1.useState)(null);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        (function () {
+        void (function () {
             return __awaiter(this, void 0, void 0, function* () {
                 var _a, _b, _c, _d, _e, _f;
                 const resolvedRuntime = resolveRuntime(runtime);

package/dist/scripts/src/components-core/action/FileUploadAction.js

@@ -81,7 +81,7 @@ function uploadFile(_a, _b) {
                 throw e;
             }
         }
-        (0, actionUtils_1.invalidateQueries)(invalidates, appContext, state);
+        void (0, actionUtils_1.invalidateQueries)(invalidates, appContext, state);
         return result;
     });
 }

package/dist/scripts/src/components-core/behaviors/BehaviorContext.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBehaviors = exports.BehaviorsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CoreBehaviors_1 = require("./CoreBehaviors");
+// --- Create the context with a default value
+const BehaviorContext = (0, react_1.createContext)(undefined);
+/**
+ * A provider component that makes the behavior management system available to
+ * its children.
+ */
+const BehaviorsProvider = ({ children }) => {
+    const behaviors = (0, react_1.useMemo)(() => new Map(), []);
+    const registerBehavior = (0, react_1.useCallback)((behavior) => {
+        behaviors.set(behavior.name, behavior);
+    }, [behaviors]);
+    (0, react_1.useMemo)(() => {
+        if (process.env.VITE_USED_BEHAVIORS_Animation !== "false") {
+            registerBehavior(CoreBehaviors_1.animationBehavior);
+        }
+        if (process.env.VITE_USED_BEHAVIORS_Tooltip !== "false") {
+            registerBehavior(CoreBehaviors_1.tooltipBehavior);
+        }
+        if (process.env.VITE_USED_BEHAVIORS_Label !== "false") {
+            registerBehavior(CoreBehaviors_1.labelBehavior);
+        }
+    }, [registerBehavior]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        behaviors,
+        registerBehavior,
+        unregisterBehavior: (name) => behaviors.delete(name),
+        getBehaviors: () => {
+            return Array.from(behaviors.values());
+        },
+    }), [behaviors, registerBehavior]);
+    return (0, jsx_runtime_1.jsx)(BehaviorContext.Provider, { value: contextValue, children: children });
+};
+exports.BehaviorsProvider = BehaviorsProvider;
+/**
+ * A custom hook to access the behavior context.
+ */
+const useBehaviors = () => {
+    const context = (0, react_1.useContext)(BehaviorContext);
+    if (!context) {
+        throw new Error("useBehaviors must be used within a BehaviorsProvider");
+    }
+    return context;
+};
+exports.useBehaviors = useBehaviors;

package/dist/scripts/src/components-core/behaviors/CoreBehaviors.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCoreBehaviors = exports.labelBehavior = exports.animationBehavior = exports.tooltipBehavior = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const AnimationNative_1 = require("../../components/Animation/AnimationNative");
 const ItemWithLabel_1 = require("../../components/FormItem/ItemWithLabel");
 const TooltipNative_1 = require("../../components/Tooltip/TooltipNative");
@@ -41,7 +42,11 @@ exports.animationBehavior = {
         const animation = extractValue((_a = context.node.props) === null || _a === void 0 ? void 0 : _a.animation, true);
         const animationOptions = extractValue((_b = context.node.props) === null || _b === void 0 ? void 0 : _b.animationOptions, true);
         const parsedOptions = (0, AnimationNative_1.parseAnimationOptions)(animationOptions);
-        return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedOptions, { children: node })));
+        return ((0, jsx_runtime_1.jsx)(AnimationNative_1.Animation, Object.assign({ animation: (0, AnimationNative_1.parseAnimation)(animation) }, parsedOptions, { children: context.node.type === "ModalDialog"
+                ? (0, react_1.cloneElement)(node, {
+                    externalAnimation: true,
+                })
+                : node })));
     },
 };
 /**