xmlui 0.10.16 → 0.10.19

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) {
-    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"]);
+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, startDate, endDate, 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", "startDate", "endDate", "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);
@@ -101,13 +101,12 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
         }
     }, [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)(() => {
-        return maxValue ? (0, date_fns_1.parse)(maxValue, dateFormat, new Date()) : undefined;
-    }, [maxValue, dateFormat]);
+    const _startDate = (0, react_2.useMemo)(() => {
+        return startDate ? (0, date_fns_1.parse)(startDate, dateFormat, new Date()) : undefined;
+    }, [startDate, dateFormat]);
+    const _endDate = (0, react_2.useMemo)(() => {
+        return endDate ? (0, date_fns_1.parse)(endDate, dateFormat, new Date()) : undefined;
+    }, [endDate, dateFormat]);
     const defaultMonth = (0, react_2.useMemo)(() => {
         if (mode === "single" && selected) {
             return selected;
@@ -125,7 +124,7 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
             if (dateValue instanceof Date) {
                 return dateValue;
             }
-            if (typeof dateValue === 'string') {
+            if (typeof dateValue === "string") {
                 // Try to parse as ISO date first
                 const isoDate = parseISODate(dateValue);
                 if (isoDate) {
@@ -141,15 +140,15 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
         };
         const convertMatcher = (matcher) => {
             // Handle boolean - disable all dates
-            if (typeof matcher === 'boolean') {
+            if (typeof matcher === "boolean") {
                 return matcher;
             }
             // Handle function matcher - pass through as is
-            if (typeof matcher === 'function') {
+            if (typeof matcher === "function") {
                 return matcher;
             }
             // Handle single Date or string
-            if (matcher instanceof Date || typeof matcher === 'string') {
+            if (matcher instanceof Date || typeof matcher === "string") {
                 const convertedDate = convertStringToDate(matcher);
                 return convertedDate || undefined;
             }
@@ -157,14 +156,17 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
             if (Array.isArray(matcher)) {
                 const convertedMatchers = [];
                 for (const item of matcher) {
-                    if (typeof item === 'object' && item !== null && !Array.isArray(item) && !(item instanceof Date)) {
+                    if (typeof item === "object" &&
+                        item !== null &&
+                        !Array.isArray(item) &&
+                        !(item instanceof Date)) {
                         // Handle nested matcher objects in array (e.g., {dayOfWeek: [0,6]}, {from: date, to: date})
                         const nestedResult = convertMatcher(item);
                         if (nestedResult) {
                             convertedMatchers.push(nestedResult);
                         }
                     }
-                    else if (item instanceof Date || typeof item === 'string') {
+                    else if (item instanceof Date || typeof item === "string") {
                         // Handle individual dates in the array
                         const convertedDate = convertStringToDate(item);
                         if (convertedDate) {
@@ -176,9 +178,9 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
                 return convertedMatchers.length > 0 ? convertedMatchers : undefined;
             }
             // Handle object matchers (DateRange, DateBefore, DateAfter, DateInterval, DayOfWeek)
-            if (typeof matcher === 'object' && matcher !== null) {
+            if (typeof matcher === "object" && matcher !== null) {
                 // Handle DateRange: { from: Date, to?: Date }
-                if ('from' in matcher) {
+                if ("from" in matcher) {
                     const fromDate = convertStringToDate(matcher.from);
                     const toDate = matcher.to ? convertStringToDate(matcher.to) : undefined;
                     if (fromDate) {
@@ -186,21 +188,21 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
                     }
                 }
                 // Handle DateBefore: { before: Date }
-                if ('before' in matcher && !('after' in matcher)) {
+                if ("before" in matcher && !("after" in matcher)) {
                     const beforeDate = convertStringToDate(matcher.before);
                     if (beforeDate) {
                         return { before: beforeDate };
                     }
                 }
                 // Handle DateAfter: { after: Date }
-                if ('after' in matcher && !('before' in matcher)) {
+                if ("after" in matcher && !("before" in matcher)) {
                     const afterDate = convertStringToDate(matcher.after);
                     if (afterDate) {
                         return { after: afterDate };
                     }
                 }
                 // Handle DateInterval: { before: Date, after: Date }
-                if ('before' in matcher && 'after' in matcher) {
+                if ("before" in matcher && "after" in matcher) {
                     const beforeDate = convertStringToDate(matcher.before);
                     const afterDate = convertStringToDate(matcher.after);
                     if (beforeDate && afterDate) {
@@ -208,7 +210,7 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
                     }
                 }
                 // Handle DayOfWeek: { dayOfWeek: number | number[] }
-                if ('dayOfWeek' in matcher) {
+                if ("dayOfWeek" in matcher) {
                     return { dayOfWeek: matcher.dayOfWeek };
                 }
             }
@@ -290,14 +292,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

@@ -215,6 +215,13 @@ const fixtures_1 = require("../../testing/fixtures");
     yield driver.getTextBox().focus();
     yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
 }));
+(0, fixtures_1.test)("gotFocus event fires on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    const { testStateDriver } = yield initTestBed(`
+    <FileInput testId="fileInput" onGotFocus="testState = 'focused'" label="test" />
+  `);
+    yield page.getByText("test").click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+}));
 (0, fixtures_1.test)("lostFocus event fires on blue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFileInputDriver }) {
     const { testStateDriver } = yield initTestBed(`
       <FileInput testId="fileInput" onLostFocus="testState = 'blurred'" />
@@ -247,3 +254,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: `

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

@@ -61,6 +61,7 @@ const formReducer = (0, immer_1.default)((state, action) => {
             isValidOnFocus: false,
             isValidLostFocus: false,
             focused: false,
+            afterFirstDirtyBlur: false,
             forceShowValidationResult: false,
         };
     }
@@ -100,8 +101,10 @@ const formReducer = (0, immer_1.default)((state, action) => {
             else {
                 state.validationResults[uid] = action.payload.validationResult;
             }
-            state.interactionFlags[uid].invalidToValid =
-                !prevValid && state.validationResults[uid].isValid;
+            const currentIsInvalidToValid = !prevValid && state.validationResults[uid].isValid;
+            if (currentIsInvalidToValid) {
+                state.interactionFlags[uid].invalidToValid = true;
+            }
             break;
         }
         case formActions_1.FormActionKind.FIELD_FOCUSED: {
@@ -112,6 +115,8 @@ const formReducer = (0, immer_1.default)((state, action) => {
         case formActions_1.FormActionKind.FIELD_LOST_FOCUS: {
             state.interactionFlags[uid].isValidLostFocus = !!((_d = state.validationResults[uid]) === null || _d === void 0 ? void 0 : _d.isValid);
             state.interactionFlags[uid].focused = false;
+            state.interactionFlags[uid].afterFirstDirtyBlur = state.interactionFlags[uid].isDirty;
+            state.interactionFlags[uid].invalidToValid = false;
             break;
         }
         case formActions_1.FormActionKind.TRIED_TO_SUBMIT: {
@@ -240,14 +245,14 @@ const Form = (0, react_2.forwardRef)(function (_a, ref) {
     });
     const doSubmit = (0, misc_1.useEvent)((event) => __awaiter(this, void 0, void 0, function* () {
         var _a;
-        console.log(`🚀 Form submit started`);
+        /* console.log(`🚀 Form submit started`);
         console.log(`🔍 Initial values:`, {
-            initialValue,
-            EMPTY_OBJECT: constants_1.EMPTY_OBJECT,
-            isEqual: initialValue === constants_1.EMPTY_OBJECT,
-            initialValueType: typeof initialValue,
-            emptyObjectType: typeof constants_1.EMPTY_OBJECT
-        });
+          initialValue,
+          EMPTY_OBJECT,
+          isEqual: initialValue === EMPTY_OBJECT,
+          initialValueType: typeof initialValue,
+          emptyObjectType: typeof EMPTY_OBJECT
+        }); */
         event === null || event === void 0 ? void 0 : event.preventDefault();
         if (!isEnabled) {
             return;
@@ -412,3 +417,4 @@ exports.FormWithContextVar = (0, react_2.forwardRef)(function ({ node, renderChi
             }), initialValue: initialValue, buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, enabled: extractValue.asOptionalBoolean(node.props.enabled, true) &&
                 !extractValue.asOptionalBoolean(node.props.loading, false), children: renderChild(nodeWithItem) }) }));
 });
+exports.FormWithContextVar.displayName = "FormWithContextVar";