@react-stately/datepicker 3.14.1 → 3.15.0

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. */
@@ -118,9 +120,13 @@ const PAGE_STEP = {
   second: 15
 };
 
-// Node seems to convert everything to lowercase...
 const TYPE_MAPPING = {
-  dayperiod: 'dayPeriod'
+  // Node seems to convert everything to lowercase...
+  dayperiod: 'dayPeriod',
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts#named_years
+  relatedYear: 'year',
+  yearName: 'literal', // not editable
+  unknown: 'literal'
 };
 
 export interface DateFieldStateOptions<T extends DateValue = DateValue> extends DatePickerProps<T> {
@@ -176,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
@@ -207,7 +214,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   let allSegments: Partial<typeof EDITABLE_SEGMENTS> = useMemo(() =>
     dateFormatter.formatToParts(new Date())
       .filter(seg => EDITABLE_SEGMENTS[seg.type])
-      .reduce((p, seg) => (p[seg.type] = true, p), {})
+      .reduce((p, seg) => (p[TYPE_MAPPING[seg.type] || seg.type] = true, p), {})
   , [dateFormatter]);
 
   let [validSegments, setValidSegments] = useState<Partial<typeof EDITABLE_SEGMENTS>>(
@@ -256,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());
@@ -268,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.
@@ -323,6 +341,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   return {
     ...validation,
     value: calendarValue,
+    defaultValue: props.defaultValue ?? initialValue,
     dateValue,
     calendar,
     setValue,
@@ -413,18 +432,19 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
   let segments = dateFormatter.formatToParts(dateValue);
   let processedSegments: DateSegment[] = [];
   for (let segment of segments) {
-    let isEditable = EDITABLE_SEGMENTS[segment.type];
-    if (segment.type === 'era' && calendar.getEras().length === 1) {
+    let type = TYPE_MAPPING[segment.type] || segment.type;
+    let isEditable = EDITABLE_SEGMENTS[type];
+    if (type === 'era' && calendar.getEras().length === 1) {
       isEditable = false;
     }
 
-    let isPlaceholder = EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type];
-    let placeholder = EDITABLE_SEGMENTS[segment.type] ? getPlaceholder(segment.type, segment.value, locale) : null;
+    let isPlaceholder = EDITABLE_SEGMENTS[type] && !validSegments[type];
+    let placeholder = EDITABLE_SEGMENTS[type] ? getPlaceholder(type, segment.value, locale) : null;
 
     let dateSegment = {
-      type: TYPE_MAPPING[segment.type] || segment.type,
+      type,
       text: isPlaceholder ? placeholder : segment.value,
-      ...getSegmentLimits(displayValue, segment.type, resolvedOptions),
+      ...getSegmentLimits(displayValue, type, resolvedOptions),
       isPlaceholder,
       placeholder,
       isEditable
@@ -432,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. 
-    if (segment.type === 'hour') {
-      // This marks the start 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.
       processedSegments.push({
         type: 'literal',
         text: '\u2066',
@@ -445,7 +465,7 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
       });
       processedSegments.push(dateSegment);
       // This marks the end of the embedded direction change in the case that the granularity it set to "hour".
-      if (segment.type === granularity) {
+      if (type === granularity) {
         processedSegments.push({
           type: 'literal',
           text: '\u2069',
@@ -455,7 +475,7 @@ function processSegments(dateValue, validSegments, dateFormatter, resolvedOption
           isEditable: false
         });
       }
-    } else if (timeValue.includes(segment.type) && segment.type === granularity) {
+    } else if (timeValue.includes(type) && type === granularity) {
       processedSegments.push(dateSegment);
       // This marks the end of the embedded direction change.
       processedSegments.push({
@@ -467,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 {
@@ -131,7 +135,8 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let setDateRange = (range: RangeValue<DateValue | null>) => {
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (isCompleteRange(range) && timeRange?.start && timeRange?.end) {
+      // Set a placeholder time if the popover is closing so we don't leave the field in an incomplete state.
+      if (isCompleteRange(range) && (shouldClose || (timeRange?.start && timeRange?.end))) {
         commitValue(range, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
@@ -191,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,