xmlui 0.10.15 → 0.10.18

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

@@ -281,3 +281,32 @@ const fixtures_1 = require("../../testing/fixtures");
     // Verify the focus event fired
     yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
 }));
+// =============================================================================
+// 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(`<ColorPicker 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(`<ColorPicker 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(`<ColorPicker 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(`<ColorPicker 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/ColorPicker/ColorPickerNative.js

@@ -18,11 +18,12 @@ exports.ColorPicker = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const parts_1 = require("../../components-core/parts");
 exports.defaultProps = {
     initialValue: "#000000",
     value: "#000000",
@@ -30,9 +31,10 @@ exports.defaultProps = {
     validationStatus: "none",
 };
 exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, label, labelPosition, labelWidth, labelBreak, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "label", "labelPosition", "labelWidth", "labelBreak", "required", "validationStatus", "initialValue"]);
-    const inputRef = (0, react_2.useRef)(null);
+    var { id, style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["id", "style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "required", "validationStatus", "initialValue"]);
     const [isPending, startTransition] = (0, react_1.useTransition)();
+    const inputRef = (0, react_2.useRef)(null);
+    const composedRef = forwardedRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
     const updateValue = (0, react_2.useCallback)((value) => {
         updateState({ value });
         onDidChange(value);
@@ -73,11 +75,12 @@ exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    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, children: (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)(ColorPicker_module_scss_1.default.colorInput, {
-                [ColorPicker_module_scss_1.default.disabled]: !enabled,
-                [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
-                [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
-                [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
-            }), disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: inputRef, value: value }) })));
+    { /* Produces a 7 character RGB color output in hex as a string type */ }
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { id: id, className: (0, classnames_1.default)(className, ColorPicker_module_scss_1.default.colorInput, {
+            [ColorPicker_module_scss_1.default.disabled]: !enabled,
+            [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
+            [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
+            [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
+        }), "data-part-id": parts_1.PART_INPUT, style: style, disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: composedRef, value: value })));
 });
 exports.ColorPicker.displayName = "ColorPicker";

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

@@ -53,6 +53,7 @@ const Footer_1 = require("./Footer/Footer");
 const NavGroup_1 = require("./NavGroup/NavGroup");
 const Logo_1 = require("./Logo/Logo");
 const RadioGroup_1 = require("./RadioGroup/RadioGroup");
+const RadioItem_1 = require("./RadioGroup/RadioItem");
 const Slot_1 = require("./Slot/Slot");
 const FileInput_1 = require("./FileInput/FileInput");
 const Spinner_1 = require("./Spinner/Spinner");
@@ -412,6 +413,7 @@ class ComponentRegistry {
             this.registerCoreComponent(NumberBox_1.numberBoxComponentRenderer);
             this.registerCoreComponent(HoverCard_1.hoverCardComponentRenderer);
             this.registerCoreComponent(RadioGroup_1.radioGroupRenderer);
+            this.registerCoreComponent(RadioItem_1.radioItemComponentRenderer);
             this.registerCoreComponent(FileInput_1.fileInputRenderer);
             this.registerCoreComponent(Spinner_1.spinnerComponentRenderer);
             this.registerCoreComponent(Select_1.selectComponentRenderer);

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

@@ -36,10 +36,6 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(DateInputNative_1.defaultProps.enabled),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(DateInputNative_1.defaultProps.validationStatus),
-        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),
         mode: {
             description: "The mode of the date input (single or range)",
             valueType: "string",
@@ -197,5 +193,5 @@ exports.DateInputMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.dateInputComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DateInputMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue.asOptionalString(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
+    return ((0, jsx_runtime_1.jsx)(DateInputNative_1.DateInput, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue.asOptionalNumber(node.props.weekStartsOn), minValue: extractValue.asOptionalString(node.props.minValue), maxValue: extractValue.asOptionalString(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline, DateInputNative_1.defaultProps.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), required: extractValue.asOptionalBoolean(node.props.required), clearable: extractValue.asOptionalBoolean(node.props.clearable, DateInputNative_1.defaultProps.clearable), clearIcon: extractValue.asOptionalString(node.props.clearIcon), clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, DateInputNative_1.defaultProps.clearToInitialValue), gap: extractValue.asOptionalString(node.props.gap), emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter) }));
 });

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

@@ -916,3 +916,32 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
     }));
 });
+// =============================================================================
+// 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(`<DateInput 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(`<DateInput 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(`<DateInput 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(`<DateInput 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/DateInput/DateInputNative.js

