@react-stately/datepicker 3.10.2 → 3.11.0

package/dist/utils.mjs

@@ -1,5 +1,5 @@
 import $bUJMr$intlStringsmodulejs from "./intlStrings.mjs";
-import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
+import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, getLocalTimeZone as $bUJMr$getLocalTimeZone, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
 import {LocalizedStringDictionary as $bUJMr$LocalizedStringDictionary, LocalizedStringFormatter as $bUJMr$LocalizedStringFormatter} from "@internationalized/string";
 import {mergeValidation as $bUJMr$mergeValidation, VALID_VALIDITY_STATE as $bUJMr$VALID_VALIDITY_STATE} from "@react-stately/form";
 import {useState as $bUJMr$useState} from "react";
@@ -42,10 +42,10 @@ function $35a22f14a1f04b11$export$f18627323ab57ac0(value, minValue, maxValue, is
         let formatter = new (0, $bUJMr$LocalizedStringFormatter)(locale, strings);
         let dateFormatter = new (0, $bUJMr$DateFormatter)(locale, $35a22f14a1f04b11$export$7e319ea407e63bc0({}, options));
         let timeZone = dateFormatter.resolvedOptions().timeZone;
-        if (rangeUnderflow) errors.push(formatter.format('rangeUnderflow', {
+        if (rangeUnderflow && minValue != null) errors.push(formatter.format('rangeUnderflow', {
             minValue: dateFormatter.format(minValue.toDate(timeZone))
         }));
-        if (rangeOverflow) errors.push(formatter.format('rangeOverflow', {
+        if (rangeOverflow && maxValue != null) errors.push(formatter.format('rangeOverflow', {
             maxValue: dateFormatter.format(maxValue.toDate(timeZone))
         }));
         if (isUnavailable) errors.push(formatter.format('unavailableDate'));
@@ -69,10 +69,12 @@ function $35a22f14a1f04b11$export$f18627323ab57ac0(value, minValue, maxValue, is
     };
 }
 function $35a22f14a1f04b11$export$80ff8fc0ae339c13(value, minValue, maxValue, isDateUnavailable, options) {
-    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.start, minValue, maxValue, isDateUnavailable, options);
-    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.end, minValue, maxValue, isDateUnavailable, options);
+    var _value_start;
+    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null, minValue, maxValue, isDateUnavailable, options);
+    var _value_end;
+    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null, minValue, maxValue, isDateUnavailable, options);
     let result = (0, $bUJMr$mergeValidation)(startValidation, endValidation);
-    if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    if ((value === null || value === void 0 ? void 0 : value.end) != null && value.start != null && value.end.compare(value.start) < 0) {
         let strings = (0, $bUJMr$LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/datepicker') || $35a22f14a1f04b11$var$dictionary;
         result = (0, $bUJMr$mergeValidation)(result, {
             isInvalid: true,
@@ -141,7 +143,7 @@ function $35a22f14a1f04b11$export$61a490a80c552550(value, calendar) {
 }
 function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
     if (placeholderValue) return $35a22f14a1f04b11$export$61a490a80c552550(placeholderValue, calendar);
-    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone).set({
+    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone !== null && timeZone !== void 0 ? timeZone : (0, $bUJMr$getLocalTimeZone)()).set({
         hour: 0,
         minute: 0,
         second: 0,

package/dist/utils.module.js

@@ -1,5 +1,5 @@
 import $bUJMr$intlStringsmodulejs from "./intlStrings.module.js";
-import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
+import {DateFormatter as $bUJMr$DateFormatter, Time as $bUJMr$Time, toCalendar as $bUJMr$toCalendar, now as $bUJMr$now, getLocalTimeZone as $bUJMr$getLocalTimeZone, toCalendarDate as $bUJMr$toCalendarDate, toCalendarDateTime as $bUJMr$toCalendarDateTime} from "@internationalized/date";
 import {LocalizedStringDictionary as $bUJMr$LocalizedStringDictionary, LocalizedStringFormatter as $bUJMr$LocalizedStringFormatter} from "@internationalized/string";
 import {mergeValidation as $bUJMr$mergeValidation, VALID_VALIDITY_STATE as $bUJMr$VALID_VALIDITY_STATE} from "@react-stately/form";
 import {useState as $bUJMr$useState} from "react";
@@ -42,10 +42,10 @@ function $35a22f14a1f04b11$export$f18627323ab57ac0(value, minValue, maxValue, is
         let formatter = new (0, $bUJMr$LocalizedStringFormatter)(locale, strings);
         let dateFormatter = new (0, $bUJMr$DateFormatter)(locale, $35a22f14a1f04b11$export$7e319ea407e63bc0({}, options));
         let timeZone = dateFormatter.resolvedOptions().timeZone;
-        if (rangeUnderflow) errors.push(formatter.format('rangeUnderflow', {
+        if (rangeUnderflow && minValue != null) errors.push(formatter.format('rangeUnderflow', {
             minValue: dateFormatter.format(minValue.toDate(timeZone))
         }));
-        if (rangeOverflow) errors.push(formatter.format('rangeOverflow', {
+        if (rangeOverflow && maxValue != null) errors.push(formatter.format('rangeOverflow', {
             maxValue: dateFormatter.format(maxValue.toDate(timeZone))
         }));
         if (isUnavailable) errors.push(formatter.format('unavailableDate'));
@@ -69,10 +69,12 @@ function $35a22f14a1f04b11$export$f18627323ab57ac0(value, minValue, maxValue, is
     };
 }
 function $35a22f14a1f04b11$export$80ff8fc0ae339c13(value, minValue, maxValue, isDateUnavailable, options) {
-    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.start, minValue, maxValue, isDateUnavailable, options);
-    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0(value === null || value === void 0 ? void 0 : value.end, minValue, maxValue, isDateUnavailable, options);
+    var _value_start;
+    let startValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_start = value === null || value === void 0 ? void 0 : value.start) !== null && _value_start !== void 0 ? _value_start : null, minValue, maxValue, isDateUnavailable, options);
+    var _value_end;
+    let endValidation = $35a22f14a1f04b11$export$f18627323ab57ac0((_value_end = value === null || value === void 0 ? void 0 : value.end) !== null && _value_end !== void 0 ? _value_end : null, minValue, maxValue, isDateUnavailable, options);
     let result = (0, $bUJMr$mergeValidation)(startValidation, endValidation);
-    if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    if ((value === null || value === void 0 ? void 0 : value.end) != null && value.start != null && value.end.compare(value.start) < 0) {
         let strings = (0, $bUJMr$LocalizedStringDictionary).getGlobalDictionaryForPackage('@react-stately/datepicker') || $35a22f14a1f04b11$var$dictionary;
         result = (0, $bUJMr$mergeValidation)(result, {
             isInvalid: true,
@@ -141,7 +143,7 @@ function $35a22f14a1f04b11$export$61a490a80c552550(value, calendar) {
 }
 function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
     if (placeholderValue) return $35a22f14a1f04b11$export$61a490a80c552550(placeholderValue, calendar);
-    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone).set({
+    let date = (0, $bUJMr$toCalendar)((0, $bUJMr$now)(timeZone !== null && timeZone !== void 0 ? timeZone : (0, $bUJMr$getLocalTimeZone)()).set({
         hour: 0,
         minute: 0,
         second: 0,

package/dist/utils.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/datepicker/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';\nimport {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';\n// @ts-ignore\nimport i18nMessages from '../intl/*.json';\nimport {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';\nimport {mergeValidation, VALID_VALIDITY_STATE} from '@react-stately/form';\nimport {RangeValue, ValidationResult} from '@react-types/shared';\nimport {useState} from 'react';\n\nconst dictionary = new LocalizedStringDictionary(i18nMessages);\n\nfunction getLocale() {\n  // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided\n  // validation messages, which to not respect our provider's language.\n  // @ts-ignore\n  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';\n}\n\nexport function getValidationResult(\n  value: DateValue,\n  minValue: DateValue,\n  maxValue: DateValue,\n  isDateUnavailable: (v: DateValue) => boolean,\n  options: FormatterOptions\n): ValidationResult {\n  let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;\n  let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;\n  let isUnavailable = (value != null && isDateUnavailable?.(value)) || false;\n  let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;\n  let errors = [];\n\n  if (isInvalid) {\n    let locale = getLocale();\n    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;\n    let formatter = new LocalizedStringFormatter(locale, strings);\n    let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options));\n    let timeZone = dateFormatter.resolvedOptions().timeZone;\n\n    if (rangeUnderflow) {\n      errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));\n    }\n\n    if (rangeOverflow) {\n      errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));\n    }\n\n    if (isUnavailable) {\n      errors.push(formatter.format('unavailableDate'));\n    }\n  }\n\n  return {\n    isInvalid,\n    validationErrors: errors,\n    validationDetails: {\n      badInput: isUnavailable,\n      customError: false,\n      patternMismatch: false,\n      rangeOverflow,\n      rangeUnderflow,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valueMissing: false,\n      valid: !isInvalid\n    }\n  };\n}\n\nexport function getRangeValidationResult(\n  value: RangeValue<DateValue>,\n  minValue: DateValue,\n  maxValue: DateValue,\n  isDateUnavailable: (v: DateValue) => boolean,\n  options: FormatterOptions\n) {\n  let startValidation = getValidationResult(\n    value?.start,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    options\n  );\n\n  let endValidation = getValidationResult(\n    value?.end,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    options\n  );\n\n  let result = mergeValidation(startValidation, endValidation);\n  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {\n    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;\n    result = mergeValidation(result, {\n      isInvalid: true,\n      validationErrors: [strings.getStringForLocale('rangeReversed', getLocale())],\n      validationDetails: {\n        ...VALID_VALIDITY_STATE,\n        rangeUnderflow: true,\n        rangeOverflow: true,\n        valid: false\n      }\n    });\n  }\n\n  return result;\n}\n\nexport type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;\nexport interface FormatterOptions {\n  timeZone?: string,\n  hideTimeZone?: boolean,\n  granularity?: DatePickerProps<any>['granularity'],\n  maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],\n  hourCycle?: 12 | 24,\n  showEra?: boolean,\n  shouldForceLeadingZeros?: boolean\n}\n\nconst DEFAULT_FIELD_OPTIONS: FieldOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n  second: '2-digit'\n};\n\nconst TWO_DIGIT_FIELD_OPTIONS: FieldOptions = {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit'\n};\n\nexport function getFormatOptions(\n  fieldOptions: FieldOptions,\n  options: FormatterOptions\n): Intl.DateTimeFormatOptions {\n  let defaultFieldOptions = options.shouldForceLeadingZeros ? TWO_DIGIT_FIELD_OPTIONS : DEFAULT_FIELD_OPTIONS;\n  fieldOptions = {...defaultFieldOptions, ...fieldOptions};\n  let granularity = options.granularity || 'minute';\n  let keys = Object.keys(fieldOptions);\n  let startIdx = keys.indexOf(options.maxGranularity ?? 'year');\n  if (startIdx < 0) {\n    startIdx = 0;\n  }\n\n  let endIdx = keys.indexOf(granularity);\n  if (endIdx < 0) {\n    endIdx = 2;\n  }\n\n  if (startIdx > endIdx) {\n    throw new Error('maxGranularity must be greater than granularity');\n  }\n\n  let opts: Intl.DateTimeFormatOptions = keys.slice(startIdx, endIdx + 1).reduce((opts, key) => {\n    opts[key] = fieldOptions[key];\n    return opts;\n  }, {});\n\n  if (options.hourCycle != null) {\n    opts.hour12 = options.hourCycle === 12;\n  }\n\n  opts.timeZone = options.timeZone || 'UTC';\n\n  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';\n  if (hasTime && options.timeZone && !options.hideTimeZone) {\n    opts.timeZoneName = 'short';\n  }\n\n  if (options.showEra && startIdx === 0) {\n    opts.era = 'short';\n  }\n\n  return opts;\n}\n\nexport function getPlaceholderTime(placeholderValue: DateValue): TimeValue {\n  if (placeholderValue && 'hour' in placeholderValue) {\n    return placeholderValue;\n  }\n\n  return new Time();\n}\n\nexport function convertValue(value: DateValue, calendar: Calendar): DateValue {\n  if (value === null) {\n    return null;\n  }\n\n  if (!value) {\n    return undefined;\n  }\n\n  return toCalendar(value, calendar);\n}\n\n\nexport function createPlaceholderDate(placeholderValue: DateValue, granularity: string, calendar: Calendar, timeZone: string) {\n  if (placeholderValue) {\n    return convertValue(placeholderValue, calendar);\n  }\n\n  let date = toCalendar(now(timeZone).set({\n    hour: 0,\n    minute: 0,\n    second: 0,\n    millisecond: 0\n  }), calendar);\n\n  if (granularity === 'year' || granularity === 'month' || granularity === 'day') {\n    return toCalendarDate(date);\n  }\n\n  if (!timeZone) {\n    return toCalendarDateTime(date);\n  }\n\n  return date;\n}\n\nexport function useDefaultProps(v: DateValue, granularity: Granularity): [Granularity, string] {\n  // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.\n  let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);\n  let defaultGranularity: Granularity = (v && 'minute' in v ? 'minute' : 'day');\n\n  // props.granularity must actually exist in the value if one is provided.\n  if (v && granularity && !(granularity in v)) {\n    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());\n  }\n\n  let [lastValue, setLastValue] = useState<[Granularity, string]>([defaultGranularity, defaultTimeZone]);\n\n  // If the granularity or time zone changed, update the last value.\n  if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone)) {\n    setLastValue([defaultGranularity, defaultTimeZone]);\n  }\n\n  if (!granularity) {\n    granularity = v ? defaultGranularity : lastValue[0];\n  }\n\n  let timeZone = v ? defaultTimeZone : lastValue[1];\n  return [granularity, timeZone];\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/datepicker/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Calendar, DateFormatter, getLocalTimeZone, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';\nimport {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';\n// @ts-ignore\nimport i18nMessages from '../intl/*.json';\nimport {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';\nimport {mergeValidation, VALID_VALIDITY_STATE} from '@react-stately/form';\nimport {RangeValue, ValidationResult} from '@react-types/shared';\nimport {useState} from 'react';\n\nconst dictionary = new LocalizedStringDictionary(i18nMessages);\n\nfunction getLocale() {\n  // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided\n  // validation messages, which to not respect our provider's language.\n  // @ts-ignore\n  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';\n}\n\nexport function getValidationResult(\n  value: DateValue | null,\n  minValue: DateValue | null | undefined,\n  maxValue: DateValue | null | undefined,\n  isDateUnavailable: ((v: DateValue) => boolean) | undefined,\n  options: FormatterOptions\n): ValidationResult {\n  let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;\n  let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;\n  let isUnavailable = (value != null && isDateUnavailable?.(value)) || false;\n  let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;\n  let errors: string[] = [];\n\n  if (isInvalid) {\n    let locale = getLocale();\n    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;\n    let formatter = new LocalizedStringFormatter(locale, strings);\n    let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options));\n    let timeZone = dateFormatter.resolvedOptions().timeZone;\n\n    if (rangeUnderflow && minValue != null) {\n      errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));\n    }\n\n    if (rangeOverflow && maxValue != null) {\n      errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));\n    }\n\n    if (isUnavailable) {\n      errors.push(formatter.format('unavailableDate'));\n    }\n  }\n\n  return {\n    isInvalid,\n    validationErrors: errors,\n    validationDetails: {\n      badInput: isUnavailable,\n      customError: false,\n      patternMismatch: false,\n      rangeOverflow,\n      rangeUnderflow,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valueMissing: false,\n      valid: !isInvalid\n    }\n  };\n}\n\nexport function getRangeValidationResult(\n  value: RangeValue<DateValue | null> | null,\n  minValue: DateValue | null | undefined,\n  maxValue: DateValue | null | undefined,\n  isDateUnavailable: ((v: DateValue) => boolean) | undefined,\n  options: FormatterOptions\n) {\n  let startValidation = getValidationResult(\n    value?.start ?? null,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    options\n  );\n\n  let endValidation = getValidationResult(\n    value?.end ?? null,\n    minValue,\n    maxValue,\n    isDateUnavailable,\n    options\n  );\n\n  let result = mergeValidation(startValidation, endValidation);\n  if (value?.end != null && value.start != null && value.end.compare(value.start) < 0) {\n    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;\n    result = mergeValidation(result, {\n      isInvalid: true,\n      validationErrors: [strings.getStringForLocale('rangeReversed', getLocale())],\n      validationDetails: {\n        ...VALID_VALIDITY_STATE,\n        rangeUnderflow: true,\n        rangeOverflow: true,\n        valid: false\n      }\n    });\n  }\n\n  return result;\n}\n\nexport type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;\nexport interface FormatterOptions {\n  timeZone?: string,\n  hideTimeZone?: boolean,\n  granularity?: DatePickerProps<any>['granularity'],\n  maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],\n  hourCycle?: 12 | 24,\n  showEra?: boolean,\n  shouldForceLeadingZeros?: boolean\n}\n\nconst DEFAULT_FIELD_OPTIONS: FieldOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n  second: '2-digit'\n};\n\nconst TWO_DIGIT_FIELD_OPTIONS: FieldOptions = {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit'\n};\n\nexport function getFormatOptions(\n  fieldOptions: FieldOptions,\n  options: FormatterOptions\n): Intl.DateTimeFormatOptions {\n  let defaultFieldOptions = options.shouldForceLeadingZeros ? TWO_DIGIT_FIELD_OPTIONS : DEFAULT_FIELD_OPTIONS;\n  fieldOptions = {...defaultFieldOptions, ...fieldOptions};\n  let granularity = options.granularity || 'minute';\n  let keys = Object.keys(fieldOptions);\n  let startIdx = keys.indexOf(options.maxGranularity ?? 'year');\n  if (startIdx < 0) {\n    startIdx = 0;\n  }\n\n  let endIdx = keys.indexOf(granularity);\n  if (endIdx < 0) {\n    endIdx = 2;\n  }\n\n  if (startIdx > endIdx) {\n    throw new Error('maxGranularity must be greater than granularity');\n  }\n\n  let opts: Intl.DateTimeFormatOptions = keys.slice(startIdx, endIdx + 1).reduce((opts, key) => {\n    opts[key] = fieldOptions[key];\n    return opts;\n  }, {});\n\n  if (options.hourCycle != null) {\n    opts.hour12 = options.hourCycle === 12;\n  }\n\n  opts.timeZone = options.timeZone || 'UTC';\n\n  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';\n  if (hasTime && options.timeZone && !options.hideTimeZone) {\n    opts.timeZoneName = 'short';\n  }\n\n  if (options.showEra && startIdx === 0) {\n    opts.era = 'short';\n  }\n\n  return opts;\n}\n\nexport function getPlaceholderTime(placeholderValue: DateValue | null | undefined): TimeValue {\n  if (placeholderValue && 'hour' in placeholderValue) {\n    return placeholderValue;\n  }\n\n  return new Time();\n}\n\nexport function convertValue(value: DateValue | null | undefined, calendar: Calendar): DateValue | null | undefined {\n  if (value === null) {\n    return null;\n  }\n\n  if (!value) {\n    return undefined;\n  }\n\n  return toCalendar(value, calendar);\n}\n\n\nexport function createPlaceholderDate(placeholderValue: DateValue | null | undefined, granularity: string, calendar: Calendar, timeZone: string | undefined): DateValue {\n  if (placeholderValue) {\n    return convertValue(placeholderValue, calendar)!;\n  }\n\n  let date = toCalendar(now(timeZone ?? getLocalTimeZone()).set({\n    hour: 0,\n    minute: 0,\n    second: 0,\n    millisecond: 0\n  }), calendar);\n\n  if (granularity === 'year' || granularity === 'month' || granularity === 'day') {\n    return toCalendarDate(date);\n  }\n\n  if (!timeZone) {\n    return toCalendarDateTime(date);\n  }\n\n  return date;\n}\n\nexport function useDefaultProps(v: DateValue | null, granularity: Granularity | undefined): [Granularity, string | undefined] {\n  // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.\n  let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);\n  let defaultGranularity: Granularity = (v && 'minute' in v ? 'minute' : 'day');\n\n  // props.granularity must actually exist in the value if one is provided.\n  if (v && granularity && !(granularity in v)) {\n    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());\n  }\n\n  let [lastValue, setLastValue] = useState<[Granularity, string | undefined]>([defaultGranularity, defaultTimeZone]);\n\n  // If the granularity or time zone changed, update the last value.\n  if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone)) {\n    setLastValue([defaultGranularity, defaultTimeZone]);\n  }\n\n  if (!granularity) {\n    granularity = v ? defaultGranularity : lastValue[0];\n  }\n\n  let timeZone = v ? defaultTimeZone : lastValue[1];\n  return [granularity, timeZone];\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/datepicker",
-  "version": "3.10.2",
+  "version": "3.11.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,20 +22,20 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.5",
-    "@internationalized/string": "^3.2.3",
-    "@react-stately/form": "^3.0.5",
-    "@react-stately/overlays": "^3.6.10",
-    "@react-stately/utils": "^3.10.3",
-    "@react-types/datepicker": "^3.8.2",
-    "@react-types/shared": "^3.24.1",
+    "@internationalized/date": "^3.6.0",
+    "@internationalized/string": "^3.2.5",
+    "@react-stately/form": "^3.1.0",
+    "@react-stately/overlays": "^3.6.12",
+    "@react-stately/utils": "^3.10.5",
+    "@react-types/datepicker": "^3.9.0",
+    "@react-types/shared": "^3.26.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "faf0e18467231422cb7a06eb92a74d04e271f1e8"
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
 }

package/src/useDateFieldState.ts

@@ -12,7 +12,7 @@
 
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
 import {convertValue, createPlaceholderDate, FieldOptions, FormatterOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
-import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue} from '@react-types/datepicker';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
@@ -41,13 +41,13 @@ export interface DateSegment {
 
 export interface DateFieldState extends FormValidationState {
   /** The current field value. */
-  value: DateValue,
+  value: DateValue | null,
   /** The current value, converted to a native JavaScript `Date` object.  */
   dateValue: Date,
   /** The calendar system currently in use. */
   calendar: Calendar,
   /** Sets the field's value. */
-  setValue(value: DateValue): void,
+  setValue(value: DateValue | null): void,
   /** A list of segments for the current value. */
   segments: DateSegment[],
   /** A date formatter configured for the current locale and format. */
@@ -56,7 +56,7 @@ export interface DateFieldState extends FormValidationState {
    * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -150,15 +150,15 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     locale,
     createCalendar,
     hideTimeZone,
-    isDisabled,
-    isReadOnly,
-    isRequired,
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
     minValue,
     maxValue,
     isDateUnavailable
   } = props;
 
-  let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
+  let v: DateValue | null = props.value || props.defaultValue || props.placeholderValue || null;
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let timeZone = defaultTimeZone || 'UTC';
 
@@ -170,13 +170,13 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
   let defaultFormatter = useMemo(() => new DateFormatter(locale), [locale]);
   let calendar = useMemo(() => createCalendar(defaultFormatter.resolvedOptions().calendar), [createCalendar, defaultFormatter]);
 
-  let [value, setDate] = useControlledState<DateValue>(
+  let [value, setDate] = useControlledState<DateValue | null, MappedDateValue<T> | null>(
     props.value,
-    props.defaultValue,
+    props.defaultValue ?? null,
     props.onChange
   );
 
-  let calendarValue = useMemo(() => convertValue(value, calendar), [value, calendar]);
+  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
   // until all segments are set. If the value === null (not undefined), then assume the component
@@ -214,7 +214,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     () => props.value || props.defaultValue ? {...allSegments} : {}
   );
 
-  let clearedSegment = useRef<string>(undefined);
+  let clearedSegment = useRef<string | null>(null);
 
   // Reset placeholder when calendar changes
   let lastCalendarIdentifier = useRef(calendar.identifier);
@@ -330,12 +330,12 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
 
   let validation = useFormValidationState({
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     ...validation,
@@ -364,7 +364,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     decrementPage(part) {
       adjustSegment(part, -(PAGE_STEP[part] || 1));
     },
-    setSegment(part, v) {
+    setSegment(part, v: string | number) {
       markValid(part);
       setValue(setSegment(displayValue, part, v, resolvedOptions));
     },
@@ -519,9 +519,11 @@ function addSegment(value: DateValue, part: string, amount: number, options: Int
         });
     }
   }
+
+  throw new Error('Unknown segment: ' + part);
 }
 
-function setSegment(value: DateValue, part: string, segmentValue: number, options: Intl.ResolvedDateTimeFormatOptions) {
+function setSegment(value: DateValue, part: string, segmentValue: number | string, options: Intl.ResolvedDateTimeFormatOptions) {
   switch (part) {
     case 'day':
     case 'month':
@@ -530,7 +532,7 @@ function setSegment(value: DateValue, part: string, segmentValue: number, option
       return value.set({[part]: segmentValue});
   }
 
-  if ('hour' in value) {
+  if ('hour' in value && typeof segmentValue === 'number') {
     switch (part) {
       case 'dayPeriod': {
         let hours = value.hour;
@@ -559,4 +561,6 @@ function setSegment(value: DateValue, part: string, segmentValue: number, option
         return value.set({[part]: segmentValue});
     }
   }
+
+  throw new Error('Unknown segment: ' + part);
 }

package/src/useDatePickerState.ts

@@ -11,7 +11,7 @@
  */
 
 import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DatePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
@@ -36,14 +36,14 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
    * The date portion of the value. This may be set prior to `value` if the user has
    * selected a date but has not yet selected a time.
    */
-  dateValue: DateValue,
+  dateValue: DateValue | null,
   /** Sets the date portion of the value. */
-  setDateValue(value: CalendarDate): void,
+  setDateValue(value: DateValue): void,
   /**
    * The time portion of the value. This may be set prior to `value` if the user has
    * selected a time but has not yet selected a date.
    */
-  timeValue: TimeValue,
+  timeValue: TimeValue | null,
   /** Sets the time portion of the value. */
   setTimeValue(value: TimeValue): void,
   /** The granularity for the field, based on the `granularity` prop and current value. */
@@ -58,7 +58,7 @@ export interface DatePickerState extends OverlayTriggerState, FormValidationStat
    * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** Formats the selected value using the given options. */
@@ -73,16 +73,16 @@ 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>(props.value, props.defaultValue || null, props.onChange);
+  let [value, setValue] = useControlledState<DateValue | null, MappedDateValue<T> | null>(props.value, props.defaultValue || null, props.onChange);
 
-  let v = (value || props.placeholderValue);
+  let v = (value || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let dateValue = value != null ? value.toDate(defaultTimeZone ?? 'UTC') : null;
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
-  let [selectedDate, setSelectedDate] = useState<DateValue>(null);
-  let [selectedTime, setSelectedTime] = useState<TimeValue>(null);
+  let [selectedDate, setSelectedDate] = useState<DateValue | null>(null);
+  let [selectedTime, setSelectedTime] = useState<TimeValue | null>(null);
 
   if (value) {
     selectedDate = value;
@@ -117,12 +117,12 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
 
   let validation = useFormValidationState({
     ...props,
-    value,
+    value: value as MappedDateValue<T> | null,
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   let commitValue = (date: DateValue, time: TimeValue) => {
     setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
@@ -136,7 +136,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
       if (selectedTime || shouldClose) {
-        commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue));
+        commitValue(newValue, selectedTime || getPlaceholderTime(props.defaultValue || props.placeholderValue));
       } else {
         setSelectedDate(newValue);
       }
@@ -174,7 +174,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
       // If only the time was set and not the date, don't commit. The state will be preserved until
       // the user opens the popover again.
       if (!isOpen && !value && selectedDate && hasTime) {
-        commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue));
+        commitValue(selectedDate, selectedTime || getPlaceholderTime(props.defaultValue || props.placeholderValue));
       }
 
       overlayState.setOpen(isOpen);

package/src/useDateRangePickerState.ts

@@ -12,7 +12,7 @@
 
 
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
-import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {DateRange, DateRangePickerProps, DateValue, Granularity, MappedDateValue, TimeValue} from '@react-types/datepicker';
 import {FieldOptions, FormatterOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
@@ -31,29 +31,29 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 type TimeRange = RangeValue<TimeValue>;
 export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
   /** The currently selected date range. */
-  value: DateRange | null,
+  value: RangeValue<DateValue | null>,
   /** Sets the selected date range. */
   setValue(value: DateRange | null): void,
   /**
    * The date portion of the selected range. This may be set prior to `value` if the user has
    * selected a date range but has not yet selected a time range.
    */
-  dateRange: DateRange | null,
+  dateRange: RangeValue<DateValue | null> | null,
   /** Sets the date portion of the selected range. */
   setDateRange(value: DateRange): void,
   /**
    * The time portion of the selected range. This may be set prior to `value` if the user has
    * selected a time range but has not yet selected a date range.
    */
-  timeRange: TimeRange | null,
+  timeRange: RangeValue<TimeValue | null> | null,
   /** Sets the time portion of the selected range. */
   setTimeRange(value: TimeRange): void,
   /** Sets the date portion of either the start or end of the selected range. */
-  setDate(part: 'start' | 'end', value: DateValue): void,
+  setDate(part: 'start' | 'end', value: DateValue | null): void,
   /** Sets the time portion of either the start or end of the selected range. */
-  setTime(part: 'start' | 'end', value: TimeValue): void,
+  setTime(part: 'start' | 'end', value: TimeValue | null): void,
   /** Sets the date and time of either the start or end of the selected range. */
-  setDateTime(part: 'start' | 'end', value: DateValue): void,
+  setDateTime(part: 'start' | 'end', value: DateValue | null): void,
   /** The granularity for the field, based on the `granularity` prop and current value. */
   granularity: Granularity,
   /** Whether the date range picker supports selecting times, according to the `granularity` prop and current value. */
@@ -66,11 +66,11 @@ export interface DateRangePickerState extends OverlayTriggerState, FormValidatio
    * The current validation state of the date range picker, based on the `validationState`, `minValue`, and `maxValue` props.
    * @deprecated Use `isInvalid` instead.
    */
-  validationState: ValidationState,
+  validationState: ValidationState | null,
   /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
   isInvalid: boolean,
   /** Formats the selected range using the given options. */
-  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string} | null,
   /** Gets a formatter based on state's props. */
   getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
 }
@@ -82,8 +82,8 @@ 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>(props.value, props.defaultValue || null, props.onChange);
-  let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
+  let [controlledValue, setControlledValue] = useControlledState<DateRange | null, RangeValue<MappedDateValue<T>> | null>(props.value, props.defaultValue || null, props.onChange);
+  let [placeholderValue, setPlaceholderValue] = useState<RangeValue<DateValue | null>>(() => controlledValue || {start: null, end: null});
 
   // Reset the placeholder if the value prop is set to null.
   if (controlledValue == null && placeholderValue.start && placeholderValue.end) {
@@ -93,24 +93,24 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
 
   let value = controlledValue || placeholderValue;
 
-  let setValue = (value: DateRange) => {
+  let setValue = (value: RangeValue<DateValue | null> | null) => {
     setPlaceholderValue(value || {start: null, end: null});
-    if (value?.start && value.end) {
+    if (isCompleteRange(value)) {
       setControlledValue(value);
     } else {
       setControlledValue(null);
     }
   };
 
-  let v = (value?.start || value?.end || props.placeholderValue);
+  let v = (value?.start || value?.end || props.placeholderValue || null);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
-  let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
-  let [timeRange, setSelectedTimeRange] = useState<TimeRange>(null);
+  let [dateRange, setSelectedDateRange] = useState<RangeValue<DateValue | null> | null>(null);
+  let [timeRange, setSelectedTimeRange] = useState<RangeValue<TimeValue | null> | null>(null);
 
-  if (value && value.start && value.end) {
+  if (value && isCompleteRange(value)) {
     dateRange = value;
     if ('hour' in value.start) {
       timeRange = value as TimeRange;
@@ -128,10 +128,10 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-  let setDateRange = (range: DateRange) => {
+  let setDateRange = (range: RangeValue<DateValue | null>) => {
     let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
     if (hasTime) {
-      if (shouldClose || (range.start && range.end && timeRange?.start && timeRange?.end)) {
+      if (isCompleteRange(range) && timeRange?.start && timeRange?.end) {
         commitValue(range, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
@@ -139,7 +139,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       } else {
         setSelectedDateRange(range);
       }
-    } else if (range.start && range.end) {
+    } else if (isCompleteRange(range)) {
       setValue(range);
       validation.commitValidation();
     } else {
@@ -151,8 +151,8 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  let setTimeRange = (range: TimeRange) => {
-    if (dateRange?.start && dateRange?.end && range.start && range.end) {
+  let setTimeRange = (range: RangeValue<TimeValue | null>) => {
+    if (isCompleteRange(dateRange) && isCompleteRange(range)) {
       commitValue(dateRange, range);
     } else {
       setSelectedTimeRange(range);
@@ -180,13 +180,13 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
 
   let validation = useFormValidationState({
     ...props,
-    value: controlledValue,
-    name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]),
+    value: controlledValue as RangeValue<MappedDateValue<T>> | null,
+    name: useMemo(() => [props.startName, props.endName].filter(n => n != null), [props.startName, props.endName]),
     builtinValidation
   });
 
   let isValueInvalid = validation.displayValidation.isInvalid;
-  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+  let validationState: ValidationState | null = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     ...validation,
@@ -197,13 +197,25 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     granularity,
     hasTime,
     setDate(part, date) {
-      setDateRange({...dateRange, [part]: date});
+      if (part === 'start') {
+        setDateRange({start: date, end: dateRange?.end ?? null});
+      } else {
+        setDateRange({start: dateRange?.start ?? null, end: date});
+      }
     },
     setTime(part, time) {
-      setTimeRange({...timeRange, [part]: time});
+      if (part === 'start') {
+        setTimeRange({start: time, end: timeRange?.end ?? null});
+      } else {
+        setTimeRange({start: timeRange?.start ?? null, end: time});
+      }
     },
     setDateTime(part, dateTime) {
-      setValue({...value, [part]: dateTime});
+      if (part === 'start') {
+        setValue({start: dateTime, end: value?.end ?? null});
+      } else {
+        setValue({start: value?.start ?? null, end: dateTime});
+      }
     },
     setDateRange,
     setTimeRange,
@@ -212,7 +224,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
       // If only the time range was set and not the date range, don't commit. The state will be preserved until
       // the user opens the popover again.
-      if (!isOpen && !(value?.start && value?.end) && dateRange?.start && dateRange?.end && hasTime) {
+      if (!isOpen && !(value?.start && value?.end) && isCompleteRange(dateRange) && hasTime) {
         commitValue(dateRange, {
           start: timeRange?.start || getPlaceholderTime(props.placeholderValue),
           end: timeRange?.end || getPlaceholderTime(props.placeholderValue)
@@ -278,7 +290,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
           }
 
           return {start, end};
-        } catch (e) {
+        } catch {
           // ignore
         }
 
@@ -306,3 +318,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 }
+
+function isCompleteRange<T>(value: RangeValue<T | null> | null): value is RangeValue<T> {
+  return value?.start != null && value.end != null;
+}