xmlui 0.10.15 → 0.10.18

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 fixtures_1.test.describe("Basic Functionality", () => {
     (0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
@@ -44,11 +45,11 @@ fixtures_1.test.describe("Basic Functionality", () => {
         yield (0, fixtures_1.expect)(timer).not.toBeVisible();
     }));
 });
-fixtures_1.test.describe("Event Handling", () => {
+fixtures_1.test.describe.fixme("Event Handling", () => {
     (0, fixtures_1.test)("timer tick event is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
       <Fragment var.tickCount="{0}">
-        <Timer interval="1000" enabled="true" onTick="tickCount++" />
+        <Timer interval="800" enabled="true" onTick="tickCount++" />
         <Text testId="counter">{tickCount}</Text>
       </Fragment>
     `);
@@ -65,7 +66,7 @@ fixtures_1.test.describe("Event Handling", () => {
     (0, fixtures_1.test)("timer stops when enabled is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
       <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
-        <Timer interval="1000" enabled="{timerEnabled}" onTick="tickCount++" />
+        <Timer interval="800" enabled="{timerEnabled}" onTick="tickCount++" />
         <Button testId="stopButton" onClick="timerEnabled = false">Stop Timer</Button>
         <Text testId="counter">{tickCount}</Text>
       </Fragment>
@@ -81,169 +82,139 @@ fixtures_1.test.describe("Event Handling", () => {
         yield page.waitForTimeout(1500);
         yield (0, fixtures_1.expect)(counter).toHaveText("1");
     }));
-    (0, fixtures_1.test)("timer prevents overlapping events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    fixtures_1.test.fixme("timer prevents overlapping events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         // This test verifies that a new tick event doesn't fire if the previous one hasn't completed
         yield initTestBed(`
-      <Fragment var.tickCount="{0}" var.processingTime="{2000}">
+      <Fragment var.tickStr="" var.processingTime="{2000}">
         <Timer 
-          interval="1000" 
+          interval="800" 
           enabled="true" 
           onTick="
-            tickCount++;
+            tickStr += '+';
             delay(processingTime);
           " 
         />
-        <Text testId="counter">{tickCount}</Text>
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         // First tick should start and take 2000ms to complete
         // but interval is 1000ms, so second tick should not start until first completes
-        yield page.waitForTimeout(2500); // Wait for first tick to complete
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield page.waitForTimeout(1500); // Wait for first tick to complete
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Wait a bit more to see if overlapping was prevented
         yield page.waitForTimeout(1500); // Should be enough for second tick to start
-        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+        yield (0, fixtures_1.expect)(counter).toContainText("++");
     }));
 });
-fixtures_1.test.describe("Initial Delay Functionality", () => {
+fixtures_1.test.describe.fixme("Initial Delay Functionality", () => {
     (0, fixtures_1.test)("timer waits for initial delay before first tick", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}">
-        <Timer interval="1000" initialDelay="2000" onTick="tickCount++" />
-        <Text testId="counter">{tickCount}</Text>
+      <Fragment var.tickStr="">
+        <Timer interval="800" initialDelay="1600" onTick="tickStr += '+'"/>
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         // Should not tick immediately
-        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        yield (0, fixtures_1.expect)(counter).toHaveText("");
         // Should not tick before initial delay
-        yield page.waitForTimeout(1500);
-        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("");
         // Should tick after initial delay
-        yield page.waitForTimeout(1000); // Total 2500ms, past the 2000ms initial delay + 1000ms interval
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield page.waitForTimeout(800); // Total 2500ms, past the 2000ms initial delay + 1000ms interval
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Should continue ticking at interval
-        yield page.waitForTimeout(1000);
-        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+        yield page.waitForTimeout(800);
+        yield (0, fixtures_1.expect)(counter).toHaveText("++");
     }));
     (0, fixtures_1.test)("initial delay only applies to first execution, not restarts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+      <Fragment var.tickStr="" var.timerEnabled="{true}">
         <Timer 
-          interval="1000" 
-          initialDelay="2000" 
+          interval="400" 
+          initialDelay="800" 
           enabled="{timerEnabled}" 
-          onTick="tickCount++" 
+          onTick="tickStr += '+'"
         />
         <Button testId="restartButton" onClick="timerEnabled = false; timerEnabled = true">Restart</Button>
-        <Text testId="counter">{tickCount}</Text>
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         const restartButton = page.getByTestId("restartButton");
         // Wait for initial delay + first tick
-        yield page.waitForTimeout(3500);
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield page.waitForTimeout(1300);
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Restart the timer
         yield restartButton.click();
         // After restart, should tick immediately without initial delay
-        yield page.waitForTimeout(1500);
-        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(counter).toContainText("++");
     }));
     (0, fixtures_1.test)("initial delay works with once timer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}">
-        <Timer interval="1000" initialDelay="2000" once="true" onTick="tickCount++" />
-        <Text testId="counter">{tickCount}</Text>
+      <Fragment var.tickStr="">
+        <Timer interval="800" initialDelay="1600" once="true" onTick="tickStr += '+'"/>
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         // Should not tick before initial delay
-        yield page.waitForTimeout(1500);
-        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("");
         // Should tick once after initial delay
         yield page.waitForTimeout(1000);
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Should not tick again
-        yield page.waitForTimeout(2000);
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
     }));
 });