@@ -25,7 +25,6 @@ const PartialInput_1 = require("../Input/PartialInput");
 const InputDivider_1 = require("../Input/InputDivider");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 // Component part names
 const PART_DAY = "day";
@@ -77,7 +76,7 @@ exports.defaultProps = {
     emptyCharacter: "-",
 };
 exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, mode = exports.defaultProps.mode, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates, inline = exports.defaultProps.inline, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "mode", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "inline", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "emptyCharacter"]);
+    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, mode = exports.defaultProps.mode, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates, inline = exports.defaultProps.inline, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "mode", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "inline", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "readOnly", "autoFocus", "emptyCharacter"]);
     const dateInputRef = (0, react_2.useRef)(null);
     // Refs for auto-tabbing between inputs
     const dayInputRef = (0, react_2.useRef)(null);
@@ -466,6 +465,8 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         const inputRefs = getInputRefs();
         return dateOrder.map((field, index) => {
             const nextRef = index < inputRefs.length - 1 ? inputRefs[index + 1] : undefined;
+            // Pass id to the first input field only
+            const inputId = index === 0 ? id : undefined;
             const getSeparator = () => {
                 if (index === dateOrder.length - 1)
                     return null;
@@ -478,31 +479,26 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
             };
             switch (field) {
                 case "day":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: dayInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleDayChange, onBlur: handleDayBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: day, isInvalid: isDayCurrentlyInvalid, month: month, year: year, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "day"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DayInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: dayInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleDayChange, onBlur: handleDayBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: day, isInvalid: isDayCurrentlyInvalid, month: month, year: year, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "day"));
                 case "month":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MonthInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: monthInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: month, isInvalid: isMonthCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "month"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MonthInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: monthInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleMonthChange, onBlur: handleMonthBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: month, isInvalid: isMonthCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "month"));
                 case "year":
-                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(YearInput, { autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: yearInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleYearChange, onBlur: handleYearBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: year, isInvalid: isYearCurrentlyInvalid, dateFormat: dateFormat, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "year"));
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(YearInput, { id: inputId, autoFocus: autoFocus && index === 0, disabled: !enabled, inputRef: yearInputRef, nextInputRef: nextRef, minValue: minValue, maxValue: maxValue, onChange: handleYearChange, onBlur: handleYearBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: year, isInvalid: isYearCurrentlyInvalid, dateFormat: dateFormat, emptyCharacter: processedEmptyCharacter }), getSeparator() && (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: getSeparator() })] }, "year"));
                 default:
                     return null;
             }
         });
     };
-    const dateInputComponent = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: dateInputRef, className: (0, classnames_1.default)(DateInput_module_scss_1.default.dateInputWrapper, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: dateInputRef, className: (0, classnames_1.default)(DateInput_module_scss_1.default.dateInputWrapper, {
             [DateInput_module_scss_1.default.error]: validationStatus === "error",
             [DateInput_module_scss_1.default.warning]: validationStatus === "warning",
             [DateInput_module_scss_1.default.valid]: validationStatus === "valid",
             [DateInput_module_scss_1.default.disabled]: !enabled,
             [DateInput_module_scss_1.default.readOnly]: readOnly,
         }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: DateInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: DateInput_module_scss_1.default.inputGroup, children: createDateInputs() }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(DateInput_module_scss_1.default.clearButton, DateInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
-    // Wrap with label if needed
-    if (label) {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { label: label, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, children: dateInputComponent }));
-    }
-    return dateInputComponent;
 });
 // Input component
