xmlui 0.10.15 → 0.10.18

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -55,10 +55,10 @@ const react_slider_1 = require("@radix-ui/react-slider");
 const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const classnames_1 = __importDefault(require("classnames"));
 const TooltipNative_1 = require("../Tooltip/TooltipNative");
 const lodash_es_1 = require("lodash-es");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.defaultProps = {
     step: 1,
     min: 0,
@@ -103,12 +103,11 @@ const formatValue = (val, defaultVal = 0, minVal, maxVal) => {
     return [clampValue(defaultVal)];
 };
 exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { id, style, className, step = exports.defaultProps.step, min = exports.defaultProps.min, max = exports.defaultProps.max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value, autoFocus, readOnly, tabIndex = exports.defaultProps.tabIndex, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue, minStepsBetweenThumbs = exports.defaultProps.minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = exports.defaultProps.showValues, valueFormat = exports.defaultProps.valueFormat } = _a, rest = __rest(_a, ["id", "style", "className", "step", "min", "max", "inverted", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "readOnly", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue", "minStepsBetweenThumbs", "rangeStyle", "thumbStyle", "showValues", "valueFormat"]);
-    const _id = (0, react_1.useId)();
-    id = id || _id;
+    var { id, style, className, step = exports.defaultProps.step, min = exports.defaultProps.min, max = exports.defaultProps.max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, value, autoFocus, readOnly, tabIndex = exports.defaultProps.tabIndex, required, validationStatus = exports.defaultProps.validationStatus, initialValue, minStepsBetweenThumbs = exports.defaultProps.minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = exports.defaultProps.showValues, valueFormat = exports.defaultProps.valueFormat } = _a, rest = __rest(_a, ["id", "style", "className", "step", "min", "max", "inverted", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "value", "autoFocus", "readOnly", "tabIndex", "required", "validationStatus", "initialValue", "minStepsBetweenThumbs", "rangeStyle", "thumbStyle", "showValues", "valueFormat"]);
     const inputRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(inputRef, forwardedRef) : inputRef;
     const tooltipRef = (0, react_1.useRef)(null);
-    const thumbRef = (0, react_1.useRef)(null);
+    const thumbsRef = (0, react_1.useRef)([]);
     min = parseValue(min, exports.defaultProps.min);
     max = parseValue(max, exports.defaultProps.max);
     // Initialize localValue properly
@@ -181,18 +180,22 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [updateValue, readOnly]);
     // Component APIs
     const handleOnFocus = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onShowTooltip();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
-    }, [onFocus]);
+    }, [onFocus, onShowTooltip]);
     const handleOnBlur = (0, react_1.useCallback)((ev) => {
-        var _a;
-        (_a = thumbRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
     }, [onBlur]);
     const focus = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        // Focus the first available thumb
+        const firstThumb = thumbsRef.current.find(thumb => thumb !== null);
+        if (firstThumb) {
+            firstThumb.focus();
+        }
+        else {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
     const setValue = (0, misc_1.useEvent)((newValue) => {
         if (readOnly || !enabled) {
@@ -210,19 +213,25 @@ exports.Slider = (0, react_2.forwardRef)((_a, forwardedRef) => {
     }, [focus, registerComponentApi, setValue]);
     // Ensure we always have at least one thumb
     const displayValue = localValue.length > 0 ? localValue : formatValue(undefined, min, min, max);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: forwardedRef, id: id, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(className, Slider_module_scss_1.default.sliderRoot, {
-                    [Slider_module_scss_1.default.disabled]: !enabled,
-                    [Slider_module_scss_1.default.readOnly]: readOnly,
-                }), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, value: displayValue, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { "data-track": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+    // Clean up thumbs ref array when number of thumbs changes
+    (0, react_1.useEffect)(() => {
+        thumbsRef.current = thumbsRef.current.slice(0, displayValue.length);
+    }, [displayValue.length]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderContainer, className), "data-slider-container": true, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { ref: inputRef, minStepsBetweenThumbs: minStepsBetweenThumbs, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot, {
+                [Slider_module_scss_1.default.disabled]: !enabled,
+                [Slider_module_scss_1.default.readOnly]: readOnly,
+            }), max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, onMouseOver: onShowTooltip, onMouseLeave: onHideTooltip, onPointerDown: onShowTooltip, value: displayValue, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { "data-track": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+                        [Slider_module_scss_1.default.disabled]: !enabled,
+                        [Slider_module_scss_1.default.readOnly]: readOnly,
+                        [Slider_module_scss_1.default.error]: validationStatus === "error",
+                        [Slider_module_scss_1.default.warning]: validationStatus === "warning",
+                        [Slider_module_scss_1.default.valid]: validationStatus === "valid",
+                    }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
+                            [Slider_module_scss_1.default.disabled]: !enabled,
+                        }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: (el) => {
+                            thumbsRef.current[index] = el;
+                        }, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
                             [Slider_module_scss_1.default.disabled]: !enabled,
-                            [Slider_module_scss_1.default.readOnly]: readOnly,
-                            [Slider_module_scss_1.default.error]: validationStatus === "error",
-                            [Slider_module_scss_1.default.warning]: validationStatus === "warning",
-                            [Slider_module_scss_1.default.valid]: validationStatus === "valid",
-                        }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { "data-range": true, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
-                                [Slider_module_scss_1.default.disabled]: !enabled,
-                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(TooltipNative_1.Tooltip, { ref: tooltipRef, text: valueFormat(displayValue[index]), delayDuration: 100, open: showValues && showTooltip, children: (0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { id: id, "aria-required": required, ref: index === 0 ? thumbRef : null, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
-                                [Slider_module_scss_1.default.disabled]: !enabled,
-                            }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus }) }, index)))] }) }) })));
+                        }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined, "data-thumb-index": index, autoFocus: autoFocus && index === 0 }) }, index)))] }) })));
 });
 exports.Slider.displayName = "Slider";

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