-fixtures_1.test.describe("Pause and Resume API", () => {
+fixtures_1.test.describe.fixme("Pause and Resume API", () => {
     (0, fixtures_1.test)("timer can be paused and resumed via API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}">
+      <Fragment var.tickStr="">
         <Timer 
           id="myTimer"
-          interval="1000" 
-          onTick="tickCount++" 
+          interval="800" 
+          onTick="tickStr += '+'"
         />
         <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
         <Button testId="resumeButton" onClick="myTimer.resume()">Resume</Button>
-        <Text testId="counter">{tickCount}</Text>
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         const pauseButton = page.getByTestId("pauseButton");
         const resumeButton = page.getByTestId("resumeButton");
         // Wait for first tick
-        yield page.waitForTimeout(1200);
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Pause the timer
         yield pauseButton.click();
         // Should not tick while paused
-        const currentCount = yield counter.textContent();
-        yield page.waitForTimeout(1500);
-        yield (0, fixtures_1.expect)(counter).toHaveText(currentCount || "1");
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("+");
         // Resume the timer
         yield resumeButton.click();
         // Should continue ticking after resume
-        yield page.waitForTimeout(1200);
-        const finalCount = parseInt((yield counter.textContent()) || "0");
-        (0, fixtures_1.expect)(finalCount).toBeGreaterThan(parseInt(currentCount || "1"));
-    }));
-    (0, fixtures_1.test)("pause during initial delay stops the delay", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        yield initTestBed(`
-      <Fragment var.tickCount="{0}">
-        <Timer 
-          id="myTimer"
-          interval="1000" 
-          initialDelay="3000"
-          onTick="tickCount++" 
-        />
-        <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
-        <Button testId="resumeButton" onClick="myTimer.resume()">Resume</Button>
-        <Text testId="counter">{tickCount}</Text>
-      </Fragment>
-    `);
-        const counter = page.getByTestId("counter");
-        const pauseButton = page.getByTestId("pauseButton");
-        const resumeButton = page.getByTestId("resumeButton");
-        // Pause during initial delay
         yield page.waitForTimeout(1000);
-        yield pauseButton.click();
-        // Should not tick even after original delay would have passed
-        yield page.waitForTimeout(3000);
-        yield (0, fixtures_1.expect)(counter).toHaveText("0");
-        // Resume should start ticking
-        yield resumeButton.click();
-        yield page.waitForTimeout(1200);
-        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        yield (0, fixtures_1.expect)(counter).toContainText("++");
     }));
     (0, fixtures_1.test)("pause state is reset when timer is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+      <Fragment var.tickStr="" var.timerEnabled="{true}">
         <Timer 
           id="myTimer"
           interval="1000" 
           enabled="{timerEnabled}"
-          onTick="tickCount++" 
+          onTick="tickStr += '+'"
         />
         <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
         <Button testId="disableButton" onClick="timerEnabled = false">Disable</Button>
         <Button testId="enableButton" onClick="timerEnabled = true">Enable</Button>
-        <Text testId="counter">{tickCount}</Text>
+        <Text testId="counter">{tickStr}</Text>
         <Text testId="paused">{myTimer.isPaused() ? 'Paused' : 'Running'}</Text>
       </Fragment>
     `);
@@ -262,7 +233,7 @@ fixtures_1.test.describe("Pause and Resume API", () => {
     }));
 });
 fixtures_1.test.describe("Once Functionality", () => {
-    (0, fixtures_1.test)("timer with once=true fires only once", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    fixtures_1.test.fixme("timer with once=true fires only once", component_test_helpers_1.SKIP_REASON.TEST_NOT_WORKING("Waiting for timeouts are bad practice because they are flaky."), (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
       <Fragment var.tickCount="{0}">
         <Timer interval="1000" once="true" onTick="tickCount++" />
@@ -277,7 +248,7 @@ fixtures_1.test.describe("Once Functionality", () => {
         yield page.waitForTimeout(2000);
         yield (0, fixtures_1.expect)(counter).toHaveText("1");
     }));
-    (0, fixtures_1.test)("timer with once=true can be restarted by re-enabling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    fixtures_1.test.fixme("timer with once=true can be restarted by re-enabling", component_test_helpers_1.SKIP_REASON.TEST_NOT_WORKING("Waiting for timeouts are bad practice because they are flaky."), (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
       <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
         <Timer interval="1000" once="true" enabled="{timerEnabled}" onTick="tickCount++" />
@@ -296,25 +267,24 @@ fixtures_1.test.describe("Once Functionality", () => {
         yield page.waitForTimeout(1200);
         yield (0, fixtures_1.expect)(counter).toHaveText("2");
     }));
-    (0, fixtures_1.test)("once timer doesn't interfere with regular timer functionality", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    fixtures_1.test.fixme("once timer doesn't interfere with regular timer functionality", component_test_helpers_1.SKIP_REASON.TEST_NOT_WORKING("Waiting for timeouts are bad practice because they are flaky."), (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
-      <Fragment var.tickCount="{0}">
-        <Timer interval="1000" once="false" onTick="tickCount++" />
-        <Text testId="counter">{tickCount}</Text>
+      <Fragment var.tickStr="">
+        <Timer interval="1000" once="false" onTick="tickStr += '+'" />
+        <Text testId="counter">{tickStr}</Text>
       </Fragment>
     `);
         const counter = page.getByTestId("counter");
         // Wait for multiple ticks