-function Input({ ariaLabel, autoFocus, className, disabled, inputRef, max, min, name, nextInputRef, // For auto-tabbing to next input
+function Input({ id, ariaLabel, autoFocus, className, disabled, inputRef, max, min, name, nextInputRef, // For auto-tabbing to next input
 onChange, onBlur, onKeyDown, onKeyUp, placeholder, readOnly, required, step, value, maxLength = 2, isInvalid = false, // To prevent auto-tabbing when value is invalid
 validateFn, // Function to validate the current input value
 onBeep, // Function to handle beep sound and event
@@ -534,7 +530,7 @@ onBeep, // Function to handle beep sound and event
             }
         }
     }, [onChange, nextInputRef, maxLength, validateFn, onBeep]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("input", { "aria-label": ariaLabel, autoComplete: "off", 
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("input", { id: id, "aria-label": ariaLabel, autoComplete: "off", 
             // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
             autoFocus: autoFocus, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, className), "data-input": "true", disabled: disabled, inputMode: "numeric", max: max, maxLength: maxLength, min: min, name: name, onChange: handleInputChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, placeholder: placeholder || "--", readOnly: readOnly, 
             // Assertion is needed for React 18 compatibility
@@ -553,7 +549,7 @@ function DayInput(_a) {
         }
         return 31; // Default to 31 if month/year not available
     }, [month, year]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_DAY, value: value, emptyCharacter: emptyCharacter, placeholderLength: 2, max: Math.min(maxDay, 31), min: 1, maxLength: 2, validateFn: (val) => isDayInvalid(val, month, year), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_DAY, id: otherProps.id, value: value, emptyCharacter: emptyCharacter, placeholderLength: 2, max: Math.min(maxDay, 31), min: 1, maxLength: 2, validateFn: (val) => isDayInvalid(val, month, year), onBeep: onBeep, onChange: otherProps.onChange, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature
@@ -563,7 +559,7 @@ function DayInput(_a) {
 }
 function MonthInput(_a) {
     var { minValue, maxValue, value, isInvalid = false, onBeep, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["minValue", "maxValue", "value", "isInvalid", "onBeep", "emptyCharacter"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MONTH, max: 12, min: 1, name: "month", value: value, invalidClassName: DateInput_module_scss_1.default.invalid, isInvalid: isInvalid, validateFn: isMonthInvalid, onBeep: onBeep, onChange: otherProps.onChange, emptyCharacter: emptyCharacter, placeholderLength: 2, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.month), maxLength: 2, disabled: otherProps.disabled, required: otherProps.required, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MONTH, id: otherProps.id, max: 12, min: 1, name: "month", value: value, invalidClassName: DateInput_module_scss_1.default.invalid, isInvalid: isInvalid, validateFn: isMonthInvalid, onBeep: onBeep, onChange: otherProps.onChange, emptyCharacter: emptyCharacter, placeholderLength: 2, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.month), maxLength: 2, disabled: otherProps.disabled, required: otherProps.required, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature
@@ -579,7 +575,7 @@ function YearInput(_a) {
     const min = 1900;
     const max = currentYear + 100;
     const { className: originalClassName } = otherProps, restProps = __rest(otherProps, ["className"]);
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, Object.assign({ "data-part-id": PART_YEAR, max: max, min: min, name: "year", value: value, isInvalid: isInvalid, invalidClassName: DateInput_module_scss_1.default.invalid, validateFn: isYearInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 4, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.year, originalClassName), maxLength: maxLength, onBlur: (direction, event) => {
+    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, Object.assign({ "data-part-id": PART_YEAR, id: otherProps.id, max: max, min: min, name: "year", value: value, isInvalid: isInvalid, invalidClassName: DateInput_module_scss_1.default.invalid, validateFn: isYearInvalid, onBeep: onBeep, emptyCharacter: emptyCharacter, placeholderLength: 4, className: (0, classnames_1.default)(DateInput_module_scss_1.default.input, DateInput_module_scss_1.default.year, originalClassName), maxLength: maxLength, onBlur: (direction, event) => {
             // PartialInput provides direction, but current onBlur expects just event
             if (otherProps.onBlur) {
                 // Provide both direction and event to match the expected signature

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

@@ -24,10 +24,6 @@ exports.DatePickerMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(DatePickerNative_1.defaultProps.enabled),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(DatePickerNative_1.defaultProps.validationStatus),
-        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),
         mode: {
             description: "The mode of the datepicker (single or range)",
             valueType: "string",
@@ -141,5 +137,5 @@ exports.DatePickerMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DatePickerMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { id: node.uid, className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), minValue: extractValue(node.props.minValue), maxValue: extractValue(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak) }));
+    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), minValue: extractValue(node.props.minValue), maxValue: extractValue(node.props.maxValue), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
 });

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

@@ -360,3 +360,32 @@ fixtures_1.test.fixme("component handles disabledDates correctly", (_a) => __awa
     // Check that the form was submitted
     yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("05/25/2024");
 }));
+// =============================================================================
+// 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(`<DatePicker 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(`<DatePicker 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(`<DatePicker 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(`<DatePicker 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/DatePicker/DatePickerNative.js

@@ -26,9 +26,9 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const react_popover_1 = require("@radix-ui/react-popover");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {
@@ -76,14 +76,14 @@ const Chevron = (_a) => {
         return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronright", size: "lg" });
     }
 };
-exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
+exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRef) {
     var { id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates = exports.defaultProps.disabledDates, style, className, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, readOnly = false, required, autoFocus = false } = _a, rest = __rest(_a, ["id", "initialValue", "value", "mode", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "style", "className", "registerComponentApi", "inline", "startText", "startIcon", "endText", "endIcon", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "required", "autoFocus"]);
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
     const [_, setIsMenuFocused] = (0, react_2.useState)(false);
     const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
     const [inlineMonth, setInlineMonth] = (0, react_2.useState)();
-    const generatedId = (0, react_1.useId)();
-    const inputId = id || generatedId;
+    const inputRef = (0, react_1.useRef)(null);
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
     const selected = (0, react_2.useMemo)(() => {
         if (mode === "single" && typeof value === "string") {
             return parseISODate(value) || parseDate(value);
@@ -102,7 +102,6 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
         }
     }, [dateFormat]);
     const startDate = (0, react_2.useMemo)(() => {
-        console.log(minValue, (0, date_fns_1.parse)(minValue, dateFormat, new Date()));
         return minValue ? (0, date_fns_1.parse)(minValue, dateFormat, new Date()) : undefined;
     }, [minValue, dateFormat]);
     const endDate = (0, react_2.useMemo)(() => {
@@ -290,14 +289,14 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat, readOnly]);
-    return inline ? ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: ref, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: DatePicker_module_scss_1.default.inlinePickerMenu, ref: (ref) => setReferenceElement(ref), children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: inputId, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, month: inlineMonth, onMonthChange: setInlineMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1, components: {
-                    Chevron,
-                } }) })) })) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { ref: setReferenceElement, id: inputId, "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
-                        [DatePicker_module_scss_1.default.disabled]: !enabled,
-                        [DatePicker_module_scss_1.default.error]: validationStatus === "error",
-                        [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
-                        [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                    }, className), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) })), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, defaultMonth: defaultMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1, components: {
+    return inline ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, rest, { style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.inlinePickerMenu, className), tabIndex: 0, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: id, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, month: inlineMonth, onMonthChange: setInlineMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1, components: {
+                Chevron,
+            } }) }))) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { id: id, ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, ref), "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(className, DatePicker_module_scss_1.default.datePicker, {
+                    [DatePicker_module_scss_1.default.disabled]: !enabled,
+                    [DatePicker_module_scss_1.default.error]: validationStatus === "error",
+                    [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
+                    [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
+                }, className), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, defaultMonth: defaultMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1, components: {
                             Chevron,
                         } }) }) })] }));
 });

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

