@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/DatePicker.css.map

@@ -1 +1 @@
-{"mappings":"AC4FoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CjB;;;;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;;;;EA8Cc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BU;;;;EAqCb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CG;;;;EAAA;;;;EAAA;;;;;AA3PF;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA+IE;EAAA;IAAA","sources":["d4ca8e646fea5360","packages/@react-spectrum/s2/src/DatePicker.tsx"],"sourcesContent":["@import \"54172f634399832c\";\n@import \"fa2321f9143b745c\";\n@import \"8b549979924a612a\";\n@import \"b86e209972e15459\";\n@import \"8b256a2bed52f067\";\n@import \"5e26ccdc056a4ced\";\n@import \"fb93b5d68257fecd\";\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  DatePicker as AriaDatePicker,\n  DatePickerProps as AriaDatePickerProps,\n  DateValue\n} from 'react-aria-components/DatePicker';\nimport {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {Calendar, CalendarProps} from './Calendar';\nimport CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlBorderRadius,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\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 {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Popover} from './Popover';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {pressScale} from './pressScale';\nimport {TimeField} from './TimeField';\nimport {TimeValue} from 'react-aria-components/TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DatePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      CalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'\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 DatePickerContext =\n  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...focusRing(),\n  ...controlBorderRadius('sm'),\n  position: 'relative',\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  cursor: 'default',\n  display: 'flex',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nexport const timeField = style({\n  flexShrink: 1,\n  flexGrow: 0,\n  minWidth: 0,\n  width: 'unset'\n});\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date\n * and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<\n  T extends DateValue\n>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);\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    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n  return (\n    <AriaDatePicker\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 = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n        let timeMaxValue = 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: {\n                  size: {\n                    S: 2,\n                    M: 4,\n                    L: space(6),\n                    XL: space(6)\n                  }\n                }\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n              <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />\n            </FieldGroup>\n            <CalendarPopover shouldFlip={props.shouldFlip}>\n              <Calendar\n                visibleMonths={maxVisibleMonths}\n                createCalendar={createCalendar}\n                errorMessage={resolvedErrorMessage}\n              />\n              {showTimeField && (\n                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>\n                  <TimeField\n                    styles={timeField}\n                    label={stringFormatter.format('datepicker.time')}\n                    value={state.timeValue}\n                    // TODO: why do i need the cast?\n                    onChange={v => state.setTimeValue(v as TimeValue)}\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    </AriaDatePicker>\n  );\n});\n\nexport function CalendarPopover(\n  props: Omit<PopoverProps, 'children'> & {children: ReactNode}\n): ReactElement {\n  return (\n    <Popover {...props} hideArrow padding=\"none\">\n      <div\n        className={style({\n          paddingX: 16,\n          paddingY: 24,\n          overflow: 'auto',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 16,\n          boxSizing: 'border-box',\n          size: 'full'\n        })}>\n        <Dialog>\n          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>\n        </Dialog>\n      </div>\n    </Popover>\n  );\n}\n\nexport function CalendarButton(props: {\n  isOpen: boolean;\n  size: 'S' | 'M' | 'L' | 'XL';\n  setButtonHasFocus: (hasFocus: boolean) => void;\n}): ReactElement {\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let {isOpen, size, setButtonHasFocus} = props;\n  return (\n    <Button\n      ref={buttonRef}\n      // Prevent press scale from sticking while DatePicker is open.\n      // @ts-ignore\n      isPressed={false}\n      onFocusChange={setButtonHasFocus}\n      style={pressScale(buttonRef)}\n      className={renderProps =>\n        inputButton({\n          ...renderProps,\n          size,\n          isOpen\n        })\n      }>\n      <Provider\n        values={[\n          [\n            IconContext,\n            {\n              styles: style({\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: 'currentColor'\n                },\n                size: fontRelative(14)\n              })\n            }\n          ]\n        ]}>\n        <CalendarIcon />\n      </Provider>\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"DatePicker.css.map"}
+{"mappings":"AC2FoB;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CjB;;;;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;;;;EA8Cc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BU;;;;EAqCb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CG;;;;EAAA;;;;EAAA;;;;;AA3PF;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA+IE;EAAA;IAAA","sources":["d4ca8e646fea5360","packages/@react-spectrum/s2/src/DatePicker.tsx"],"sourcesContent":["@import \"54172f634399832c\";\n@import \"fa2321f9143b745c\";\n@import \"8b549979924a612a\";\n@import \"b86e209972e15459\";\n@import \"8b256a2bed52f067\";\n@import \"5e26ccdc056a4ced\";\n@import \"fb93b5d68257fecd\";\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  DatePicker as AriaDatePicker,\n  DatePickerProps as AriaDatePickerProps,\n  DateValue\n} from 'react-aria-components/DatePicker';\nimport {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {Calendar, CalendarProps} from './Calendar';\nimport CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlBorderRadius,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\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 {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {Popover} from './Popover';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {pressScale} from './pressScale';\nimport {TimeField} from './TimeField';\nimport {TimeValue} from 'react-aria-components/TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DatePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      CalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'\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 DatePickerContext =\n  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...focusRing(),\n  ...controlBorderRadius('sm'),\n  position: 'relative',\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  cursor: 'default',\n  display: 'flex',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nexport const timeField = style({\n  flexShrink: 1,\n  flexGrow: 0,\n  minWidth: 0,\n  width: 'unset'\n});\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date\n * and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<\n  T extends DateValue\n>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);\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    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n  return (\n    <AriaDatePicker\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 = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n        let timeMaxValue = 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: {\n                  size: {\n                    S: 2,\n                    M: 4,\n                    L: space(6),\n                    XL: space(6)\n                  }\n                }\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n              <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />\n            </FieldGroup>\n            <CalendarPopover shouldFlip={props.shouldFlip}>\n              <Calendar\n                visibleMonths={maxVisibleMonths}\n                createCalendar={createCalendar}\n                errorMessage={resolvedErrorMessage}\n              />\n              {showTimeField && (\n                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>\n                  <TimeField\n                    styles={timeField}\n                    label={stringFormatter.format('datepicker.time')}\n                    value={state.timeValue}\n                    // TODO: why do i need the cast?\n                    onChange={v => state.setTimeValue(v as TimeValue)}\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    </AriaDatePicker>\n  );\n});\n\nexport function CalendarPopover(\n  props: Omit<PopoverProps, 'children'> & {children: ReactNode}\n): ReactElement {\n  return (\n    <Popover {...props} hideArrow padding=\"none\">\n      <div\n        className={style({\n          paddingX: 16,\n          paddingY: 24,\n          overflow: 'auto',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 16,\n          boxSizing: 'border-box',\n          size: 'full'\n        })}>\n        <Dialog>\n          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>\n        </Dialog>\n      </div>\n    </Popover>\n  );\n}\n\nexport function CalendarButton(props: {\n  isOpen: boolean;\n  size: 'S' | 'M' | 'L' | 'XL';\n  setButtonHasFocus: (hasFocus: boolean) => void;\n}): ReactElement {\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let {isOpen, size, setButtonHasFocus} = props;\n  return (\n    <Button\n      ref={buttonRef}\n      // Prevent press scale from sticking while DatePicker is open.\n      // @ts-ignore\n      isPressed={false}\n      onFocusChange={setButtonHasFocus}\n      style={pressScale(buttonRef)}\n      className={renderProps =>\n        inputButton({\n          ...renderProps,\n          size,\n          isOpen\n        })\n      }>\n      <Provider\n        values={[\n          [\n            IconContext,\n            {\n              styles: style({\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: 'currentColor'\n                },\n                size: fontRelative(14)\n              })\n            }\n          ]\n        ]}>\n        <CalendarIcon />\n      </Provider>\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"DatePicker.css.map"}

package/dist/private/DatePicker.mjs

@@ -53,146 +53,146 @@ function $parcel$interopDefault(a) {
 const $1196aa313ab37be1$export$cf316c7f3b44c11e = /*#__PURE__*/ (0, $djrek$createContext)(null);
 const $1196aa313ab37be1$var$inputButton = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf131';
-    else rules += ' _Le131';
-    rules += ' Oh131';
-    rules += ' Olc131';
-    rules += ' _Mc131';
-    rules += ' _Kd131';
-    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec131';
-    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn131';
-    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b131';
-    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd131';
-    else rules += ' -SFnbic-_Jb131';
-    rules += ' -Bu7z1c-oa131';
-    rules += ' oj131';
-    rules += ' nj131';
-    rules += ' kj131';
-    rules += ' jj131';
-    rules += ' _Pc131';
+    if (props.isFocusVisible) rules += ' _Lf151';
+    else rules += ' _Le151';
+    rules += ' Oh151';
+    rules += ' Olc151';
+    rules += ' _Mc151';
+    rules += ' _Kd151';
+    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec151';
+    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn151';
+    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b151';
+    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd151';
+    else rules += ' -SFnbic-_Jb151';
+    rules += ' -Bu7z1c-oa151';
+    rules += ' oj151';
+    rules += ' nj151';
+    rules += ' kj151';
+    rules += ' jj151';
+    rules += ' _Pc151';
     if (props.size === "XL") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "L") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "M") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     } else if (props.size === "S") {
-        rules += ' uk131';
-        rules += ' ucJ9TBTb131';
-        rules += ' ud3Euai131';
-        rules += ' uea131';
-        rules += ' ugb131';
-        rules += ' uhd131';
-        rules += ' uje131';
-        rules += ' u2NhKxcl131';
-        rules += ' uic131';
+        rules += ' uk151';
+        rules += ' ucJ9TBTb151';
+        rules += ' ud3Euai151';
+        rules += ' uea151';
+        rules += ' ugb151';
+        rules += ' uhd151';
+        rules += ' uje151';
+        rules += ' u2NhKxcl151';
+        rules += ' uic151';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-e151';
+        rules += ' vx151';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-d151';
+        rules += ' vx151';
     } else if (props.size === "M") {
-        rules += ' -_6BNtrc-c131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-c151';
+        rules += ' vx151';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-b151';
+        rules += ' vx151';
     }
     if (props.size === "XL") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "L") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "M") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     } else if (props.size === "S") {
-        rules += ' xb131';
-        rules += ' _xa131';
+        rules += ' xb151';
+        rules += ' _xa151';
     }
     if (props.size === "XL") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "L") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "M") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     } else if (props.size === "S") {
-        rules += ' _Fd131';
-        rules += ' _FnuYUweb131';
+        rules += ' _Fd151';
+        rules += ' _FnuYUweb151';
     }
