@react-spectrum/datepicker 3.0.0-alpha.0

package/dist/module.js

@@ -0,0 +1,783 @@
+import { Flex } from "@react-spectrum/layout";
+import { useProviderProps, useProvider } from "@react-spectrum/provider";
+import { mergeProps, useEvent, useLayoutEffect, useResizeObserver } from "@react-aria/utils";
+import _spectrumIconsUiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
+import _spectrumIconsUiAlertMedium from "@spectrum-icons/ui/AlertMedium";
+import { FieldButton } from "@react-spectrum/button";
+import { Field } from "@react-spectrum/label";
+import { Dialog, DialogTrigger } from "@react-spectrum/dialog";
+import { useDatePickerFieldState, useTimeFieldState, useDatePickerState, useDateRangePickerState } from "@react-stately/datepicker";
+import { usePress, useHover } from "@react-aria/interactions";
+import { useLocale, useDateFormatter } from "@react-aria/i18n";
+import { useFocusManager, FocusRing, FocusScope, useFocusRing } from "@react-aria/focus";
+import { useDateSegment, useDateField, useDatePicker, useDisplayNames, useDateRangePicker } from "@react-aria/datepicker";
+import _react, { useMemo, useRef, useCallback, useState } from "react";
+import { NumberParser } from "@internationalized/number";
+import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { createCalendar } from "@internationalized/date";
+import { Content } from "@react-spectrum/view";
+import { classNames, useValueEffect, useStyleProps } from "@react-spectrum/utils";
+import _spectrumIconsWorkflowCalendar from "@spectrum-icons/workflow/Calendar";
+import { Calendar, RangeCalendar } from "@react-spectrum/calendar";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
+import "./main.css";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-spectrum/datepicker/src/index.css
+var $fc5c1aaa653a82d8278e64c777eca$exports = {};
+$fc5c1aaa653a82d8278e64c777eca$exports = {
+  "react-spectrum-Datepicker-fieldWrapper": "_react-spectrum-Datepicker-fieldWrapper_ce051",
+  "react-spectrum-Datepicker-startField": "_react-spectrum-Datepicker-startField_ce051",
+  "react-spectrum-Datepicker-endField": "_react-spectrum-Datepicker-endField_ce051",
+  "react-spectrum-Datepicker-field": "_react-spectrum-Datepicker-field_ce051",
+  "react-spectrum-Datepicker-input": "_react-spectrum-Datepicker-input_ce051",
+  "react-spectrum-DateField": "_react-spectrum-DateField_ce051",
+  "react-spectrum-TimeField": "_react-spectrum-TimeField_ce051",
+  "react-spectrum-TimeField-fieldWrapper": "_react-spectrum-TimeField-fieldWrapper_ce051",
+  "react-spectrum-Datepicker-inputContents": "_react-spectrum-Datepicker-inputContents_ce051",
+  "react-spectrum-Datepicker-rangeDash": "_react-spectrum-Datepicker-rangeDash_ce051",
+  "react-spectrum-Datepicker-segments": "_react-spectrum-Datepicker-segments_ce051",
+  "react-spectrum-Datepicker-literal": "_react-spectrum-Datepicker-literal_ce051",
+  "react-spectrum-DatePicker-cell": "_react-spectrum-DatePicker-cell_ce051",
+  "is-placeholder": "_is-placeholder_ce051",
+  "is-read-only": "_is-read-only_ce051",
+  "react-spectrum-Datepicker-dialog": "_react-spectrum-Datepicker-dialog_ce051",
+  "react-spectrum-Datepicker-dialogContent": "_react-spectrum-Datepicker-dialogContent_ce051",
+  "react-spectrum-Datepicker-timeFields": "_react-spectrum-Datepicker-timeFields_ce051"
+};
+
+function $d90fc87ed39803c47c775d8a63e9b3ac$export$DatePickerSegment(_ref) {
+  let {
+    segment,
+    state
+  } = _ref,
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_ref, ["segment", "state"]);
+
+  switch (segment.type) {
+    // A separator, e.g. punctuation
+    case 'literal':
+      return /*#__PURE__*/_react.createElement($d90fc87ed39803c47c775d8a63e9b3ac$var$LiteralSegment, {
+        segment: segment
+      });
+    // Editable segment
+
+    default:
+      return /*#__PURE__*/_react.createElement($d90fc87ed39803c47c775d8a63e9b3ac$var$EditableSegment, _babelRuntimeHelpersEsmExtends({
+        segment: segment,
+        state: state
+      }, otherProps));
+  }
+}
+
+var $fc5c1aaa653a82d8278e64c777eca$$interop$default = $parcel$interopDefault($fc5c1aaa653a82d8278e64c777eca$exports);
+
+function $d90fc87ed39803c47c775d8a63e9b3ac$var$LiteralSegment(_ref2) {
+  let {
+    segment
+  } = _ref2;
+  let focusManager = useFocusManager();
+  let {
+    pressProps
+  } = usePress({
+    onPressStart: e => {
+      if (e.pointerType === 'mouse') {
+        let res = focusManager.focusNext({
+          from: e.target
+        });
+
+        if (!res) {
+          focusManager.focusPrevious({
+            from: e.target
+          });
+        }
+      }
+    }
+  });
+  return /*#__PURE__*/_react.createElement("span", _babelRuntimeHelpersEsmExtends({
+    "aria-hidden": "true",
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-literal')
+  }, pressProps), segment.text);
+}
+
+function $d90fc87ed39803c47c775d8a63e9b3ac$var$EditableSegment(_ref3) {
+  let {
+    segment,
+    state
+  } = _ref3,
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_ref3, ["segment", "state"]);
+
+  let ref = useRef();
+  let {
+    segmentProps
+  } = useDateSegment(otherProps, segment, state, ref);
+  let {
+    locale
+  } = useLocale();
+  let parser = useMemo(() => new NumberParser(locale), [locale]);
+  let isNumeric = useMemo(() => parser.isValidPartialNumber(segment.text), [segment.text, parser]);
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({
+    ref: ref,
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-DatePicker-cell', {
+      'is-placeholder': segment.isPlaceholder,
+      'is-read-only': !segment.isEditable
+    }),
+    style: {
+      minWidth: !isNumeric ? null : String(segment.maxValue).length + 'ch'
+    }
+  }, segmentProps), segment.isPlaceholder ? '' : segment.text);
+}
+
+function $f89a664b25735c9291b8addecfd59013$export$DatePickerField(props) {
+  let {
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    inputClassName
+  } = props;
+  let ref = useRef();
+  let {
+    locale
+  } = useLocale();
+  let state = useDatePickerFieldState(_babelRuntimeHelpersEsmExtends({}, props, {
+    locale,
+    createCalendar
+  }));
+  let {
+    fieldProps
+  } = useDateField(props, state, ref);
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, fieldProps, {
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-segments', inputClassName),
+    ref: ref
+  }), state.segments.map((segment, i) => /*#__PURE__*/_react.createElement($d90fc87ed39803c47c775d8a63e9b3ac$export$DatePickerSegment, {
+    key: i,
+    segment: segment,
+    state: state,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired
+  })));
+}
+
+// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/textfield/vars.css
+var $aa1c742e7a2a16aa7981ca9e2f4a89$exports = {};
+$aa1c742e7a2a16aa7981ca9e2f4a89$exports = {
+  "spectrum-Textfield": "_spectrum-Textfield_61339",
+  "spectrum-Textfield--quiet": "_spectrum-Textfield--quiet_61339",
+  "spectrum-Textfield--multiline": "_spectrum-Textfield--multiline_61339",
+  "spectrum-Textfield-input": "_spectrum-Textfield-input_61339",
+  "is-placeholder": "_is-placeholder_61339",
+  "is-hovered": "_is-hovered_61339",
+  "spectrum-Textfield--valid": "_spectrum-Textfield--valid_61339",
+  "spectrum-Textfield--invalid": "_spectrum-Textfield--invalid_61339",
+  "spectrum-Textfield--loadable": "_spectrum-Textfield--loadable_61339",
+  "spectrum-Textfield-validationIcon": "_spectrum-Textfield-validationIcon_61339",
+  "spectrum-Textfield-icon": "_spectrum-Textfield-icon_61339",
+  "spectrum-Textfield-inputIcon": "_spectrum-Textfield-inputIcon_61339",
+  "spectrum-Textfield-circleLoader": "_spectrum-Textfield-circleLoader_61339",
+  "is-focused": "_is-focused_61339",
+  "focus-ring": "_focus-ring_61339",
+  "is-disabled": "_is-disabled_61339"
+};
+var $aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default = $parcel$interopDefault($aa1c742e7a2a16aa7981ca9e2f4a89$exports);
+
+function $f7a3dc9c77601846b3cceddb1f68b1a$export$Input(props) {
+  let defaultRef = useRef();
+  let {
+    isDisabled,
+    isQuiet,
+    inputClassName,
+    validationState,
+    children,
+    fieldProps,
+    inputRef = defaultRef,
+    className,
+    autoFocus,
+    style
+  } = props; // Reserve padding for the error icon when the width of the input is unconstrained.
+  // When constrained, don't reserve space because adding it only when invalid will
+  // not cause a layout shift.
+
+  let [reservePadding, setReservePadding] = useValueEffect(false);
+  let onResize = useCallback(() => setReservePadding(function* (reservePadding) {
+    if (reservePadding) {
+      // Try to collapse padding if the content is clipped.
+      if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
+        let width = inputRef.current.parentElement.offsetWidth;
+        yield false; // If removing padding causes a layout shift, add it back.
+
+        if (inputRef.current.parentElement.offsetWidth !== width) {
+          yield true;
+        }
+      }
+    } else {
+      // Try to add padding if the content is not clipped.
+      if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {
+        let width = inputRef.current.parentElement.offsetWidth;
+        yield true; // If adding padding does not change the width (i.e. width is constrained), remove it again.
+
+        if (inputRef.current.parentElement.offsetWidth === width) {
+          yield false;
+        }
+      }
+    }
+  }), [inputRef, setReservePadding]);
+  useLayoutEffect(onResize, [onResize]);
+  useResizeObserver({
+    ref: inputRef,
+    onResize
+  }); // We also need to listen for resize events of the window so we can detect
+  // when there is enough space for the padding to be re-added. Ideally we'd
+  // use a resize observer on a parent element, but it's hard to know _what_
+  // parent element.
+
+  useEvent(useRef(window), 'resize', onResize);
+  let isInvalid = validationState === 'invalid';
+  let textfieldClass = classNames($aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default, 'spectrum-Textfield', {
+    'spectrum-Textfield--invalid': isInvalid,
+    'spectrum-Textfield--valid': validationState === 'valid',
+    'spectrum-Textfield--quiet': isQuiet
+  }, classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-field'), className);
+  let inputClass = classNames($aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default, 'spectrum-Textfield-input', {
+    'is-disabled': isDisabled,
+    'is-invalid': isInvalid
+  }, reservePadding && classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-input'), inputClassName);
+  let iconClass = classNames($aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default, 'spectrum-Textfield-validationIcon');
+  let validationIcon = null;
+
+  if (validationState === 'invalid') {
+    validationIcon = /*#__PURE__*/_react.createElement(_spectrumIconsUiAlertMedium, {
+      UNSAFE_className: iconClass
+    });
+  } else if (validationState === 'valid') {
+    validationIcon = /*#__PURE__*/_react.createElement(_spectrumIconsUiCheckmarkMedium, {
+      UNSAFE_className: iconClass
+    });
+  }
+
+  return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(fieldProps), {
+    className: textfieldClass,
+    style: style
+  }), /*#__PURE__*/_react.createElement(FocusRing, {
+    focusClass: classNames($aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default, 'is-focused'),
+    focusRingClass: classNames($aa1c742e7a2a16aa7981ca9e2f4a89$$interop$default, 'focus-ring'),
+    isTextInput: true,
+    within: true
+  }, /*#__PURE__*/_react.createElement("div", {
+    role: "presentation",
+    className: inputClass
+  }, /*#__PURE__*/_react.createElement("div", {
+    role: "presentation",
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-inputContents'),
+    ref: inputRef
+  }, /*#__PURE__*/_react.createElement(FocusScope, {
+    autoFocus: autoFocus
+  }, children)))), validationIcon);
+}
+
+// ASSET: /Users/govett/dev/react-spectrum-v3/node_modules/@adobe/spectrum-css-temp/components/inputgroup/vars.css
+var $ed163f34af6780259e0266609fb62099$exports = {};
+$ed163f34af6780259e0266609fb62099$exports = {
+  "spectrum-InputGroup": "_spectrum-InputGroup_d053e",
+  "spectrum-FieldButton": "_spectrum-FieldButton_d053e",
+  "is-disabled": "_is-disabled_d053e",
+  "spectrum-InputGroup--invalid": "_spectrum-InputGroup--invalid_d053e",
+  "spectrum-InputGroup--quiet": "_spectrum-InputGroup--quiet_d053e",
+  "spectrum-InputGroup-field": "_spectrum-InputGroup-field_d053e",
+  "spectrum-InputGroup-input-validationIcon": "_spectrum-InputGroup-input-validationIcon_d053e",
+  "spectrum-InputGroup-input-circleLoader": "_spectrum-InputGroup-input-circleLoader_d053e",
+  "spectrum-InputGroup-input": "_spectrum-InputGroup-input_d053e",
+  "spectrum-InputGroup-icon": "_spectrum-InputGroup-icon_d053e",
+  "spectrum-InputGroup-popover--quiet": "_spectrum-InputGroup-popover--quiet_d053e",
+  "spectrum-Datepicker--range": "_spectrum-Datepicker--range_d053e",
+  "spectrum-Datepicker--datetimeRange": "_spectrum-Datepicker--datetimeRange_d053e",
+  "spectrum-Datepicker-startField": "_spectrum-Datepicker-startField_d053e",
+  "spectrum-Datepicker-endField": "_spectrum-Datepicker-endField_d053e",
+  "spectrum-Datepicker--rangeDash": "_spectrum-Datepicker--rangeDash_d053e",
+  "is-focused": "_is-focused_d053e",
+  "spectrum-Datepicker-focusRing": "_spectrum-Datepicker-focusRing_d053e",
+  "is-hovered": "_is-hovered_d053e",
+  "focus-ring": "_focus-ring_d053e",
+  "is-selected": "_is-selected_d053e",
+  "spectrum-FieldButton--invalid": "_spectrum-FieldButton--invalid_d053e"
+};
+export function TimeField(props) {
+  props = useProviderProps(props);
+  let {
+    autoFocus,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isQuiet
+  } = props;
+  let ref = useRef();
+  let {
+    locale
+  } = useLocale();
+  let state = useTimeFieldState(_babelRuntimeHelpersEsmExtends({}, props, {
+    locale,
+    createCalendar
+  }));
+  let {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useDateField(props, state, ref);
+  return /*#__PURE__*/_react.createElement(Field, _babelRuntimeHelpersEsmExtends({}, props, {
+    labelProps: labelProps,
+    descriptionProps: descriptionProps,
+    errorMessageProps: errorMessageProps,
+    validationState: state.validationState,
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-TimeField-fieldWrapper')
+  }), /*#__PURE__*/_react.createElement($f7a3dc9c77601846b3cceddb1f68b1a$export$Input, {
+    fieldProps: fieldProps,
+    isDisabled: isDisabled,
+    isQuiet: isQuiet,
+    autoFocus: autoFocus,
+    validationState: state.validationState,
+    inputRef: ref,
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-TimeField')
+  }, state.segments.map((segment, i) => /*#__PURE__*/_react.createElement($d90fc87ed39803c47c775d8a63e9b3ac$export$DatePickerSegment, {
+    key: i,
+    segment: segment,
+    state: state,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired
+  }))));
+}
+
+function $fceb515efc46c02b9fa71489a5fd9a8$export$useFormatHelpText(props) {
+  let formatter = useDateFormatter({
+    dateStyle: 'short'
+  });
+  let displayNames = useDisplayNames();
+  return useMemo(() => {
+    if (props.description) {
+      return props.description;
+    }
+
+    if (props.showFormatHelpText) {
+      return formatter.formatToParts(new Date()).map(s => {
+        if (s.type === 'literal') {
+          return s.value;
+        }
+
+        return displayNames.of(s.type);
+      }).join(' ');
+    }
+
+    return '';
+  }, [props.description, props.showFormatHelpText, formatter, displayNames]);
+}
+
+function $fceb515efc46c02b9fa71489a5fd9a8$export$useVisibleMonths(maxVisibleMonths) {
+  let {
+    scale
+  } = useProvider();
+  let [visibleMonths, setVisibleMonths] = useState($fceb515efc46c02b9fa71489a5fd9a8$var$getVisibleMonths(scale));
+  useLayoutEffect(() => {
+    let onResize = () => setVisibleMonths($fceb515efc46c02b9fa71489a5fd9a8$var$getVisibleMonths(scale));
+
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [scale]);
+  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
+}
+
+function $fceb515efc46c02b9fa71489a5fd9a8$var$getVisibleMonths(scale) {
+  let monthWidth = scale === 'large' ? 336 : 280;
+  let gap = scale === 'large' ? 30 : 24;
+  let popoverPadding = scale === 'large' ? 32 : 48;
+  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
+}
+
+var $ed163f34af6780259e0266609fb62099$$interop$default = $parcel$interopDefault($ed163f34af6780259e0266609fb62099$exports);
+export function DatePicker(props) {
+  props = useProviderProps(props);
+  let {
+    autoFocus,
+    isQuiet,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    placeholderValue,
+    maxVisibleMonths = 1
+  } = props;
+  let {
+    hoverProps,
+    isHovered
+  } = useHover({
+    isDisabled
+  });
+  let targetRef = useRef();
+  let state = useDatePickerState(props);
+  let {
+    groupProps,
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    buttonProps,
+    dialogProps
+  } = useDatePicker(props, state, targetRef);
+  let {
+    value,
+    setValue,
+    isOpen,
+    setOpen
+  } = state;
+  let {
+    direction
+  } = useLocale();
+  let {
+    isFocused,
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    within: true,
+    isTextInput: true,
+    autoFocus
+  });
+  let className = classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup', {
+    'spectrum-InputGroup--quiet': isQuiet,
+    'spectrum-InputGroup--invalid': state.validationState === 'invalid',
+    'is-disabled': isDisabled,
+    'is-hovered': isHovered,
+    'is-focused': isFocused,
+    'focus-ring': isFocusVisible
+  });
+  let fieldClassName = classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup-input', {
+    'is-disabled': isDisabled,
+    'is-invalid': state.validationState === 'invalid'
+  }); // Note: this description is intentionally not passed to useDatePicker.
+  // The format help text is unnecessary for screen reader users because each segment already has a label.
+
+  let description = $fceb515efc46c02b9fa71489a5fd9a8$export$useFormatHelpText(props);
+
+  if (description && !props.description) {
+    descriptionProps.id = null;
+  }
+
+  let placeholder = placeholderValue;
+  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
+  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
+  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
+  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' || state.granularity === 'millisecond' ? state.granularity : null;
+  let showTimeField = !!timeGranularity;
+  let visibleMonths = $fceb515efc46c02b9fa71489a5fd9a8$export$useVisibleMonths(maxVisibleMonths);
+  return /*#__PURE__*/_react.createElement(Field, _babelRuntimeHelpersEsmExtends({}, props, {
+    ref: targetRef,
+    description: description,
+    labelProps: labelProps,
+    descriptionProps: descriptionProps,
+    errorMessageProps: errorMessageProps,
+    validationState: state.validationState,
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-fieldWrapper')
+  }), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, mergeProps(groupProps, hoverProps, focusProps), {
+    className: className
+  }), /*#__PURE__*/_react.createElement($f7a3dc9c77601846b3cceddb1f68b1a$export$Input, {
+    isDisabled: isDisabled,
+    isQuiet: isQuiet,
+    validationState: state.validationState,
+    autoFocus: autoFocus,
+    className: classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup-field'),
+    inputClassName: fieldClassName
+  }, /*#__PURE__*/_react.createElement($f89a664b25735c9291b8addecfd59013$export$DatePickerField, _babelRuntimeHelpersEsmExtends({}, fieldProps, {
+    isQuiet: isQuiet,
+    validationState: state.validationState,
+    value: value,
+    onChange: setValue,
+    placeholderValue: placeholderValue,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    granularity: props.granularity,
+    hourCycle: props.hourCycle,
+    inputClassName: fieldClassName,
+    hideTimeZone: props.hideTimeZone
+  }))), /*#__PURE__*/_react.createElement(DialogTrigger, {
+    type: "popover",
+    mobileType: "tray",
+    placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
+    targetRef: targetRef,
+    hideArrow: true,
+    isOpen: isOpen,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/_react.createElement(FieldButton, _babelRuntimeHelpersEsmExtends({}, buttonProps, {
+    UNSAFE_className: classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-FieldButton'),
+    isQuiet: isQuiet,
+    validationState: state.validationState,
+    isDisabled: isDisabled || isReadOnly
+  }), /*#__PURE__*/_react.createElement(_spectrumIconsWorkflowCalendar, null)), /*#__PURE__*/_react.createElement(Dialog, _babelRuntimeHelpersEsmExtends({
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-dialog')
+  }, dialogProps), /*#__PURE__*/_react.createElement(Content, {
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-dialogContent')
+  }, /*#__PURE__*/_react.createElement(Calendar, {
+    autoFocus: true,
+    value: state.dateValue,
+    onChange: state.setDateValue,
+    visibleMonths: visibleMonths,
+    minValue: props.minValue,
+    maxValue: props.maxValue
+  }), showTimeField && /*#__PURE__*/_react.createElement("div", {
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-timeFields')
+  }, /*#__PURE__*/_react.createElement(TimeField, {
+    label: "Time",
+    value: state.timeValue,
+    onChange: state.setTimeValue,
+    placeholderValue: timePlaceholder,
+    granularity: timeGranularity,
+    minValue: timeMinValue,
+    maxValue: timeMaxValue,
+    hourCycle: props.hourCycle,
+    hideTimeZone: props.hideTimeZone,
+    marginTop: "size-100"
+  })))))));
+}
+export function DateRangePicker(props) {
+  var _state$timeRange, _state$timeRange2;
+
+  props = useProviderProps(props);
+
+  let {
+    isQuiet,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    autoFocus,
+    placeholderValue,
+    maxVisibleMonths = 1
+  } = props,
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["isQuiet", "isDisabled", "isReadOnly", "isRequired", "autoFocus", "placeholderValue", "maxVisibleMonths"]);
+
+  let {
+    styleProps
+  } = useStyleProps(otherProps);
+  let {
+    hoverProps,
+    isHovered
+  } = useHover({
+    isDisabled
+  });
+  let targetRef = useRef();
+  let state = useDateRangePickerState(props);
+  let {
+    labelProps,
+    groupProps,
+    buttonProps,
+    dialogProps,
+    startFieldProps,
+    endFieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useDateRangePicker(props, state, targetRef);
+  let {
+    value,
+    isOpen,
+    setOpen
+  } = state;
+  let {
+    direction
+  } = useLocale();
+  let {
+    isFocused,
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    within: true,
+    isTextInput: true,
+    autoFocus
+  });
+  let className = classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup', {
+    'spectrum-InputGroup--quiet': isQuiet,
+    'spectrum-InputGroup--invalid': state.validationState === 'invalid',
+    'is-disabled': isDisabled,
+    'is-hovered': isHovered,
+    'is-focused': isFocused,
+    'focus-ring': isFocusVisible
+  }, styleProps.className);
+  let fieldClassName = classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup-input', {
+    'is-disabled': isDisabled,
+    'is-invalid': state.validationState === 'invalid'
+  }); // Note: this description is intentionally not passed to useDatePicker.
+  // The format help text is unnecessary for screen reader users because each segment already has a label.
+
+  let description = $fceb515efc46c02b9fa71489a5fd9a8$export$useFormatHelpText(props);
+
+  if (description && !props.description) {
+    descriptionProps.id = null;
+  }
+
+  let placeholder = placeholderValue;
+  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
+  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
+  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;
+  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' || state.granularity === 'millisecond' ? state.granularity : null;
+  let showTimeField = !!timeGranularity;
+  let visibleMonths = $fceb515efc46c02b9fa71489a5fd9a8$export$useVisibleMonths(maxVisibleMonths);
+  return /*#__PURE__*/_react.createElement(Field, _babelRuntimeHelpersEsmExtends({}, props, {
+    ref: targetRef,
+    description: description,
+    labelProps: labelProps,
+    descriptionProps: descriptionProps,
+    errorMessageProps: errorMessageProps,
+    validationState: state.validationState,
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-fieldWrapper')
+  }), /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, styleProps, mergeProps(groupProps, hoverProps, focusProps), {
+    className: className
+  }), /*#__PURE__*/_react.createElement($f7a3dc9c77601846b3cceddb1f68b1a$export$Input, {
+    isDisabled: isDisabled,
+    isQuiet: isQuiet,
+    validationState: state.validationState,
+    autoFocus: autoFocus,
+    className: classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-InputGroup-field'),
+    inputClassName: fieldClassName
+  }, /*#__PURE__*/_react.createElement($f89a664b25735c9291b8addecfd59013$export$DatePickerField, _babelRuntimeHelpersEsmExtends({}, startFieldProps, {
+    isQuiet: props.isQuiet,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    validationState: state.validationState,
+    placeholderValue: placeholderValue,
+    value: (value == null ? void 0 : value.start) || null,
+    defaultValue: null,
+    onChange: start => state.setDateTime('start', start),
+    granularity: props.granularity,
+    hourCycle: props.hourCycle,
+    inputClassName: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-startField')
+  })), /*#__PURE__*/_react.createElement($f52d33e8ff443414997ed587ce7ed905$var$DateRangeDash, null), /*#__PURE__*/_react.createElement($f89a664b25735c9291b8addecfd59013$export$DatePickerField, _babelRuntimeHelpersEsmExtends({}, endFieldProps, {
+    isQuiet: props.isQuiet,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    validationState: state.validationState,
+    placeholderValue: placeholderValue,
+    value: (value == null ? void 0 : value.end) || null,
+    defaultValue: null,
+    onChange: end => state.setDateTime('end', end),
+    granularity: props.granularity,
+    hourCycle: props.hourCycle,
+    inputClassName: classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-Datepicker-endField', classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-endField'))
+  }))), /*#__PURE__*/_react.createElement(DialogTrigger, {
+    type: "popover",
+    mobileType: "tray",
+    placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
+    targetRef: targetRef,
+    hideArrow: true,
+    isOpen: isOpen,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/_react.createElement(FieldButton, _babelRuntimeHelpersEsmExtends({}, buttonProps, {
+    UNSAFE_className: classNames($ed163f34af6780259e0266609fb62099$$interop$default, 'spectrum-FieldButton'),
+    isQuiet: isQuiet,
+    validationState: state.validationState,
+    isDisabled: isDisabled || isReadOnly
+  }), /*#__PURE__*/_react.createElement(_spectrumIconsWorkflowCalendar, null)), /*#__PURE__*/_react.createElement(Dialog, _babelRuntimeHelpersEsmExtends({
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-dialog')
+  }, dialogProps), /*#__PURE__*/_react.createElement(Content, {
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-dialogContent')
+  }, /*#__PURE__*/_react.createElement(RangeCalendar, {
+    autoFocus: true,
+    value: state.dateRange,
+    onChange: state.setDateRange,
+    visibleMonths: visibleMonths,
+    minValue: props.minValue,
+    maxValue: props.maxValue
+  }), showTimeField && /*#__PURE__*/_react.createElement(Flex, {
+    gap: "size-100",
+    marginTop: "size-100",
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-timeFields')
+  }, /*#__PURE__*/_react.createElement(TimeField, {
+    label: "Start time",
+    value: ((_state$timeRange = state.timeRange) == null ? void 0 : _state$timeRange.start) || null,
+    onChange: v => state.setTime('start', v),
+    placeholderValue: timePlaceholder,
+    granularity: timeGranularity,
+    minValue: timeMinValue,
+    maxValue: timeMaxValue,
+    hourCycle: props.hourCycle,
+    hideTimeZone: props.hideTimeZone,
+    flex: true
+  }), /*#__PURE__*/_react.createElement(TimeField, {
+    label: "End time",
+    value: ((_state$timeRange2 = state.timeRange) == null ? void 0 : _state$timeRange2.end) || null,
+    onChange: v => state.setTime('end', v),
+    placeholderValue: timePlaceholder,
+    granularity: timeGranularity,
+    minValue: timeMinValue,
+    maxValue: timeMaxValue,
+    hourCycle: props.hourCycle,
+    hideTimeZone: props.hideTimeZone,
+    flex: true
+  })))))));
+}
+
+function $f52d33e8ff443414997ed587ce7ed905$var$DateRangeDash() {
+  return /*#__PURE__*/_react.createElement("div", {
+    "aria-hidden": "true",
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-rangeDash')
+  });
+}
+
+export function DateField(props) {
+  props = useProviderProps(props);
+  let {
+    autoFocus,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    isQuiet
+  } = props;
+  let ref = useRef();
+  let {
+    locale
+  } = useLocale();
+  let state = useDatePickerFieldState(_babelRuntimeHelpersEsmExtends({}, props, {
+    locale,
+    createCalendar
+  }));
+  let {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useDateField(props, state, ref); // Note: this description is intentionally not passed to useDatePicker.
+  // The format help text is unnecessary for screen reader users because each segment already has a label.
+
+  let description = $fceb515efc46c02b9fa71489a5fd9a8$export$useFormatHelpText(props);
+
+  if (description && !props.description) {
+    descriptionProps.id = null;
+  }
+
+  return /*#__PURE__*/_react.createElement(Field, _babelRuntimeHelpersEsmExtends({}, props, {
+    description: description,
+    labelProps: labelProps,
+    descriptionProps: descriptionProps,
+    errorMessageProps: errorMessageProps,
+    validationState: state.validationState,
+    UNSAFE_className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-Datepicker-fieldWrapper')
+  }), /*#__PURE__*/_react.createElement($f7a3dc9c77601846b3cceddb1f68b1a$export$Input, {
+    fieldProps: fieldProps,
+    isDisabled: isDisabled,
+    isQuiet: isQuiet,
+    autoFocus: autoFocus,
+    validationState: state.validationState,
+    inputRef: ref,
+    className: classNames($fc5c1aaa653a82d8278e64c777eca$$interop$default, 'react-spectrum-DateField')
+  }, state.segments.map((segment, i) => /*#__PURE__*/_react.createElement($d90fc87ed39803c47c775d8a63e9b3ac$export$DatePickerSegment, {
+    key: i,
+    segment: segment,
+    state: state,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired
+  }))));
+}
+//# sourceMappingURL=module.js.map