@@ -28,10 +28,6 @@ exports.FileInputMd = (0, metadata_helpers_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        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),
         buttonVariant: (0, metadata_helpers_1.d)("The button variant to use", abstractions_1.buttonVariantNames),
         buttonLabel: (0, metadata_helpers_1.d)(`This property is an optional string to set a label for the button part.`),
         buttonIcon: (0, metadata_helpers_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
@@ -80,5 +76,5 @@ exports.FileInputMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.fileInputRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FileInputMd, ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi, className }) => {
     const iconName = extractValue.asOptionalString(node.props.buttonIcon) || DEFAULT_ICON;
-    return ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, { enabled: extractValue.asOptionalBoolean(node.props.enabled), variant: extractValue(node.props.buttonVariant), buttonThemeColor: extractValue(node.props.buttonThemeColor), buttonSize: extractValue(node.props.buttonSize), buttonIcon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, fallback: "folder-open" }), buttonIconPosition: extractValue(node.props.buttonIconPosition), buttonLabel: extractValue.asOptionalString(node.props.buttonLabel), updateState: updateState, value: (0, FileInputNative_1.isFileArray)(state === null || state === void 0 ? void 0 : state.value) ? state === null || state === void 0 ? void 0 : state.value : undefined, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), validationStatus: extractValue(node.props.validationStatus), registerComponentApi: registerComponentApi, multiple: extractValue.asOptionalBoolean(node.props.multiple), directory: extractValue.asOptionalBoolean(node.props.directory), placeholder: extractValue.asOptionalString(node.props.placeholder), buttonPosition: extractValue.asOptionalString(node.props.buttonPosition), initialValue: extractValue(node.props.initialValue), acceptsFileType: extractValue(node.props.acceptsFileType), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), className: className }));
+    return ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, { enabled: extractValue.asOptionalBoolean(node.props.enabled), variant: extractValue(node.props.buttonVariant), buttonThemeColor: extractValue(node.props.buttonThemeColor), buttonSize: extractValue(node.props.buttonSize), buttonIcon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, fallback: "folder-open" }), buttonIconPosition: extractValue(node.props.buttonIconPosition), buttonLabel: extractValue.asOptionalString(node.props.buttonLabel), updateState: updateState, value: (0, FileInputNative_1.isFileArray)(state === null || state === void 0 ? void 0 : state.value) ? state === null || state === void 0 ? void 0 : state.value : undefined, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), validationStatus: extractValue(node.props.validationStatus), registerComponentApi: registerComponentApi, multiple: extractValue.asOptionalBoolean(node.props.multiple), directory: extractValue.asOptionalBoolean(node.props.directory), placeholder: extractValue.asOptionalString(node.props.placeholder), buttonPosition: extractValue.asOptionalString(node.props.buttonPosition), initialValue: extractValue(node.props.initialValue), acceptsFileType: extractValue(node.props.acceptsFileType), required: extractValue.asOptionalBoolean(node.props.required), className: className }));
 });

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

