@react-spectrum/datepicker 3.9.5 → 3.10.0

package/dist/DatePicker.module.js

@@ -1,14 +1,14 @@
 import {DatePickerField as $d2bb88c82604b25f$export$34dc4cfa15ead1} from "./DatePickerField.module.js";
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $8czI1$styles_cssmodulejs from "./styles_css.module.js";
 import {Input as $79348162c55d687f$export$f5b8910cec6cf069} from "./Input.module.js";
 import $8czI1$intlStringsmodulejs from "./intlStrings.module.js";
-import "./vars.3692148b.css";
+import "./vars.3d0e5be0.css";
 import "./textfield_vars_css.module.js";
 import "./vars.ccbd2e3f.css";
 import $8czI1$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
 import {TimeField as $f0a04554754386b6$export$5eaee2322dd727eb} from "./TimeField.module.js";
-import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0, useFormatHelpText as $04e96200274b03de$export$322f4580ccd8dde6, useVisibleMonths as $04e96200274b03de$export$12ce2869ce471b1f} from "./utils.module.js";
+import {useFocusManagerRef as $04e96200274b03de$export$71a23a36270e4bf0, useFormatHelpText as $04e96200274b03de$export$322f4580ccd8dde6, useFormattedDateWidth as $04e96200274b03de$export$31e22e3c931fc056, useVisibleMonths as $04e96200274b03de$export$12ce2869ce471b1f} from "./utils.module.js";
 import {Calendar as $8czI1$Calendar} from "@react-spectrum/calendar";
 import $8czI1$spectrumiconsworkflowCalendar from "@spectrum-icons/workflow/Calendar";
 import {classNames as $8czI1$classNames} from "@react-spectrum/utils";
@@ -71,7 +71,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $8czI1$useHover)({
         isDisabled: isDisabled
     });
-    let targetRef = (0, $8czI1$useRef)();
+    let targetRef = (0, $8czI1$useRef)(undefined);
     let state = (0, $8czI1$useDatePickerState)({
         ...props,
         shouldCloseOnSelect: ()=>!state.hasTime
@@ -80,7 +80,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
     let { isOpen: isOpen, setOpen: setOpen } = state;
     let { direction: direction } = (0, $8czI1$useLocale)();
     let domRef = (0, $04e96200274b03de$export$71a23a36270e4bf0)(ref);
-    let stringFormatter = (0, $8czI1$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8czI1$intlStringsmodulejs))), "@react-spectrum/datepicker");
+    let stringFormatter = (0, $8czI1$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8czI1$intlStringsmodulejs))), '@react-spectrum/datepicker');
     let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $8czI1$useFocusRing)({
         within: true,
         isTextInput: true,
@@ -91,30 +91,31 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
         isTextInput: false,
         autoFocus: autoFocus
     });
-    let className = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup", {
-        "spectrum-InputGroup--quiet": isQuiet,
-        "spectrum-InputGroup--invalid": isInvalid && !isDisabled,
-        "is-disabled": isDisabled,
-        "is-hovered": isHovered,
-        "is-focused": isFocused,
-        "focus-ring": isFocusVisible && !isFocusedButton
+    let className = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup', {
+        'spectrum-InputGroup--quiet': isQuiet,
+        'spectrum-InputGroup--invalid': isInvalid && !isDisabled,
+        'is-disabled': isDisabled,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'focus-ring': isFocusVisible && !isFocusedButton
     });
-    let fieldClassName = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-input", {
-        "is-disabled": isDisabled,
-        "is-invalid": isInvalid && !isDisabled
+    let fieldClassName = (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-input', {
+        'is-disabled': isDisabled,
+        'is-invalid': isInvalid && !isDisabled
     });
     // 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 = (0, $04e96200274b03de$export$322f4580ccd8dde6)(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 : null;
+    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 : null;
     let showTimeField = !!timeGranularity;
     let visibleMonths = (0, $04e96200274b03de$export$12ce2869ce471b1f)(maxVisibleMonths);
-    let validationState = state.validationState || (isInvalid ? "invalid" : null);
+    let validationState = state.validationState || (isInvalid ? 'invalid' : null);
+    let approximateWidth = (0, $04e96200274b03de$export$31e22e3c931fc056)(state) + 'ch';
     return /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Field), {
         ...props,
         ref: domRef,
@@ -127,7 +128,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
         isInvalid: isInvalid,
         validationErrors: validationErrors,
         validationDetails: validationDetails,
-        wrapperClassName: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), "react-spectrum-Datepicker-fieldWrapper")
+        wrapperClassName: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-fieldWrapper')
     }, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
         ...(0, $8czI1$mergeProps)(groupProps, hoverProps, focusProps),
         className: className,
@@ -136,9 +137,10 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
         isDisabled: isDisabled,
         isQuiet: isQuiet,
         validationState: validationState,
-        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), "spectrum-InputGroup-field"),
+        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-InputGroup-field'),
         inputClassName: fieldClassName,
