Merge branch 'main' into feat/bottom-sheet

Author: segunadebayo

.changeset/lemon-crabs-chew.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/date-picker": patch
+---
+
+Fix issue where datepicker doesn't revert to a valid value when the input value exceeds the min/max and blurred

e2e/date-picker.e2e.ts

@@ -145,3 +145,55 @@ test.describe("datepicker [single]", () => {
   // test("renders previous month when the left arrow is clicked", async ({ page }) => {})
   // test("renders next month when the right arrow is clicked", async ({ page }) => {})
 })
+
+test.describe("datepicker [min-max]", () => {
+  test.beforeEach(async ({ page }) => {
+    I = new DatePickerModel(page)
+    await I.goto("/date-picker-min-max")
+  })
+
+  test("constrains date to max value on blur when out-of-range date entered", async () => {
+    // Min: 2025-07-01, Max: 2025-09-30
+    // Enter a date after max (2025-10-15)
+    await I.type("10/15/2025")
+    await I.clickOutsideToBlur() // Use more reliable blur method
+    await I.seeInputHasValue("09/30/2025") // Should be constrained to max
+    await I.seeSelectedValue("09/30/2025")
+  })
+
+  test("constrains date to min value on blur when out-of-range date entered", async () => {
+    // Min: 2025-07-01, Max: 2025-09-30
+    // Enter a date before min (2025-05-15)
+    await I.type("05/15/2025")
+    await I.clickOutsideToBlur() // Use more reliable blur method
+    await I.seeInputHasValue("07/01/2025") // Should be constrained to min
+    await I.seeSelectedValue("07/01/2025")
+  })
+
+  test("constrains date to max value on Enter when out-of-range date entered", async () => {
+    // Min: 2025-07-01, Max: 2025-09-30
+    // Enter a date after max (2025-11-20)
+    await I.type("11/20/2025")
+    await I.pressKey("Enter")
+    await I.seeInputHasValue("09/30/2025") // Should be constrained to max
+    await I.seeSelectedValue("09/30/2025")
+  })
+
+  test("constrains date to min value on Enter when out-of-range date entered", async () => {
+    // Min: 2025-07-01, Max: 2025-09-30
+    // Enter a date before min (2025-04-10)
+    await I.type("04/10/2025")
+    await I.pressKey("Enter")
+    await I.seeInputHasValue("07/01/2025") // Should be constrained to min
+    await I.seeSelectedValue("07/01/2025")
+  })
+
+  test("allows valid dates within range", async () => {
+    // Min: 2025-07-01, Max: 2025-09-30
+    // Enter a valid date within range (2025-08-15)
+    await I.type("08/15/2025")
+    await I.pressKey("Enter")
+    await I.seeInputHasValue("08/15/2025") // Should remain unchanged
+    await I.seeSelectedValue("08/15/2025")
+  })
+})

e2e/models/datepicker.model.ts

@@ -103,6 +103,13 @@ export class DatePickerModel extends Model {
     return this.page.locator(`${part("table-cell-trigger")}[data-view=day][data-value="${end.toString()}"]`)
   }
 
