xmlui 0.10.16 → 0.10.19

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

@@ -179,7 +179,7 @@ fixtures_1.test.describe("initialValue property", () => {
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{123456789}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
@@ -193,14 +193,14 @@ fixtures_1.test.describe("initialValue property", () => {
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{true}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles false boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles false boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{false}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
@@ -214,28 +214,28 @@ fixtures_1.test.describe("initialValue property", () => {
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles function initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles function initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{() => '2024-01-01'}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles zero numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles zero numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{0}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles negative numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles negative numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{-123}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles float numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles float numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{123.456}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
@@ -249,21 +249,21 @@ fixtures_1.test.describe("initialValue property", () => {
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles Infinity initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles Infinity initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{Infinity}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles Date object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles Date object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{Date.now()}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
     }));
-    (0, fixtures_1.test)("handles complex object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("handles complex object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`<DateInput testId="dateInput" initialValue="{{year: 2024, month: 5, day: 25}}" />`);
         const driver = yield createDateInputDriver("dateInput");
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
@@ -548,6 +548,11 @@ fixtures_1.test.describe("Event Handling", () => {
         yield driver.dayInput.focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
+    (0, fixtures_1.test)("fires gotFocus event when label receives focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onGotFocus="testState = 'focused'" label="test" />`);
+        yield page.getByText("test").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
     (0, fixtures_1.test)("fires lostFocus event when input loses focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
         const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onLostFocus="testState = 'blurred'" />`);
         const driver = yield createDateInputDriver("dateInput");
@@ -557,7 +562,7 @@ fixtures_1.test.describe("Event Handling", () => {
         yield page.keyboard.press("Tab"); // Move focus away from all inputs
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
     }));
-    (0, fixtures_1.test)("preserves field values when date combination becomes invalid", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page }) {
+    (0, fixtures_1.test)("preserves field values when date combination becomes invalid", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
         yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" initialValue="01/30/2024" />`);
         const driver = yield createDateInputDriver("dateInput");
         // Verify initial state
@@ -576,7 +581,7 @@ fixtures_1.test.describe("Event Handling", () => {
         // The day field should also be marked as invalid visually
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveClass(/invalid/);
     }));
-    (0, fixtures_1.test)("does not clear all fields when invalid date is entered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page }) {
+    (0, fixtures_1.test)("does not clear all fields when invalid date is entered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
         yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" />`);
         const driver = yield createDateInputDriver("dateInput");
         // Create a scenario where the complete date would be invalid
@@ -665,7 +670,7 @@ fixtures_1.test.describe("API Methods", () => {
         yield page.getByTestId("getIsoBtn").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2024-05-25");
     }));
-    (0, fixtures_1.test)("isoValue() method handles different date formats correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("isoValue() method handles different date formats correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <DateInput id="dateInput" dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
@@ -675,7 +680,7 @@ fixtures_1.test.describe("API Methods", () => {
         yield page.getByTestId("getIsoBtn").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2024-05-25");
     }));
-    (0, fixtures_1.test)("isoValue() method returns null for incomplete date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver }) {
+    (0, fixtures_1.test)("isoValue() method returns null for incomplete date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <DateInput id="dateInput" testId="dateInput" />
@@ -689,7 +694,7 @@ fixtures_1.test.describe("API Methods", () => {
         yield page.getByTestId("getIsoBtn").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
     }));
-    (0, fixtures_1.test)("isoValue() method returns null for invalid date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver }) {
+    (0, fixtures_1.test)("isoValue() method returns null for invalid date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <DateInput id="dateInput" testId="dateInput" />
@@ -704,7 +709,7 @@ fixtures_1.test.describe("API Methods", () => {
         yield page.getByTestId("getIsoBtn").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
     }));
-    (0, fixtures_1.test)("isoValue() method updates when date is changed programmatically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("isoValue() method updates when date is changed programmatically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <DateInput id="dateInput" initialValue="05/25/2024" />
@@ -811,7 +816,7 @@ fixtures_1.test.describe("Theme Variables", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
         yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
     }));
-    (0, fixtures_1.test)("component renders with clearable and theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+    (0, fixtures_1.test)("component renders with clearable and theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
         yield initTestBed(`
       <DateInput 
         testId="dateInput" 
@@ -916,3 +921,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",
@@ -80,22 +76,27 @@ exports.DatePickerMd = (0, metadata_helpers_1.createMetadata)({
                 },
             ],
         },
-        minValue: {
-            description: "The optional start date of the selectable date range. If not defined, the range " +
-                "allows any dates in the past.",
+        startDate: {
+            description: "The earliest month to start the month navigation from (inclusive). " +
+                "If not defined, the component allows any dates in the past. " +
+                "Accepts the same date format as the `initialValue`." +
+                "Example: '2023-01-01' ensures the first month to select a date from is January 2023.",
             valueType: "string",
         },
-        maxValue: {
-            description: "The optional end date of the selectable date range. If not defined, the range allows " +
-                "any future dates.",
+        endDate: {
+            description: "The latest month to start the month navigation from (inclusive). " +
+                "If not defined, the component allows any future dates. " +
+                "Accepts the same date format as the `initialValue`." +
+                "Example: '2023-12-31' ensures the last month to select a date from is December 2023.",
             valueType: "string",
         },
         disabledDates: {
-            description: "An optional array of dates that are disabled",
+            description: "An optional array of dates that are to be disabled.",
             valueType: "any",
         },
         inline: {
-            description: "Whether to display the datepicker inline",
+            description: "If set to true, the calendar is always visible and its panel is rendered as part of the layout." +
+                " If false, the calendar is shown in a popup when the input is focused or clicked.",
             valueType: "boolean",
             defaultValue: DatePickerNative_1.defaultProps.inline,
         },
@@ -141,5 +142,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), startDate: extractValue(node.props.startDate), endDate: extractValue(node.props.endDate), 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

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 const date_fns_1 = require("date-fns");
 // =============================================================================
@@ -179,6 +178,13 @@ const date_fns_1 = require("date-fns");
     yield page.getByTestId("datePicker").focus();
     yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
 }));
+(0, fixtures_1.test)("component fires proper focus event on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DatePicker testId="datePicker" onGotFocus="testState = 'focused'" label="test" />
+  `);
+    yield page.getByText("test").click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+}));
 (0, fixtures_1.test)("component fires proper blur event on lostFocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
     const { testStateDriver } = yield initTestBed(`
     <DatePicker testId="datePicker" onLostFocus="testState = 'blurred'" />
@@ -278,40 +284,37 @@ const date_fns_1 = require("date-fns");
     // The date should not change
     yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText(initialDate);
 }));
-fixtures_1.test.fixme("component handles minValue restrictions", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("Prop does not work"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+(0, fixtures_1.test)("component handles startDate restrictions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
     yield initTestBed(`<DatePicker
         testId="datePicker"
         mode="range"
-        minValue="05/25/2024"
+        startDate="05/01/2024"
         dateFormat="MM/dd/yyyy"
         initialValue="{{ from: '05/26/2024', to: '05/27/2024' }}"
       />`);
     yield page.getByTestId("datePicker").click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("May 24th").click();
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 24th")).toBeDisabled();
+    yield (0, fixtures_1.expect)(page.getByRole('button', { name: 'Go to the Previous Month' })).toBeDisabled();
 }));
-fixtures_1.test.fixme("component handles maxValue restrictions", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("Prop does not work"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+(0, fixtures_1.test)("component handles endDate restrictions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
     yield initTestBed(`<DatePicker
         testId="datePicker"
         mode="range"
-        minValue="05/25/2024"
+        endDate="06/01/2024"
         initialValue="{{ from: '05/26/2024', to: '05/27/2024' }}"
         dateFormat="MM/dd/yyyy"
       />`);
     yield page.getByTestId("datePicker").click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("May 24th").click();
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 24th")).toBeDisabled();
+    yield (0, fixtures_1.expect)(page.getByRole('button', { name: 'Go to the Next Month' })).toBeDisabled();
 }));
-fixtures_1.test.fixme("component handles disabledDates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+(0, fixtures_1.test)("component handles disabledDates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const testDay = 15;
     const today = new Date();
-    const testDayFormatted = (0, date_fns_1.format)(new Date(today.getFullYear(), today.getMonth(), 15), "MM/dd/yyyy");
-    yield initTestBed(`<DatePicker disabledDates={['${testDayFormatted}']} />`, {});
-    // Open the calendar
-    yield page.locator("button").click();
-    // The 15th day should be disabled
-    const testDay = "15";
-    const testDayCell = page.locator(".rdp-day").filter({ hasText: testDay }).first();
-    yield (0, fixtures_1.expect)(testDayCell).toHaveClass(/disabled/);
+    const testDayFormatted = (0, date_fns_1.format)(new Date(today.getFullYear(), today.getMonth(), testDay), "MM/dd/yyyy");
+    const testMonthName = (0, date_fns_1.format)(today, "LLLL");
+    yield initTestBed(`<DatePicker testId="datePicker" disabledDates="{['${testDayFormatted}']}" />`, {});
+    yield page.getByTestId("datePicker").click();
+    const testDayCell = page.getByRole("grid", { name: testMonthName }).getByLabel(testDay.toString());
+    yield (0, fixtures_1.expect)(testDayCell).toBeDisabled();
 }));
 // =============================================================================
 // INTEGRATION TESTS
@@ -360,3 +363,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);
+}));