-        disableFocusRing: true
+        disableFocusRing: true,
+        minWidth: approximateWidth
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $d2bb88c82604b25f$export$34dc4cfa15ead1), {
         ...fieldProps,
         "data-testid": "date-field",
@@ -146,7 +148,7 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
     })), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$DialogTrigger), {
         type: "popover",
         mobileType: "tray",
-        placement: direction === "rtl" ? "bottom right" : "bottom left",
+        placement: direction === 'rtl' ? 'bottom right' : 'bottom left',
         targetRef: targetRef,
         hideArrow: true,
         isOpen: isOpen,
@@ -154,25 +156,25 @@ function $beaeefa091999363$var$DatePicker(props, ref) {
         shouldFlip: props.shouldFlip
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$FieldButton), {
         ...(0, $8czI1$mergeProps)(buttonProps, focusPropsButton),
-        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), "spectrum-FieldButton"),
+        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$inputgroup_vars_cssmodulejs))), 'spectrum-FieldButton'),
         isQuiet: isQuiet,
         validationState: validationState
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$spectrumiconsworkflowCalendar), null)), /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Dialog), {
-        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), "react-spectrum-Datepicker-dialog"),
+        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialog'),
         ...dialogProps
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Content), null, /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
-        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), "react-spectrum-Datepicker-dialogContent")
+        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-dialogContent')
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $8czI1$Calendar), {
         ...calendarProps,
         visibleMonths: visibleMonths,
         pageBehavior: pageBehavior,
-        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), "react-spectrum-Datepicker-calendar", {
-            "is-invalid": isInvalid
+        UNSAFE_className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-calendar', {
+            'is-invalid': isInvalid
         })
     }), showTimeField && /*#__PURE__*/ (0, $8czI1$react).createElement("div", {
-        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), "react-spectrum-Datepicker-timeFields")
+        className: (0, $8czI1$classNames)((0, ($parcel$interopDefault($8czI1$styles_cssmodulejs))), 'react-spectrum-Datepicker-timeFields')
     }, /*#__PURE__*/ (0, $8czI1$react).createElement((0, $f0a04554754386b6$export$5eaee2322dd727eb), {
-        label: stringFormatter.format("time"),
+        label: stringFormatter.format('time'),
         value: state.timeValue,
         onChange: state.setTimeValue,
         placeholderValue: timePlaceholder,

package/dist/DatePicker.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isQuiet,\n    isDisabled,\n    placeholderValue,\n    maxVisibleMonths = 1,\n    pageBehavior\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement>();\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(\n    styles,\n    'spectrum-InputGroup',\n    {\n      'spectrum-InputGroup--quiet': isQuiet,\n      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n      'is-disabled': isDisabled,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'focus-ring': isFocusVisible && !isFocusedButton\n    }\n  );\n\n  let fieldClassName = classNames(\n    styles,\n    'spectrum-InputGroup-input',\n    {\n      'is-disabled': isDisabled,\n      'is-invalid': isInvalid && !isDisabled\n    }\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = null;\n  }\n\n  let placeholder: DateValue = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing>\n          <DatePickerField\n            {...fieldProps}\n            data-testid=\"date-field\"\n            isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n            <Content>\n              <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  pageBehavior={pageBehavior}\n                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n                {showTimeField &&\n                  <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\" />\n                  </div>\n                }\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nconst _DatePicker = React.forwardRef(DatePicker) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_DatePicker as DatePicker};\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/datepicker/src/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Calendar} from '@react-spectrum/calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '@react-spectrum/utils';\nimport {Content} from '@react-spectrum/view';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport {Dialog, DialogTrigger} from '@react-spectrum/dialog';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css'; // HACK: must be included BEFORE inputgroup\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDatePicker} from '@react-aria/datepicker';\nimport {useDatePickerState} from '@react-stately/datepicker';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth, useVisibleMonths} from './utils';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isQuiet,\n    isDisabled,\n    placeholderValue,\n    maxVisibleMonths = 1,\n    pageBehavior\n  } = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement>(undefined);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {groupProps, labelProps, fieldProps, descriptionProps, errorMessageProps, buttonProps, dialogProps, calendarProps, isInvalid, validationErrors, validationDetails} = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(\n    styles,\n    'spectrum-InputGroup',\n    {\n      'spectrum-InputGroup--quiet': isQuiet,\n      'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n      'is-disabled': isDisabled,\n      'is-hovered': isHovered,\n      'is-focused': isFocused,\n      'focus-ring': isFocusVisible && !isFocusedButton\n    }\n  );\n\n  let fieldClassName = classNames(\n    styles,\n    'spectrum-InputGroup-input',\n    {\n      'is-disabled': isDisabled,\n      'is-invalid': isInvalid && !isDisabled\n    }\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = null;\n  }\n\n  let placeholder: DateValue = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField\n            {...fieldProps}\n            data-testid=\"date-field\"\n            isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')} {...dialogProps}>\n            <Content>\n              <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  pageBehavior={pageBehavior}\n                  UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-calendar', {'is-invalid': isInvalid})} />\n                {showTimeField &&\n                  <div className={classNames(datepickerStyles, 'react-spectrum-Datepicker-timeFields')}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\" />\n                  </div>\n                }\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nconst _DatePicker = React.forwardRef(DatePicker) as <T extends DateValue>(props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_DatePicker as DatePicker};\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}

package/dist/DatePickerField.main.js

@@ -1,5 +1,5 @@
 var $edac158d20ebe4a9$exports = require("./DatePickerSegment.main.js");
-require("./styles.36ea4632.css");
+require("./styles.b562cf4b.css");
 var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
 var $g7Fnj$reactspectrumutils = require("@react-spectrum/utils");
 var $g7Fnj$internationalizeddate = require("@internationalized/date");
@@ -38,22 +38,22 @@ $parcel$export(module.exports, "DatePickerField", () => $bd22dc8dad9522bc$export
 
 function $bd22dc8dad9522bc$export$34dc4cfa15ead1(props) {
     let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, inputClassName: inputClassName } = props;
-    let ref = (0, $g7Fnj$react.useRef)();
+    let ref = (0, $g7Fnj$react.useRef)(undefined);
     let { locale: locale } = (0, $g7Fnj$reactariai18n.useLocale)();
     let state = (0, $g7Fnj$reactstatelydatepicker.useDateFieldState)({
         ...props,
         locale: locale,
         createCalendar: $g7Fnj$internationalizeddate.createCalendar
     });
-    let inputRef = (0, $g7Fnj$react.useRef)();
+    let inputRef = (0, $g7Fnj$react.useRef)(undefined);
     let { fieldProps: fieldProps, inputProps: inputProps } = (0, $g7Fnj$reactariadatepicker.useDateField)({
         ...props,
         inputRef: inputRef
     }, state, ref);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($g7Fnj$react))).createElement("div", {
         ...fieldProps,
-        "data-testid": props["data-testid"],
-        className: (0, $g7Fnj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-Datepicker-segments", inputClassName),
+        "data-testid": props['data-testid'],
+        className: (0, $g7Fnj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-segments', inputClassName),
         ref: ref
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, ($parcel$interopDefault($g7Fnj$react))).createElement((0, $edac158d20ebe4a9$exports.DatePickerSegment), {
             key: i,

package/dist/DatePickerField.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,SAAS,wCAAqC,KAA8B;IACjF,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,kBACV,cAAc,EACf,GAAG;IACJ,IAAI,MAAM,CAAA,GAAA,mBAAK;IACf,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+CAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK;IACpB,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAW,EAAE;QAAC,GAAG,KAAK;kBAAE;IAAQ,GAAG,OAAO;IAEzE,qBACE,0DAAC;QAAK,GAAG,UAAU;QAAE,eAAa,KAAK,CAAC,cAAc;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG,sCAAsC;QAAiB,KAAK;OACzJ,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,0DAAC,CAAA,GAAA,2CAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,0DAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAGlC","sources":["packages/@react-spectrum/datepicker/src/DatePickerField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport {useDateField} from '@react-aria/datepicker';\nimport {useDateFieldState} from '@react-stately/datepicker';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerProps<T> {\n  inputClassName?: string,\n  hideValidationIcon?: boolean,\n  maxGranularity?: SpectrumDatePickerProps<T>['granularity']\n}\n\nexport function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>) {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    inputClassName\n  } = props;\n  let ref = useRef();\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let inputRef = useRef();\n  let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);\n\n  return (\n    <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>\n      {state.segments.map((segment, i) =>\n        (<DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired} />)\n      )}\n      <input {...inputProps} ref={inputRef} />\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerField.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,SAAS,wCAAqC,KAA8B;IACjF,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,kBACV,cAAc,EACf,GAAG;IACJ,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,+CAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAW,EAAE;QAAC,GAAG,KAAK;kBAAE;IAAQ,GAAG,OAAO;IAEzE,qBACE,0DAAC;QAAK,GAAG,UAAU;QAAE,eAAa,KAAK,CAAC,cAAc;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG,sCAAsC;QAAiB,KAAK;OACzJ,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,0DAAC,CAAA,GAAA,2CAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,0DAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAGlC","sources":["packages/@react-spectrum/datepicker/src/DatePickerField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport {useDateField} from '@react-aria/datepicker';\nimport {useDateFieldState} from '@react-stately/datepicker';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerProps<T> {\n  inputClassName?: string,\n  hideValidationIcon?: boolean,\n  maxGranularity?: SpectrumDatePickerProps<T>['granularity']\n}\n\nexport function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>) {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    inputClassName\n  } = props;\n  let ref = useRef(undefined);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let inputRef = useRef(undefined);\n  let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);\n\n  return (\n    <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>\n      {state.segments.map((segment, i) =>\n        (<DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired} />)\n      )}\n      <input {...inputProps} ref={inputRef} />\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerField.main.js.map"}

package/dist/DatePickerField.mjs

@@ -1,5 +1,5 @@
 import {DatePickerSegment as $cfa347761f172638$export$6388987c5223b54e} from "./DatePickerSegment.mjs";
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $332Ed$styles_cssmodulejs from "./styles_css.mjs";
 import {classNames as $332Ed$classNames} from "@react-spectrum/utils";
 import {createCalendar as $332Ed$createCalendar} from "@internationalized/date";
@@ -32,22 +32,22 @@ function $parcel$interopDefault(a) {
 
 function $d2bb88c82604b25f$export$34dc4cfa15ead1(props) {
     let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, inputClassName: inputClassName } = props;
-    let ref = (0, $332Ed$useRef)();
+    let ref = (0, $332Ed$useRef)(undefined);
     let { locale: locale } = (0, $332Ed$useLocale)();
     let state = (0, $332Ed$useDateFieldState)({
         ...props,
         locale: locale,
         createCalendar: $332Ed$createCalendar
     });
-    let inputRef = (0, $332Ed$useRef)();
+    let inputRef = (0, $332Ed$useRef)(undefined);
     let { fieldProps: fieldProps, inputProps: inputProps } = (0, $332Ed$useDateField)({
         ...props,
         inputRef: inputRef
     }, state, ref);
     return /*#__PURE__*/ (0, $332Ed$react).createElement("div", {
         ...fieldProps,
-        "data-testid": props["data-testid"],
-        className: (0, $332Ed$classNames)((0, ($parcel$interopDefault($332Ed$styles_cssmodulejs))), "react-spectrum-Datepicker-segments", inputClassName),
+        "data-testid": props['data-testid'],
+        className: (0, $332Ed$classNames)((0, ($parcel$interopDefault($332Ed$styles_cssmodulejs))), 'react-spectrum-Datepicker-segments', inputClassName),
         ref: ref
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, $332Ed$react).createElement((0, $cfa347761f172638$export$6388987c5223b54e), {
             key: i,
@@ -64,4 +64,4 @@ function $d2bb88c82604b25f$export$34dc4cfa15ead1(props) {
 
 
 export {$d2bb88c82604b25f$export$34dc4cfa15ead1 as DatePickerField};
-//# sourceMappingURL=DatePickerField.mjs.map
+//# sourceMappingURL=DatePickerField.module.js.map

package/dist/DatePickerField.module.js

@@ -1,5 +1,5 @@
 import {DatePickerSegment as $cfa347761f172638$export$6388987c5223b54e} from "./DatePickerSegment.module.js";
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $332Ed$styles_cssmodulejs from "./styles_css.module.js";
 import {classNames as $332Ed$classNames} from "@react-spectrum/utils";
 import {createCalendar as $332Ed$createCalendar} from "@internationalized/date";
@@ -32,22 +32,22 @@ function $parcel$interopDefault(a) {
 
 function $d2bb88c82604b25f$export$34dc4cfa15ead1(props) {
     let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, inputClassName: inputClassName } = props;
-    let ref = (0, $332Ed$useRef)();
+    let ref = (0, $332Ed$useRef)(undefined);
     let { locale: locale } = (0, $332Ed$useLocale)();
     let state = (0, $332Ed$useDateFieldState)({
         ...props,
         locale: locale,
         createCalendar: $332Ed$createCalendar
     });
-    let inputRef = (0, $332Ed$useRef)();
+    let inputRef = (0, $332Ed$useRef)(undefined);
     let { fieldProps: fieldProps, inputProps: inputProps } = (0, $332Ed$useDateField)({
         ...props,
         inputRef: inputRef
     }, state, ref);
     return /*#__PURE__*/ (0, $332Ed$react).createElement("div", {
         ...fieldProps,
-        "data-testid": props["data-testid"],
-        className: (0, $332Ed$classNames)((0, ($parcel$interopDefault($332Ed$styles_cssmodulejs))), "react-spectrum-Datepicker-segments", inputClassName),
+        "data-testid": props['data-testid'],
+        className: (0, $332Ed$classNames)((0, ($parcel$interopDefault($332Ed$styles_cssmodulejs))), 'react-spectrum-Datepicker-segments', inputClassName),
         ref: ref
     }, state.segments.map((segment, i)=>/*#__PURE__*/ (0, $332Ed$react).createElement((0, $cfa347761f172638$export$6388987c5223b54e), {
             key: i,

package/dist/DatePickerField.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,SAAS,wCAAqC,KAA8B;IACjF,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,kBACV,cAAc,EACf,GAAG;IACJ,IAAI,MAAM,CAAA,GAAA,aAAK;IACf,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK;IACpB,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,GAAG,KAAK;kBAAE;IAAQ,GAAG,OAAO;IAEzE,qBACE,gCAAC;QAAK,GAAG,UAAU;QAAE,eAAa,KAAK,CAAC,cAAc;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG,sCAAsC;QAAiB,KAAK;OACzJ,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAGlC","sources":["packages/@react-spectrum/datepicker/src/DatePickerField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport {useDateField} from '@react-aria/datepicker';\nimport {useDateFieldState} from '@react-stately/datepicker';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerProps<T> {\n  inputClassName?: string,\n  hideValidationIcon?: boolean,\n  maxGranularity?: SpectrumDatePickerProps<T>['granularity']\n}\n\nexport function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>) {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    inputClassName\n  } = props;\n  let ref = useRef();\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let inputRef = useRef();\n  let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);\n\n  return (\n    <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>\n      {state.segments.map((segment, i) =>\n        (<DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired} />)\n      )}\n      <input {...inputProps} ref={inputRef} />\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerField.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAkBM,SAAS,wCAAqC,KAA8B;IACjF,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,kBACV,cAAc,EACf,GAAG;IACJ,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAAC,GAAG,KAAK;kBAAE;IAAQ,GAAG,OAAO;IAEzE,qBACE,gCAAC;QAAK,GAAG,UAAU;QAAE,eAAa,KAAK,CAAC,cAAc;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAe,GAAG,sCAAsC;QAAiB,KAAK;OACzJ,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAGlC","sources":["packages/@react-spectrum/datepicker/src/DatePickerField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport {useDateField} from '@react-aria/datepicker';\nimport {useDateFieldState} from '@react-stately/datepicker';\nimport {useLocale} from '@react-aria/i18n';\n\ninterface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerProps<T> {\n  inputClassName?: string,\n  hideValidationIcon?: boolean,\n  maxGranularity?: SpectrumDatePickerProps<T>['granularity']\n}\n\nexport function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>) {\n  let {\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    inputClassName\n  } = props;\n  let ref = useRef(undefined);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let inputRef = useRef(undefined);\n  let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);\n\n  return (\n    <div {...fieldProps} data-testid={props['data-testid']} className={classNames(datepickerStyles, 'react-spectrum-Datepicker-segments', inputClassName)} ref={ref}>\n      {state.segments.map((segment, i) =>\n        (<DatePickerSegment\n          key={i}\n          segment={segment}\n          state={state}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired} />)\n      )}\n      <input {...inputProps} ref={inputRef} />\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerField.module.js.map"}

package/dist/DatePickerSegment.main.js

@@ -1,4 +1,4 @@
-require("./styles.36ea4632.css");
+require("./styles.b562cf4b.css");
 var $91c3db8c6a21ca71$exports = require("./styles_css.main.js");
 var $9PhAi$reactspectrumutils = require("@react-spectrum/utils");
 var $9PhAi$react = require("react");
@@ -31,7 +31,7 @@ $parcel$export(module.exports, "DatePickerSegment", () => $edac158d20ebe4a9$expo
 function $edac158d20ebe4a9$export$6388987c5223b54e({ segment: segment, state: state, ...otherProps }) {
     switch(segment.type){
         // A separator, e.g. punctuation
-        case "literal":
+        case 'literal':
             return /*#__PURE__*/ (0, ($parcel$interopDefault($9PhAi$react))).createElement($edac158d20ebe4a9$var$LiteralSegment, {
                 segment: segment
             });
@@ -47,29 +47,26 @@ function $edac158d20ebe4a9$export$6388987c5223b54e({ segment: segment, state: st
 function $edac158d20ebe4a9$var$LiteralSegment({ segment: segment }) {
     return /*#__PURE__*/ (0, ($parcel$interopDefault($9PhAi$react))).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-Datepicker-literal"),
-        "data-testid": segment.type === "literal" ? undefined : segment.type
+        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-Datepicker-literal'),
+        "data-testid": segment.type === 'literal' ? undefined : segment.type
     }, segment.text);
 }
 function $edac158d20ebe4a9$var$EditableSegment({ segment: segment, state: state }) {
-    let ref = (0, $9PhAi$react.useRef)();
+    let ref = (0, $9PhAi$react.useRef)(undefined);
     let { segmentProps: segmentProps } = (0, $9PhAi$reactariadatepicker.useDateSegment)(segment, state, ref);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($9PhAi$react))).createElement("div", {
         ...segmentProps,
         ref: ref,
-        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-DatePicker-cell", {
-            "is-placeholder": segment.isPlaceholder,
-            "is-read-only": !segment.isEditable
+        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-DatePicker-cell', {
+            'is-placeholder': segment.isPlaceholder,
+            'is-read-only': !segment.isEditable
         }),
-        style: {
-            ...segmentProps.style,
-            minWidth: segment.maxValue != null ? String(segment.maxValue).length + "ch" : null
-        },
+        style: segmentProps.style,
         "data-testid": segment.type
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9PhAi$react))).createElement("span", {
+    }, segment.isPlaceholder ? /*#__PURE__*/ (0, ($parcel$interopDefault($9PhAi$react))).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), "react-spectrum-DatePicker-placeholder")
-    }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
+        className: (0, $9PhAi$reactspectrumutils.classNames)((0, ($parcel$interopDefault($91c3db8c6a21ca71$exports))), 'react-spectrum-DatePicker-placeholder')
+    }, segment.placeholder) : segment.text);
 }
 
 

package/dist/DatePickerSegment.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAkBM,SAAS,0CAAkB,WAAC,OAAO,SAAE,KAAK,EAAE,GAAG,YAAmC;IACvF,OAAQ,QAAQ,IAAI;QAClB,gCAAgC;QAChC,KAAK;YACH,qBAAO,0DAAC;gBAAe,SAAS;;QAElC,mBAAmB;QACnB;YACE,qBAAO,0DAAC;gBAAgB,SAAS;gBAAS,OAAO;gBAAQ,GAAG,UAAU;;IAC1E;AACF;AAEA,SAAS,qCAAe,WAAC,OAAO,EAAsB;IACpD,qBACE,0DAAC;QACC,eAAY;QACZ,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAa,QAAQ,IAAI,KAAK,YAAY,YAAY,QAAQ,IAAI;OACjE,QAAQ,IAAI;AAGnB;AAEA,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,EAAyB;IAC/D,IAAI,MAAM,CAAA,GAAA,mBAAK;IACf,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE,SAAS,OAAO;IACpD,qBACE,0DAAC;QACE,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,kCAAkC;YAC9D,kBAAkB,QAAQ,aAAa;YACvC,gBAAgB,CAAC,QAAQ,UAAU;QACrC;QACA,OAAO;YACL,GAAG,aAAa,KAAK;YACrB,UAAU,QAAQ,QAAQ,IAAI,OAAO,OAAO,QAAQ,QAAQ,EAAE,MAAM,GAAG,OAAO;QAChF;QACA,eAAa,QAAQ,IAAI;qBACzB,0DAAC;QAAK,eAAY;QAAO,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA2C,QAAQ,WAAW,GACpH,QAAQ,aAAa,GAAG,KAAK,QAAQ,IAAI;AAGhD","sources":["packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {DatePickerBase, DateValue} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport styles from './styles.css';\nimport {useDateSegment} from '@react-aria/datepicker';\n\ninterface DatePickerSegmentProps extends DatePickerBase<DateValue> {\n  segment: DateSegment,\n  state: DateFieldState\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment\n}\n\nexport function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return <EditableSegment segment={segment} state={state} {...otherProps} />;\n  }\n}\n\nfunction LiteralSegment({segment}: LiteralSegmentProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={classNames(styles, 'react-spectrum-Datepicker-literal')}\n      data-testid={segment.type === 'literal' ? undefined : segment.type}>\n      {segment.text}\n    </span>\n  );\n}\n\nfunction EditableSegment({segment, state}: DatePickerSegmentProps) {\n  let ref = useRef();\n  let {segmentProps} = useDateSegment(segment, state, ref);\n  return (\n    <div\n      {...segmentProps}\n      ref={ref}\n      className={classNames(styles, 'react-spectrum-DatePicker-cell', {\n        'is-placeholder': segment.isPlaceholder,\n        'is-read-only': !segment.isEditable\n      })}\n      style={{\n        ...segmentProps.style,\n        minWidth: segment.maxValue != null ? String(segment.maxValue).length + 'ch' : null\n      }}\n      data-testid={segment.type}>\n      <span aria-hidden=\"true\" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span>\n      {segment.isPlaceholder ? '' : segment.text}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerSegment.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAkBM,SAAS,0CAAkB,WAAC,OAAO,SAAE,KAAK,EAAE,GAAG,YAAmC;IACvF,OAAQ,QAAQ,IAAI;QAClB,gCAAgC;QAChC,KAAK;YACH,qBAAO,0DAAC;gBAAe,SAAS;;QAElC,mBAAmB;QACnB;YACE,qBAAO,0DAAC;gBAAgB,SAAS;gBAAS,OAAO;gBAAQ,GAAG,UAAU;;IAC1E;AACF;AAEA,SAAS,qCAAe,WAAC,OAAO,EAAsB;IACpD,qBACE,0DAAC;QACC,eAAY;QACZ,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAa,QAAQ,IAAI,KAAK,YAAY,YAAY,QAAQ,IAAI;OACjE,QAAQ,IAAI;AAGnB;AAEA,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,EAAyB;IAC/D,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,yCAAa,EAAE,SAAS,OAAO;IAEpD,qBACE,0DAAC;QACE,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,kCAAkC;YAC9D,kBAAkB,QAAQ,aAAa;YACvC,gBAAgB,CAAC,QAAQ,UAAU;QACrC;QACA,OAAO,aAAa,KAAK;QACzB,eAAa,QAAQ,IAAI;OACxB,QAAQ,aAAa,iBAAG,0DAAC;QAAK,eAAY;QAAO,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA2C,QAAQ,WAAW,IAAW,QAAQ,IAAI;AAG3K","sources":["packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {DatePickerBase, DateValue} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport styles from './styles.css';\nimport {useDateSegment} from '@react-aria/datepicker';\n\ninterface DatePickerSegmentProps extends DatePickerBase<DateValue> {\n  segment: DateSegment,\n  state: DateFieldState\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment\n}\n\nexport function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return <EditableSegment segment={segment} state={state} {...otherProps} />;\n  }\n}\n\nfunction LiteralSegment({segment}: LiteralSegmentProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={classNames(styles, 'react-spectrum-Datepicker-literal')}\n      data-testid={segment.type === 'literal' ? undefined : segment.type}>\n      {segment.text}\n    </span>\n  );\n}\n\nfunction EditableSegment({segment, state}: DatePickerSegmentProps) {\n  let ref = useRef(undefined);\n  let {segmentProps} = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      ref={ref}\n      className={classNames(styles, 'react-spectrum-DatePicker-cell', {\n        'is-placeholder': segment.isPlaceholder,\n        'is-read-only': !segment.isEditable\n      })}\n      style={segmentProps.style}\n      data-testid={segment.type}>\n      {segment.isPlaceholder ? <span aria-hidden=\"true\" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span> : segment.text}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerSegment.main.js.map"}

package/dist/DatePickerSegment.mjs

@@ -1,4 +1,4 @@
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $jOVo7$styles_cssmodulejs from "./styles_css.mjs";
 import {classNames as $jOVo7$classNames} from "@react-spectrum/utils";
 import $jOVo7$react, {useRef as $jOVo7$useRef} from "react";
@@ -25,7 +25,7 @@ function $parcel$interopDefault(a) {
 function $cfa347761f172638$export$6388987c5223b54e({ segment: segment, state: state, ...otherProps }) {
     switch(segment.type){
         // A separator, e.g. punctuation
-        case "literal":
+        case 'literal':
             return /*#__PURE__*/ (0, $jOVo7$react).createElement($cfa347761f172638$var$LiteralSegment, {
                 segment: segment
             });
@@ -41,31 +41,28 @@ function $cfa347761f172638$export$6388987c5223b54e({ segment: segment, state: st
 function $cfa347761f172638$var$LiteralSegment({ segment: segment }) {
     return /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-Datepicker-literal"),
-        "data-testid": segment.type === "literal" ? undefined : segment.type
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-Datepicker-literal'),
+        "data-testid": segment.type === 'literal' ? undefined : segment.type
     }, segment.text);
 }
 function $cfa347761f172638$var$EditableSegment({ segment: segment, state: state }) {
-    let ref = (0, $jOVo7$useRef)();
+    let ref = (0, $jOVo7$useRef)(undefined);
     let { segmentProps: segmentProps } = (0, $jOVo7$useDateSegment)(segment, state, ref);
     return /*#__PURE__*/ (0, $jOVo7$react).createElement("div", {
         ...segmentProps,
         ref: ref,
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-DatePicker-cell", {
-            "is-placeholder": segment.isPlaceholder,
-            "is-read-only": !segment.isEditable
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-DatePicker-cell', {
+            'is-placeholder': segment.isPlaceholder,
+            'is-read-only': !segment.isEditable
         }),
-        style: {
-            ...segmentProps.style,
-            minWidth: segment.maxValue != null ? String(segment.maxValue).length + "ch" : null
-        },
+        style: segmentProps.style,
         "data-testid": segment.type
-    }, /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
+    }, segment.isPlaceholder ? /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-DatePicker-placeholder")
-    }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-DatePicker-placeholder')
+    }, segment.placeholder) : segment.text);
 }
 
 
 export {$cfa347761f172638$export$6388987c5223b54e as DatePickerSegment};