-    if (props.isDisabled) rules += ' pp131';
+    if (props.isDisabled) rules += ' pp151';
     else {
-        if (props.isPressed) rules += ' po131';
-        else if (props.isFocusVisible) rules += ' po131';
-        else if (props.isHovered) rules += ' po131';
-        else rules += ' pt131';
+        if (props.isPressed) rules += ' po151';
+        else if (props.isFocusVisible) rules += ' po151';
+        else if (props.isHovered) rules += ' po151';
+        else rules += ' pt151';
     }
-    rules += ' pla131';
-    rules += ' ri131';
-    rules += ' sd131';
-    rules += ' _Wa131';
-    rules += ' _je131';
-    rules += ' eb131';
-    rules += ' _Ca131';
-    if (props.size === "XL") rules += ' ZC131';
-    else if (props.size === "L") rules += ' Zo131';
-    else if (props.size === "M") rules += ' Zm131';
-    else if (props.size === "S") rules += ' Zu131';
-    rules += ' Fd131';
-    rules += ' Iw131';
-    rules += ' fa131';
-    rules += ' _va131';
-    rules += ' Yd131';
-    rules += ' Yle131';
-    rules += ' Xb131';
-    rules += ' Xlb131';
-    rules += ' _2b131';
-    rules += ' _2lb131';
-    if (props.isDisabled) rules += ' gH131';
-    else if (props.isOpen) rules += ' gF131';
+    rules += ' pla151';
+    rules += ' ri151';
+    rules += ' sd151';
+    rules += ' _Wa151';
+    rules += ' _je151';
+    rules += ' eb151';
+    rules += ' _Ca151';
+    if (props.size === "XL") rules += ' ZC151';
+    else if (props.size === "L") rules += ' Zo151';
+    else if (props.size === "M") rules += ' Zm151';
+    else if (props.size === "S") rules += ' Zu151';
+    rules += ' Fd151';
+    rules += ' Iw151';
+    rules += ' fa151';
+    rules += ' _va151';
+    rules += ' Yd151';
+    rules += ' Yle151';
+    rules += ' Xb151';
+    rules += ' Xlb151';
+    rules += ' _2b151';
+    rules += ' _2lb151';
+    if (props.isDisabled) rules += ' gH151';
+    else if (props.isOpen) rules += ' gF151';
     else {
-        if (props.isPressed) rules += ' gF131';
-        else if (props.isFocusVisible) rules += ' gF131';
-        else if (props.isHovered) rules += ' gF131';
-        else rules += ' gH131';
+        if (props.isPressed) rules += ' gF151';
+        else if (props.isFocusVisible) rules += ' gF151';
+        else if (props.isHovered) rules += ' gF151';
+        else rules += ' gH151';
     }
