@react-stately/datepicker 3.14.2 → 3.15.1

package/src/useDateFieldState.ts

@@ -42,6 +42,8 @@ export interface DateSegment {
 export interface DateFieldState extends FormValidationState {
   /** The current field value. */
   value: DateValue | null,
+  /** The default field value. */
+  defaultValue: DateValue | null,
   /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
   /** The calendar system currently in use. */
@@ -180,6 +182,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     props.onChange
   );
 
+  let [initialValue] = useState(value);
   let calendarValue = useMemo(() => convertValue(value, calendar) ?? null, [value, calendar]);
 
   // We keep track of the placeholder date separately in state so that onChange is not called
@@ -260,7 +263,18 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
       setDate(null);
       setPlaceholderDate(createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
       setValidSegments({});
-    } else if (validKeys.length >= allKeys.length || (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')) {
+    } else if (
+      (validKeys.length === 0 && clearedSegment.current == null) ||
+      validKeys.length >= allKeys.length ||
+      (validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== 'dayPeriod')
+    ) {
+      // If the field was empty (no valid segments) or all segments are completed, commit the new value.
+      // When committing from an empty state, mark every segment as valid so value is committed.
+      if (validKeys.length === 0) {
+        validSegments = {...allSegments};
+        setValidSegments(validSegments);
+      }
+
       // The display calendar should not have any effect on the emitted value.
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
       newValue = toCalendar(newValue, v?.calendar || new GregorianCalendar());
@@ -272,8 +286,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   };
 
   let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
-  let segments = useMemo(() => 
-    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity), 
+  let segments = useMemo(() =>
+    processSegments(dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity),
     [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar, locale, granularity]);
 
   // When the era field appears, mark it valid if the year field is already valid.
@@ -327,6 +341,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   return {
     ...validation,
     value: calendarValue,
+    defaultValue: props.defaultValue ?? initialValue,
     dateValue,
     calendar,
     setValue,
@@ -437,9 +452,9 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
 
     // There is an issue in RTL languages where time fields render (minute:hour) instead of (hour:minute).
     // To force an LTR direction on the time field since, we wrap the time segments in LRI (left-to-right) isolate unicode. See https://www.w3.org/International/questions/qa-bidi-unicode-controls.
-    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change. 
+    // These unicode characters will be added to the array of processed segments as literals and will mark the start and end of the embedded direction change.
     if (type === 'hour') {
-      // This marks the start of the embedded direction change. 
+      // This marks the start of the embedded direction change.
       processedSegments.push({
         type: 'literal',
         text: '\u2066',
@@ -472,7 +487,7 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
         isEditable: false
       });
     } else {
-      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal. 
+      // We only want to "wrap" the unicode around segments that are hour, minute, or second. If they aren't, just process as normal.
       processedSegments.push(dateSegment);
     }
   }

package/src/useDatePickerState.ts

@@ -30,6 +30,8 @@ export interface DatePickerStateOptions<T extends DateValue> extends DatePickerP
 export interface DatePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date. */
   value: DateValue | null,
+  /** The default date. */
+  defaultValue: DateValue | null,
   /** Sets the selected date. */
   setValue(value: DateValue | null): void,
   /**
@@ -74,6 +76,7 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
 export function useDatePickerState<T extends DateValue = DateValue>(props: DatePickerStateOptions<T>): DatePickerState {
   let overlayState = useOverlayTriggerState(props);
   let [value, setValue] = useControlledState<DateValue | null, MappedDateValue<T> | null>(props.value, props.defaultValue || null, props.onChange);
+  let [initialValue] = useState(value);
 
   let v = (value || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
@@ -161,6 +164,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
   return {
     ...validation,
     value,
+    defaultValue: props.defaultValue ?? initialValue,
     setValue,
     dateValue: selectedDate,
     timeValue: selectedTime,

package/src/useDateRangePickerState.ts

@@ -32,6 +32,8 @@ type TimeRange = RangeValue<TimeValue>;
 export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date range. */
   value: RangeValue<DateValue | null>,
+  /** The default selected date range. */
+  defaultValue: DateRange | null,
   /** Sets the selected date range. */
   setValue(value: DateRange | null): void,
   /**
@@ -83,6 +85,7 @@ export interface DateRangePickerState extends OverlayTriggerState, FormValidatio
 export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState {
   let overlayState = useOverlayTriggerState(props);
   let [controlledValue, setControlledValue] = useControlledState<DateRange | null, RangeValue<MappedDateValue<T>> | null>(props.value, props.defaultValue || null, props.onChange);
+  let [initialValue] = useState(controlledValue);
   let [placeholderValue, setPlaceholderValue] = useState<RangeValue<DateValue | null>>(() => controlledValue || {start: null, end: null});
 
   // Reset the placeholder if the value prop is set to null.
@@ -93,8 +96,9 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
 
   let value = controlledValue || placeholderValue;
 
-  let setValue = (value: RangeValue<DateValue | null> | null) => {
-    setPlaceholderValue(value || {start: null, end: null});
+  let setValue = (newValue: RangeValue<DateValue | null> | null) => {
+    value = newValue || {start: null, end: null};
+    setPlaceholderValue(value);
     if (isCompleteRange(value)) {
       setControlledValue(value);
     } else {
@@ -192,6 +196,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   return {
     ...validation,
     value,
+    defaultValue: props.defaultValue ?? initialValue,
     setValue,
     dateRange,
     timeRange,

package/src/useTimeFieldState.ts

@@ -36,19 +36,20 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     placeholderValue = new Time(),
     minValue,
     maxValue,
+    defaultValue,
     granularity,
     validate
   } = props;
 
   let [value, setValue] = useControlledState<TimeValue | null, MappedTimeValue<T> | null>(
     props.value,
-    props.defaultValue ?? null,
+    defaultValue ?? null,
     props.onChange
   );
 
   let v = value || placeholderValue;
   let day = v && 'day' in v ? v : undefined;
-  let defaultValueTimeZone = props.defaultValue && 'timeZone' in props.defaultValue ? props.defaultValue.timeZone : undefined;
+  let defaultValueTimeZone = defaultValue && 'timeZone' in defaultValue ? defaultValue.timeZone : undefined;
   let placeholderDate = useMemo(() => {
     let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
 
@@ -59,6 +60,7 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
 
   let timeValue = useMemo(() => value && 'day' in value ? toTime(value) : value as Time, [value]);
   let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]);
+  let defaultDateTime = useMemo(() => defaultValue == null ? null : convertValue(defaultValue), [defaultValue]);
   let onChange = newValue => {
     setValue(day || defaultValueTimeZone ? newValue : newValue && toTime(newValue));
   };
@@ -66,7 +68,7 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
   let state = useDateFieldState({
     ...props,
     value: dateTime,
-    defaultValue: undefined,
+    defaultValue: defaultDateTime,
     minValue: minDate,
     maxValue: maxDate,
     onChange,

package/src/utils.ts

@@ -25,7 +25,14 @@ function getLocale() {
   // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided
   // validation messages, which to not respect our provider's language.
   // @ts-ignore
-  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';
+  let locale = typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US';
+
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([locale]);
+  } catch {
+    locale = 'en-US';
+  }
+  return locale;
 }
 
 export function getValidationResult(