xmlui 0.11.4 → 0.11.7

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

@@ -1,490 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("RadioGroup with Option elements as children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Option value="1"></Option>
-        <Option value="2"></Option>
-        <Option value="3"></Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options).toHaveCount(3);
-    }));
-    (0, fixtures_1.test)("RadioGroup with Option elements with labels as children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-        <Option value="3">Option 3</Option>
-      </RadioGroup>
-    `);
-        const optionLabels = page.getByRole("radiogroup").locator("label");
-        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(3);
-        yield (0, fixtures_1.expect)(optionLabels.nth(0)).toHaveText("Option 1");
-        yield (0, fixtures_1.expect)(optionLabels.nth(1)).toHaveText("Option 2");
-        yield (0, fixtures_1.expect)(optionLabels.nth(2)).toHaveText("Option 3");
-    }));
-    (0, fixtures_1.test)("Providing non-Option elements as children still renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Text>Not an Option</Text>
-      </RadioGroup>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Not an Option")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("Mixing Option and non-Option elements as children renders all", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Text>Not an Option</Text>
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Not an Option")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Option 1")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("autoFocus sets focus on the first Option on page load", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup autoFocus="true">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("radiogroup").getByRole("radio")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("field is marked as required in the DOM when required=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup required="true">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toHaveAttribute("aria-required");
-    }));
-    (0, fixtures_1.test)("making field required shows a visual indicator", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup required="true" label="Radio Group Label">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        yield (0, fixtures_1.expect)(page.getByText("*")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue sets the initial selected option (string initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="2">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-        <Option value="3">Option 3</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue sets the initial selected option (number initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="{2}">
-        <Option value="{1}">Option 1</Option>
-        <Option value="{2}">Option 2</Option>
-        <Option value="{3}">Option 3</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue does not set the initial selected option (number initialValue, string options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="{2}">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-        <Option value="3">Option 3</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue does not set the initial selected option (string initialValue, number options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="2">
-        <Option value="{1}">Option 1</Option>
-        <Option value="{2}">Option 2</Option>
-        <Option value="{3}">Option 3</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue sets the initial selected option (boolean initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="{true}">
-        <Option value="{true}">Option 1</Option>
-        <Option value="{false}">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue does not set the initial selected option (boolean initialValue, string options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="{true}">
-        <Option value="true">Option 1</Option>
-        <Option value="false">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("initialValue does not set the initial selected option (string initialValue, boolean options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="true">
-        <Option value="{true}">Option 1</Option>
-        <Option value="{false}">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("undefined does not render Radio Option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Option value="1">Option 1</Option>
-        <Option value="{undefined}">Option 2</Option>
-      </RadioGroup>
-    `);
-        const optionLabels = page.getByRole("radiogroup").locator("label");
-        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(1);
-        yield (0, fixtures_1.expect)(optionLabels.first()).toHaveText("Option 1");
-    }));
-    (0, fixtures_1.test)("null renders Radio Option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup>
-        <Option value="1">Option 1</Option>
-        <Option value="{null}">Option 2</Option>
-      </RadioGroup>
-    `);
-        const optionLabels = page.getByRole("radiogroup").locator("label");
-        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(2);
-        yield (0, fixtures_1.expect)(optionLabels.first()).toHaveText("Option 1");
-        yield (0, fixtures_1.expect)(optionLabels.nth(1)).toHaveText("Option 2");
-    }));
-    [
-        { label: "empty object", value: "{}" },
-        { label: "object", value: "{ a: 1 }" },
-        { label: "function", value: "() => {}" },
-        { label: "NaN", value: "NaN" },
-    ].forEach(({ label, value }) => {
-        (0, fixtures_1.test)(`initialValue=${label} falls back to default (empty string)`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`
-      <RadioGroup initialValue="{${value}}">
-        <Option value="{${value}}">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-            const options = page.getByRole("radiogroup").getByRole("radio");
-            yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
-            yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-        }));
-    });
-    (0, fixtures_1.test)("readOnly disables switching between options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="1" readOnly="true">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
-        yield options.nth(1).click();
-        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
-        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
-    }));
-    (0, fixtures_1.test)("enabled input field allows user interaction for field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="1" enabled="true">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const radios = yield page.getByRole("radiogroup").getByRole("radio").all();
-        for (const radio of radios) {
-            yield (0, fixtures_1.expect)(radio).toBeEnabled();
-        }
-    }));
-    (0, fixtures_1.test)("disabled input field stops user interaction for field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="1" enabled="false">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const radios = yield page.getByRole("radiogroup").getByRole("radio").all();
-        for (const radio of radios) {
-            yield (0, fixtures_1.expect)(radio).toBeDisabled();
-        }
-    }));
-    (0, fixtures_1.test)("disabled option does not disable field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <RadioGroup initialValue="1">
-        <Option value="1" enabled="false">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield (0, fixtures_1.expect)(options.nth(0)).toBeDisabled();
-        yield (0, fixtures_1.expect)(options.nth(1)).toBeEnabled();
-    }));
-    (0, fixtures_1.test)("onDidChange is called on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <RadioGroup initialValue="1" onDidChange="(value) => testState = value">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield options.nth(1).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2");
-    }));
-    (0, fixtures_1.test)("onDidChange is not called if field is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <RadioGroup enabled="false" initialValue="1" onDidChange="(value) => testState = value">
-        <Option value="1">Option 1</Option>
-        <Option value="2">Option 2</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        // Verify the radio buttons are disabled
-        yield (0, fixtures_1.expect)(options.nth(1)).toBeDisabled();
-        yield options.nth(1).click({ force: true });
-        // Verify the state hasn't changed (should still be null since no change handler was called)
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on focusing the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <RadioGroup initialValue="1" onGotFocus="() => testState = 'focused'">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield options.nth(0).focus();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <RadioGroup initialValue="1" onGotFocus="() => testState = 'focused'" label="test">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        yield page.getByText("test").click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-    }));
-    (0, fixtures_1.test)("lostFocus event fires on blurring the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <RadioGroup initialValue="1" onLostFocus="() => testState = 'blurred'">
-        <Option value="1">Option 1</Option>
-      </RadioGroup>
-    `);
-        const options = page.getByRole("radiogroup").getByRole("radio");
-        yield options.nth(0).focus();
-        yield options.nth(0).blur();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
-    }));
-});
-(0, fixtures_1.test)("correct borderColor applied on validationStatus 'default'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>`, {
-        testThemeVars: {
-            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
-            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
-        },
-    });
-    const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(80, 80, 80)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
-}));
-(0, fixtures_1.test)("correct borderColor applied on validationStatus 'error'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup validationStatus="error" initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `, {
-        testThemeVars: {
-            "borderColor-RadioGroupOption--error": "rgb(255, 32, 0)",
-            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
-            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
-        },
-    });
-    const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(255, 32, 0)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
-}));
-(0, fixtures_1.test)("correct borderColor applied on validationStatus 'warning'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup validationStatus="warning" initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `, {
-        testThemeVars: {
-            "borderColor-RadioGroupOption--warning": "rgb(255, 180, 0)",
-            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
-            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
-        },
-    });
-    const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(255, 180, 0)");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
-}));
-(0, fixtures_1.test)("correct borderColor applied on validationStatus 'valid'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup validationStatus="valid" initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `, {
-        testThemeVars: {
-            "borderColor-RadioGroupOption--success": "rgb(0, 180, 0)",
-            "borderColor-RadioGroupOption--default": "rgb(80, 80, 80)",
-            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
-        },
-    });
-    const options = page.getByRole("radiogroup").getByRole("radio");
-    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-color", "rgb(80, 80, 80)");
-    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-color", "rgb(0, 180, 0)");
-}));
-(0, fixtures_1.test)("label is rendered if provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup label="Test Label" initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
-    yield (0, fixtures_1.expect)(labels.nth(0)).toHaveText("Test Label");
-    yield (0, fixtures_1.expect)(labels.nth(1)).toHaveText("Option 1");
-    yield (0, fixtures_1.expect)(labels.nth(2)).toHaveText("Option 2");
-}));
-(0, fixtures_1.test)("empty string label is not rendered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup initialValue="1">
-      <Option value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(2);
-    yield (0, fixtures_1.expect)(labels.nth(0)).toHaveText("Option 1");
-    yield (0, fixtures_1.expect)(labels.nth(1)).toHaveText("Option 2");
-}));
-(0, fixtures_1.test)("labelPosition=start positions label before input with ltr", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup direction="ltr" label="test" labelPosition="start" initialValue="1">
-      <Option testId="option1" value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
-    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(1));
-    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
-    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
-}));
-(0, fixtures_1.test)("labelPosition=start positions label after input with rtl", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup direction="rtl" label="test" labelPosition="start" initialValue="1">
-      <Option testId="option1" value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
-    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
-    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(2));
-    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
-}));
-(0, fixtures_1.test)("labelPosition=end positions label after input with ltr", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup direction="ltr" label="test" labelPosition="end" initialValue="1">
-      <Option testId="option1" value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
-    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
-    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(1));
-    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
-}));
-(0, fixtures_1.test)("labelPosition=end positions label after input with rtl", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <RadioGroup direction="rtl" label="test" labelPosition="end" initialValue="1">
-      <Option testId="option1" value="1">Option 1</Option>
-      <Option value="2">Option 2</Option>
-    </RadioGroup>
-  `);
-    const labels = page.locator("label");
-    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
-    yield (0, fixtures_1.expect)(labels.nth(2)).toHaveText("Option 2");
-    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
-    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(2));
-    (0, fixtures_1.expect)(optionLeft).toBeLessThan(labelRight);
-}));
-(0, fixtures_1.test)("value returns current input value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-      <Fragment>
-      <RadioGroup id="radioGroup" initialValue="2">
-        <Option value="1"></Option>
-        <Option value="2"></Option>
-      </RadioGroup>
-      <Text testId="valueDisplay">{radioGroup.value}</Text>
-      </Fragment>
-    `);
-    const valueDisplay = page.getByTestId("valueDisplay");
-    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("2");
-}));
-// --- --- setValue
-(0, fixtures_1.test)("setValue input value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-      <Fragment>
-      <RadioGroup id="radioGroup" initialValue="2">
-        <Option value="1"></Option>
-        <Option value="2"></Option>
-      </RadioGroup>
-      <Text testId="valueDisplay">{radioGroup.value}</Text>
-      <Button onClick="() => radioGroup.setValue('1')" testId="setValueButton">Set Value</Button>
-      </Fragment>
-    `);
-    const valueDisplay = page.getByTestId("valueDisplay");
-    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("2");
-    yield page.getByTestId("setValueButton").click();
-    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("1");
-}));

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -1,158 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroupOption = exports.RadioGroup = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
-const classnames_1 = __importDefault(require("classnames"));
-const RadioGroup_module_scss_1 = __importDefault(require("./RadioGroup.module.scss"));
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
-const RadioItemNative_1 = require("./RadioItemNative");
-const OptionNative_1 = require("../Option/OptionNative");
-exports.defaultProps = {
-    value: "",
-    initialValue: "",
-    enabled: true,
-    validationStatus: "none",
-    required: false,
-    readOnly: false,
-};
-const RadioGroupStatusContext = (0, react_1.createContext)({
-    status: "none",
-    enabled: exports.defaultProps.enabled,
-});
-exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup(_a, forwardedRef) {
-    var { id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, autofocus, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, className } = _a, rest = __rest(_a, ["id", "value", "initialValue", "autofocus", "enabled", "validationStatus", "label", "labelPosition", "labelWidth", "labelBreak", "required", "readOnly", "updateState", "onDidChange", "onFocus", "onBlur", "children", "registerComponentApi", "style", "className"]);
-    const [focused, setFocused] = react_1.default.useState(false);
-    const radioGroupRef = (0, react_1.useRef)(null);
-    // --- Initialize the related field with the input's initial value
-    (0, react_1.useEffect)(() => {
-        updateState({ value: (0, OptionNative_1.convertOptionValue)(initialValue) }, { initial: true });
-    }, [initialValue, updateState]);
-    // --- Handle autofocus by focusing the first radio option
-    (0, react_1.useEffect)(() => {
-        if (autofocus && radioGroupRef.current) {
-            // Find the first radio item element
-            const firstRadioItem = radioGroupRef.current.querySelector('[role="radio"]');
-            if (firstRadioItem) {
-                firstRadioItem.focus();
-            }
-        }
-    }, [autofocus]);
-    // --- Custom focus handler for label clicks
-    const focusActiveOption = (0, react_1.useCallback)(() => {
-        if (radioGroupRef.current) {
-            // First try to find the currently selected radio option
-            const selectedRadio = radioGroupRef.current.querySelector('[role="radio"][aria-checked="true"]');
-            if (selectedRadio) {
-                selectedRadio.focus();
-                return;
-            }
-            // If no option is selected, focus the first one
-            const firstRadio = radioGroupRef.current.querySelector('[role="radio"]');
-            if (firstRadio) {
-                firstRadio.focus();
-            }
-        }
-    }, []);
-    // --- Handle the value change events for this input
-    const updateValue = (0, react_1.useCallback)((value) => {
-        updateState({ value });
-        onDidChange(value);
-    }, [onDidChange, updateState]);
-    const onInputChange = (0, react_1.useCallback)((value) => {
-        if (readOnly)
-            return;
-        updateValue(value);
-    }, [updateValue, readOnly]);
-    // --- Manage obtaining and losing the focus
-    const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        setFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus]);
-    const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        setFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
-    }, [onBlur]);
-    const setValue = (0, misc_1.useEvent)((val) => {
-        updateValue(val);
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            //focus,
-            setValue,
-        });
-    }, [/* focus, */ registerComponentApi, setValue]);
-    const contextValue = (0, react_1.useMemo)(() => {
-        return { value, setValue: updateValue, status: validationStatus, enabled };
-    }, [value, updateValue, validationStatus, enabled]);
-    return ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, Object.assign({}, rest, { style: style, ref: radioGroupRef, id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, required: required, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, RadioGroup_module_scss_1.default.radioGroupContainer, {
-                    [RadioGroup_module_scss_1.default.focused]: focused,
-                    [RadioGroup_module_scss_1.default.disabled]: !enabled,
-                }), children: children })) }) }));
-});
-const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, className, }) => {
-    const id = (0, react_1.useId)();
-    const radioGroupContext = (0, react_1.useContext)(RadioGroupStatusContext);
-    const statusStyles = (0, react_1.useMemo)(() => ({
-        [RadioGroup_module_scss_1.default.disabled]: radioGroupContext.enabled === false ? true : !enabled,
-        [RadioGroup_module_scss_1.default.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
-        [RadioGroup_module_scss_1.default.warning]: value === radioGroupContext.value && radioGroupContext.status === "warning",
-        [RadioGroup_module_scss_1.default.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
-    }), [enabled, radioGroupContext, value]);
-    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RadioItemNative_1.UnwrappedRadioItem, { id: id, value: value, checked: value === radioGroupContext.value, disabled: !enabled, statusStyles: statusStyles }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value, radioGroupContext]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOptionContainer, className), style: style, "data-radio-item": true, children: !!optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
-                    $checked: value === radioGroupContext.value,
-                    $setChecked: radioGroupContext.setValue,
-                })] })) : (item) }, id));
-};
-exports.RadioGroupOption = RadioGroupOption;