xmlui 0.10.18 → 0.10.20

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("");
@@ -492,7 +492,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
@@ -504,7 +504,7 @@ fixtures_1.test.describe("User Interactions", () => {
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
         yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
         yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
-        driver.dayInput.fill("18");
+        yield driver.dayInput.fill("18");
         yield driver.clearButton.click();
         yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
         yield (0, fixtures_1.expect)(driver.dayInput).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" />
@@ -800,8 +805,8 @@ fixtures_1.test.describe("Accessibility", () => {
 fixtures_1.test.describe("Theme Variables", () => {
     (0, fixtures_1.test)("component renders with theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
         yield initTestBed(`
-      <DateInput 
-        testId="dateInput" 
+      <DateInput
+        testId="dateInput"
         style="--color-divider: red; --width-input: 100px; --backgroundColor-input-invalid: rgb(255, 200, 200);"
       />
     `);
@@ -811,10 +816,10 @@ 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" 
+      <DateInput
+        testId="dateInput"
         clearable="{true}"
         style="--padding-button: 15px; --outlineColor-button--focused: green;"
       />

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

@@ -76,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,
         },
@@ -137,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, { 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) }));
+    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

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

@@ -77,7 +77,7 @@ const Chevron = (_a) => {
     }
 };
 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"]);
+    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);
@@ -101,12 +101,12 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
-    const startDate = (0, react_2.useMemo)(() => {
-        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;
@@ -124,7 +124,7 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
             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) {
@@ -140,15 +140,15 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
         };
         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;
             }
@@ -156,14 +156,17 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
             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) {
@@ -175,9 +178,9 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
                 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) {
@@ -185,21 +188,21 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
                     }
                 }
                 // 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) {
@@ -207,7 +210,7 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
                     }
                 }
                 // Handle DayOfWeek: { dayOfWeek: number | number[] }
-                if ('dayOfWeek' in matcher) {
+                if ("dayOfWeek" in matcher) {
                     return { dayOfWeek: matcher.dayOfWeek };
                 }
             }
@@ -289,14 +292,14 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, forwardedRe
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat, readOnly]);
-    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: {
+    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: {
+                }, 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/DropdownMenu/DropdownMenu.spec.js

@@ -141,7 +141,7 @@ const fixtures_1 = require("../../testing/fixtures");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-haspopup", "menu");
     yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-expanded", "false");
     yield driver.open();
-    page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
+    yield page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
     yield page.getByRole("menu").waitFor();
 }));
 (0, fixtures_1.test)("is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
@@ -151,10 +151,10 @@ const fixtures_1 = require("../../testing/fixtures");
     </DropdownMenu>
   `);
     const btn = page.getByRole("button");
-    page.keyboard.press("Tab");
+    yield page.keyboard.press("Tab");
     yield (0, fixtures_1.expect)(btn).toBeFocused();
     // Open with Enter
-    page.keyboard.press("Enter");
+    yield page.keyboard.press("Enter");
     yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
     // Navigate and select with keyboard
     yield page.keyboard.press("ArrowDown");

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'" />

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZoneNative.js

@@ -32,15 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -81,7 +72,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     const accept = acceptedFileTypes
         ? acceptedFileTypes.split(",").reduce((acc, type) => (Object.assign(Object.assign({}, acc), { [type.trim()]: [] })), {})
         : undefined;
-    const onDrop = (0, react_1.useCallback)((acceptedFiles) => __awaiter(this, void 0, void 0, function* () {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         if (!acceptedFiles.length) {
             return;
         }
@@ -89,7 +80,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
             value: acceptedFiles,
         });
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
-    }), [onUpload, updateState]);
+    }, [onUpload, updateState]);
     const { getRootProps, getInputProps, isDragActive, open, inputRef, isDragAccept } = useDropzone({
         onDrop,
         noClick: true,
@@ -97,7 +88,7 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
         noDragEventsBubbling: true,
         disabled,
         accept,
-        maxFiles
+        maxFiles,
     });
     const doOpen = (0, misc_1.useEvent)(() => {
         open();
@@ -139,5 +130,5 @@ exports.FileUploadDropZone = (0, react_1.forwardRef)(function FileUploadDropZone
     }, [doOpen, registerComponentApi, uid]);
     const _b = getRootProps(Object.assign(Object.assign({}, rest), { style, className: (0, classnames_1.default)(FileUploadDropZone_module_scss_1.default.wrapper, className), onPaste: handleOnPaste })), { ref } = _b, rootProps = __rest(_b, ["ref"]);
     const rootRef = (0, component_utils_1.getComposedRef)(ref, forwardedRef);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, (isDragActive && isDragAccept) && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, { "data-drop-enabled": !disabled, ref: rootRef, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, getInputProps())), children, isDragActive && isDragAccept && ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadDropZone_module_scss_1.default.dropPlaceholder, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "upload" }), text] }))] })));
 });