@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/DateRangePicker.cjs

@@ -67,51 +67,51 @@ const $932c2841127a87c7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bwmQw$react
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se131';
+            rules += ' se15';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU131';
+                if (!gridColumnStart) rules += ' z2mU15';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG131';
+                    if (!gridColumnEnd) rules += ' yvoofG15';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod131';
+            if (props.isInForm) rules += ' DLwlgod15';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb131';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn131';
+                if (props.labelPosition === "side") rules += ' DPlN5qb15';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn15';
             }
-            if (props.labelPosition === "side") rules += ' EPlN5qb131';
-            else if (props.labelPosition === "top") rules += ' E4w1sLc131';
-            if (props.labelPosition === "side") rules += ' CbRM95c131';
-            else if (props.labelPosition === "top") rules += ' Cxaocre131';
+            if (props.labelPosition === "side") rules += ' EPlN5qb15';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc15';
+            if (props.labelPosition === "side") rules += ' CbRM95c15';
+            else if (props.labelPosition === "top") rules += ' Cxaocre15';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-e15';
+                rules += ' vx15';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-d15';
+                rules += ' vx15';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-b15';
+                rules += ' vx15';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-a15';
+                rules += ' vx15';
             } else {
-                rules += ' -_6BNtrc-c131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-c15';
+                rules += ' vx15';
             }
