fix: Constrain day on blur

packages/@internationalized/date/src/CalendarDate.ts

@@ -371,10 +371,11 @@ export class ZonedDateTime {
   }
 
   /** Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly. */
-  set(fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime {
-    return setZoned(this, fields, disambiguation);
+  set(fields: DateFields & TimeFields, disambiguation?: Disambiguation): ZonedDateTime { 
+    return setZoned(this, fields, disambiguation); 
   }
 
+
   /**
    * Returns a new `ZonedDateTime` with the given field adjusted by a specified amount.
    * When the resulting value reaches the limits of the field, it wraps around.

packages/@internationalized/date/src/calendars/BuddhistCalendar.ts

@@ -49,7 +49,6 @@ export class BuddhistCalendar extends GregorianCalendar {
   getDaysInMonth(date: AnyCalendarDate): number {
     return super.getDaysInMonth(toGregorian(date));
   }
-
   balanceDate(): void {}
 }
 

packages/@internationalized/date/src/calendars/EthiopicCalendar.ts

@@ -92,6 +92,10 @@ export class EthiopicCalendar implements Calendar {
     return getDaysInMonth(date.year, date.month);
   }
 
+  getMaxDays(): number {
+    return 30;
+  }
+
   getMonthsInYear(): number {
     return 13;
   }

packages/@internationalized/date/src/calendars/GregorianCalendar.ts

@@ -109,6 +109,10 @@ export class GregorianCalendar implements Calendar {
     return 12;
   }
 
+  getMaxDays(): number {
+    return 31;
+  }
+
   getDaysInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 366 : 365;
   }

packages/@internationalized/date/src/calendars/HebrewCalendar.ts

@@ -172,6 +172,10 @@ export class HebrewCalendar implements Calendar {
     return getDaysInMonth(date.year, date.month);
   }
 
+  getMaxDays(): number {
+    return 30;
+  }
+
   getMonthsInYear(date: AnyCalendarDate): number {
     return isLeapYear(date.year) ? 13 : 12;
   }

packages/@internationalized/date/src/calendars/IslamicCalendar.ts

@@ -69,6 +69,10 @@ export class IslamicCivilCalendar implements Calendar {
     return length;
   }
 
+  getMaxDays(): number {
+    return 30;
+  }
+
   getMonthsInYear(): number {
     return 12;
   }

packages/@internationalized/date/src/calendars/PersianCalendar.ts

@@ -80,6 +80,10 @@ export class PersianCalendar implements Calendar {
     return isLeapYear ? 30 : 29;
   }
 
+  getMaxDays(): number {
+    return 31;
+  }
+
   getEras(): string[] {
     return ['AP'];
   }

packages/@internationalized/date/src/conversion.ts

@@ -26,7 +26,7 @@ export function epochFromDate(date: AnyDateTime): number {
   return epochFromParts(year, date.month, date.day, date.hour, date.minute, date.second, date.millisecond);
 }
 
-function epochFromParts(year: number, month: number, day: number, hour: number, minute: number, second: number, millisecond: number): number {
+export function epochFromParts(year: number, month: number, day: number, hour: number, minute: number, second: number, millisecond: number): number {
   // Note: Date.UTC() interprets one and two-digit years as being in the
   // 20th century, so don't use it
   let date = new Date();
@@ -306,4 +306,4 @@ export function toTimeZone(date: ZonedDateTime, timeZone: string): ZonedDateTime
 /** Converts the given `ZonedDateTime` into the user's local time zone. */
 export function toLocalTimeZone(date: ZonedDateTime): ZonedDateTime {
   return toTimeZone(date, getLocalTimeZone());
-}
+}

packages/@internationalized/date/src/manipulation.ts

@@ -120,7 +120,7 @@ function constrainMonthDay(date: Mutable<AnyCalendarDate>) {
 
 export function constrain(date: Mutable<AnyCalendarDate>): void {
   if (date.calendar.constrainDate) {
-    date.calendar.constrainDate(date);
+    date.calendar.constrainDate(date); 
   }
 
   date.year = Math.max(1, Math.min(date.calendar.getYearsInEra(date), date.year));
@@ -169,9 +169,9 @@ export function set(date: CalendarDate | CalendarDateTime, fields: DateFields):
   return mutableDate;
 }
 
-export function setTime(value: CalendarDateTime, fields: TimeFields): CalendarDateTime;
-export function setTime(value: Time, fields: TimeFields): Time;
-export function setTime(value: Time | CalendarDateTime, fields: TimeFields): Mutable<Time | CalendarDateTime> {
+export function setTime(value: CalendarDateTime, fields: TimeFields, ): CalendarDateTime;
+export function setTime(value: Time, fields: TimeFields, ): Time;
+export function setTime(value: Time | CalendarDateTime, fields: TimeFields, ): Mutable<Time | CalendarDateTime> {
   let mutableValue: Mutable<Time | CalendarDateTime> = value.copy();
 
   if (fields.hour != null) {
@@ -284,7 +284,7 @@ export function cycleDate(value: CalendarDate | CalendarDateTime, field: DateFie
       mutable.month = cycleValue(value.month, amount, 1, value.calendar.getMonthsInYear(value), options?.round);
       break;
     case 'day':
-      mutable.day = cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
+        mutable.day = cycleValue(value.day, amount, 1, value.calendar.getDaysInMonth(value), options?.round);
       break;
     default:
       throw new Error('Unsupported field ' + field);

packages/@internationalized/date/src/types.ts

@@ -57,6 +57,8 @@ export interface Calendar {
   getDaysInMonth(date: AnyCalendarDate): number,
   /** Returns the number of months in the year of the given date. */
   getMonthsInYear(date: AnyCalendarDate): number,
+  /** Returns the maximum day. */
+  getMaxDays(): number,
   /** Returns the number of years in the era of the given date. */
   getYearsInEra(date: AnyCalendarDate): number,
   /** Returns a list of era identifiers for the calendar. */

packages/@internationalized/date/tests/customCalendarImpl.ts

@@ -22,6 +22,10 @@ export class Custom454Calendar extends GregorianCalendar {
     return weekPattern[date.month - 1] * 7;
   }
 
+  getMaxDays(): number {
+    return 35;
+  }
+
   fromJulianDay(jd: number): CalendarDate {
     const date = super.fromJulianDay(jd);
     let year = date.year;

packages/@react-aria/datepicker/src/useDateField.ts

@@ -81,9 +81,10 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     },
     onBlurWithin: (e) => {
       state.confirmPlaceholder();
-      if (state.value !== valueOnFocus.current) {
+      if (state.shouldValidate) {
         state.commitValidation();
-      }
+        state.setShouldValidate(false);
+      };
       props.onBlur?.(e);
     },
     onFocusWithinChange: props.onFocusChange

packages/@react-aria/datepicker/src/useDateSegment.ts

@@ -83,13 +83,13 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     onIncrementToMax: () => {
       enteredKeys.current = '';
       if (segment.maxValue !== undefined) {
-        state.setSegment(segment.type, segment.maxValue);
+        state.incrementToMinMax(segment.type, segment.maxValue);
       }
     },
     onDecrementToMin: () => {
       enteredKeys.current = '';
       if (segment.minValue !== undefined) {
-        state.setSegment(segment.type, segment.minValue);
+        state.incrementToMinMax(segment.type, segment.minValue);
       }
     }
   });

packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx

@@ -373,7 +373,7 @@ function Example(props) {
   );
 }
 
-function ControlledExample(props) {
+function  ControlledExample(props) {
   let [value, setValue] = React.useState(props.value);
 
   return (

packages/@react-spectrum/datepicker/test/DateField.test.js

@@ -235,7 +235,11 @@ describe('DateField', function () {
           errorMessage="Date unavailable." />
       );
       await user.tab();
-      await user.keyboard('01011980');
+      await user.keyboard('1');
+      await user.keyboard('[ArrowRight]');
+      await user.keyboard('1');
+      await user.keyboard('[ArrowRight]');
+      await user.keyboard('1980[Tab]');
       expect(tree.getByText('Date unavailable.')).toBeInTheDocument();
     });
 
@@ -369,6 +373,7 @@ describe('DateField', function () {
       expect(input).toHaveAttribute('name', 'date');
       await user.tab();
       await user.keyboard('{ArrowUp}');
+      await user.tab({shift: true});
       expect(getDescription()).toBe('Selected Date: March 3, 2020');
       expect(input).toHaveValue('2020-03-03');
 
@@ -457,7 +462,7 @@ describe('DateField', function () {
           expect(document.activeElement).toBe(within(group).getAllByRole('spinbutton')[0]);
 
           await user.keyboard('[Tab][Tab][ArrowUp]');
-
+          
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
           expect(input.validity.valid).toBe(true);
 
@@ -467,9 +472,13 @@ describe('DateField', function () {
 
           await user.tab({shift: true});
           await user.keyboard('2025');
+
           expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
-          expect(input.validity.valid).toBe(false);
+          expect(input.validity.valid).toBe(true);
+
           await user.tab();
+          expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
+          expect(input.validity.valid).toBe(false);
 
           act(() => {getByTestId('form').checkValidity();});
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
@@ -503,12 +512,11 @@ describe('DateField', function () {
           expect(group).toHaveAttribute('aria-describedby');
           expect(getDescription()).toContain('Invalid value');
           expect(document.activeElement).toBe(within(group).getAllByRole('spinbutton')[0]);
-
           await user.keyboard('[ArrowRight][ArrowRight]2024');
 
           expect(getDescription()).toContain('Invalid value');
-          expect(input.validity.valid).toBe(true);
-
+          expect(input.validity.valid).toBe(false);
+          
           await user.tab();
 
           expect(getDescription()).not.toContain('Invalid value');
@@ -628,10 +636,12 @@ describe('DateField', function () {
           await user.keyboard('232023');
 
           expect(group).toHaveAttribute('aria-describedby');
-          expect(input.validity.valid).toBe(true);
+          expect(input.validity.valid).toBe(false);
 
           await user.tab();
           expect(getDescription()).not.toContain('Constraints not satisfied');
+          expect(group).toHaveAttribute('aria-describedby');
+          expect(input.validity.valid).toBe(true);
         });
       });
 
@@ -649,13 +659,13 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Value must be 2/3/2020 or later.');
 
-          await user.keyboard('[Tab][Tab][Tab][ArrowUp]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp][Tab]');
           expect(getDescription()).not.toContain('Value must be 2/3/2020 or later.');
 
-          await user.keyboard('[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp][Tab]');
           expect(getDescription()).toContain('Value must be 2/3/2024 or earlier.');
 
-          await user.keyboard('[ArrowDown]');
+          await user.keyboard('[Tab][Tab][Tab][ArrowDown][Tab]');
           expect(getDescription()).not.toContain('Value must be 2/3/2024 or earlier.');
         });
 
@@ -673,7 +683,7 @@ describe('DateField', function () {
           let getDescription = () => group.getAttribute('aria-describedby').split(' ').map(d => document.getElementById(d).textContent).join(' ');
           expect(getDescription()).toContain('Invalid value');
 
-          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024');
+          await user.keyboard('[Tab][ArrowRight][ArrowRight]2024[Tab]');
           expect(getDescription()).not.toContain('Invalid value');
         });