-    if (props.isDisabled) rules += ' gld131';
-    else if (props.isOpen) rules += ' gle131';
-    else if (props.isHovered) rules += ' gle131';
-    else rules += ' glc131';
+    if (props.isDisabled) rules += ' gld151';
+    else if (props.isOpen) rules += ' gle151';
+    else if (props.isHovered) rules += ' gle151';
+    else rules += ' glc151';
     return rules;
 };
-const $1196aa313ab37be1$export$5320dd0e349ed44d = " _vb131 _ua131 Na131 Ze4mUs131";
+const $1196aa313ab37be1$export$5320dd0e349ed44d = " _vb151 _ua151 Na151 Ze4mUs151";
 const $1196aa313ab37be1$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $djrek$forwardRef)(function DatePicker(props1, ref) {
     [props1, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props1, ref, $1196aa313ab37be1$export$cf316c7f3b44c11e);
     let stringFormatter = (0, $djrek$useLocalizedStringFormatter)((0, ($parcel$interopDefault($djrek$intlStringsmjs))), '@react-spectrum/s2');
@@ -214,51 +214,51 @@ const $1196aa313ab37be1$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $djrek$forwa
                 if (p[1] === "y") gridColumnEnd = true;
                 rules += p[0];
             }
-            rules += ' se131';
+            rules += ' se151';
             if (props.isInForm) {
-                if (!gridColumnStart) rules += ' z2mU131';
+                if (!gridColumnStart) rules += ' z2mU151';
             }
             if (props.isInForm) {
                 if (props.labelPosition === "side") {
-                    if (!gridColumnEnd) rules += ' yvoofG131';
+                    if (!gridColumnEnd) rules += ' yvoofG151';
                 }
             }
-            if (props.isInForm) rules += ' DLwlgod131';
+            if (props.isInForm) rules += ' DLwlgod151';
             else {
-                if (props.labelPosition === "side") rules += ' DPlN5qb131';
-                else if (props.labelPosition === "top") rules += ' DM8Mfn131';
+                if (props.labelPosition === "side") rules += ' DPlN5qb151';
+                else if (props.labelPosition === "top") rules += ' DM8Mfn151';
             }
-            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 += ' EPlN5qb151';
+            else if (props.labelPosition === "top") rules += ' E4w1sLc151';
+            if (props.labelPosition === "side") rules += ' CbRM95c151';
+            else if (props.labelPosition === "top") rules += ' Cxaocre151';
             if (props.size === "XL") {
-                rules += ' -_6BNtrc-e131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-e151';
+                rules += ' vx151';
             } else if (props.size === "L") {
-                rules += ' -_6BNtrc-d131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-d151';
+                rules += ' vx151';
             } else if (props.size === "S") {
-                rules += ' -_6BNtrc-b131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-b151';
+                rules += ' vx151';
             } else if (props.size === "XS") {
-                rules += ' -_6BNtrc-a131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-a151';
+                rules += ' vx151';
             } else {
-                rules += ' -_6BNtrc-c131';
-                rules += ' vx131';
+                rules += ' -_6BNtrc-c151';
+                rules += ' vx151';
             }
-            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 += ' ea151';
+            rules += ' _Fd151';
+            rules += ' _FnuYUweb151';
+            if (props.size === "XL") rules += ' -BhX7R-Fz151';
+            else if (props.size === "L") rules += ' -BhX7R-Fv151';
+            else if (props.size === "S") rules += ' -BhX7R-Fp151';
+            else if (props.size === "XS") rules += ' -BhX7R-Fn151';
+            else rules += ' -BhX7R-Fx151';
+            rules += ' -AJjOLd-UVkF0Db151';
+            rules += ' qg151';
+            rules += ' __ca151';
             return rules;
         }({
             isInForm: !!formContext,
@@ -295,30 +295,30 @@ const $1196aa313ab37be1$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $djrek$forwa
                         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';
-                            if (props.size === "XL") rules += ' -R_-RWJpoB131';
-                            else if (props.size === "L") rules += ' -R_-RWJpoB131';
-                            else if (props.size === "M") rules += ' -R_-Rp131';
-                            else if (props.size === "S") rules += ' -R_-Rj131';
+                            rules += ' zXcEWr151';
+                            rules += ' yXcEWr151';
+                            rules += ' BXcEWr151';
+                            rules += ' AXcEWr151';
+                            if (props.size === "XL") rules += ' Nl151';
+                            else if (props.size === "L") rules += ' Nj151';
+                            else if (props.size === "S") rules += ' Nf151';
+                            else if (props.size === "XS") rules += ' Ne151';
+                            else rules += ' Nk151';
+                            if (props.isQuiet) rules += ' _qd151';
+                            else rules += ' _qtb151';
+                            if (props.size === "XL") rules += ' -Anxdcc-Zt151';
+                            else if (props.size === "L") rules += ' -Anxdcc-ZStdtne151';
+                            else if (props.size === "S") rules += ' -Anxdcc-Zr151';
+                            else rules += ' -Anxdcc-Z3fn9H151';
+                            rules += ' __v6TNLWb151';
+                            rules += ' __Wb151';
+                            rules += ' SMBFGYc151';
+                            rules += ' RfBFGYc151';
+                            rules += ' -S_-Sv151';
+                            if (props.size === "XL") rules += ' -R_-RWJpoB151';
+                            else if (props.size === "L") rules += ' -R_-RWJpoB151';
+                            else if (props.size === "M") rules += ' -R_-Rp151';
+                            else if (props.size === "S") rules += ' -R_-Rj151';
                             return rules;
                         }({
                             size: size
@@ -347,7 +347,7 @@ const $1196aa313ab37be1$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $djrek$forwa
                                 errorMessage: resolvedErrorMessage
                             }),
                             showTimeField && /*#__PURE__*/ (0, $djrek$jsx)("div", {
-                                className: " sd131 Ul131 ql131 _qb131",
+                                className: " sd151 Ul151 ql151 _qb151",
                                 children: /*#__PURE__*/ (0, $djrek$jsx)((0, $a4c1b812c7e17006$export$5eaee2322dd727eb), {
                                     styles: $1196aa313ab37be1$export$5320dd0e349ed44d,
                                     label: stringFormatter.format('datepicker.time'),
@@ -382,7 +382,7 @@ function $1196aa313ab37be1$export$f3ce207574a3cffe(props) {
         hideArrow: true,
         padding: "none",
         children: /*#__PURE__*/ (0, $djrek$jsx)("div", {
-            className: " Sf131 Rf131 Th131 Qh131 _Na131 Pa131 sd131 _ta131 Ul131 ql131 _oa131 Za131 Fb131",
+            className: " Sf151 Rf151 Th151 Qh151 _Na151 Pa151 sd151 _ta151 Ul151 ql151 _oa151 Za151 Fb151",
             children: /*#__PURE__*/ (0, $djrek$jsx)((0, $djrek$Dialog), {
                 children: /*#__PURE__*/ (0, $djrek$jsx)((0, $djrek$Provider), {
                     values: [
@@ -417,7 +417,7 @@ function $1196aa313ab37be1$export$adb29da0ac001538(props) {
                 [
                     (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
                     {
-                        styles: " -_8sjo0b-t5ZbAob131 Za8Mfn131 Fa8Mfn131"
+                        styles: " -_8sjo0b-t5ZbAob151 Za8Mfn151 Fa8Mfn151"
                     }
                 ]
             ],

package/dist/private/DatePicker.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/DatePicker.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  DatePicker as AriaDatePicker,\n  DatePickerProps as AriaDatePickerProps,\n  DateValue\n} from 'react-aria-components/DatePicker';\nimport {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {Calendar, CalendarProps} from './Calendar';\nimport CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlBorderRadius,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\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 {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Popover} from './Popover';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {pressScale} from './pressScale';\nimport {TimeField} from './TimeField';\nimport {TimeValue} from 'react-aria-components/TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DatePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      CalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'\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 DatePickerContext =\n  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...focusRing(),\n  ...controlBorderRadius('sm'),\n  position: 'relative',\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  cursor: 'default',\n  display: 'flex',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nexport const timeField = style({\n  flexShrink: 1,\n  flexGrow: 0,\n  minWidth: 0,\n  width: 'unset'\n});\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date\n * and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<\n  T extends DateValue\n>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);\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    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n  return (\n    <AriaDatePicker\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 = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n        let timeMaxValue = 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: {\n                  size: {\n                    S: 2,\n                    M: 4,\n                    L: space(6),\n                    XL: space(6)\n                  }\n                }\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n              <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />\n            </FieldGroup>\n            <CalendarPopover shouldFlip={props.shouldFlip}>\n              <Calendar\n                visibleMonths={maxVisibleMonths}\n                createCalendar={createCalendar}\n                errorMessage={resolvedErrorMessage}\n              />\n              {showTimeField && (\n                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>\n                  <TimeField\n                    styles={timeField}\n                    label={stringFormatter.format('datepicker.time')}\n                    value={state.timeValue}\n                    // TODO: why do i need the cast?\n                    onChange={v => state.setTimeValue(v as TimeValue)}\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    </AriaDatePicker>\n  );\n});\n\nexport function CalendarPopover(\n  props: Omit<PopoverProps, 'children'> & {children: ReactNode}\n): ReactElement {\n  return (\n    <Popover {...props} hideArrow padding=\"none\">\n      <div\n        className={style({\n          paddingX: 16,\n          paddingY: 24,\n          overflow: 'auto',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 16,\n          boxSizing: 'border-box',\n          size: 'full'\n        })}>\n        <Dialog>\n          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>\n        </Dialog>\n      </div>\n    </Popover>\n  );\n}\n\nexport function CalendarButton(props: {\n  isOpen: boolean;\n  size: 'S' | 'M' | 'L' | 'XL';\n  setButtonHasFocus: (hasFocus: boolean) => void;\n}): ReactElement {\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let {isOpen, size, setButtonHasFocus} = props;\n  return (\n    <Button\n      ref={buttonRef}\n      // Prevent press scale from sticking while DatePicker is open.\n      // @ts-ignore\n      isPressed={false}\n      onFocusChange={setButtonHasFocus}\n      style={pressScale(buttonRef)}\n      className={renderProps =>\n        inputButton({\n          ...renderProps,\n          size,\n          isOpen\n        })\n      }>\n      <Provider\n        values={[\n          [\n            IconContext,\n            {\n              styles: style({\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: 'currentColor'\n                },\n                size: fontRelative(14)\n              })\n            }\n          ]\n        ]}>\n        <CalendarIcon />\n      </Provider>\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"DatePicker.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/DatePicker.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  DatePicker as AriaDatePicker,\n  DatePickerProps as AriaDatePickerProps,\n  DateValue\n} from 'react-aria-components/DatePicker';\nimport {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {Button, ButtonRenderProps} from 'react-aria-components/Button';\nimport {Calendar, CalendarProps} from './Calendar';\nimport CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  controlBorderRadius,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n  useState\n} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {Dialog, OverlayTriggerStateContext} from 'react-aria-components/Dialog';\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 {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {Popover} from './Popover';\nimport {PopoverProps} from 'react-aria-components/Popover';\nimport {pressScale} from './pressScale';\nimport {TimeField} from './TimeField';\nimport {TimeValue} from 'react-aria-components/TimeField';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DatePickerProps<T extends DateValue>\n  extends\n    Omit<\n      AriaDatePickerProps<T>,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<\n      CalendarProps<T>,\n      'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'\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 DatePickerContext =\n  createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean; size: 'S' | 'M' | 'L' | 'XL'}>({\n  ...focusRing(),\n  ...controlBorderRadius('sm'),\n  position: 'relative',\n  font: {\n    size: {\n      S: 'ui-sm',\n      M: 'ui',\n      L: 'ui-lg',\n      XL: 'ui-xl'\n    }\n  },\n  cursor: 'default',\n  display: 'flex',\n  textAlign: 'center',\n  borderStyle: 'none',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: 'text-to-control',\n  aspectRatio: 'square',\n  flexShrink: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isOpen: 'gray-200',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isOpen: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: 'ButtonFace'\n  }\n});\n\nexport const timeField = style({\n  flexShrink: 1,\n  flexGrow: 0,\n  minWidth: 0,\n  width: 'unset'\n});\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date\n * and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<\n  T extends DateValue\n>(props: DatePickerProps<T>, ref: Ref<HTMLDivElement>): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);\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    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n  return (\n    <AriaDatePicker\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 = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n        let timeMaxValue = 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: {\n                  size: {\n                    S: 2,\n                    M: 4,\n                    L: space(6),\n                    XL: space(6)\n                  }\n                }\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n              <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />\n            </FieldGroup>\n            <CalendarPopover shouldFlip={props.shouldFlip}>\n              <Calendar\n                visibleMonths={maxVisibleMonths}\n                createCalendar={createCalendar}\n                errorMessage={resolvedErrorMessage}\n              />\n              {showTimeField && (\n                <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>\n                  <TimeField\n                    styles={timeField}\n                    label={stringFormatter.format('datepicker.time')}\n                    value={state.timeValue}\n                    // TODO: why do i need the cast?\n                    onChange={v => state.setTimeValue(v as TimeValue)}\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    </AriaDatePicker>\n  );\n});\n\nexport function CalendarPopover(\n  props: Omit<PopoverProps, 'children'> & {children: ReactNode}\n): ReactElement {\n  return (\n    <Popover {...props} hideArrow padding=\"none\">\n      <div\n        className={style({\n          paddingX: 16,\n          paddingY: 24,\n          overflow: 'auto',\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 16,\n          boxSizing: 'border-box',\n          size: 'full'\n        })}>\n        <Dialog>\n          <Provider values={[[OverlayTriggerStateContext, null]]}>{props.children}</Provider>\n        </Dialog>\n      </div>\n    </Popover>\n  );\n}\n\nexport function CalendarButton(props: {\n  isOpen: boolean;\n  size: 'S' | 'M' | 'L' | 'XL';\n  setButtonHasFocus: (hasFocus: boolean) => void;\n}): ReactElement {\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let {isOpen, size, setButtonHasFocus} = props;\n  return (\n    <Button\n      ref={buttonRef}\n      // Prevent press scale from sticking while DatePicker is open.\n      // @ts-ignore\n      isPressed={false}\n      onFocusChange={setButtonHasFocus}\n      style={pressScale(buttonRef)}\n      className={renderProps =>\n        inputButton({\n          ...renderProps,\n          size,\n          isOpen\n        })\n      }>\n      <Provider\n        values={[\n          [\n            IconContext,\n            {\n              styles: style({\n                '--iconPrimary': {\n                  type: 'fill',\n                  value: 'currentColor'\n                },\n                size: fontRelative(14)\n              })\n            }\n          ]\n        ]}>\n        <CalendarIcon />\n      </Provider>\n    </Button>\n  );\n}\n"],"names":[],"version":3,"file":"DatePicker.mjs.map"}