-//# sourceMappingURL=DatePickerSegment.mjs.map
+//# sourceMappingURL=DatePickerSegment.module.js.map

package/dist/DatePickerSegment.module.js

@@ -1,4 +1,4 @@
-import "./styles.36ea4632.css";
+import "./styles.b562cf4b.css";
 import $jOVo7$styles_cssmodulejs from "./styles_css.module.js";
 import {classNames as $jOVo7$classNames} from "@react-spectrum/utils";
 import $jOVo7$react, {useRef as $jOVo7$useRef} from "react";
@@ -25,7 +25,7 @@ function $parcel$interopDefault(a) {
 function $cfa347761f172638$export$6388987c5223b54e({ segment: segment, state: state, ...otherProps }) {
     switch(segment.type){
         // A separator, e.g. punctuation
-        case "literal":
+        case 'literal':
             return /*#__PURE__*/ (0, $jOVo7$react).createElement($cfa347761f172638$var$LiteralSegment, {
                 segment: segment
             });
@@ -41,29 +41,26 @@ function $cfa347761f172638$export$6388987c5223b54e({ segment: segment, state: st
 function $cfa347761f172638$var$LiteralSegment({ segment: segment }) {
     return /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-Datepicker-literal"),
-        "data-testid": segment.type === "literal" ? undefined : segment.type
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-Datepicker-literal'),
+        "data-testid": segment.type === 'literal' ? undefined : segment.type
     }, segment.text);
 }
 function $cfa347761f172638$var$EditableSegment({ segment: segment, state: state }) {
-    let ref = (0, $jOVo7$useRef)();
+    let ref = (0, $jOVo7$useRef)(undefined);
     let { segmentProps: segmentProps } = (0, $jOVo7$useDateSegment)(segment, state, ref);
     return /*#__PURE__*/ (0, $jOVo7$react).createElement("div", {
         ...segmentProps,
         ref: ref,
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-DatePicker-cell", {
-            "is-placeholder": segment.isPlaceholder,
-            "is-read-only": !segment.isEditable
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-DatePicker-cell', {
+            'is-placeholder': segment.isPlaceholder,
+            'is-read-only': !segment.isEditable
         }),
-        style: {
-            ...segmentProps.style,
-            minWidth: segment.maxValue != null ? String(segment.maxValue).length + "ch" : null
-        },
+        style: segmentProps.style,
         "data-testid": segment.type
-    }, /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
+    }, segment.isPlaceholder ? /*#__PURE__*/ (0, $jOVo7$react).createElement("span", {
         "aria-hidden": "true",
-        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), "react-spectrum-DatePicker-placeholder")
-    }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
+        className: (0, $jOVo7$classNames)((0, ($parcel$interopDefault($jOVo7$styles_cssmodulejs))), 'react-spectrum-DatePicker-placeholder')
+    }, segment.placeholder) : segment.text);
 }
 
 

package/dist/DatePickerSegment.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAkBM,SAAS,0CAAkB,WAAC,OAAO,SAAE,KAAK,EAAE,GAAG,YAAmC;IACvF,OAAQ,QAAQ,IAAI;QAClB,gCAAgC;QAChC,KAAK;YACH,qBAAO,gCAAC;gBAAe,SAAS;;QAElC,mBAAmB;QACnB;YACE,qBAAO,gCAAC;gBAAgB,SAAS;gBAAS,OAAO;gBAAQ,GAAG,UAAU;;IAC1E;AACF;AAEA,SAAS,qCAAe,WAAC,OAAO,EAAsB;IACpD,qBACE,gCAAC;QACC,eAAY;QACZ,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAa,QAAQ,IAAI,KAAK,YAAY,YAAY,QAAQ,IAAI;OACjE,QAAQ,IAAI;AAGnB;AAEA,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,EAAyB;IAC/D,IAAI,MAAM,CAAA,GAAA,aAAK;IACf,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE,SAAS,OAAO;IACpD,qBACE,gCAAC;QACE,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,kCAAkC;YAC9D,kBAAkB,QAAQ,aAAa;YACvC,gBAAgB,CAAC,QAAQ,UAAU;QACrC;QACA,OAAO;YACL,GAAG,aAAa,KAAK;YACrB,UAAU,QAAQ,QAAQ,IAAI,OAAO,OAAO,QAAQ,QAAQ,EAAE,MAAM,GAAG,OAAO;QAChF;QACA,eAAa,QAAQ,IAAI;qBACzB,gCAAC;QAAK,eAAY;QAAO,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA2C,QAAQ,WAAW,GACpH,QAAQ,aAAa,GAAG,KAAK,QAAQ,IAAI;AAGhD","sources":["packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {DatePickerBase, DateValue} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport styles from './styles.css';\nimport {useDateSegment} from '@react-aria/datepicker';\n\ninterface DatePickerSegmentProps extends DatePickerBase<DateValue> {\n  segment: DateSegment,\n  state: DateFieldState\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment\n}\n\nexport function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return <EditableSegment segment={segment} state={state} {...otherProps} />;\n  }\n}\n\nfunction LiteralSegment({segment}: LiteralSegmentProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={classNames(styles, 'react-spectrum-Datepicker-literal')}\n      data-testid={segment.type === 'literal' ? undefined : segment.type}>\n      {segment.text}\n    </span>\n  );\n}\n\nfunction EditableSegment({segment, state}: DatePickerSegmentProps) {\n  let ref = useRef();\n  let {segmentProps} = useDateSegment(segment, state, ref);\n  return (\n    <div\n      {...segmentProps}\n      ref={ref}\n      className={classNames(styles, 'react-spectrum-DatePicker-cell', {\n        'is-placeholder': segment.isPlaceholder,\n        'is-read-only': !segment.isEditable\n      })}\n      style={{\n        ...segmentProps.style,\n        minWidth: segment.maxValue != null ? String(segment.maxValue).length + 'ch' : null\n      }}\n      data-testid={segment.type}>\n      <span aria-hidden=\"true\" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span>\n      {segment.isPlaceholder ? '' : segment.text}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerSegment.module.js.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAkBM,SAAS,0CAAkB,WAAC,OAAO,SAAE,KAAK,EAAE,GAAG,YAAmC;IACvF,OAAQ,QAAQ,IAAI;QAClB,gCAAgC;QAChC,KAAK;YACH,qBAAO,gCAAC;gBAAe,SAAS;;QAElC,mBAAmB;QACnB;YACE,qBAAO,gCAAC;gBAAgB,SAAS;gBAAS,OAAO;gBAAQ,GAAG,UAAU;;IAC1E;AACF;AAEA,SAAS,qCAAe,WAAC,OAAO,EAAsB;IACpD,qBACE,gCAAC;QACC,eAAY;QACZ,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,eAAa,QAAQ,IAAI,KAAK,YAAY,YAAY,QAAQ,IAAI;OACjE,QAAQ,IAAI;AAGnB;AAEA,SAAS,sCAAgB,WAAC,OAAO,SAAE,KAAK,EAAyB;IAC/D,IAAI,MAAM,CAAA,GAAA,aAAK,EAAE;IACjB,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE,SAAS,OAAO;IAEpD,qBACE,gCAAC;QACE,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,kCAAkC;YAC9D,kBAAkB,QAAQ,aAAa;YACvC,gBAAgB,CAAC,QAAQ,UAAU;QACrC;QACA,OAAO,aAAa,KAAK;QACzB,eAAa,QAAQ,IAAI;OACxB,QAAQ,aAAa,iBAAG,gCAAC;QAAK,eAAY;QAAO,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA2C,QAAQ,WAAW,IAAW,QAAQ,IAAI;AAG3K","sources":["packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {DateFieldState, DateSegment} from '@react-stately/datepicker';\nimport {DatePickerBase, DateValue} from '@react-types/datepicker';\nimport React, {useRef} from 'react';\nimport styles from './styles.css';\nimport {useDateSegment} from '@react-aria/datepicker';\n\ninterface DatePickerSegmentProps extends DatePickerBase<DateValue> {\n  segment: DateSegment,\n  state: DateFieldState\n}\n\ninterface LiteralSegmentProps {\n  segment: DateSegment\n}\n\nexport function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps) {\n  switch (segment.type) {\n    // A separator, e.g. punctuation\n    case 'literal':\n      return <LiteralSegment segment={segment} />;\n\n    // Editable segment\n    default:\n      return <EditableSegment segment={segment} state={state} {...otherProps} />;\n  }\n}\n\nfunction LiteralSegment({segment}: LiteralSegmentProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={classNames(styles, 'react-spectrum-Datepicker-literal')}\n      data-testid={segment.type === 'literal' ? undefined : segment.type}>\n      {segment.text}\n    </span>\n  );\n}\n\nfunction EditableSegment({segment, state}: DatePickerSegmentProps) {\n  let ref = useRef(undefined);\n  let {segmentProps} = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      ref={ref}\n      className={classNames(styles, 'react-spectrum-DatePicker-cell', {\n        'is-placeholder': segment.isPlaceholder,\n        'is-read-only': !segment.isEditable\n      })}\n      style={segmentProps.style}\n      data-testid={segment.type}>\n      {segment.isPlaceholder ? <span aria-hidden=\"true\" className={classNames(styles, 'react-spectrum-DatePicker-placeholder')}>{segment.placeholder}</span> : segment.text}\n    </div>\n  );\n}\n"],"names":[],"version":3,"file":"DatePickerSegment.module.js.map"}