xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,362 @@
+"use strict";
+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());
+    });
+};
+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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeVisible();
+}));
+(0, fixtures_1.test)("component renders inline", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker inline testId="datePicker" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeVisible();
+}));
+(0, fixtures_1.test)("component handles correct date format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/25/2024");
+}));
+(0, fixtures_1.test)("component displays initialValue correctly (single)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <DatePicker
+      initialValue="05/25/2024"
+      dateFormat="MM/dd/yyyy"
+      testId="datePicker"
+      mode="single"
+    />`);
+    yield (0, fixtures_1.expect)(page.getByText("05/25/2024")).toBeVisible();
+}));
+(0, fixtures_1.test)("component displays initialValue correctly (range)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <DatePicker
+      initialValue="{{ from: '05/25/2024', to: '05/26/2024' }}"
+      dateFormat="MM/dd/yyyy"
+      mode="range"
+      testId="datePicker"
+    />`);
+    yield (0, fixtures_1.expect)(page.getByText("05/25/2024 - 05/26/2024")).toBeVisible();
+}));
+(0, fixtures_1.test)("component opens calendar when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" />`);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+}));
+(0, fixtures_1.test)("component formats input to provided date format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" dateFormat="dd-MM-yyyy" initialValue="05/25/2024" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("25-05-2024");
+}));
+(0, fixtures_1.test)("component allows date selection in single mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <DatePicker testId="datePicker" mode="single" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
+  `);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024");
+}));
+(0, fixtures_1.test)("date changes when selecting a new date in single mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <DatePicker testId="datePicker" mode="single" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
+  `);
+    const datePicker = page.getByTestId("datePicker");
+    yield datePicker.click();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024");
+    yield datePicker.click();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("27").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/27/2024");
+}));
+(0, fixtures_1.test)("component allows date range selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" mode="range" dateFormat="MM/dd/yyyy" initialValue="{{ from: '05/25/2024', to: '05/26/2024' }}" />`);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("27").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024 - 05/27/2024");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveAttribute("aria-haspopup", "true");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveAttribute("aria-expanded", "false");
+}));
+(0, fixtures_1.test)("component is focusable via label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" label="Birth Date" />`);
+    yield page.getByText("Birth Date").click();
+    // --- clicking the label to focus the input opens up the dialog
+    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Previous Month" })).toBeFocused();
+}));
+(0, fixtures_1.test)("component respects autoFocus property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" autoFocus="true" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
+}));
+(0, fixtures_1.test)("component is keyboard navigable: open/close calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" />`);
+    // Focus the button
+    yield page.getByTestId("datePicker").focus();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
+    // Press Enter to open calendar
+    yield page.keyboard.press("Enter");
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    // Press Escape to close
+    yield page.keyboard.press("Escape");
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component is keyboard navigable: navigate controls inside calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />`);
+    // Focus the button
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Previous Month" })).toBeFocused();
+    // Tab to the calendar grid
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Next Month" })).toBeFocused();
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByRole("menu").getByLabel("Choose the Month")).toBeFocused();
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByRole("menu").getByLabel("Choose the Year")).toBeFocused();
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("25")).toBeFocused();
+}));
+(0, fixtures_1.test)("component is keyboard navigable: navigate days inside calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/15/2024" dateFormat="MM/dd/yyyy" />`);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    // The back navigation button is focused first
+    // Tab to next nav button
+    yield page.keyboard.press("Tab");
+    // Tab to month select
+    yield page.keyboard.press("Tab");
+    // Tab to year select
+    yield page.keyboard.press("Tab");
+    // Tab to the calendar grid
+    yield page.keyboard.press("Tab");
+    yield page.keyboard.press("ArrowLeft");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 14th")).toBeFocused();
+    yield page.keyboard.press("ArrowUp");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 7th")).toBeFocused();
+    yield page.keyboard.press("ArrowRight");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 8th")).toBeFocused();
+    yield page.keyboard.press("ArrowDown");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 15th")).toBeFocused();
+}));
+(0, fixtures_1.test)("component is keyboard navigable: enter new date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/15/2024" dateFormat="MM/dd/yyyy"/>`);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
+    // The back navigation button is focused first
+    // Tab to next nav button
+    yield page.keyboard.press("Tab");
+    // Tab to month select
+    yield page.keyboard.press("Tab");
+    // Tab to year select
+    yield page.keyboard.press("Tab");
+    // Tab to the calendar grid
+    yield page.keyboard.press("Tab");
+    yield page.keyboard.press("ArrowLeft");
+    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 14th")).toBeFocused();
+    yield page.keyboard.press("Enter");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/14/2024");
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component fires proper focus event on gotFocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DatePicker testId="datePicker" onGotFocus="testState = 'focused'" />
+  `);
+    yield page.getByTestId("datePicker").focus();
+    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'" />
+  `);
+    yield page.getByTestId("datePicker").focus();
+    yield page.getByTestId("datePicker").blur();
+    yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component shows error validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // Error state
+    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="error" />`, {
+        testThemeVars: {
+            "borderColor-DatePicker-error": "rgb(220, 38, 38)",
+            "backgroundColor-DatePicker-error": "rgb(254, 202, 202)",
+            "textColor-DatePicker-error": "rgb(127, 29, 29)",
+        },
+    });
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(220, 38, 38)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(254, 202, 202)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(127, 29, 29)");
+}));
+(0, fixtures_1.test)("component shows warning validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // Warning state
+    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="warning" />`, {
+        testThemeVars: {
+            "borderColor-DatePicker-warning": "rgb(255, 165, 0)",
+            "backgroundColor-DatePicker-warning": "rgb(255, 235, 156)",
+            "textColor-DatePicker-warning": "rgb(127, 29, 29)",
+        },
+    });
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(255, 165, 0)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(255, 235, 156)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(127, 29, 29)");
+}));
+(0, fixtures_1.test)("component shows valid validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    // Valid state
+    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="valid" />`, {
+        testThemeVars: {
+            "borderColor-DatePicker-success": "rgb(0, 128, 0)",
+            "backgroundColor-DatePicker-success": "rgb(220, 255, 220)",
+            "textColor-DatePicker-success": "rgb(0, 100, 0)",
+        },
+    });
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(0, 128, 0)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(220, 255, 220)");
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(0, 100, 0)");
+}));
+(0, fixtures_1.test)("component displays placeholder text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" placeholder="Select a date" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toContainText("Select a date");
+}));
+(0, fixtures_1.test)("component shows week numbers when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" showWeekNumber="true" />`);
+    yield page.getByTestId("datePicker").click();
+    yield (0, fixtures_1.expect)(page.locator("[role='rowheader']").first()).toBeVisible();
+}));
+(0, fixtures_1.test)("component renders with adornments", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const startText = "From";
+    const endText = "Select";
+    yield initTestBed(`
+    <DatePicker
+      testId="datePicker"
+      startText="${startText}"
+      endText="${endText}"
+      startIcon="test"
+      endIcon="test"
+    />
+  `, {
+        resources: {
+            "icon.test": "resources/bell.svg",
+        },
+    });
+    yield (0, fixtures_1.expect)(page.getByText(startText)).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText(endText)).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker").locator("svg")).toHaveCount(2);
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("component handles disabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" enabled="false" />`);
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeDisabled();
+}));
+(0, fixtures_1.test)("disabled component does not react to user interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`<DatePicker testId="datePicker" enabled="false" />`);
+    yield page.getByTestId("datePicker").click({ force: true });
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("component handles readOnly mode correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const initialDate = "05/25/2024";
+    yield initTestBed(`<DatePicker testId="datePicker" readOnly="true" initialValue="${initialDate}" dateFormat="MM/dd/yyyy" />`);
+    yield page.getByTestId("datePicker").click();
+    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
+    // 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 }) {
+    yield initTestBed(`<DatePicker
+        testId="datePicker"
+        mode="range"
+        minValue="05/25/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();
+}));
+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 }) {
+    yield initTestBed(`<DatePicker
+        testId="datePicker"
+        mode="range"
+        minValue="05/25/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();
+}));
+fixtures_1.test.fixme("component handles disabledDates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    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/);
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("component value API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <Fragment>
+      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
+      <Text testId="text">{datePicker.value}</Text>
+    </Fragment>
+  `);
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("05/25/2024");
+}));
+(0, fixtures_1.test)("component setValue API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <Fragment>
+      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
+      <Button testId="btn" onClick="datePicker.setValue('06/01/2024')" />
+    </Fragment>
+  `);
+    yield page.getByTestId("btn").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("06/01/2024");
+}));
+(0, fixtures_1.test)("component focus API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <Fragment>
+      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
+      <Button testId="focusBtn" onClick="datePicker.focus()" />
+    </Fragment>
+  `);
+    yield page.getByTestId("focusBtn").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
+}));
+(0, fixtures_1.test)("component works correctly within a form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const { testStateDriver } = yield initTestBed(`
+    <Form onSubmit="(data) => testState = data.testField" data="{{ testField: '05/25/2024' }}">
+      <FormItem type="datePicker" label="Choose Date" bindTo="testField" />
+    </Form>
+  `);
+    const formElement = page.locator("form");
+    const dateInput = formElement.getByLabel("Choose Date");
+    yield (0, fixtures_1.expect)(dateInput).toBeVisible();
+    yield (0, fixtures_1.expect)(dateInput).toHaveText("05/25/2024");
+    // Submit the form
+    yield page.locator("[type=submit]").click();
+    // Check that the form was submitted
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("05/25/2024");
+}));

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

@@ -79,7 +79,7 @@ const Chevron = (_a) => {
 exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
     var { id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates = exports.defaultProps.disabledDates, style, className, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, readOnly = false, required, autoFocus = false } = _a, rest = __rest(_a, ["id", "initialValue", "value", "mode", "enabled", "placeholder", "updateState", "validationStatus", "onDidChange", "onFocus", "onBlur", "dateFormat", "showWeekNumber", "weekStartsOn", "minValue", "maxValue", "disabledDates", "style", "className", "registerComponentApi", "inline", "startText", "startIcon", "endText", "endIcon", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "required", "autoFocus"]);
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
-    const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
+    const [_, setIsMenuFocused] = (0, react_2.useState)(false);
     const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
     const [inlineMonth, setInlineMonth] = (0, react_2.useState)();
     const generatedId = (0, react_1.useId)();
@@ -96,13 +96,13 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
         }
         return undefined;
     }, [value, mode]);
-    console.log("sel", selected);
     (0, react_2.useEffect)(() => {
         if (!exports.dateFormats.includes(dateFormat)) {
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
     const startDate = (0, react_2.useMemo)(() => {
+        console.log(minValue, (0, date_fns_1.parse)(minValue, dateFormat, new Date()));
         return minValue ? (0, date_fns_1.parse)(minValue, dateFormat, new Date()) : undefined;
     }, [minValue, dateFormat]);
     const endDate = (0, react_2.useMemo)(() => {
@@ -289,7 +289,7 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker(_a, ref) {
         if (mode === "single") {
             setOpen(false);
         }
-    }, [onDidChange, updateState, mode, dateFormat]);
+    }, [onDidChange, updateState, mode, dateFormat, readOnly]);
     return inline ? ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: ref, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: DatePicker_module_scss_1.default.inlinePickerMenu, ref: (ref) => setReferenceElement(ref), children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: inputId, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, month: inlineMonth, onMonthChange: setInlineMonth, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1, components: {
                     Chevron,
                 } }) })) })) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { ref: setReferenceElement, id: inputId, "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {