@react-stately/datepicker 3.0.0-alpha.1 → 3.0.0-alpha.4

package/dist/main.js

@@ -1,875 +1,777 @@
-var {
-  useControlledState
-} = require("@react-stately/utils");
-
-var {
-  useRef,
-  useState,
-  useEffect,
-  useMemo
-} = require("react");
-
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
-
-var {
-  DateFormatter,
-  toCalendarDateTime,
-  toDateFields,
-  now,
-  Time,
-  toCalendar,
-  toCalendarDate,
-  getMinimumDayInMonth,
-  getMinimumMonthInYear,
-  GregorianCalendar,
-  getLocalTimeZone,
-  today,
-  toTime
-} = require("@internationalized/date");
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $d2539a9a7cedbf57925a2a19$export$isInvalid(value, minValue, maxValue) {
-  return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
-}
-
-const $d2539a9a7cedbf57925a2a19$var$DEFAULT_FIELD_OPTIONS = {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit',
-  second: '2-digit'
-};
-
-function $d2539a9a7cedbf57925a2a19$export$getFormatOptions(fieldOptions, options) {
-  var _options$maxGranulari;
+var $h2qOe$internationalizeddate = require("@internationalized/date");
+var $h2qOe$reactstatelyutils = require("@react-stately/utils");
+var $h2qOe$react = require("react");
 
-  fieldOptions = _babelRuntimeHelpersExtends({}, $d2539a9a7cedbf57925a2a19$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;
-  }
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
 
-  if (startIdx > endIdx) {
-    throw new Error('maxGranularity must be greater than granularity');
-  }
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
 
-  let opts = keys.slice(startIdx, endIdx + 1).reduce((opts, key) => {
-    opts[key] = fieldOptions[key];
-    return opts;
-  }, {});
+  return dest;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $aaab7a647e17e1fd$exports = {};
 
-  if (options.hourCycle != null) {
-    opts.hour12 = options.hourCycle === 12;
-  }
+$parcel$export($aaab7a647e17e1fd$exports, "useDatePickerState", () => $aaab7a647e17e1fd$export$87194bb378cc3ac2);
 
-  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 $50d5d6a623389320$export$eac50920cf2fd59a(value, minValue, maxValue) {
+    return value != null && (minValue != null && value.compare(minValue) < 0 || maxValue != null && value.compare(maxValue) > 0);
 }
-
-function $d2539a9a7cedbf57925a2a19$export$getPlaceholderTime(placeholderValue) {
-  if (placeholderValue && 'hour' in placeholderValue) {
-    return placeholderValue;
-  }
-
-  return new Time();
+const $50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit'
+};
+function $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, options) {
+    fieldOptions = {
+        ...$50d5d6a623389320$var$DEFAULT_FIELD_OPTIONS,
+        ...fieldOptions
+    };
+    let granularity = options.granularity || 'minute';
+    let keys = Object.keys(fieldOptions);
+    var _maxGranularity;
+    let startIdx = keys.indexOf((_maxGranularity = options.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : '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 opts1 = keys.slice(startIdx, endIdx + 1).reduce((opts, key)=>{
+        opts[key] = fieldOptions[key];
+        return opts;
+    }, {
+    });
+    if (options.hourCycle != null) opts1.hour12 = options.hourCycle === 12;
+    opts1.timeZone = options.timeZone || 'UTC';
+    let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
+    if (hasTime && options.timeZone && !options.hideTimeZone) opts1.timeZoneName = 'short';
+    return opts1;
 }
-
-function $d2539a9a7cedbf57925a2a19$export$convertValue(value, calendar) {
-  if (value === null) {
-    return null;
-  }
-
-  if (!value) {
-    return undefined;
-  }
-
-  return toCalendar(value, calendar);
+function $50d5d6a623389320$export$c5221a78ef73c5e9(placeholderValue) {
+    if (placeholderValue && 'hour' in placeholderValue) return placeholderValue;
+    return new $h2qOe$internationalizeddate.Time();
 }
-
-function $d2539a9a7cedbf57925a2a19$export$createPlaceholderDate(placeholderValue, granularity, calendar, timeZone) {
-  if (placeholderValue) {
-    return $d2539a9a7cedbf57925a2a19$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 $50d5d6a623389320$export$61a490a80c552550(value, calendar) {
+    if (value === null) return null;
+    if (!value) return undefined;
+    return $h2qOe$internationalizeddate.toCalendar(value, calendar);
 }
-
-function $d2539a9a7cedbf57925a2a19$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];
+function $50d5d6a623389320$export$66aa2b09de4b1ea5(placeholderValue, granularity, calendar, timeZone) {
+    if (placeholderValue) return $50d5d6a623389320$export$61a490a80c552550(placeholderValue, calendar);
+    let date = $h2qOe$internationalizeddate.toCalendar($h2qOe$internationalizeddate.now(timeZone).set({
+        hour: 0,
+        minute: 0,
+        second: 0,
+        millisecond: 0
+    }), calendar);
+    if (granularity === 'year' || granularity === 'month' || granularity === 'day') return $h2qOe$internationalizeddate.toCalendarDate(date);
+    if (!timeZone) return $h2qOe$internationalizeddate.toCalendarDateTime(date);
+    return date;
 }
-
-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] = $d2539a9a7cedbf57925a2a19$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 || ($d2539a9a7cedbf57925a2a19$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 || $d2539a9a7cedbf57925a2a19$export$getPlaceholderTime(props.placeholderValue));
-      }
-
-      setOpen(isOpen);
-    },
-
-    validationState,
-
-    formatValue(locale, fieldOptions) {
-      if (!dateValue) {
-        return '';
-      }
-
-      let formatOptions = $d2539a9a7cedbf57925a2a19$export$getFormatOptions(fieldOptions, {
+function $50d5d6a623389320$export$2440da353cedad43(v, granularity) {
+    // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
+    let lastValue = $h2qOe$react.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,
-        timeZone: defaultTimeZone,
-        hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
-      });
-      let formatter = new DateFormatter(locale, formatOptions);
-      return formatter.format(dateValue);
-    }
-
-  };
+        defaultTimeZone
+    ];
 }
 
-exports.useDatePickerState = useDatePickerState;
-const $b879385ee0fe7268aa1feb476f2d613$var$EDITABLE_SEGMENTS = {
-  year: true,
-  month: true,
-  day: true,
-  hour: true,
-  minute: true,
-  second: true,
-  dayPeriod: true,
-  era: true
-};
-const $b879385ee0fe7268aa1feb476f2d613$var$PAGE_STEP = {
-  year: 5,
-  month: 2,
-  day: 7,
-  hour: 2,
-  minute: 15,
-  second: 15
-}; // Node seems to convert everything to lowercase...
-
-const $b879385ee0fe7268aa1feb476f2d613$var$TYPE_MAPPING = {
-  dayperiod: 'dayPeriod'
-};
 
-function useDatePickerFieldState(props) {
-  let {
-    locale,
-    createCalendar,
-    hideTimeZone
-  } = props;
-  let v = props.value || props.defaultValue || props.placeholderValue;
-  let [granularity, defaultTimeZone] = $d2539a9a7cedbf57925a2a19$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;
 
+function $aaab7a647e17e1fd$export$87194bb378cc3ac2(props) {
+    var ref;
+    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
+    let v = value || props.placeholderValue;
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity);
+    let dateValue = value != null ? value.toDate(defaultTimeZone !== null && defaultTimeZone !== void 0 ? defaultTimeZone : 'UTC') : null;
+    let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [selectedDate, setSelectedDate] = $h2qOe$react.useState(null);
+    let [selectedTime, setSelectedTime] = $h2qOe$react.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($h2qOe$internationalizeddate.toCalendarDate(date)) : $h2qOe$internationalizeddate.toCalendarDateTime(date, time));
+    };
+    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+    let selectDate = (newValue)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
+        if (hasTime) {
+            if (selectedTime || shouldClose) commitValue(newValue, selectedTime || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
+            else setSelectedDate(newValue);
+        } else setValue(newValue);
+        if (shouldClose) setOpen(false);
+    };
+    let selectTime = (newValue)=>{
+        if (selectedDate) commitValue(selectedDate, newValue);
+        else setSelectedTime(newValue);
+    };
+    let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(value, props.minValue, props.maxValue) ? 'invalid' : null) || (value && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value)) ? 'invalid' : null);
     return {
-      granularity,
-      maxGranularity: (_props$maxGranularity = props.maxGranularity) != null ? _props$maxGranularity : 'year',
-      timeZone: defaultTimeZone,
-      hideTimeZone,
-      hourCycle: props.hourCycle
+        value: value,
+        setValue: setValue,
+        dateValue: selectedDate,
+        timeValue: selectedTime,
+        setDateValue: selectDate,
+        setTimeValue: selectTime,
+        granularity: granularity,
+        hasTime: hasTime,
+        isOpen: isOpen1,
+        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 || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue));
+            setOpen(isOpen);
+        },
+        validationState: validationState,
+        formatValue (locale, fieldOptions) {
+            if (!dateValue) return '';
+            let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
+                granularity: granularity,
+                timeZone: defaultTimeZone,
+                hideTimeZone: props.hideTimeZone,
+                hourCycle: props.hourCycle
+            });
+            let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions);
+            return formatter.format(dateValue);
+        }
     };
-  }, [props.maxGranularity, granularity, props.hourCycle, defaultTimeZone, hideTimeZone]);
-  let opts = useMemo(() => $d2539a9a7cedbf57925a2a19$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 => $b879385ee0fe7268aa1feb476f2d613$var$EDITABLE_SEGMENTS[seg.type]).reduce((p, seg) => (p[seg.type] = true, p), {}), [dateFormatter]);
-  let [validSegments, setValidSegments] = useState(() => props.value || props.defaultValue ? _babelRuntimeHelpersExtends({}, 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(() => $d2539a9a7cedbf57925a2a19$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) : $d2539a9a7cedbf57925a2a19$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(() => $d2539a9a7cedbf57925a2a19$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 = _babelRuntimeHelpersExtends({}, 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($d2539a9a7cedbf57925a2a19$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;
+var $596a1f0f523d6752$exports = {};
 
-  let setValue = newValue => {
-    if (props.isDisabled || props.isReadOnly) {
-      return;
-    }
+$parcel$export($596a1f0f523d6752$exports, "useDateFieldState", () => $596a1f0f523d6752$export$60e84778edff6d26);
 
-    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 = $b879385ee0fe7268aa1feb476f2d613$var$EDITABLE_SEGMENTS[segment.type];
 
-    if (segment.type === 'era' && calendar.getEras().length === 1) {
-      isEditable = false;
-    }
 
-    return _babelRuntimeHelpersExtends({
-      type: $b879385ee0fe7268aa1feb476f2d613$var$TYPE_MAPPING[segment.type] || segment.type,
-      text: segment.value
-    }, $b879385ee0fe7268aa1feb476f2d613$var$getSegmentLimits(displayValue, segment.type, resolvedOptions), {
-      isPlaceholder: $b879385ee0fe7268aa1feb476f2d613$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(_babelRuntimeHelpersExtends({}, validSegments));
-  };
-
-  let adjustSegment = (type, amount) => {
-    markValid(type);
-    setValue($b879385ee0fe7268aa1feb476f2d613$var$addSegment(displayValue, type, amount, resolvedOptions));
-  };
-
-  let validationState = props.validationState || ($d2539a9a7cedbf57925a2a19$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, $b879385ee0fe7268aa1feb476f2d613$var$PAGE_STEP[part] || 1);
-    },
-
-    decrementPage(part) {
-      adjustSegment(part, -($b879385ee0fe7268aa1feb476f2d613$var$PAGE_STEP[part] || 1));
-    },
-
-    setSegment(part, v) {
-      markValid(part);
-      setValue($b879385ee0fe7268aa1feb476f2d613$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 = _babelRuntimeHelpersExtends({}, allSegments);
-          setValidSegments(validSegments);
-          setValue(displayValue.copy());
-        }
-      } else if (!validSegments[part]) {
-        markValid(part);
-        setValue(displayValue.copy());
-      }
-    },
-
-    clearSegment(part) {
-      delete validSegments[part];
-      setValidSegments(_babelRuntimeHelpersExtends({}, validSegments));
-      let placeholder = $d2539a9a7cedbf57925a2a19$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
-          });
+const $596a1f0f523d6752$var$EDITABLE_SEGMENTS = {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+    dayPeriod: true,
+    era: true
+};
+const $596a1f0f523d6752$var$PAGE_STEP = {
+    year: 5,
+    month: 2,
+    day: 7,
+    hour: 2,
+    minute: 15,
+    second: 15
+};
+// Node seems to convert everything to lowercase...
+const $596a1f0f523d6752$var$TYPE_MAPPING = {
+    dayperiod: 'dayPeriod'
+};
+function $596a1f0f523d6752$export$60e84778edff6d26(props) {
+    let { locale: locale , createCalendar: createCalendar , hideTimeZone: hideTimeZone , isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
+    let v1 = props.value || props.defaultValue || props.placeholderValue;
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v1, props.granularity);
+    let timeZone = defaultTimeZone || 'UTC';
+    // props.granularity must actually exist in the value if one is provided.
+    if (v1 && !(granularity in v1)) throw new Error('Invalid granularity ' + granularity + ' for value ' + v1.toString());
+    var _maxGranularity;
+    let formatOpts = $h2qOe$react.useMemo(()=>({
+            granularity: granularity,
+            maxGranularity: (_maxGranularity = props.maxGranularity) !== null && _maxGranularity !== void 0 ? _maxGranularity : 'year',
+            timeZone: defaultTimeZone,
+            hideTimeZone: hideTimeZone,
+            hourCycle: props.hourCycle
+        })
+    , [
+        props.maxGranularity,
+        granularity,
+        props.hourCycle,
+        defaultTimeZone,
+        hideTimeZone
+    ]);
+    let opts = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$7e319ea407e63bc0({
+        }, formatOpts)
+    , [
+        formatOpts
+    ]);
+    let dateFormatter = $h2qOe$react.useMemo(()=>new $h2qOe$internationalizeddate.DateFormatter(locale, opts)
+    , [
+        locale,
+        opts
+    ]);
+    let resolvedOptions = $h2qOe$react.useMemo(()=>dateFormatter.resolvedOptions()
+    , [
+        dateFormatter
+    ]);
+    let calendar = $h2qOe$react.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 = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(new Date()).filter((seg)=>$596a1f0f523d6752$var$EDITABLE_SEGMENTS[seg.type]
+        ).reduce((p, seg)=>(p[seg.type] = true, p)
+        , {
+        })
+    , [
+        dateFormatter
+    ]);
+    let [validSegments, setValidSegments] = $h2qOe$react.useState(()=>props.value || props.defaultValue ? {
+            ...allSegments
+        } : {
         }
-      } else if (part in displayValue) {
-        value = displayValue.set({
-          [part]: placeholder[part]
-        });
-      }
-
-      setDate(null);
-      setValue(value);
-    },
-
-    getFormatOptions(fieldOptions) {
-      return $d2539a9a7cedbf57925a2a19$export$getFormatOptions(fieldOptions, formatOpts);
-    }
-
-  };
-}
-
-exports.useDatePickerFieldState = useDatePickerFieldState;
-
-function $b879385ee0fe7268aa1feb476f2d613$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
-          };
+    );
+    // 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] = $h2qOe$react.useState(()=>$50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+    );
+    // Reset placeholder when calendar changes
+    let lastCalendarIdentifier = $h2qOe$react.useRef(calendar.identifier);
+    $h2qOe$react.useEffect(()=>{
+        if (calendar.identifier !== lastCalendarIdentifier.current) {
+            lastCalendarIdentifier.current = calendar.identifier;
+            setPlaceholderDate((placeholder)=>Object.keys(validSegments).length > 0 ? $h2qOe$internationalizeddate.toCalendar(placeholder, calendar) : $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone)
+            );
         }
-
-        return {
-          value: date.hour,
-          minValue: 0,
-          maxValue: 23
-        };
-
-      case 'minute':
-        return {
-          value: date.minute,
-          minValue: 0,
-          maxValue: 59
+    }, [
+        calendar,
+        granularity,
+        validSegments,
+        defaultTimeZone,
+        props.placeholderValue
+    ]);
+    let [value1, setDate] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+    let calendarValue = $h2qOe$react.useMemo(()=>$50d5d6a623389320$export$61a490a80c552550(value1, calendar)
+    , [
+        value1,
+        calendar
+    ]);
+    // If there is a value prop, and some segments were previously placeholders, mark them all as valid.
+    if (value1 && Object.keys(validSegments).length < Object.keys(allSegments).length) {
+        validSegments = {
+            ...allSegments
         };
-
-      case 'second':
-        return {
-          value: date.second,
-          minValue: 0,
-          maxValue: 59
+        setValidSegments(validSegments);
+    }
+    // If the value is set to null and all segments are valid, reset the placeholder.
+    if (value1 == null && Object.keys(validSegments).length === Object.keys(allSegments).length) {
+        validSegments = {
         };
+        setValidSegments(validSegments);
+        setPlaceholderDate($50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone));
     }
-  }
-
-  return {};
-}
-
-function $b879385ee0fe7268aa1feb476f2d613$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
+    // 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 = $h2qOe$internationalizeddate.toCalendar(newValue, (v1 === null || v1 === void 0 ? void 0 : v1.calendar) || new $h2qOe$internationalizeddate.GregorianCalendar());
+            setDate(newValue);
+        } else setPlaceholderDate(newValue);
+    };
+    let dateValue = $h2qOe$react.useMemo(()=>displayValue.toDate(timeZone)
+    , [
+        displayValue,
+        timeZone
+    ]);
+    let segments = $h2qOe$react.useMemo(()=>dateFormatter.formatToParts(dateValue).map((segment)=>{
+            let isEditable = $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type];
+            if (segment.type === 'era' && calendar.getEras().length === 1) isEditable = false;
+            return {
+                type: $596a1f0f523d6752$var$TYPE_MAPPING[segment.type] || segment.type,
+                text: segment.value,
+                ...$596a1f0f523d6752$var$getSegmentLimits(displayValue, segment.type, resolvedOptions),
+                isPlaceholder: $596a1f0f523d6752$var$EDITABLE_SEGMENTS[segment.type] && !validSegments[segment.type],
+                isEditable: isEditable
+            };
+        })
+    , [
+        dateValue,
+        validSegments,
+        dateFormatter,
+        resolvedOptions,
+        displayValue,
+        calendar
+    ]);
+    let hasEra = $h2qOe$react.useMemo(()=>segments.some((s)=>s.type === 'era'
+        )
+    , [
+        segments
+    ]);
+    let markValid = (part)=>{
+        validSegments[part] = true;
+        if (part === 'year' && hasEra) validSegments.era = true;
+        setValidSegments({
+            ...validSegments
         });
+    };
+    let adjustSegment = (type, amount)=>{
+        markValid(type);
+        setValue($596a1f0f523d6752$var$addSegment(displayValue, type, amount, resolvedOptions));
+    };
+    let validationState = props.validationState || ($50d5d6a623389320$export$eac50920cf2fd59a(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+    return {
+        value: calendarValue,
+        dateValue: dateValue,
+        setValue: setValue,
+        segments: segments,
+        dateFormatter: dateFormatter,
+        validationState: validationState,
+        granularity: granularity,
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        increment (part) {
+            adjustSegment(part, 1);
+        },
+        decrement (part) {
+            adjustSegment(part, -1);
+        },
+        incrementPage (part) {
+            adjustSegment(part, $596a1f0f523d6752$var$PAGE_STEP[part] || 1);
+        },
+        decrementPage (part) {
+            adjustSegment(part, -($596a1f0f523d6752$var$PAGE_STEP[part] || 1));
+        },
+        setSegment (part, v) {
+            markValid(part);
+            setValue($596a1f0f523d6752$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 = {
+                        ...allSegments
+                    };
+                    setValidSegments(validSegments);
+                    setValue(displayValue.copy());
+                }
+            } else if (!validSegments[part]) {
+                markValid(part);
+                setValue(displayValue.copy());
+            }
+        },
+        clearSegment (part) {
+            delete validSegments[part];
+            setValidSegments({
+                ...validSegments
+            });
+            let placeholder = $50d5d6a623389320$export$66aa2b09de4b1ea5(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);
+        },
+        formatValue (fieldOptions) {
+            if (!calendarValue) return '';
+            let formatOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, formatOpts);
+            let formatter = new $h2qOe$internationalizeddate.DateFormatter(locale, formatOptions);
+            return formatter.format(dateValue);
+        }
+    };
+}
+function $596a1f0f523d6752$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: $h2qOe$internationalizeddate.getMinimumMonthInYear(date),
+                maxValue: date.calendar.getMonthsInYear(date)
+            };
+        case 'day':
+            return {
+                value: date.day,
+                minValue: $h2qOe$internationalizeddate.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 $b879385ee0fe7268aa1feb476f2d613$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
-        });
+function $596a1f0f523d6752$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 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);
+function $596a1f0f523d6752$var$setSegment(value, part, segmentValue, options) {
+    switch(part){
+        case 'day':
+        case 'month':
+        case 'year':
+            return value.set({
+                [part]: segmentValue
+            });
     }
-  };
-
-  let v = (value == null ? void 0 : value.start) || (value == null ? void 0 : value.end) || props.placeholderValue;
-  let [granularity, defaultTimeZone] = $d2539a9a7cedbf57925a2a19$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;
+    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
+            });
     }
-  }
+}
 
-  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
 
+var $7072d26f58deb33b$exports = {};
 
-  let setDateRange = range => {
-    if (hasTime) {
-      var _timeRange, _timeRange2;
+$parcel$export($7072d26f58deb33b$exports, "useDateRangePickerState", () => $7072d26f58deb33b$export$e50a61c1de9f574);
 
-      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);
+function $7072d26f58deb33b$export$e50a61c1de9f574(props) {
+    var ref, ref1;
+    let [isOpen1, setOpen] = $h2qOe$react.useState(false);
+    let [controlledValue, setControlledValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue || null, props.onChange);
+    let [placeholderValue, setPlaceholderValue] = $h2qOe$react.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 validationState = props.validationState || (value != null && ($d2539a9a7cedbf57925a2a19$export$isInvalid(value.start, props.minValue, props.maxValue) || $d2539a9a7cedbf57925a2a19$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(_babelRuntimeHelpersExtends({}, dateRange, {
-        [part]: date
-      }));
-    },
-
-    setTime(part, time) {
-      setTimeRange(_babelRuntimeHelpersExtends({}, timeRange, {
-        [part]: time
-      }));
-    },
-
-    setDateTime(part, dateTime) {
-      setValue(_babelRuntimeHelpersExtends({}, 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) || $d2539a9a7cedbf57925a2a19$export$getPlaceholderTime(props.placeholderValue),
-          end: ((_timeRange4 = timeRange) == null ? void 0 : _timeRange4.end) || $d2539a9a7cedbf57925a2a19$export$getPlaceholderTime(props.placeholderValue)
+    let value1 = controlledValue || placeholderValue;
+    let valueRef = $h2qOe$react.useRef(value1);
+    valueRef.current = value1;
+    let setValue = (value)=>{
+        valueRef.current = value;
+        setPlaceholderValue(value);
+        if ((value === null || value === void 0 ? void 0 : value.start) && value.end) setControlledValue(value);
+        else setControlledValue(null);
+    };
+    let v = (value1 === null || value1 === void 0 ? void 0 : value1.start) || (value1 === null || value1 === void 0 ? void 0 : value1.end) || props.placeholderValue;
+    let [granularity, defaultTimeZone] = $50d5d6a623389320$export$2440da353cedad43(v, props.granularity);
+    let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+    var _shouldCloseOnSelect;
+    let shouldCloseOnSelect = (_shouldCloseOnSelect = props.shouldCloseOnSelect) !== null && _shouldCloseOnSelect !== void 0 ? _shouldCloseOnSelect : true;
+    let [dateRange1, setSelectedDateRange] = $h2qOe$react.useState(null);
+    let [timeRange1, setSelectedTimeRange] = $h2qOe$react.useState(null);
+    if (value1 && value1.start && value1.end) {
+        dateRange1 = value1;
+        if ('hour' in value1.start) timeRange1 = value1;
+    }
+    let commitValue = (dateRange, timeRange)=>{
+        setValue({
+            start: 'timeZone' in timeRange.start ? timeRange.start.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.start)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.start, timeRange.start),
+            end: 'timeZone' in timeRange.end ? timeRange.end.set($h2qOe$internationalizeddate.toCalendarDate(dateRange.end)) : $h2qOe$internationalizeddate.toCalendarDateTime(dateRange.end, timeRange.end)
         });
-      }
-
-      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 = $d2539a9a7cedbf57925a2a19$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
+    };
+    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+    let setDateRange = (range)=>{
+        let shouldClose = typeof shouldCloseOnSelect === 'function' ? shouldCloseOnSelect() : shouldCloseOnSelect;
+        if (hasTime) {
+            if (shouldClose || range.start && range.end && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) && (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end)) commitValue(range, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)
+            });
+            else setSelectedDateRange(range);
+        } else if (range.start && range.end) setValue(range);
+        else setSelectedDateRange(range);
+        if (shouldClose) setOpen(false);
+    };
+    let setTimeRange = (range)=>{
+        if ((dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && range.start && range.end) commitValue(dateRange1, range);
+        else setSelectedTimeRange(range);
+    };
+    let validationState = props.validationState || (value1 != null && ($50d5d6a623389320$export$eac50920cf2fd59a(value1.start, props.minValue, props.maxValue) || $50d5d6a623389320$export$eac50920cf2fd59a(value1.end, props.minValue, props.maxValue) || value1.end != null && value1.start != null && value1.end.compare(value1.start) < 0 || (value1 === null || value1 === void 0 ? void 0 : value1.start) && ((ref = props.isDateUnavailable) === null || ref === void 0 ? void 0 : ref.call(props, value1.start)) || (value1 === null || value1 === void 0 ? void 0 : value1.end) && ((ref1 = props.isDateUnavailable) === null || ref1 === void 0 ? void 0 : ref1.call(props, value1.end))) ? 'invalid' : null);
+    return {
+        value: value1,
+        setValue: setValue,
+        dateRange: dateRange1,
+        timeRange: timeRange1,
+        granularity: granularity,
+        hasTime: hasTime,
+        setDate (part, date) {
+            setDateRange({
+                ...dateRange1,
+                [part]: date
+            });
+        },
+        setTime (part, time) {
+            setTimeRange({
+                ...timeRange1,
+                [part]: time
+            });
+        },
+        setDateTime (part, dateTime) {
+            setValue({
+                ...value1,
+                [part]: dateTime
+            });
+        },
+        setDateRange: setDateRange,
+        setTimeRange: setTimeRange,
+        isOpen: isOpen1,
+        setOpen (isOpen) {
+            // 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 && !((value1 === null || value1 === void 0 ? void 0 : value1.start) && (value1 === null || value1 === void 0 ? void 0 : value1.end)) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.start) && (dateRange1 === null || dateRange1 === void 0 ? void 0 : dateRange1.end) && hasTime) commitValue(dateRange1, {
+                start: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.start) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue),
+                end: (timeRange1 === null || timeRange1 === void 0 ? void 0 : timeRange1.end) || $50d5d6a623389320$export$c5221a78ef73c5e9(props.placeholderValue)
+            });
+            setOpen(isOpen);
+        },
+        validationState: validationState,
+        formatValue (locale, fieldOptions) {
+            if (!value1 || !value1.start || !value1.end) return '';
+            let startTimeZone = 'timeZone' in value1.start ? value1.start.timeZone : undefined;
+            let startGranularity = props.granularity || (value1.start && 'minute' in value1.start ? 'minute' : 'day');
+            let endTimeZone = 'timeZone' in value1.end ? value1.end.timeZone : undefined;
+            let endGranularity = props.granularity || (value1.end && 'minute' in value1.end ? 'minute' : 'day');
+            let startOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
+                granularity: startGranularity,
+                timeZone: startTimeZone,
+                hideTimeZone: props.hideTimeZone,
+                hourCycle: props.hourCycle
+            });
+            let startFormatter = new $h2qOe$internationalizeddate.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(value1.start.toDate(startTimeZone), value1.end.toDate(endTimeZone));
+                } catch (e) {
+                // ignore
+                }
+                endFormatter = startFormatter;
+            } else {
+                let endOptions = $50d5d6a623389320$export$7e319ea407e63bc0(fieldOptions, {
+                    granularity: endGranularity,
+                    timeZone: endTimeZone,
+                    hideTimeZone: props.hideTimeZone,
+                    hourCycle: props.hourCycle
+                });
+                endFormatter = new $h2qOe$internationalizeddate.DateFormatter(locale, endOptions);
+            }
+            return `${startFormatter.format(value1.start.toDate(startTimeZone))} – ${endFormatter.format(value1.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 = $50d5d6a623389320$export$66aa2b09de4b1ea5(props.placeholderValue, granularity, calendar, defaultTimeZone);
+                setValue({
+                    start: value.start || placeholder,
+                    end: value.end || placeholder
+                });
+            }
         }
+    };
+}
 
-        endFormatter = startFormatter;
-      } else {
-        let endOptions = $d2539a9a7cedbf57925a2a19$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 = $d2539a9a7cedbf57925a2a19$export$createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
-        setValue({
-          start: value.start || placeholder,
-          end: value.end || placeholder
-        });
-      }
-    }
 
-  };
+var $2654e87be0231a69$exports = {};
+
+$parcel$export($2654e87be0231a69$exports, "useTimeFieldState", () => $2654e87be0231a69$export$fd53cef0cc796101);
+
+
+
+
+function $2654e87be0231a69$export$fd53cef0cc796101(props) {
+    let { placeholderValue: placeholderValue = new $h2qOe$internationalizeddate.Time() , minValue: minValue , maxValue: maxValue , granularity: granularity  } = props;
+    let [value, setValue] = $h2qOe$reactstatelyutils.useControlledState(props.value, props.defaultValue, props.onChange);
+    let v = value || placeholderValue;
+    let day = v && 'day' in v ? v : undefined;
+    let placeholderDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(placeholderValue)
+    , [
+        placeholderValue
+    ]);
+    let minDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(minValue, day)
+    , [
+        minValue,
+        day
+    ]);
+    let maxDate = $h2qOe$react.useMemo(()=>$2654e87be0231a69$var$convertValue(maxValue, day)
+    , [
+        maxValue,
+        day
+    ]);
+    let dateTime = $h2qOe$react.useMemo(()=>value == null ? null : $2654e87be0231a69$var$convertValue(value)
+    , [
+        value
+    ]);
+    let onChange = (newValue)=>{
+        setValue(v && 'day' in v ? newValue : newValue && $h2qOe$internationalizeddate.toTime(newValue));
+    };
+    return $596a1f0f523d6752$export$60e84778edff6d26({
+        ...props,
+        value: dateTime,
+        defaultValue: undefined,
+        minValue: minDate,
+        maxValue: maxDate,
+        onChange: onChange,
+        granularity: granularity || 'minute',
+        maxGranularity: 'hour',
+        placeholderValue: placeholderDate,
+        // Calendar should not matter for time fields.
+        createCalendar: ()=>new $h2qOe$internationalizeddate.GregorianCalendar()
+    });
 }
-
-exports.useDateRangePickerState = useDateRangePickerState;
-
-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(() => $f9f46b85e0aaf88609046f630d1d0a9$var$convertValue(placeholderValue), [placeholderValue]);
-  let minDate = useMemo(() => $f9f46b85e0aaf88609046f630d1d0a9$var$convertValue(minValue, day), [minValue, day]);
-  let maxDate = useMemo(() => $f9f46b85e0aaf88609046f630d1d0a9$var$convertValue(maxValue, day), [maxValue, day]);
-  let dateTime = useMemo(() => value == null ? null : $f9f46b85e0aaf88609046f630d1d0a9$var$convertValue(value), [value]);
-
-  let onChange = newValue => {
-    setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
-  };
-
-  return useDatePickerFieldState(_babelRuntimeHelpersExtends({}, props, {
-    value: dateTime,
-    defaultValue: undefined,
-    minValue: minDate,
-    maxValue: maxDate,
-    onChange,
-    granularity: granularity || 'minute',
-    maxGranularity: 'hour',
-    placeholderValue: placeholderDate
-  }));
+function $2654e87be0231a69$var$convertValue(value, date = $h2qOe$internationalizeddate.today($h2qOe$internationalizeddate.getLocalTimeZone())) {
+    if (!value) return null;
+    if ('day' in value) return value;
+    return $h2qOe$internationalizeddate.toCalendarDateTime(date, value);
 }
 
-exports.useTimeFieldState = useTimeFieldState;
 
-function $f9f46b85e0aaf88609046f630d1d0a9$var$convertValue(value, date) {
-  if (date === void 0) {
-    date = today(getLocalTimeZone());
-  }
+$parcel$exportWildcard(module.exports, $aaab7a647e17e1fd$exports);
+$parcel$exportWildcard(module.exports, $596a1f0f523d6752$exports);
+$parcel$exportWildcard(module.exports, $7072d26f58deb33b$exports);
+$parcel$exportWildcard(module.exports, $2654e87be0231a69$exports);
 
-  if (!value) {
-    return null;
-  }
 
-  if ('day' in value) {
-    return value;
-  }
-
-  return toCalendarDateTime(date, value);
-}
 //# sourceMappingURL=main.js.map