@@ -247,3 +247,32 @@ const fixtures_1 = require("../../testing/fixtures");
     const driver = yield createFileInputDriver();
     yield (0, fixtures_1.expect)(driver.component).toBeVisible();
 }));
+// =============================================================================
+// 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(`<FileInput 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(`<FileInput 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(`<FileInput 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(`<FileInput 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/FileInput/FileInputNative.js

@@ -60,7 +60,6 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const TextBoxNative_1 = require("../TextBox/TextBoxNative");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 // https://github.com/react-dropzone/react-dropzone/issues/1259
 const { useDropzone } = dropzone;
 exports.defaultProps = {
@@ -76,7 +75,7 @@ exports.defaultProps = {
     onBlur: constants_1.noop,
 };
 const FileInput = (_a) => {
-    var { id, enabled = exports.defaultProps.enabled, style, className, placeholder, buttonPosition = exports.defaultProps.buttonPosition, buttonLabel = exports.defaultProps.buttonLabel, buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, value, initialValue, acceptsFileType, multiple = exports.defaultProps.multiple, directory = exports.defaultProps.directory, label, labelPosition, labelWidth, labelBreak, required } = _a, rest = __rest(_a, ["id", "enabled", "style", "className", "placeholder", "buttonPosition", "buttonLabel", "buttonIcon", "buttonIconPosition", "variant", "buttonThemeColor", "buttonSize", "autoFocus", "validationStatus", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "value", "initialValue", "acceptsFileType", "multiple", "directory", "label", "labelPosition", "labelWidth", "labelBreak", "required"]);
+    var { id, enabled = exports.defaultProps.enabled, style, className, placeholder, buttonPosition = exports.defaultProps.buttonPosition, buttonLabel = exports.defaultProps.buttonLabel, buttonIcon, buttonIconPosition, variant, buttonThemeColor, buttonSize, autoFocus, validationStatus, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, value, initialValue, acceptsFileType, multiple = exports.defaultProps.multiple, directory = exports.defaultProps.directory, required } = _a, rest = __rest(_a, ["id", "enabled", "style", "className", "placeholder", "buttonPosition", "buttonLabel", "buttonIcon", "buttonIconPosition", "variant", "buttonThemeColor", "buttonSize", "autoFocus", "validationStatus", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "value", "initialValue", "acceptsFileType", "multiple", "directory", "required"]);
     const _id = (0, react_1.useId)();
     id = id || _id;
     // Don't accept any (initial) value if it is not a File array explicitly
@@ -139,19 +138,19 @@ const FileInput = (_a) => {
         });
     }, [focus, doOpen, registerComponentApi]);
     // Solution source: https://stackoverflow.com/questions/1084925/input-type-file-show-only-button
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: id, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, className: className, isInputTemplateUsed: true, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FileInput_module_scss_1.default.container, {
-                [FileInput_module_scss_1.default.buttonStart]: buttonPosition === "start",
-                [FileInput_module_scss_1.default.buttonEnd]: buttonPosition === "end",
-            }), onFocus: handleOnFocus, onBlur: handleOnBlur, tabIndex: -1, children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ id: id }, getRootProps({
-                    tabIndex: 0,
-                    disabled: !enabled,
-                    className: FileInput_module_scss_1.default.textBoxWrapper,
-                    onClick: open,
-                    ref: buttonRef,
-                    type: "button",
-                }), { children: [(0, jsx_runtime_1.jsx)(VisuallyHidden.Root, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps({
-                                webkitdirectory: directory ? "true" : undefined,
-                            }), { accept: _acceptsFileType })) }), (0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { placeholder: placeholder, enabled: enabled, value: (_value === null || _value === void 0 ? void 0 : _value.map((v) => v.name).join(", ")) || "", validationStatus: validationStatus, readOnly: true, tabIndex: -1 })] })), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { disabled: !enabled, type: "button", onClick: open, icon: buttonIcon, iconPosition: buttonIconPosition, variant: variant, themeColor: buttonThemeColor, size: buttonSize, className: FileInput_module_scss_1.default.button, autoFocus: autoFocus, children: buttonLabel })] }) })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(FileInput_module_scss_1.default.container, className, {
+            [FileInput_module_scss_1.default.buttonStart]: buttonPosition === "start",
+            [FileInput_module_scss_1.default.buttonEnd]: buttonPosition === "end",
+        }), style: style, onFocus: handleOnFocus, onBlur: handleOnBlur, tabIndex: -1 }, rest, { children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ id: id }, getRootProps({
+                tabIndex: 0,
+                disabled: !enabled,
+                className: FileInput_module_scss_1.default.textBoxWrapper,
+                onClick: open,
+                ref: buttonRef,
+                type: "button",
+            }), { children: [(0, jsx_runtime_1.jsx)(VisuallyHidden.Root, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps({
+                            webkitdirectory: directory ? "true" : undefined,
+                        }), { accept: _acceptsFileType })) }), (0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, { placeholder: placeholder, enabled: enabled, value: (_value === null || _value === void 0 ? void 0 : _value.map((v) => v.name).join(", ")) || "", validationStatus: validationStatus, readOnly: true, tabIndex: -1 })] })), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { disabled: !enabled, type: "button", onClick: open, icon: buttonIcon, iconPosition: buttonIconPosition, variant: variant, themeColor: buttonThemeColor, size: buttonSize, className: FileInput_module_scss_1.default.button, autoFocus: autoFocus, children: buttonLabel })] })));
 };
 exports.FileInput = FileInput;
 function isFile(value) {

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

@@ -1090,7 +1090,7 @@ fixtures_1.test.describe("Edge Cases", () => {
     const formDriver = yield createFormDriver();
     const fieldDriver = yield createFormItemDriver("testField");
     yield formDriver.submitForm();
-    yield (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
+    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
 }));
 (0, fixtures_1.test)("field-related errors map to correct FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createFormDriver, createFormItemDriver, }) {
     yield initTestBed(`
@@ -1103,9 +1103,9 @@ fixtures_1.test.describe("Edge Cases", () => {
     const formDriver = yield createFormDriver();
     const fieldDriver = yield createFormItemDriver("testField");
     yield formDriver.submitForm();
-    yield (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
+    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "warning");
 }));
-(0, fixtures_1.test)("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver }) {
+fixtures_1.test.skip("field-related errors disappear if user updates FormItems", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver }) {
     yield initTestBed(`
       <Form testId="form">
         <FormItem testId="testField" bindTo="test" label="test" required />
@@ -1115,15 +1115,17 @@ fixtures_1.test.describe("Edge Cases", () => {
     const fieldDriver2 = yield createFormItemDriver("testField2");
     yield fieldDriver.component.focus();
     yield fieldDriver.textBox.fill("a");
-    yield fieldDriver.textBox.fill("", { timeout: 500 }); // trigger 'required' error
-    yield (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).toHaveAttribute(fieldDriver.validationStatusTag, "error");
-    //await fieldDriver.component.focus();
+    yield fieldDriver.textBox.fill("");
+    yield fieldDriver.textBox.blur();
+    // Should show required error now
+    yield (0, fixtures_1.expect)(fieldDriver.textBox).toHaveValue("");
+    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).toHaveAttribute(fieldDriver.validationStatusTag, "error");
     yield fieldDriver.textBox.fill("a");
     yield fieldDriver.textBox.blur();
-    yield fieldDriver2.component.focus();
-    yield page.waitForTimeout(200);
+    yield fieldDriver2.textBox.focus();
+    yield (0, fixtures_1.expect)(fieldDriver2.textBox).toBeFocused();
     yield fieldDriver2.textBox.fill("b");
-    (0, fixtures_1.expect)(yield fieldDriver.getValidationStatusIndicator()).not.toBeVisible();
+    yield (0, fixtures_1.expect)(fieldDriver.validationStatusIndicator).not.toBeVisible();
 }));
 const smartCrudInterceptor = {
     initialize: `