@react-stately/datepicker 3.0.0-alpha.0

package/dist/module.js

@@ -0,0 +1,837 @@
+import { useControlledState } from "@react-stately/utils";
+import { useRef, useState, useEffect, useMemo } from "react";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
+import { DateFormatter, toCalendarDateTime, toDateFields, now, Time, toCalendar, toCalendarDate, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, getLocalTimeZone, today, toTime } from "@internationalized/date";
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$isInvalid(value, minValue, maxValue) {
+  return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
+}
+
+const $d98d1ab08708c80c4fc9e163fea8b89e$var$DEFAULT_FIELD_OPTIONS = {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  second: '2-digit'
+};
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions(fieldOptions, options) {
+  var _options$maxGranulari;
+
+  fieldOptions = _babelRuntimeHelpersEsmExtends({}, $d98d1ab08708c80c4fc9e163fea8b89e$var$DEFAULT_FIELD_OPTIONS, fieldOptions);
+  let granularity = options.granularity || 'minute';
+  let keys = Object.keys(fieldOptions);
+  let startIdx = keys.indexOf((_options$maxGranulari = options.maxGranularity) != null ? _options$maxGranulari : 'year');
+
+  if (startIdx < 0) {
+    startIdx = 0;
+  }
+
+  let endIdx = keys.indexOf(granularity);
+
+  if (endIdx < 0) {
+    endIdx = 2;
+  }
+
+  if (startIdx > endIdx) {
+    throw new Error('maxGranularity must be greater than granularity');
+  }
+
+  let opts = keys.slice(startIdx, endIdx + 1).reduce((opts, key) => {
+    opts[key] = fieldOptions[key];
+    return opts;
+  }, {});
+
+  if (options.hourCycle != null) {
+    opts.hour12 = options.hourCycle === 12;
+  }
+
+  opts.timeZone = options.timeZone || 'UTC';
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
+
+  if (hasTime && options.timeZone && !options.hideTimeZone) {
+    opts.timeZoneName = 'short';
+  }
+
+  return opts;
+}
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$getPlaceholderTime(placeholderValue) {
+  if (placeholderValue && 'hour' in placeholderValue) {
+    return placeholderValue;
+  }
+
+  return new Time();
+}
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$convertValue(value, calendar) {
+  if (value === null) {
+    return null;
+  }
+
+  if (!value) {
+    return undefined;
+  }
+
+  return toCalendar(value, calendar);
+}
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(placeholderValue, granularity, calendar, timeZone) {
+  if (placeholderValue) {
+    return $d98d1ab08708c80c4fc9e163fea8b89e$export$convertValue(placeholderValue, calendar);
+  }
+
+  let date = toCalendar(now(timeZone).set({
+    hour: 0,
+    minute: 0,
+    second: 0,
+    millisecond: 0
+  }), calendar);
+
+  if (granularity === 'year' || granularity === 'month' || granularity === 'day') {
+    return toCalendarDate(date);
+  }
+
+  if (!timeZone) {
+    return toCalendarDateTime(date);
+  }
+
+  return date;
+}
+
+function $d98d1ab08708c80c4fc9e163fea8b89e$export$useDefaultProps(v, granularity) {
+  // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
+  let lastValue = useRef(v);
+
+  if (v) {
+    lastValue.current = v;
+  }
+
+  v = lastValue.current;
+  let defaultTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
+  granularity = granularity || (v && 'minute' in v ? 'minute' : 'day'); // props.granularity must actually exist in the value if one is provided.
+
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
+  return [granularity, defaultTimeZone];
+}
+
+export function useDatePickerState(props) {
+  let [isOpen, setOpen] = useState(false);
+  let [value, setValue] = useControlledState(props.value, props.defaultValue || null, props.onChange);
+  let v = value || props.placeholderValue;
+  let [granularity, defaultTimeZone] = $d98d1ab08708c80c4fc9e163fea8b89e$export$useDefaultProps(v, props.granularity);
+  let dateValue = value != null ? value.toDate(defaultTimeZone != null ? defaultTimeZone : 'UTC') : null;
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let [selectedDate, setSelectedDate] = useState(null);
+  let [selectedTime, setSelectedTime] = useState(null);
+
+  if (value) {
+    selectedDate = value;
+
+    if ('hour' in value) {
+      selectedTime = value;
+    }
+  } // props.granularity must actually exist in the value if one is provided.
+
+
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
+  let commitValue = (date, time) => {
+    setValue('timeZone' in time ? time.set(toDateFields(date)) : toCalendarDateTime(date, time));
+  }; // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+
+
+  let selectDate = newValue => {
+    if (hasTime) {
+      if (selectedTime) {
+        commitValue(newValue, selectedTime);
+      } else {
+        setSelectedDate(newValue);
+      }
+    } else {
+      setValue(newValue);
+    }
+
+    if (!hasTime) {
+      setOpen(false);
+    }
+  };
+
+  let selectTime = newValue => {
+    if (selectedDate) {
+      commitValue(selectedDate, newValue);
+    } else {
+      setSelectedTime(newValue);
+    }
+  };
+
+  let validationState = props.validationState || ($d98d1ab08708c80c4fc9e163fea8b89e$export$isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : null);
+  return {
+    value,
+    setValue,
+    dateValue: selectedDate,
+    timeValue: selectedTime,
+    setDateValue: selectDate,
+    setTimeValue: selectTime,
+    granularity,
+    isOpen,
+
+    setOpen(isOpen) {
+      // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.
+      // 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 || $d98d1ab08708c80c4fc9e163fea8b89e$export$getPlaceholderTime(props.placeholderValue));
+      }
+
+      setOpen(isOpen);
+    },
+
+    validationState,
+
+    formatValue(locale, fieldOptions) {
+      if (!dateValue) {
+        return '';
+      }
+
+      let formatOptions = $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions(fieldOptions, {
+        granularity,
+        timeZone: defaultTimeZone,
+        hideTimeZone: props.hideTimeZone,
+        hourCycle: props.hourCycle
+      });
+      let formatter = new DateFormatter(locale, formatOptions);
+      return formatter.format(dateValue);
+    }
+
+  };
+}
+const $cadbb83c92e54ed3477855c493450ee4$var$EDITABLE_SEGMENTS = {
+  year: true,
+  month: true,
+  day: true,
+  hour: true,
+  minute: true,
+  second: true,
+  dayPeriod: true,
+  era: true
+};
+const $cadbb83c92e54ed3477855c493450ee4$var$PAGE_STEP = {
+  year: 5,
+  month: 2,
+  day: 7,
+  hour: 2,
+  minute: 15,
+  second: 15
+}; // Node seems to convert everything to lowercase...
+
+const $cadbb83c92e54ed3477855c493450ee4$var$TYPE_MAPPING = {
+  dayperiod: 'dayPeriod'
+};
+export function useDatePickerFieldState(props) {
+  let {
+    locale,
+    createCalendar,
+    hideTimeZone
+  } = props;
+  let v = props.value || props.defaultValue || props.placeholderValue;
+  let [granularity, defaultTimeZone] = $d98d1ab08708c80c4fc9e163fea8b89e$export$useDefaultProps(v, props.granularity);
+  let timeZone = defaultTimeZone || 'UTC'; // props.granularity must actually exist in the value if one is provided.
+
+  if (v && !(granularity in v)) {
+    throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
+  }
+
+  let formatOpts = useMemo(() => {
+    var _props$maxGranularity;
+
+    return {
+      granularity,
+      maxGranularity: (_props$maxGranularity = props.maxGranularity) != null ? _props$maxGranularity : 'year',
+      timeZone: defaultTimeZone,
+      hideTimeZone,
+      hourCycle: props.hourCycle
+    };
+  }, [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]);
+  let opts = useMemo(() => $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions({}, formatOpts), [formatOpts]);
+  let dateFormatter = useMemo(() => new DateFormatter(locale, opts), [locale, opts]);
+  let resolvedOptions = useMemo(() => dateFormatter.resolvedOptions(), [dateFormatter]);
+  let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]); // Determine how many editable segments there are for validation purposes.
+  // The result is cached for performance.
+
+  let allSegments = useMemo(() => dateFormatter.formatToParts(new Date()).filter(seg => $cadbb83c92e54ed3477855c493450ee4$var$EDITABLE_SEGMENTS[seg.type]).reduce((p, seg) => (p[seg.type] = true, p), {}), [dateFormatter]);
+  let [validSegments, setValidSegments] = useState(() => props.value || props.defaultValue ? _babelRuntimeHelpersEsmExtends({}, allSegments) : {}); // 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
+  // is controlled, so use the placeholder as the value until all segments are entered so it doesn't
+  // change from uncontrolled to controlled and emit a warning.
+
+  let [placeholderDate, setPlaceholderDate] = useState(() => $d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone)); // Reset placeholder when calendar changes
+
+  let lastCalendarIdentifier = useRef(calendar.identifier);
+  useEffect(() => {
+    if (calendar.identifier !== lastCalendarIdentifier.current) {
+      lastCalendarIdentifier.current = calendar.identifier;
+      setPlaceholderDate(placeholder => Object.keys(validSegments).length > 0 ? toCalendar(placeholder, calendar) : $d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
+    }
+  }, [calendar, granularity, validSegments, defaultTimeZone, props.placeholderValue]);
+  let [value, setDate] = useControlledState(props.value, props.defaultValue, props.onChange);
+  let calendarValue = useMemo(() => $d98d1ab08708c80c4fc9e163fea8b89e$export$convertValue(value, calendar), [value, calendar]); // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
+
+  if (value && Object.keys(validSegments).length < Object.keys(allSegments).length) {
+    validSegments = _babelRuntimeHelpersEsmExtends({}, allSegments);
+    setValidSegments(validSegments);
+  } // If the value is set to null and all segments are valid, reset the placeholder.
+
+
+  if (value == null && Object.keys(validSegments).length === Object.keys(allSegments).length) {
+    validSegments = {};
+    setValidSegments(validSegments);
+    setPlaceholderDate($d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone));
+  } // If all segments are valid, use the date from state, otherwise use the placeholder date.
+
+
+  let displayValue = calendarValue && Object.keys(validSegments).length >= Object.keys(allSegments).length ? calendarValue : placeholderDate;
+
+  let setValue = newValue => {
+    if (props.isDisabled || props.isReadOnly) {
+      return;
+    }
+
+    if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+      // 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 == null ? void 0 : v.calendar) || new GregorianCalendar());
+      setDate(newValue);
+    } else {
+      setPlaceholderDate(newValue);
+    }
+  };
+
+  let dateValue = useMemo(() => displayValue.toDate(timeZone), [displayValue, timeZone]);
+  let segments = useMemo(() => dateFormatter.formatToParts(dateValue).map(segment => {
+    let isEditable = $cadbb83c92e54ed3477855c493450ee4$var$EDITABLE_SEGMENTS[segment.type];
+
+    if (segment.type === 'era' && calendar.getEras().length === 1) {
+      isEditable = false;
+    }
+
+    return _babelRuntimeHelpersEsmExtends({
+      type: $cadbb83c92e54ed3477855c493450ee4$var$TYPE_MAPPING[segment.type] || segment.type,
+      text: segment.value
+    }, $cadbb83c92e54ed3477855c493450ee4$var$getSegmentLimits(displayValue, segment.type, resolvedOptions), {
+      isPlaceholder: $cadbb83c92e54ed3477855c493450ee4$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+      isEditable
+    });
+  }), [dateValue, validSegments, dateFormatter, resolvedOptions, displayValue, calendar]);
+  let hasEra = useMemo(() => segments.some(s => s.type === 'era'), [segments]);
+
+  let markValid = part => {
+    validSegments[part] = true;
+
+    if (part === 'year' && hasEra) {
+      validSegments.era = true;
+    }
+
+    setValidSegments(_babelRuntimeHelpersEsmExtends({}, validSegments));
+  };
+
+  let adjustSegment = (type, amount) => {
+    markValid(type);
+    setValue($cadbb83c92e54ed3477855c493450ee4$var$addSegment(displayValue, type, amount, resolvedOptions));
+  };
+
+  let validationState = props.validationState || ($d98d1ab08708c80c4fc9e163fea8b89e$export$isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+  return {
+    value: calendarValue,
+    dateValue,
+    setValue,
+    segments,
+    dateFormatter,
+    validationState,
+    granularity,
+
+    increment(part) {
+      adjustSegment(part, 1);
+    },
+
+    decrement(part) {
+      adjustSegment(part, -1);
+    },
+
+    incrementPage(part) {
+      adjustSegment(part, $cadbb83c92e54ed3477855c493450ee4$var$PAGE_STEP[part] || 1);
+    },
+
+    decrementPage(part) {
+      adjustSegment(part, -($cadbb83c92e54ed3477855c493450ee4$var$PAGE_STEP[part] || 1));
+    },
+
+    setSegment(part, v) {
+      markValid(part);
+      setValue($cadbb83c92e54ed3477855c493450ee4$var$setSegment(displayValue, part, v, resolvedOptions));
+    },
+
+    confirmPlaceholder(part) {
+      if (props.isDisabled || props.isReadOnly) {
+        return;
+      }
+
+      if (!part) {
+        // Confirm the rest of the placeholder if any of the segments are valid.
+        let numValid = Object.keys(validSegments).length;
+
+        if (numValid > 0 && numValid < Object.keys(allSegments).length) {
+          validSegments = _babelRuntimeHelpersEsmExtends({}, allSegments);
+          setValidSegments(validSegments);
+          setValue(displayValue.copy());
+        }
+      } else if (!validSegments[part]) {
+        markValid(part);
+        setValue(displayValue.copy());
+      }
+    },
+
+    clearSegment(part) {
+      delete validSegments[part];
+      setValidSegments(_babelRuntimeHelpersEsmExtends({}, validSegments));
+      let placeholder = $d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
+      let value = displayValue; // Reset day period to default without changing the hour.
+
+      if (part === 'dayPeriod' && 'hour' in displayValue && 'hour' in placeholder) {
+        let isPM = displayValue.hour >= 12;
+        let shouldBePM = placeholder.hour >= 12;
+
+        if (isPM && !shouldBePM) {
+          value = displayValue.set({
+            hour: displayValue.hour - 12
+          });
+        } else if (!isPM && shouldBePM) {
+          value = displayValue.set({
+            hour: displayValue.hour + 12
+          });
+        }
+      } else if (part in displayValue) {
+        value = displayValue.set({
+          [part]: placeholder[part]
+        });
+      }
+
+      setDate(null);
+      setValue(value);
+    },
+
+    getFormatOptions(fieldOptions) {
+      return $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions(fieldOptions, formatOpts);
+    }
+
+  };
+}
+
+function $cadbb83c92e54ed3477855c493450ee4$var$getSegmentLimits(date, type, options) {
+  switch (type) {
+    case 'era':
+      {
+        let eras = date.calendar.getEras();
+        return {
+          value: eras.indexOf(date.era),
+          minValue: 0,
+          maxValue: eras.length - 1
+        };
+      }
+
+    case 'year':
+      return {
+        value: date.year,
+        minValue: 1,
+        maxValue: date.calendar.getYearsInEra(date)
+      };
+
+    case 'month':
+      return {
+        value: date.month,
+        minValue: getMinimumMonthInYear(date),
+        maxValue: date.calendar.getMonthsInYear(date)
+      };
+
+    case 'day':
+      return {
+        value: date.day,
+        minValue: getMinimumDayInMonth(date),
+        maxValue: date.calendar.getDaysInMonth(date)
+      };
+  }
+
+  if ('hour' in date) {
+    switch (type) {
+      case 'dayPeriod':
+        return {
+          value: date.hour >= 12 ? 12 : 0,
+          minValue: 0,
+          maxValue: 12
+        };
+
+      case 'hour':
+        if (options.hour12) {
+          let isPM = date.hour >= 12;
+          return {
+            value: date.hour,
+            minValue: isPM ? 12 : 0,
+            maxValue: isPM ? 23 : 11
+          };
+        }
+
+        return {
+          value: date.hour,
+          minValue: 0,
+          maxValue: 23
+        };
+
+      case 'minute':
+        return {
+          value: date.minute,
+          minValue: 0,
+          maxValue: 59
+        };
+
+      case 'second':
+        return {
+          value: date.second,
+          minValue: 0,
+          maxValue: 59
+        };
+    }
+  }
+
+  return {};
+}
+
+function $cadbb83c92e54ed3477855c493450ee4$var$addSegment(value, part, amount, options) {
+  switch (part) {
+    case 'era':
+    case 'year':
+    case 'month':
+    case 'day':
+      return value.cycle(part, amount, {
+        round: part === 'year'
+      });
+  }
+
+  if ('hour' in value) {
+    switch (part) {
+      case 'dayPeriod':
+        {
+          let hours = value.hour;
+          let isPM = hours >= 12;
+          return value.set({
+            hour: isPM ? hours - 12 : hours + 12
+          });
+        }
+
+      case 'hour':
+      case 'minute':
+      case 'second':
+        return value.cycle(part, amount, {
+          round: part !== 'hour',
+          hourCycle: options.hour12 ? 12 : 24
+        });
+    }
+  }
+}
+
+function $cadbb83c92e54ed3477855c493450ee4$var$setSegment(value, part, segmentValue, options) {
+  switch (part) {
+    case 'day':
+    case 'month':
+    case 'year':
+      return value.set({
+        [part]: segmentValue
+      });
+  }
+
+  if ('hour' in value) {
+    switch (part) {
+      case 'dayPeriod':
+        {
+          let hours = value.hour;
+          let wasPM = hours >= 12;
+          let isPM = segmentValue >= 12;
+
+          if (isPM === wasPM) {
+            return value;
+          }
+
+          return value.set({
+            hour: wasPM ? hours - 12 : hours + 12
+          });
+        }
+
+      case 'hour':
+        // In 12 hour time, ensure that AM/PM does not change
+        if (options.hour12) {
+          let hours = value.hour;
+          let wasPM = hours >= 12;
+
+          if (!wasPM && segmentValue === 12) {
+            segmentValue = 0;
+          }
+
+          if (wasPM && segmentValue < 12) {
+            segmentValue += 12;
+          }
+        }
+
+      // fallthrough
+
+      case 'minute':
+      case 'second':
+        return value.set({
+          [part]: segmentValue
+        });
+    }
+  }
+}
+
+export function useDateRangePickerState(props) {
+  let [isOpen, setOpen] = useState(false);
+  let [controlledValue, setControlledValue] = useControlledState(props.value, props.defaultValue || null, props.onChange);
+  let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {
+    start: null,
+    end: null
+  }); // Reset the placeholder if the value prop is set to null.
+
+  if (controlledValue == null && placeholderValue.start && placeholderValue.end) {
+    placeholderValue = {
+      start: null,
+      end: null
+    };
+    setPlaceholderValue(placeholderValue);
+  }
+
+  let value = controlledValue || placeholderValue;
+  let valueRef = useRef(value);
+  valueRef.current = value;
+
+  let setValue = value => {
+    valueRef.current = value;
+    setPlaceholderValue(value);
+
+    if (value != null && value.start && value.end) {
+      setControlledValue(value);
+    } else {
+      setControlledValue(null);
+    }
+  };
+
+  let v = (value == null ? void 0 : value.start) || (value == null ? void 0 : value.end) || props.placeholderValue;
+  let [granularity, defaultTimeZone] = $d98d1ab08708c80c4fc9e163fea8b89e$export$useDefaultProps(v, props.granularity);
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let [dateRange, setSelectedDateRange] = useState(null);
+  let [timeRange, setSelectedTimeRange] = useState(null);
+
+  if (value && value.start && value.end) {
+    dateRange = value;
+
+    if ('hour' in value.start) {
+      timeRange = value;
+    }
+  }
+
+  let commitValue = (dateRange, timeRange) => {
+    setValue({
+      start: 'timeZone' in timeRange.start ? timeRange.start.set(toDateFields(dateRange.start)) : toCalendarDateTime(dateRange.start, timeRange.start),
+      end: 'timeZone' in timeRange.end ? timeRange.end.set(toDateFields(dateRange.end)) : toCalendarDateTime(dateRange.end, timeRange.end)
+    });
+  }; // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+
+
+  let setDateRange = range => {
+    if (hasTime) {
+      var _timeRange, _timeRange2;
+
+      if (range.start && range.end && (_timeRange = timeRange) != null && _timeRange.start && (_timeRange2 = timeRange) != null && _timeRange2.end) {
+        commitValue(range, timeRange);
+      } else {
+        setSelectedDateRange(range);
+      }
+    } else if (range.start && range.end) {
+      setValue(range);
+    } else {
+      setSelectedDateRange(range);
+    }
+
+    if (!hasTime) {
+      setOpen(false);
+    }
+  };
+
+  let setTimeRange = range => {
+    var _dateRange, _dateRange2;
+
+    if ((_dateRange = dateRange) != null && _dateRange.start && (_dateRange2 = dateRange) != null && _dateRange2.end && range.start && range.end) {
+      commitValue(dateRange, range);
+    } else {
+      setSelectedTimeRange(range);
+    }
+  };
+
+  let validationState = props.validationState || (value != null && ($d98d1ab08708c80c4fc9e163fea8b89e$export$isInvalid(value.start, props.minValue, props.maxValue) || $d98d1ab08708c80c4fc9e163fea8b89e$export$isInvalid(value.end, props.minValue, props.maxValue) || value.end != null && value.start != null && value.end.compare(value.start) < 0) ? 'invalid' : null);
+  return {
+    value,
+    setValue,
+    dateRange,
+    timeRange,
+    granularity,
+
+    setDate(part, date) {
+      setDateRange(_babelRuntimeHelpersEsmExtends({}, dateRange, {
+        [part]: date
+      }));
+    },
+
+    setTime(part, time) {
+      setTimeRange(_babelRuntimeHelpersEsmExtends({}, timeRange, {
+        [part]: time
+      }));
+    },
+
+    setDateTime(part, dateTime) {
+      setValue(_babelRuntimeHelpersEsmExtends({}, value, {
+        [part]: dateTime
+      }));
+    },
+
+    setDateRange,
+    setTimeRange,
+    isOpen,
+
+    setOpen(isOpen) {
+      var _dateRange3, _dateRange4;
+
+      // 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 != null && value.start && value != null && value.end) && (_dateRange3 = dateRange) != null && _dateRange3.start && (_dateRange4 = dateRange) != null && _dateRange4.end && hasTime) {
+        var _timeRange3, _timeRange4;
+
+        commitValue(dateRange, {
+          start: ((_timeRange3 = timeRange) == null ? void 0 : _timeRange3.start) || $d98d1ab08708c80c4fc9e163fea8b89e$export$getPlaceholderTime(props.placeholderValue),
+          end: ((_timeRange4 = timeRange) == null ? void 0 : _timeRange4.end) || $d98d1ab08708c80c4fc9e163fea8b89e$export$getPlaceholderTime(props.placeholderValue)
+        });
+      }
+
+      setOpen(isOpen);
+    },
+
+    validationState,
+
+    formatValue(locale, fieldOptions) {
+      if (!value || !value.start || !value.end) {
+        return '';
+      }
+
+      let startTimeZone = 'timeZone' in value.start ? value.start.timeZone : undefined;
+      let startGranularity = props.granularity || (value.start && 'minute' in value.start ? 'minute' : 'day');
+      let endTimeZone = 'timeZone' in value.end ? value.end.timeZone : undefined;
+      let endGranularity = props.granularity || (value.end && 'minute' in value.end ? 'minute' : 'day');
+      let startOptions = $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions(fieldOptions, {
+        granularity: startGranularity,
+        timeZone: startTimeZone,
+        hideTimeZone: props.hideTimeZone,
+        hourCycle: props.hourCycle
+      });
+      let startFormatter = new DateFormatter(locale, startOptions);
+      let endFormatter;
+
+      if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
+        // Use formatRange, as it results in shorter output when some of the fields
+        // are shared between the start and end dates (e.g. the same month).
+        // Formatting will fail if the end date is before the start date. Fall back below when that happens.
+        try {
+          return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone));
+        } catch (e) {// ignore
+        }
+
+        endFormatter = startFormatter;
+      } else {
+        let endOptions = $d98d1ab08708c80c4fc9e163fea8b89e$export$getFormatOptions(fieldOptions, {
+          granularity: endGranularity,
+          timeZone: endTimeZone,
+          hideTimeZone: props.hideTimeZone,
+          hourCycle: props.hourCycle
+        });
+        endFormatter = new DateFormatter(locale, endOptions);
+      }
+
+      return startFormatter.format(value.start.toDate(startTimeZone)) + " \u2013 " + endFormatter.format(value.end.toDate(endTimeZone));
+    },
+
+    confirmPlaceholder() {
+      // Need to use ref value here because the value can be set in the same tick as
+      // a blur, which means the component won't have re-rendered yet.
+      let value = valueRef.current;
+
+      if (value && Boolean(value.start) !== Boolean(value.end)) {
+        let calendar = (value.start || value.end).calendar;
+        let placeholder = $d98d1ab08708c80c4fc9e163fea8b89e$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
+        setValue({
+          start: value.start || placeholder,
+          end: value.end || placeholder
+        });
+      }
+    }
+
+  };
+}
+export function useTimeFieldState(props) {
+  let {
+    placeholderValue = new Time(),
+    minValue,
+    maxValue,
+    granularity
+  } = props;
+  let [value, setValue] = useControlledState(props.value, props.defaultValue, props.onChange);
+  let v = value || placeholderValue;
+  let day = v && 'day' in v ? v : undefined;
+  let placeholderDate = useMemo(() => $fc899fd619e5c84d71eda3c7a349a873$var$convertValue(placeholderValue), [placeholderValue]);
+  let minDate = useMemo(() => $fc899fd619e5c84d71eda3c7a349a873$var$convertValue(minValue, day), [minValue, day]);
+  let maxDate = useMemo(() => $fc899fd619e5c84d71eda3c7a349a873$var$convertValue(maxValue, day), [maxValue, day]);
+  let dateTime = useMemo(() => value == null ? null : $fc899fd619e5c84d71eda3c7a349a873$var$convertValue(value), [value]);
+
+  let onChange = newValue => {
+    setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
+  };
+
+  return useDatePickerFieldState(_babelRuntimeHelpersEsmExtends({}, props, {
+    value: dateTime,
+    defaultValue: undefined,
+    minValue: minDate,
+    maxValue: maxDate,
+    onChange,
+    granularity: granularity || 'minute',
+    maxGranularity: 'hour',
+    placeholderValue: placeholderDate
+  }));
+}
+
+function $fc899fd619e5c84d71eda3c7a349a873$var$convertValue(value, date) {
+  if (date === void 0) {
+    date = today(getLocalTimeZone());
+  }
+
+  if (!value) {
+    return null;
+  }
+
+  if ('day' in value) {
+    return value;
+  }
+
+  return toCalendarDateTime(date, value);
+}
+//# sourceMappingURL=module.js.map