@@ -23,10 +23,6 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
     props: {
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("end"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         required: (0, metadata_helpers_1.dRequired)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(Toggle_1.defaultProps.initialValue),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -80,5 +76,5 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, className, updateState, state, lookupEventHandler, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
+    return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { enabled: extractValue.asOptionalBoolean(node.props.enabled), className: className, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onClick: lookupEventHandler("click"), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), required: extractValue.asOptionalBoolean(node.props.required), variant: "switch", registerComponentApi: registerComponentApi }));
 });

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

@@ -64,10 +64,6 @@ exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
         },
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
@@ -103,5 +99,5 @@ exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextAreaMd, ({ node, extractValue, state, updateState, className, registerComponentApi, lookupEventHandler, }) => {
-    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), className: className, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), className: className, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), required: extractValue.asOptionalBoolean(node.props.required) }));
 });

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

@@ -712,3 +712,32 @@ fixtures_1.test.describe("Regression", () => {
         yield (0, fixtures_1.expect)(driver.component).toHaveValue("abcde");
     }));
 });
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<TextArea width="200px" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<TextArea width="200px" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TextArea width="50%" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TextArea width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));

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

@@ -56,15 +56,10 @@ const lodash_es_1 = require("lodash-es");
 const TextArea_module_scss_1 = __importDefault(require("./TextArea.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const TextAreaResizable_1 = __importDefault(require("./TextAreaResizable"));
 const parts_1 = require("../../components-core/parts");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.resizeOptionKeys = ["horizontal", "vertical", "both"];
-const resizeMap = {
-    horizontal: TextArea_module_scss_1.default.resizeHorizontal,
-    vertical: TextArea_module_scss_1.default.resizeVertical,
-    both: TextArea_module_scss_1.default.resizeBoth,
-};
 exports.defaultProps = {
     value: "",
     placeholder: "",
@@ -83,9 +78,10 @@ exports.defaultProps = {
     enabled: true,
 };
 exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, forwardedRef) {
-    var { id, value = exports.defaultProps.value, placeholder = exports.defaultProps.placeholder, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, allowCopy = exports.defaultProps.allowCopy, updateState = exports.defaultProps.updateState, validationStatus, autoFocus = exports.defaultProps.autoFocus, initialValue = exports.defaultProps.initialValue, resize, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, controlled = exports.defaultProps.controlled, enterSubmits = exports.defaultProps.enterSubmits, escResets, style, className, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = exports.defaultProps.rows, enabled = exports.defaultProps.enabled, label, labelPosition, labelWidth, labelBreak } = _a, rest = __rest(_a, ["id", "value", "placeholder", "required", "readOnly", "allowCopy", "updateState", "validationStatus", "autoFocus", "initialValue", "resize", "onDidChange", "onFocus", "onBlur", "controlled", "enterSubmits", "escResets", "style", "className", "registerComponentApi", "autoSize", "maxRows", "minRows", "maxLength", "rows", "enabled", "label", "labelPosition", "labelWidth", "labelBreak"]);
+    var { id, value = exports.defaultProps.value, placeholder = exports.defaultProps.placeholder, required = exports.defaultProps.required, readOnly = exports.defaultProps.readOnly, allowCopy = exports.defaultProps.allowCopy, updateState = exports.defaultProps.updateState, validationStatus, autoFocus = exports.defaultProps.autoFocus, initialValue = exports.defaultProps.initialValue, resize, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, controlled = exports.defaultProps.controlled, enterSubmits = exports.defaultProps.enterSubmits, escResets, style, className, registerComponentApi, autoSize, maxRows, minRows, maxLength, rows = exports.defaultProps.rows, enabled = exports.defaultProps.enabled } = _a, rest = __rest(_a, ["id", "value", "placeholder", "required", "readOnly", "allowCopy", "updateState", "validationStatus", "autoFocus", "initialValue", "resize", "onDidChange", "onFocus", "onBlur", "controlled", "enterSubmits", "escResets", "style", "className", "registerComponentApi", "autoSize", "maxRows", "minRows", "maxLength", "rows", "enabled"]);
     // --- The component is initially unfocused
     const inputRef = (0, react_1.useRef)(null);
+    const ref = react_1.forwardRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
     const [cursorPosition, setCursorPosition] = (0, react_1.useState)(null);
     const [focused, setFocused] = react_1.default.useState(false);
     const updateValue = (0, react_1.useCallback)((value) => {
@@ -187,31 +183,14 @@ exports.TextArea = (0, react_1.forwardRef)(function TextArea(_a, forwardedRef) {
         [TextArea_module_scss_1.default.warning]: validationStatus === "warning",
         [TextArea_module_scss_1.default.valid]: validationStatus === "valid",
     });
-    const textareaProps = {
-        className: classes,
-        ref: inputRef,
-        style: style,
-        value: controlled ? value || "" : undefined,
-        disabled: !enabled,
-        name: id,
-        placeholder,
+    const textareaProps = Object.assign(Object.assign({}, rest), { id, className: classes, ref, style: style, value: controlled ? value || "" : undefined, disabled: !enabled, name: id, placeholder,
         required,
-        maxLength,
-        "aria-multiline": true,
-        "aria-readonly": readOnly,
-        readOnly: readOnly,
-        onChange: onInputChange,
-        onCopy: handleCopy,
-        onFocus: handleOnFocus,
-        onBlur: handleOnBlur,
-        onKeyDown: handleEnter,
-        autoComplete: "off",
-    };
+        maxLength, "aria-multiline": true, "aria-readonly": readOnly, readOnly: readOnly, onChange: onInputChange, onCopy: handleCopy, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleEnter, autoComplete: "off" });
     if (resize === "both" || resize === "horizontal" || resize === "vertical") {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(TextAreaResizable_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
+        return ((0, jsx_runtime_1.jsx)(TextAreaResizable_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })));
     }
     if (autoSize || !(0, lodash_es_1.isNil)(maxRows) || !(0, lodash_es_1.isNil)(minRows)) {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })) })));
