xmlui 0.10.19 → 0.10.20

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

@@ -98,7 +98,7 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const textarea = page.getByRole("textbox");
         yield textarea.fill("Some content");
         yield (0, fixtures_1.expect)(textarea).toHaveValue("Some content");
-        (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
+        yield (0, fixtures_1.expect)(textarea).toHaveAttribute("placeholder", "Enter comments");
     }));
     (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`<TextArea maxLength="10" />`);
@@ -275,7 +275,7 @@ fixtures_1.test.describe("Accessibility", () => {
     }));
     (0, fixtures_1.test)("component is keyboard accessible when interactive", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Comments"
         onGotFocus="testState = 'keyboard-focused'"
       />
@@ -408,7 +408,7 @@ fixtures_1.test.describe("Visual States", () => {
             testThemeVars: {
                 "backgroundColor-TextArea--disabled": "rgb(255, 0, 0)",
                 "textColor-TextArea--disabled": "rgb(0, 255, 0)",
-                "borderColor-TextArea--disabled": "rgb(0, 0, 255)"
+                "borderColor-TextArea--disabled": "rgb(0, 0, 255)",
             },
         });
         const textarea = page.getByRole("textbox");
@@ -510,15 +510,15 @@ fixtures_1.test.describe("Edge Cases", () => {
         yield (0, fixtures_1.expect)(textarea).toBeVisible();
         yield (0, fixtures_1.expect)(textarea).toHaveValue(longValue);
     }));
-    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles invalid maxRows/minRows combinations with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="2" minRows="5" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles zero maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="0" minRows="0" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
-    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component handles negative maxRows/minRows values with autoSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         yield initTestBed(`<TextArea autoSize="true" maxRows="{-1}" minRows="{-1}" />`);
         yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
     }));
@@ -529,7 +529,7 @@ fixtures_1.test.describe("Edge Cases", () => {
 fixtures_1.test.describe("Performance", () => {
     (0, fixtures_1.test)("component memoization prevents unnecessary re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextArea 
+      <TextArea
         label="Performance Test"
         onDidChange="testState = ++testState || 1"
       />
@@ -620,7 +620,7 @@ fixtures_1.test.describe("Integration", () => {
     (0, fixtures_1.test)("component works with event handling chain", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
-        <TextArea 
+        <TextArea
           onGotFocus="testState = 'focused'"
           onLostFocus="testState = 'blurred'"
           onDidChange="(value) => testState = 'changed: ' + value"

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

@@ -31,6 +31,7 @@ exports.ThemeMd = (0, metadata_helpers_1.createMetadata)({
             defaultValue: "light",
         },
         root: (0, metadata_helpers_1.d)(`This property indicates whether the component is at the root of the application.`, undefined, "boolean", ThemeNative_1.defaultProps.root),
+        applyIf: (0, metadata_helpers_1.d)(`This property controls whether the theme wrapper is applied. When true (default), the theme wraps the children. When false, children are rendered unwrapped.`, undefined, "boolean", true),
     },
     opaque: true,
 });
@@ -42,5 +43,5 @@ exports.themeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     if (themeTone && themeTone !== "dark") {
         themeTone = "light";
     }
-    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
+    return ((0, jsx_runtime_1.jsx)(ThemeNative_1.Theme, { id: extractValue.asOptionalString(node.props.themeId), isRoot: extractValue.asOptionalBoolean(node.props.root), applyIf: extractValue.asOptionalBoolean(node.props.applyIf), layoutContext: layoutContext, renderChild: renderChild, tone: themeTone, toastDuration: toastDuration, themeVars: extractValue(restProps), node: node }));
 });

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/Tree/TreeNative.js

@@ -156,7 +156,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 +265,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 +286,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 +415,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 +444,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 +516,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 +533,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 +570,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;
@@ -683,7 +681,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];

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 })));
     },
 };
 /**