-        yield page.waitForTimeout(3500);
-        const finalCount = parseInt((yield counter.textContent()) || "0");
-        (0, fixtures_1.expect)(finalCount).toBeGreaterThan(2);
+        yield page.waitForTimeout(2000);
+        yield (0, fixtures_1.expect)(counter).toContainText("+");
     }));
 });
-fixtures_1.test.describe("State Management", () => {
+fixtures_1.test.describe.fixme("State Management", () => {
     (0, fixtures_1.test)("timer can be dynamically enabled and disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
       <Fragment var.tickCount="{0}" var.timerEnabled="{false}">
-        <Timer interval="1000" enabled="{timerEnabled}" onTick="tickCount++" />
+        <Timer interval="800" enabled="{timerEnabled}" onTick="tickCount++" />
         <Button testId="startButton" onClick="timerEnabled = true">Start Timer</Button>
         <Button testId="stopButton" onClick="timerEnabled = false">Stop Timer</Button>
         <Text testId="counter">{tickCount}</Text>
@@ -324,16 +294,16 @@ fixtures_1.test.describe("State Management", () => {
         const startButton = page.getByTestId("startButton");
         const stopButton = page.getByTestId("stopButton");
         // Initially disabled - should not increment
-        yield page.waitForTimeout(1500);
+        yield page.waitForTimeout(1000);
         yield (0, fixtures_1.expect)(counter).toHaveText("0");
         // Start the timer
         yield startButton.click();
-        yield page.waitForTimeout(1200);
+        yield page.waitForTimeout(1000);
         yield (0, fixtures_1.expect)(counter).toHaveText("1");
         // Stop the timer again
         yield stopButton.click();
         const currentCount = yield counter.textContent();
-        yield page.waitForTimeout(1500);
+        yield page.waitForTimeout(1000);
         yield (0, fixtures_1.expect)(counter).toHaveText(currentCount || "1");
     }));
     (0, fixtures_1.test)("timer interval can be changed dynamically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {

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

@@ -50,14 +50,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("react");
-const react_3 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const parts_1 = require("../../components-core/parts");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.defaultProps = {
     initialValue: false,
     value: false,
@@ -65,11 +64,10 @@ exports.defaultProps = {
     validationStatus: "none",
     indeterminate: false,
 };
-exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
-    var { id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onClick = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, label, labelPosition = "end", labelWidth, labelBreak, required, autoFocus, registerComponentApi, inputRenderer } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "style", "readOnly", "validationStatus", "updateState", "onClick", "onDidChange", "onFocus", "onBlur", "variant", "indeterminate", "className", "label", "labelPosition", "labelWidth", "labelBreak", "required", "autoFocus", "registerComponentApi", "inputRenderer"]);
-    const generatedId = (0, react_1.useId)();
-    const inputId = id || generatedId;
-    const innerRef = react_3.default.useRef(null);
+exports.Toggle = (0, react_2.forwardRef)(function Toggle(_a, forwardedRef) {
+    var { id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onClick = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, required, autoFocus, registerComponentApi, inputRenderer } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "style", "readOnly", "validationStatus", "updateState", "onClick", "onDidChange", "onFocus", "onBlur", "variant", "indeterminate", "className", "required", "autoFocus", "registerComponentApi", "inputRenderer"]);
+    const innerRef = react_2.default.useRef(null);
+    const ref = innerRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, innerRef) : forwardedRef;
     const transformToLegitValue = (inp) => {
         if (typeof inp === "undefined" || inp === null) {
             return false;
@@ -91,39 +89,39 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
         }
         return false;
     };
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         updateState({ value: transformToLegitValue(initialValue) }, { initial: true });
     }, [initialValue, updateState]);
-    const updateValue = (0, react_3.useCallback)((value) => {
+    const updateValue = (0, react_2.useCallback)((value) => {
         var _a;
         if (((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.checked) === value)
             return;
         updateState({ value });
         onDidChange(value);
     }, [onDidChange, updateState]);
-    const onInputChange = (0, react_3.useCallback)((event) => {
+    const onInputChange = (0, react_2.useCallback)((event) => {
         if (readOnly) {
             return;
         }
         updateState({ value: event.target.checked });
         onDidChange(event.target.checked);
     }, [onDidChange, readOnly, updateState]);
-    const handleOnFocus = (0, react_3.useCallback)(() => {
+    const handleOnFocus = (0, react_2.useCallback)(() => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
-    const handleOnBlur = (0, react_3.useCallback)(() => {
+    const handleOnBlur = (0, react_2.useCallback)(() => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }, [onBlur]);
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (typeof indeterminate === "boolean" && innerRef.current) {
             innerRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    const focus = (0, react_3.useCallback)(() => {
+    const focus = (0, react_2.useCallback)(() => {
         var _a;
         (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (innerRef.current && autoFocus) {
             setTimeout(() => focus(), 0);
         }
@@ -131,27 +129,32 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
     const setValue = (0, misc_1.useEvent)((newValue) => {
         updateValue(transformToLegitValue(newValue));
     });
-    (0, react_3.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    const input = (0, react_2.useMemo)(() => {
+    const input = (0, react_1.useMemo)(() => {
         const legitValue = transformToLegitValue(value);
-        return ((0, jsx_runtime_1.jsx)("input", { id: inputId, "data-part-id": parts_1.PART_INPUT, ref: innerRef, type: "checkbox", role: variant, checked: legitValue, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : legitValue, "aria-required": required, "aria-disabled": !enabled, onClick: onClick, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, {
+        return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { id: id, "data-part-id": parts_1.PART_INPUT, ref: ref, type: "checkbox", role: variant, checked: legitValue, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : legitValue, "aria-required": required, "aria-disabled": !enabled, onClick: onClick, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, autoFocus: autoFocus, style: style, className: (0, classnames_1.default)(className, Toggle_module_scss_1.default.resetAppearance, {
                 [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
                 [Toggle_module_scss_1.default.switch]: variant === "switch",
                 [Toggle_module_scss_1.default.error]: validationStatus === "error",
                 [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
                 [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
-            }) }));
+            }) })));
     }, [
-        inputId,
+        rest,
+        className,
+        ref,
+        style,
+        id,
         enabled,
         handleOnBlur,
         handleOnFocus,
         onInputChange,
+        onClick,
         readOnly,
         required,
         validationStatus,
@@ -160,8 +163,8 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle(_a, forwardedRef) {
         indeterminate,
         autoFocus,
     ]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, id: inputId, label: label, style: style, className: className, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
-                    $checked: transformToLegitValue(value),
-                    $setChecked: setValue,
-                })] })) : (input) })));
+    return (inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
+                $checked: transformToLegitValue(value),
+                $setChecked: setValue,
+            })] })) : (input));
 });