+        return ((0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, style: style, className: (0, classnames_1.default)(classes), maxRows: maxRows, minRows: minRows, rows: rows })));
     }
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, ref: inputRef, rows: rows, className: (0, classnames_1.default)(classes) })) })));
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({}, textareaProps, { "data-part-id": parts_1.PART_INPUT, rows: rows, className: (0, classnames_1.default)(classes) })));
 });

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

@@ -209,13 +209,6 @@ fixtures_1.test.describe("Label", () => {
         const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(labelTop).toBeGreaterThan(textboxBottom);
     }));
-    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
-        const expected = 200;
-        yield initTestBed(`<TextBox testId="test" label="test test" labelWidth="${expected}px" />`);
-        const driver = yield createTextBoxDriver("test");
-        const { width } = yield (0, component_test_helpers_1.getBounds)(driver.label);
-        (0, fixtures_1.expect)(width).toEqual(expected);
-    }));
     (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const labelText = "Very long label text that should break";
         const commonProps = `label="${labelText}" labelWidth="100px"`;
@@ -685,3 +678,41 @@ fixtures_1.test.describe("Integration", () => {
         yield (0, fixtures_1.expect)(driver.label).not.toBeVisible();
     }));
 });
+(0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+    const expected = 200;
+    yield initTestBed(`<TextBox testId="test" label="test test" labelWidth="${expected}px" />`);
+    const driver = yield createTextBoxDriver("test");
+    const { width } = yield (0, component_test_helpers_1.getBounds)(driver.label);
+    (0, fixtures_1.expect)(width).toEqual(expected);
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("input has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <TextBox width="200px" testId="test"/>
+  `);
+    const { width } = yield page.getByTestId("test").boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <TextBox width="200px" label="test" testId="test"/>
+  `);
+    const { width } = yield page.getByTestId("test").boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TextBox width="50%" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TextBox width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -130,13 +130,13 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox(_a, ref) {
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, TextBox_module_scss_1.default.inputRoot, {
             [TextBox_module_scss_1.default.disabled]: !enabled,
             [TextBox_module_scss_1.default.readOnly]: readOnly,
             [TextBox_module_scss_1.default.error]: validationStatus === "error",
             [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
             [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-        }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
+        }), tabIndex: -1, onFocus: focus, style: Object.assign(Object.assign({}, style), { gap }), children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_START_ADORNMENT, text: startText, iconName: startIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment) }), (0, jsx_runtime_1.jsx)("input", { id: id, ref: inputRef, "data-part-id": parts_1.PART_INPUT, type: actualType, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, {
                     [TextBox_module_scss_1.default.readOnly]: readOnly,
                 }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), type === "password" && showPasswordToggle ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon, className: (0, classnames_1.default)(TextBox_module_scss_1.default.adornment, TextBox_module_scss_1.default.passwordToggle), onClick: togglePasswordVisibility })) : ((0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { "data-part-id": parts_1.PART_END_ADORNMENT, text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment }))] })));
 });

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

@@ -1120,3 +1120,34 @@ fixtures_1.test.describe("Layout", () => {
         (0, fixtures_1.expect)(Math.abs(hourToMinuteGap - minuteToSecondGap)).toBeLessThan(5); // Allow small differences
     }));
 });
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("input has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <TimeInput width="200px" testId="test"/>
+  `);
+    const { width } = yield page.getByTestId("test").boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <TimeInput width="200px" label="test" testId="test"/>
+  `);
+    const { width } = yield page.getByTestId("test").boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TimeInput width="50%" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));
+(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield page.setViewportSize({ width: 400, height: 300 });
+    yield initTestBed(`<TimeInput width="50%" label="test" testId="test"/>`, {});
+    const input = page.getByTestId("test");
+    const { width } = yield input.boundingBox();
+    (0, fixtures_1.expect)(width).toBe(200);
+}));