+  private getViewCell(view: "day" | "month" | "year", value: string | number) {
+    return this.page
+      .locator(`[data-scope=date-picker][data-part=table-cell-trigger][data-view=${view}]`)
+      .filter({ hasText: value.toString() })
+      .first()
+  }
+
   getNextDayCell(opts: DayCellOptions = {}) {
     const { current, step = 1 } = opts
     const now = current ? parseDate(current) : this.today()
@@ -118,17 +125,15 @@ export class DatePickerModel extends Model {
   }
 
   getDayCell(value: string | number) {
-    const date = this.today().set({ day: +value }).toDate(getLocalTimeZone())
-    const v = date.toISOString().split("T")[0]
-    return this.page.locator(`${part("table-cell-trigger")}[data-view=day][data-value="${v}"]`)
+    return this.getViewCell("day", value)
   }
 
   getMonthCell(value: string | number) {
-    return this.page.locator(`${part("table-cell-trigger")}[data-view=month][data-value="${value}"]`)
+    return this.getViewCell("month", value)
   }
 
   getYearCell(value: string | number) {
-    return this.page.locator(`${part("table-cell-trigger")}[data-view=year][data-value="${value}"]`)
+    return this.getViewCell("year", value)
   }
 
   clickTrigger() {
@@ -165,6 +170,28 @@ export class DatePickerModel extends Model {
     return this.getDayCell(value).click()
   }
 
+  selectMonth(value: string) {
+    return this.page.selectOption("[data-scope=date-picker][data-part=month-select]", value)
+  }
+
+  async waitForCalendarRender() {
+    // Wait for calendar table to be visible and stable
+    await this.table.waitFor({ state: "visible" })
+    await this.page.waitForTimeout(100) // Small delay for rendering
+  }
+
+  getCurrentMonthDayCells() {
+    // Only get cells that belong to the current month (not previous/next month spillover)
+    return this.page.locator(
+      "[data-scope=date-picker][data-part=table-cell-trigger][data-view=day]:not([data-outside-range])",
+    )
+  }
+
+  async clickOutsideToBlur() {
+    // Click on a safe area to blur the input
+    await this.page.locator("main").click({ position: { x: 10, y: 10 } })
+  }
+
   seeTodayCellIsFocused() {
     return expect(this.todayCell).toBeFocused()
   }

packages/machines/date-picker/src/date-picker.machine.ts

@@ -1,5 +1,5 @@
 import { DateFormatter } from "@internationalized/date"
-import { createGuards, createMachine, type Params } from "@zag-js/core"
+import { createGuards, createMachine, type Params, type PropFn } from "@zag-js/core"
 import {
   alignDate,
   constrainValue,
@@ -48,6 +48,10 @@ function isDateArrayEqual(a: DateValue[], b: DateValue[] | undefined) {
   return true
 }
 
+function getValueAsString(value: DateValue[], prop: PropFn<DatePickerSchema>) {
+  return value.map((date) => prop("format")(date, { locale: prop("locale"), timeZone: prop("timeZone") }))
+}
+
 export const machine = createMachine<DatePickerSchema>({
   props({ props }) {
     const locale = props.locale || "en-US"
@@ -125,9 +129,7 @@ export const machine = createMachine<DatePickerSchema>({
           const context = getContext()
           const view = context.get("view")
           const value = context.get("value")
-          const valueAsString = value.map((date) =>
-            prop("format")(date, { locale: prop("locale"), timeZone: prop("timeZone") }),
-          )
+          const valueAsString = getValueAsString(value, prop)
           prop("onFocusChange")?.({ value, valueAsString, view, focusedValue })
         },
       })),
@@ -138,9 +140,7 @@ export const machine = createMachine<DatePickerSchema>({
         hash: (v) => v.map((date) => date.toString()).join(","),
         onChange(value) {
           const context = getContext()
-          const valueAsString = value.map((date) =>
-            prop("format")(date, { locale: prop("locale"), timeZone: prop("timeZone") }),
-          )
+          const valueAsString = getValueAsString(value, prop)
           prop("onValueChange")?.({ value, valueAsString, view: context.get("view") })
         },
       })),
@@ -196,10 +196,7 @@ export const machine = createMachine<DatePickerSchema>({
       !isPreviousRangeInvalid(context.get("startValue"), prop("min"), prop("max")),
     isNextVisibleRangeValid: ({ prop, computed }) =>
       !isNextRangeInvalid(computed("endValue"), prop("min"), prop("max")),
-    valueAsString({ context, prop }) {
-      const value = context.get("value")
-      return value.map((date) => prop("format")(date, { locale: prop("locale"), timeZone: prop("timeZone") }))
-    },
+    valueAsString: ({ context, prop }) => getValueAsString(context.get("value"), prop),
   },
 
   effects: ["setupLiveRegion"],
@@ -1074,7 +1071,7 @@ export const machine = createMachine<DatePickerSchema>({
         setFocusedValue(params, date)
       },
 
-      selectParsedDate({ context, event, computed, prop }) {
+      selectParsedDate({ context, event, prop }) {
         if (event.index == null) return
 
         const parse = prop("parse")
@@ -1089,13 +1086,18 @@ export const machine = createMachine<DatePickerSchema>({
 
         if (!date) return
 
+        // constrain date to min/max range
+        date = constrainValue(date, prop("min"), prop("max"))
+
         const values = Array.from(context.get("value"))
         values[event.index] = date
 
         context.set("value", values)
+
         // always sync the input value, even if the selecteddate is not changed
         // e.g. selected value is 02/28/2024, and the input value changed to 02/28
-        context.set("inputValue", computed("valueAsString")[event.index])
+        const valueAsString = getValueAsString(values, prop)
+        context.set("inputValue", valueAsString[event.index])
       },
 
       resetView({ context }) {