-            rules += ' ea131';
-            rules += ' _Fd131';
-            rules += ' _FnuYUweb131';
-            if (props.size === "XL") rules += ' -BhX7R-Fz131';
-            else if (props.size === "L") rules += ' -BhX7R-Fv131';
-            else if (props.size === "S") rules += ' -BhX7R-Fp131';
-            else if (props.size === "XS") rules += ' -BhX7R-Fn131';
-            else rules += ' -BhX7R-Fx131';
-            rules += ' -AJjOLd-UVkF0Db131';
-            rules += ' qg131';
-            rules += ' __ca131';
+            rules += ' ea15';
+            rules += ' _Fd15';
+            rules += ' _FnuYUweb15';
+            if (props.size === "XL") rules += ' -BhX7R-Fz15';
+            else if (props.size === "L") rules += ' -BhX7R-Fv15';
+            else if (props.size === "S") rules += ' -BhX7R-Fp15';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn15';
+            else rules += ' -BhX7R-Fx15';
+            rules += ' -AJjOLd-UVkF0Db15';
+            rules += ' qg15';
+            rules += ' __ca15';
             return rules;
         }({
             isInForm: !!formContext,
@@ -148,27 +148,27 @@ const $932c2841127a87c7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bwmQw$react
                         size: size,
                         styles: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zXcEWr131';
-                            rules += ' yXcEWr131';
-                            rules += ' BXcEWr131';
-                            rules += ' AXcEWr131';
-                            if (props.size === "XL") rules += ' Nl131';
-                            else if (props.size === "L") rules += ' Nj131';
-                            else if (props.size === "S") rules += ' Nf131';
-                            else if (props.size === "XS") rules += ' Ne131';
-                            else rules += ' Nk131';
-                            if (props.isQuiet) rules += ' _qd131';
-                            else rules += ' _qtb131';
-                            if (props.size === "XL") rules += ' -Anxdcc-Zt131';
-                            else if (props.size === "L") rules += ' -Anxdcc-ZStdtne131';
-                            else if (props.size === "S") rules += ' -Anxdcc-Zr131';
-                            else rules += ' -Anxdcc-Z3fn9H131';
-                            rules += ' __v6TNLWb131';
-                            rules += ' __Wb131';
-                            rules += ' SMBFGYc131';
-                            rules += ' RfBFGYc131';
-                            rules += ' -S_-Sv131';
-                            rules += ' -R_-Rp131';
+                            rules += ' zXcEWr15';
+                            rules += ' yXcEWr15';
+                            rules += ' BXcEWr15';
+                            rules += ' AXcEWr15';
+                            if (props.size === "XL") rules += ' Nl15';
+                            else if (props.size === "L") rules += ' Nj15';
+                            else if (props.size === "S") rules += ' Nf15';
+                            else if (props.size === "XS") rules += ' Ne15';
+                            else rules += ' Nk15';
+                            if (props.isQuiet) rules += ' _qd15';
+                            else rules += ' _qtb15';
+                            if (props.size === "XL") rules += ' -Anxdcc-Zt15';
+                            else if (props.size === "L") rules += ' -Anxdcc-ZStdtne15';
+                            else if (props.size === "S") rules += ' -Anxdcc-Zr15';
+                            else rules += ' -Anxdcc-Z3fn9H15';
+                            rules += ' __v6TNLWb15';
+                            rules += ' __Wb15';
+                            rules += ' SMBFGYc15';
+                            rules += ' RfBFGYc15';
+                            rules += ' -S_-Sv15';
+                            rules += ' -R_-Rp15';
                             return rules;
                         }({
                             size: size
@@ -181,7 +181,7 @@ const $932c2841127a87c7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bwmQw$react
                                     }),
                                     /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsx)("span", {
                                         "aria-hidden": "true",
-                                        className: " _va131 _ua131 Sj131 Rj131",
+                                        className: " _va15 _ua15 Sj15 Rj15",
                                         children: "\u2013"
                                     }),
                                     /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsx)((0, $d19642654b699f84$exports.DateInput), {
@@ -194,7 +194,7 @@ const $932c2841127a87c7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bwmQw$react
                                 isDisabled: isDisabled
                             }),
                             /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsx)("div", {
-                                className: " _va131 _ub131 sd131 _Cb131",
+                                className: " _va15 _ub15 sd15 _Cb15",
                                 children: /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsx)((0, $e6aad0776f57e0e9$exports.CalendarButton), {
                                     isOpen: isOpen,
                                     size: size,
@@ -213,7 +213,7 @@ const $932c2841127a87c7$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bwmQw$react
                                 errorMessage: resolvedErrorMessage
                             }),
                             showTimeField && /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsxs)("div", {
-                                className: " sd131 Ul131 ql131 _qb131 JA131",
+                                className: " sd15 Ul15 ql15 _qb15 JA15",
                                 children: [
                                     /*#__PURE__*/ (0, $bwmQw$reactjsxruntime.jsx)((0, $7b93ad26130ad3f8$exports.TimeField), {
                                         styles: (0, $e6aad0776f57e0e9$exports.timeField),

package/dist/private/DateRangePicker.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  DateRangePicker as AriaDateRangePicker,\n  DateRangePickerProps as AriaDateRangePickerProps,\n  DateValue\n} from 'react-aria-components/DateRangePicker';\nimport {CalendarButton, CalendarPopover, timeField} from './DatePicker';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText} from './Field';\nimport {FormContext} from 'react-aria-components/Form';\nimport {\n  forwardRefType,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  SpectrumLabelableProps\n} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {RangeCalendar, RangeCalendarProps} from './RangeCalendar';\nimport {style} from '../style' with {type: 'macro'};\nimport {TimeField} from './TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DateRangePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      RangeCalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'\n    >,\n    Pick<PopoverProps, 'shouldFlip'>,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps {\n  /**\n   * The size of the DateField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The maximum number of months to display at once in the calendar popover, if screen space\n   * permits.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n}\n\nexport const DateRangePickerContext =\n  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(\n  function DateRangePicker<T extends DateValue>(\n    props: DateRangePickerProps<T>,\n    ref: Ref<HTMLDivElement>\n  ): ReactElement {\n    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);\n    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n    let {\n      label,\n      contextualHelp,\n      description: descriptionMessage,\n      errorMessage,\n      isRequired,\n      size = 'M',\n      labelPosition = 'top',\n      necessityIndicator,\n      labelAlign = 'start',\n      UNSAFE_style,\n      UNSAFE_className,\n      styles,\n      placeholderValue,\n      maxVisibleMonths = 1,\n      createCalendar,\n      commitBehavior,\n      ...dateFieldProps\n    } = props;\n    let formContext = useContext(FormContext);\n    let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n    return (\n      <AriaDateRangePicker\n        ref={ref}\n        isRequired={isRequired}\n        {...dateFieldProps}\n        style={UNSAFE_style}\n        className={\n          (UNSAFE_className || '') +\n          style(field(), getAllowedOverrides())(\n            {\n              isInForm: !!formContext,\n              labelPosition,\n              size\n            },\n            styles\n          )\n        }>\n        {({isDisabled, isInvalid, isOpen, state}) => {\n          let placeholder: DateValue | undefined = placeholderValue || undefined;\n          let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;\n          let timeMinValue =\n            props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n          let timeMaxValue =\n            props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n          let timeGranularity =\n            state.granularity === 'hour' ||\n            state.granularity === 'minute' ||\n            state.granularity === 'second'\n              ? state.granularity\n              : undefined;\n          let showTimeField = !!timeGranularity;\n\n          // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.\n          // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.\n          let resolvedErrorMessage =\n            typeof errorMessage === 'function'\n              ? errorMessage(state.displayValidation)\n              : errorMessage || state.displayValidation.validationErrors.join(' ');\n          return (\n            <>\n              <FieldLabel\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                size={size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                necessityIndicator={necessityIndicator}\n                contextualHelp={contextualHelp}>\n                {label}\n              </FieldLabel>\n              <FieldGroup\n                role=\"presentation\"\n                shouldTurnOffFocusRing={buttonHasFocus}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                size={size}\n                styles={style({\n                  ...fieldInput(),\n                  textWrap: 'nowrap',\n                  paddingStart: 'edge-to-text',\n                  paddingEnd: 4\n                })({size})}>\n                <DateInputContainer>\n                  <DateInput slot=\"start\" />\n                  <span\n                    aria-hidden=\"true\"\n                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>\n                    –\n                  </span>\n                  <DateInput slot=\"end\" />\n                </DateInputContainer>\n                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n                <div\n                  className={style({\n                    flexShrink: 0,\n                    flexGrow: 1,\n                    display: 'flex',\n                    justifyContent: 'end'\n                  })}>\n                  <CalendarButton\n                    isOpen={isOpen}\n                    size={size}\n                    setButtonHasFocus={setButtonHasFocus}\n                  />\n                </div>\n              </FieldGroup>\n              <CalendarPopover shouldFlip={props.shouldFlip}>\n                <RangeCalendar\n                  visibleMonths={maxVisibleMonths}\n                  createCalendar={createCalendar}\n                  commitBehavior={commitBehavior}\n                  errorMessage={resolvedErrorMessage}\n                />\n                {showTimeField && (\n                  <div\n                    className={style({\n                      display: 'flex',\n                      gap: 16,\n                      contain: 'inline-size',\n                      marginTop: 24\n                    })}>\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                  </div>\n                )}\n              </CalendarPopover>\n              <HelpText\n                size={size}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                description={descriptionMessage}>\n                {resolvedErrorMessage}\n              </HelpText>\n            </>\n          );\n        }}\n      </AriaDateRangePicker>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"DateRangePicker.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  DateRangePicker as AriaDateRangePicker,\n  DateRangePickerProps as AriaDateRangePickerProps,\n  DateValue\n} from 'react-aria-components/DateRangePicker';\nimport {CalendarButton, CalendarPopover, timeField} from './DatePicker';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText} from './Field';\nimport {FormContext} from 'react-aria-components/Form';\nimport {\n  forwardRefType,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport intlMessages from '../intl/*.json';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {RangeCalendar, RangeCalendarProps} from './RangeCalendar';\nimport {style} from '../style' with {type: 'macro'};\nimport {TimeField} from './TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DateRangePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      RangeCalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'\n    >,\n    Pick<PopoverProps, 'shouldFlip'>,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps {\n  /**\n   * The size of the DateField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The maximum number of months to display at once in the calendar popover, if screen space\n   * permits.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n}\n\nexport const DateRangePickerContext =\n  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(\n  function DateRangePicker<T extends DateValue>(\n    props: DateRangePickerProps<T>,\n    ref: Ref<HTMLDivElement>\n  ): ReactElement {\n    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);\n    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n    let {\n      label,\n      contextualHelp,\n      description: descriptionMessage,\n      errorMessage,\n      isRequired,\n      size = 'M',\n      labelPosition = 'top',\n      necessityIndicator,\n      labelAlign = 'start',\n      UNSAFE_style,\n      UNSAFE_className,\n      styles,\n      placeholderValue,\n      maxVisibleMonths = 1,\n      createCalendar,\n      commitBehavior,\n      ...dateFieldProps\n    } = props;\n    let formContext = useContext(FormContext);\n    let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n    return (\n      <AriaDateRangePicker\n        ref={ref}\n        isRequired={isRequired}\n        {...dateFieldProps}\n        style={UNSAFE_style}\n        className={\n          (UNSAFE_className || '') +\n          style(field(), getAllowedOverrides())(\n            {\n              isInForm: !!formContext,\n              labelPosition,\n              size\n            },\n            styles\n          )\n        }>\n        {({isDisabled, isInvalid, isOpen, state}) => {\n          let placeholder: DateValue | undefined = placeholderValue || undefined;\n          let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;\n          let timeMinValue =\n            props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n          let timeMaxValue =\n            props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n          let timeGranularity =\n            state.granularity === 'hour' ||\n            state.granularity === 'minute' ||\n            state.granularity === 'second'\n              ? state.granularity\n              : undefined;\n          let showTimeField = !!timeGranularity;\n\n          // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.\n          // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.\n          let resolvedErrorMessage =\n            typeof errorMessage === 'function'\n              ? errorMessage(state.displayValidation)\n              : errorMessage || state.displayValidation.validationErrors.join(' ');\n          return (\n            <>\n              <FieldLabel\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                size={size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                necessityIndicator={necessityIndicator}\n                contextualHelp={contextualHelp}>\n                {label}\n              </FieldLabel>\n              <FieldGroup\n                role=\"presentation\"\n                shouldTurnOffFocusRing={buttonHasFocus}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                size={size}\n                styles={style({\n                  ...fieldInput(),\n                  textWrap: 'nowrap',\n                  paddingStart: 'edge-to-text',\n                  paddingEnd: 4\n                })({size})}>\n                <DateInputContainer>\n                  <DateInput slot=\"start\" />\n                  <span\n                    aria-hidden=\"true\"\n                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>\n                    –\n                  </span>\n                  <DateInput slot=\"end\" />\n                </DateInputContainer>\n                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n                <div\n                  className={style({\n                    flexShrink: 0,\n                    flexGrow: 1,\n                    display: 'flex',\n                    justifyContent: 'end'\n                  })}>\n                  <CalendarButton\n                    isOpen={isOpen}\n                    size={size}\n                    setButtonHasFocus={setButtonHasFocus}\n                  />\n                </div>\n              </FieldGroup>\n              <CalendarPopover shouldFlip={props.shouldFlip}>\n                <RangeCalendar\n                  visibleMonths={maxVisibleMonths}\n                  createCalendar={createCalendar}\n                  commitBehavior={commitBehavior}\n                  errorMessage={resolvedErrorMessage}\n                />\n                {showTimeField && (\n                  <div\n                    className={style({\n                      display: 'flex',\n                      gap: 16,\n                      contain: 'inline-size',\n                      marginTop: 24\n                    })}>\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                  </div>\n                )}\n              </CalendarPopover>\n              <HelpText\n                size={size}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                description={descriptionMessage}>\n                {resolvedErrorMessage}\n              </HelpText>\n            </>\n          );\n        }}\n      </AriaDateRangePicker>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"DateRangePicker.cjs.map"}

package/dist/private/DateRangePicker.css

@@ -1,245 +1,245 @@
 @layer _.a {
-  .se131 {
+  .se15 {
     display: grid;
   }
 
-  .z2mU131 {
+  .z2mU15 {
     grid-column-start: 1;
   }
 
-  .yvoofG131 {
+  .yvoofG15 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn131 {
+  .DM8Mfn15 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb131 {
+  .DPlN5qb15 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod131 {
+  .DLwlgod15 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc131 {
+  .E4w1sLc15 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb131 {
+  .EPlN5qb15 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre131 {
+  .Cxaocre15 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c131 {
+  .CbRM95c15 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c131 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a131 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b131 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d131 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e131 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .vx131 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea131 {
+  .ea15 {
     align-items: baseline;
   }
 
-  ._Fd131 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx131 {
+  .-BhX7R-Fx15 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn131 {
+  .-BhX7R-Fn15 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp131 {
+  .-BhX7R-Fp15 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv131 {
+  .-BhX7R-Fv15 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz131 {
+  .-BhX7R-Fz15 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db131 {
+  .-AJjOLd-UVkF0Db15 {
     --field-gap: calc((var(--field-height) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .qg131 {
+  .qg15 {
     column-gap: .75rem;
   }
 
-  .__ca131 {
+  .__ca15 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .zXcEWr131 {
+  .zXcEWr15 {
     grid-column-start: input;
   }
 
-  .yXcEWr131 {
+  .yXcEWr15 {
     grid-column-end: input;
   }
 
-  .BXcEWr131 {
+  .BXcEWr15 {
     grid-row-start: input;
   }
 
-  .AXcEWr131 {
+  .AXcEWr15 {
     grid-row-end: input;
   }
 
-  .Nk131 {
+  .Nk15 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne131 {
+  .Ne15 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf131 {
+  .Nf15 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj131 {
+  .Nj15 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl131 {
+  .Nl15 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd131 {
+  ._qd15 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H131 {
+  .-Anxdcc-Z3fn9H15 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr131 {
+  .-Anxdcc-Zr15 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne131 {
+  .-Anxdcc-ZStdtne15 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt131 {
+  .-Anxdcc-Zt15 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb131 {
+  .__v6TNLWb15 {
     contain-intrinsic-width: calc(var(--defaultWidth) - var(--S, 0px) - var(--R, 0px) - var(--m, 0px) - var(--l, 0px));
   }
 
-  .__Wb131 {
+  .__Wb15 {
     text-wrap: nowrap;
   }
 
-  .SMBFGYc131 {
+  .SMBFGYc15 {
     padding-inline-start: var(--S);
   }
 
-  .RfBFGYc131 {
+  .RfBFGYc15 {
     padding-inline-end: var(--R);
   }
 
-  .-S_-Sv131 {
+  .-S_-Sv15 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .-R_-Rp131 {
+  .-R_-Rp15 {
     --R: 4px;
   }
 
-  ._ua131 {
+  ._ua15 {
     flex-grow: 0;
   }
 
-  .Sj131 {
+  .Sj15 {
     padding-inline-start: 2px;
   }
 
-  .Rj131 {
+  .Rj15 {
     padding-inline-end: 2px;
   }
 
-  ._va131 {
+  ._va15 {
     flex-shrink: 0;
   }
 
-  ._ub131 {
+  ._ub15 {
     flex-grow: 1;
   }
 
-  ._Cb131 {
+  ._Cb15 {
     justify-content: end;
   }
 
-  .sd131 {
+  .sd15 {
     display: flex;
   }
 
-  .Ul131 {
+  .Ul15 {
     row-gap: 1rem;
   }
 
-  .ql131 {
+  .ql15 {
     column-gap: 1rem;
   }
 
-  ._qb131 {
+  ._qb15 {
     contain: inline-size;
   }
 
-  .JA131 {
+  .JA15 {
     margin-top: 1.5rem;
   }
 }
 
 @layer _.b {
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb131 {
+    ._qtb15 {
       contain: inline-size;
     }
   }

package/dist/private/DateRangePicker.css.map

@@ -1 +1 @@
-{"mappings":"ACqHU;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgDc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUO;;;;EAAA;;;;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAsBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFrB;EAAA;;;;;AAgDc;EAAA;IAAA","sources":["d7a279a73f170432","packages/@react-spectrum/s2/src/DateRangePicker.tsx"],"sourcesContent":["@import \"270ce443556f6832\";\n@import \"e665ec5e30b00bf9\";\n@import \"187f6499c2fa9b0d\";\n@import \"1dda7790205ac36a\";\n@import \"b7a8eac09818aeb5\";\n","/*\n * Copyright 2024 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 {\n  DateRangePicker as AriaDateRangePicker,\n  DateRangePickerProps as AriaDateRangePickerProps,\n  DateValue\n} from 'react-aria-components/DateRangePicker';\nimport {CalendarButton, CalendarPopover, timeField} from './DatePicker';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText} from './Field';\nimport {FormContext} from 'react-aria-components/Form';\nimport {\n  forwardRefType,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  SpectrumLabelableProps\n} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {RangeCalendar, RangeCalendarProps} from './RangeCalendar';\nimport {style} from '../style' with {type: 'macro'};\nimport {TimeField} from './TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DateRangePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      RangeCalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'\n    >,\n    Pick<PopoverProps, 'shouldFlip'>,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps {\n  /**\n   * The size of the DateField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The maximum number of months to display at once in the calendar popover, if screen space\n   * permits.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n}\n\nexport const DateRangePickerContext =\n  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(\n  function DateRangePicker<T extends DateValue>(\n    props: DateRangePickerProps<T>,\n    ref: Ref<HTMLDivElement>\n  ): ReactElement {\n    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);\n    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n    let {\n      label,\n      contextualHelp,\n      description: descriptionMessage,\n      errorMessage,\n      isRequired,\n      size = 'M',\n      labelPosition = 'top',\n      necessityIndicator,\n      labelAlign = 'start',\n      UNSAFE_style,\n      UNSAFE_className,\n      styles,\n      placeholderValue,\n      maxVisibleMonths = 1,\n      createCalendar,\n      commitBehavior,\n      ...dateFieldProps\n    } = props;\n    let formContext = useContext(FormContext);\n    let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n    return (\n      <AriaDateRangePicker\n        ref={ref}\n        isRequired={isRequired}\n        {...dateFieldProps}\n        style={UNSAFE_style}\n        className={\n          (UNSAFE_className || '') +\n          style(field(), getAllowedOverrides())(\n            {\n              isInForm: !!formContext,\n              labelPosition,\n              size\n            },\n            styles\n          )\n        }>\n        {({isDisabled, isInvalid, isOpen, state}) => {\n          let placeholder: DateValue | undefined = placeholderValue || undefined;\n          let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;\n          let timeMinValue =\n            props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n          let timeMaxValue =\n            props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n          let timeGranularity =\n            state.granularity === 'hour' ||\n            state.granularity === 'minute' ||\n            state.granularity === 'second'\n              ? state.granularity\n              : undefined;\n          let showTimeField = !!timeGranularity;\n\n          // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.\n          // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.\n          let resolvedErrorMessage =\n            typeof errorMessage === 'function'\n              ? errorMessage(state.displayValidation)\n              : errorMessage || state.displayValidation.validationErrors.join(' ');\n          return (\n            <>\n              <FieldLabel\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                size={size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                necessityIndicator={necessityIndicator}\n                contextualHelp={contextualHelp}>\n                {label}\n              </FieldLabel>\n              <FieldGroup\n                role=\"presentation\"\n                shouldTurnOffFocusRing={buttonHasFocus}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                size={size}\n                styles={style({\n                  ...fieldInput(),\n                  textWrap: 'nowrap',\n                  paddingStart: 'edge-to-text',\n                  paddingEnd: 4\n                })({size})}>\n                <DateInputContainer>\n                  <DateInput slot=\"start\" />\n                  <span\n                    aria-hidden=\"true\"\n                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>\n                    –\n                  </span>\n                  <DateInput slot=\"end\" />\n                </DateInputContainer>\n                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n                <div\n                  className={style({\n                    flexShrink: 0,\n                    flexGrow: 1,\n                    display: 'flex',\n                    justifyContent: 'end'\n                  })}>\n                  <CalendarButton\n                    isOpen={isOpen}\n                    size={size}\n                    setButtonHasFocus={setButtonHasFocus}\n                  />\n                </div>\n              </FieldGroup>\n              <CalendarPopover shouldFlip={props.shouldFlip}>\n                <RangeCalendar\n                  visibleMonths={maxVisibleMonths}\n                  createCalendar={createCalendar}\n                  commitBehavior={commitBehavior}\n                  errorMessage={resolvedErrorMessage}\n                />\n                {showTimeField && (\n                  <div\n                    className={style({\n                      display: 'flex',\n                      gap: 16,\n                      contain: 'inline-size',\n                      marginTop: 24\n                    })}>\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                  </div>\n                )}\n              </CalendarPopover>\n              <HelpText\n                size={size}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                description={descriptionMessage}>\n                {resolvedErrorMessage}\n              </HelpText>\n            </>\n          );\n        }}\n      </AriaDateRangePicker>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"DateRangePicker.css.map"}
+{"mappings":"ACoHU;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgDc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAUO;;;;EAAA;;;;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAsBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAvFrB;EAAA;;;;;AAgDc;EAAA;IAAA","sources":["d7a279a73f170432","packages/@react-spectrum/s2/src/DateRangePicker.tsx"],"sourcesContent":["@import \"270ce443556f6832\";\n@import \"e665ec5e30b00bf9\";\n@import \"187f6499c2fa9b0d\";\n@import \"1dda7790205ac36a\";\n@import \"b7a8eac09818aeb5\";\n","/*\n * Copyright 2024 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 {\n  DateRangePicker as AriaDateRangePicker,\n  DateRangePickerProps as AriaDateRangePickerProps,\n  DateValue\n} from 'react-aria-components/DateRangePicker';\nimport {CalendarButton, CalendarPopover, timeField} from './DatePicker';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactElement, Ref, useContext, useState} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {FieldGroup, FieldLabel, HelpText} from './Field';\nimport {FormContext} from 'react-aria-components/Form';\nimport {\n  forwardRefType,\n  GlobalDOMAttributes,\n  HelpTextProps,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport intlMessages from '../intl/*.json';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {RangeCalendar, RangeCalendarProps} from './RangeCalendar';\nimport {style} from '../style' with {type: 'macro'};\nimport {TimeField} from './TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DateRangePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDateRangePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      RangeCalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable' | 'commitBehavior'\n    >,\n    Pick<PopoverProps, 'shouldFlip'>,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps {\n  /**\n   * The size of the DateField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * The maximum number of months to display at once in the calendar popover, if screen space\n   * permits.\n   *\n   * @default 1\n   */\n  maxVisibleMonths?: number;\n}\n\nexport const DateRangePickerContext =\n  createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);\n\n/**\n * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users\n * to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(\n  function DateRangePicker<T extends DateValue>(\n    props: DateRangePickerProps<T>,\n    ref: Ref<HTMLDivElement>\n  ): ReactElement {\n    [props, ref] = useSpectrumContextProps(props, ref, DateRangePickerContext);\n    let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n    let {\n      label,\n      contextualHelp,\n      description: descriptionMessage,\n      errorMessage,\n      isRequired,\n      size = 'M',\n      labelPosition = 'top',\n      necessityIndicator,\n      labelAlign = 'start',\n      UNSAFE_style,\n      UNSAFE_className,\n      styles,\n      placeholderValue,\n      maxVisibleMonths = 1,\n      createCalendar,\n      commitBehavior,\n      ...dateFieldProps\n    } = props;\n    let formContext = useContext(FormContext);\n    let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n    return (\n      <AriaDateRangePicker\n        ref={ref}\n        isRequired={isRequired}\n        {...dateFieldProps}\n        style={UNSAFE_style}\n        className={\n          (UNSAFE_className || '') +\n          style(field(), getAllowedOverrides())(\n            {\n              isInForm: !!formContext,\n              labelPosition,\n              size\n            },\n            styles\n          )\n        }>\n        {({isDisabled, isInvalid, isOpen, state}) => {\n          let placeholder: DateValue | undefined = placeholderValue || undefined;\n          let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;\n          let timeMinValue =\n            props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n          let timeMaxValue =\n            props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n          let timeGranularity =\n            state.granularity === 'hour' ||\n            state.granularity === 'minute' ||\n            state.granularity === 'second'\n              ? state.granularity\n              : undefined;\n          let showTimeField = !!timeGranularity;\n\n          // Ideally, we could omit errorMessage here and let S2 Calendar read it from RAC's CalendarContext which already contains the resolved value via calendarProps from useDatePicker.\n          // However, RAC's CalendarProps omits errorMessage, so reading it back from the context would require an unsafe cast. Instead, we resolve it here using the same logic as useDatePicker.\n          let resolvedErrorMessage =\n            typeof errorMessage === 'function'\n              ? errorMessage(state.displayValidation)\n              : errorMessage || state.displayValidation.validationErrors.join(' ');\n          return (\n            <>\n              <FieldLabel\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                size={size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                necessityIndicator={necessityIndicator}\n                contextualHelp={contextualHelp}>\n                {label}\n              </FieldLabel>\n              <FieldGroup\n                role=\"presentation\"\n                shouldTurnOffFocusRing={buttonHasFocus}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                size={size}\n                styles={style({\n                  ...fieldInput(),\n                  textWrap: 'nowrap',\n                  paddingStart: 'edge-to-text',\n                  paddingEnd: 4\n                })({size})}>\n                <DateInputContainer>\n                  <DateInput slot=\"start\" />\n                  <span\n                    aria-hidden=\"true\"\n                    className={style({flexShrink: 0, flexGrow: 0, paddingX: 2})}>\n                    –\n                  </span>\n                  <DateInput slot=\"end\" />\n                </DateInputContainer>\n                <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n                <div\n                  className={style({\n                    flexShrink: 0,\n                    flexGrow: 1,\n                    display: 'flex',\n                    justifyContent: 'end'\n                  })}>\n                  <CalendarButton\n                    isOpen={isOpen}\n                    size={size}\n                    setButtonHasFocus={setButtonHasFocus}\n                  />\n                </div>\n              </FieldGroup>\n              <CalendarPopover shouldFlip={props.shouldFlip}>\n                <RangeCalendar\n                  visibleMonths={maxVisibleMonths}\n                  createCalendar={createCalendar}\n                  commitBehavior={commitBehavior}\n                  errorMessage={resolvedErrorMessage}\n                />\n                {showTimeField && (\n                  <div\n                    className={style({\n                      display: 'flex',\n                      gap: 16,\n                      contain: 'inline-size',\n                      marginTop: 24\n                    })}>\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.startTime')}\n                      value={state.timeRange?.start || null}\n                      onChange={v => state.setTime('start', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                    <TimeField\n                      styles={timeField}\n                      label={stringFormatter.format('datepicker.endTime')}\n                      value={state.timeRange?.end || null}\n                      onChange={v => state.setTime('end', v)}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                    />\n                  </div>\n                )}\n              </CalendarPopover>\n              <HelpText\n                size={size}\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n                description={descriptionMessage}>\n                {resolvedErrorMessage}\n              </HelpText>\n            </>\n          );\n        }}\n      </AriaDateRangePicker>\n    );\n  }\n);\n"],"names":[],"version":3,"file":"DateRangePicker.css.map"}