@adobe/react-spectrum 3.47.2 → 3.47.3

package/dist/private/datepicker/DateField.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA0DM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UACjD,KAAgC,EAChC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,WAAE,OAAO,EAAC,GAAG;IAE/D,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,aACjB,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,mBAAW,EACb;QACE,GAAG,KAAK;kBACR;IACF,GACA,OACA;IAGF,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,yCAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,iBAAiB,EAAE,GAAG;IAGxB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB,4BAAA,6BAAA,kBAAmB;QACpC,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC5B,gCAAC,CAAA,GAAA,yCAAgB;YACf,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAGhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  MappedDateValue,\n  useDateField\n} from 'react-aria/useDateField';\n\nimport {classNames} from '../utils/classNames';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  HelpTextProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useDateFieldState} from 'react-stately/useDateFieldState';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateFieldBase<T extends DateValue>\n  extends\n    SpectrumLabelableProps,\n    HelpTextProps,\n    SpectrumFieldValidation<MappedDateValue<T>>,\n    StyleProps {\n  /**\n   * Whether the date picker should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n  /**\n   * Whether to show the localized date format as help text below the field.\n   *\n   * @default false\n   */\n  showFormatHelpText?: boolean;\n}\n\nexport interface SpectrumDateFieldProps<T extends DateValue>\n  extends\n    Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDateFieldBase<T> {}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = React.forwardRef(function DateField<T extends DateValue>(\n  props: SpectrumDateFieldProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isDisabled, isReadOnly, isRequired, isQuiet} = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let fieldRef = useRef<HTMLElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {\n    labelProps,\n    fieldProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState ?? undefined}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-DateField')}>\n        {state.segments.map((segment, i) => (\n          <DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired}\n          />\n        ))}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DateField.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA0DM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UACjD,KAAgC,EAChC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,WAAE,OAAO,EAAC,GAAG;IAE/D,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,aACjB,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,mBAAW,EACb;QACE,GAAG,KAAK;kBACR;IACF,GACA,OACA;IAGF,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,yCAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,gDAAgD;IAChD,iBAAiB,EAAE,GAAG;IAGxB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB,4BAAA,6BAAA,kBAAmB;QACpC,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC5B,gCAAC,CAAA,GAAA,yCAAgB;YACf,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAGhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  MappedDateValue,\n  useDateField\n} from 'react-aria/useDateField';\n\nimport {classNames} from '../utils/classNames';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  HelpTextProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useDateFieldState} from 'react-stately/useDateFieldState';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateFieldBase<T extends DateValue>\n  extends\n    SpectrumLabelableProps,\n    HelpTextProps,\n    SpectrumFieldValidation<MappedDateValue<T>>,\n    StyleProps {\n  /**\n   * Whether the date picker should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n  /**\n   * Whether to show the localized date format as help text below the field.\n   *\n   * @default false\n   */\n  showFormatHelpText?: boolean;\n}\n\nexport interface SpectrumDateFieldProps<T extends DateValue>\n  extends\n    Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDateFieldBase<T> {}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = React.forwardRef(function DateField<T extends DateValue>(\n  props: SpectrumDateFieldProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isDisabled, isReadOnly, isRequired, isQuiet} = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let fieldRef = useRef<HTMLElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {\n    labelProps,\n    fieldProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState ?? undefined}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-DateField')}>\n        {state.segments.map((segment, i) => (\n          <DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired}\n          />\n        ))}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DateField.js.map"}

package/dist/private/datepicker/DateField.mjs

@@ -60,7 +60,8 @@ const $4625bab37510e72e$export$d9781c7894a82487 = /*#__PURE__*/ (0, $dvZJj$react
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $d24c665d02225161$export$322f4580ccd8dde6)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let validationState = state.validationState || (isInvalid ? 'invalid' : null);
     let approximateWidth = (0, $d24c665d02225161$export$31e22e3c931fc056)(state) + 'ch';
     return /*#__PURE__*/ (0, $dvZJj$react).createElement((0, $adcd096854d27620$export$a455218a85c89869), {

package/dist/private/datepicker/DateField.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA0DM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UACjD,KAAgC,EAChC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,WAAE,OAAO,EAAC,GAAG;IAE/D,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,aACjB,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,mBAAW,EACb;QACE,GAAG,KAAK;kBACR;IACF,GACA,OACA;IAGF,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,yCAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,iBAAiB,EAAE,GAAG;IAGxB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB,mBAAmB;QACpC,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC5B,gCAAC,CAAA,GAAA,yCAAgB;YACf,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAGhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  MappedDateValue,\n  useDateField\n} from 'react-aria/useDateField';\n\nimport {classNames} from '../utils/classNames';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  HelpTextProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useDateFieldState} from 'react-stately/useDateFieldState';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateFieldBase<T extends DateValue>\n  extends\n    SpectrumLabelableProps,\n    HelpTextProps,\n    SpectrumFieldValidation<MappedDateValue<T>>,\n    StyleProps {\n  /**\n   * Whether the date picker should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n  /**\n   * Whether to show the localized date format as help text below the field.\n   *\n   * @default false\n   */\n  showFormatHelpText?: boolean;\n}\n\nexport interface SpectrumDateFieldProps<T extends DateValue>\n  extends\n    Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDateFieldBase<T> {}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = React.forwardRef(function DateField<T extends DateValue>(\n  props: SpectrumDateFieldProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isDisabled, isReadOnly, isRequired, isQuiet} = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let fieldRef = useRef<HTMLElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {\n    labelProps,\n    fieldProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState ?? undefined}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-DateField')}>\n        {state.segments.map((segment, i) => (\n          <DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired}\n          />\n        ))}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DateField.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AA0DM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UACjD,KAAgC,EAChC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,WAAE,OAAO,EAAC,GAAG;IAE/D,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,QAAQ,CAAA,GAAA,wBAAgB,EAAE;QAC5B,GAAG,KAAK;gBACR;wBACA;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAsB;IAC1C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,aACjB,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,mBAAW,EACb;QACE,GAAG,KAAK;kBACR;IACF,GACA,OACA;IAGF,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,yCAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,gDAAgD;IAChD,iBAAiB,EAAE,GAAG;IAGxB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB,mBAAmB;QACpC,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBAC/C,gCAAC,CAAA,GAAA,yCAAI;QACH,KAAK;QACL,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,WAAW;QACX,iBAAiB;QACjB,UAAU;QACV,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;OACvC,MAAM,QAAQ,CAAC,GAAG,CAAC,CAAC,SAAS,kBAC5B,gCAAC,CAAA,GAAA,yCAAgB;YACf,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAGhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateFieldProps,\n  DateValue,\n  MappedDateValue,\n  useDateField\n} from 'react-aria/useDateField';\n\nimport {classNames} from '../utils/classNames';\nimport {createCalendar} from '@internationalized/date';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  HelpTextProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useDateFieldState} from 'react-stately/useDateFieldState';\nimport {useFocusManagerRef, useFormatHelpText, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateFieldBase<T extends DateValue>\n  extends\n    SpectrumLabelableProps,\n    HelpTextProps,\n    SpectrumFieldValidation<MappedDateValue<T>>,\n    StyleProps {\n  /**\n   * Whether the date picker should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n  /**\n   * Whether to show the localized date format as help text below the field.\n   *\n   * @default false\n   */\n  showFormatHelpText?: boolean;\n}\n\nexport interface SpectrumDateFieldProps<T extends DateValue>\n  extends\n    Omit<AriaDateFieldProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDateFieldBase<T> {}\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = React.forwardRef(function DateField<T extends DateValue>(\n  props: SpectrumDateFieldProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isDisabled, isReadOnly, isRequired, isQuiet} = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useDateFieldState({\n    ...props,\n    locale,\n    createCalendar\n  });\n\n  let fieldRef = useRef<HTMLElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {\n    labelProps,\n    fieldProps,\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\n  );\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState ?? undefined}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <Input\n        ref={fieldRef}\n        fieldProps={fieldProps}\n        isDisabled={isDisabled}\n        isQuiet={isQuiet}\n        autoFocus={autoFocus}\n        validationState={validationState}\n        minWidth={approximateWidth}\n        className={classNames(datepickerStyles, 'react-spectrum-DateField')}>\n        {state.segments.map((segment, i) => (\n          <DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired}\n          />\n        ))}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DateField.mjs.map"}

package/dist/private/datepicker/DatePicker.cjs

@@ -116,7 +116,8 @@ const $eb116c03ace0a24b$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, ($parcel$int
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $7f5eff3a70a58c6f$exports.useFormatHelpText)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;

package/dist/private/datepicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/datepicker/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDatePickerProps, DateValue, useDatePicker} from 'react-aria/useDatePicker';\nimport {Calendar} from '../calendar/Calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDateFieldBase} from './DateField';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; // HACK: must be included BEFORE inputgroup\nimport {TimeField} from './TimeField';\nimport {useDatePickerState} from 'react-stately/useDatePickerState';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDatePickerBase<T extends DateValue>\n  extends SpectrumDateFieldBase<T>, SpectrumLabelableProps, StyleProps {\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   * Whether the calendar popover should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * A function to create a new\n   * [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a\n   * given calendar identifier. This will be used for the popover calendar. If not provided, the\n   * `createCalendar` function from `@internationalized/date` will be used.\n   */\n  createCalendar?: (identifier: CalendarIdentifier) => ICalendar;\n}\n\nexport interface SpectrumDatePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDatePickerBase<T> {}\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 = React.forwardRef(function DatePicker<T extends DateValue>(\n  props: SpectrumDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isQuiet, isDisabled, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    descriptionProps,\n    errorMessageProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField {...fieldProps} data-testid=\"date-field\" isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': isInvalid}\n                  )}\n                />\n                {showTimeField && (\n                  <div\n                    className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\"\n                    />\n                  </div>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEM,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAAiC,EACjC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,WAAE,OAAO,cAAE,UAAU,oBAAE,gBAAgB,oBAAE,mBAAmB,GAAE,GAAG;IAC/E,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,iCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAyB;IAC9C,IAAI,QAAQ,CAAA,GAAA,wDAAiB,EAAE;QAC7B,GAAG,KAAK;QACR,qBAAqB,IAAM,CAAC,MAAM,OAAO;IAC3C;IACA,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,eACjB,WAAW,eACX,WAAW,iBACX,aAAa,aACb,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,2CAAY,EAAE,OAAO,OAAO;IAChC,IAAI,UAAC,MAAM,WAAE,OAAO,EAAC,GAAG;IACxB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAC1B,IAAI,SAAS,CAAA,GAAA,4CAAiB,EAAE;IAChC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAEhE,IAAI,aAAC,SAAS,kBAAE,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QACzD,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,EAAC,WAAW,eAAe,EAAE,YAAY,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QAC5E,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,YAAY,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,uBAAuB;QACxD,8BAA8B;QAC9B,gCAAgC,aAAa,CAAC;QAC9C,eAAe;QACf,cAAc;QACd,cAAc;QACd,cAAc,kBAAkB,CAAC;IACnC;IAEA,IAAI,iBAAiB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,6BAA6B;QACnE,eAAe;QACf,cAAc,aAAa,CAAC;IAC9B;IAEA,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,2CAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,gDAAgD;IAChD,iBAAiB,EAAE,GAAG;IAGxB,IAAI,cAA4C;IAChD,IAAI,kBAAkB,eAAe,UAAU,cAAc,cAAc;IAC3E,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,kBACF,MAAM,WAAW,KAAK,UAAU,MAAM,WAAW,KAAK,YAAY,MAAM,WAAW,KAAK,WACpF,MAAM,WAAW,GACjB;IACN,IAAI,gBAAgB,CAAC,CAAC;IAEtB,IAAI,gBAAgB,CAAA,GAAA,0CAAe,EAAE;IACrC,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,+CAAoB,EAAE,SAAS;IAEtD,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,0DAAC;QACE,GAAG,CAAA,GAAA,qCAAS,EAAE,YAAY,YAAY,WAAW;QAClD,WAAW;QACX,KAAK;qBACL,0DAAC,CAAA,GAAA,+BAAI;QACH,YAAY;QACZ,SAAS;QACT,iBAAiB;QACjB,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,gBAAgB;QAChB,kBAAA;QACA,UAAU;qBACV,0DAAC,CAAA,GAAA,yCAAc;QAAG,GAAG,UAAU;QAAE,eAAY;QAAa,SAAS;uBAErE,0DAAC,CAAA,GAAA,uCAAY;QACX,MAAK;QACL,YAAW;QACX,WAAW,cAAc,QAAQ,iBAAiB;QAClD,WAAW;QACX,WAAA;QACA,QAAQ;QACR,cAAc;QACd,YAAY,MAAM,UAAU;qBAC5B,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,iBAAiB;QAC7C,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,SAAS;QACT,iBAAiB;qBACjB,0DAAC,CAAA,GAAA,8DAAW,yBAEd,0DAAC,CAAA,GAAA,gCAAK;QACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;QAC9C,GAAG,WAAW;qBACf,0DAAC,CAAA,GAAA,iCAAM,uBACL,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBACxC,0DAAC,CAAA,GAAA,kCAAO;QACL,GAAG,aAAa;QACjB,eAAe;QACf,gBAAgB,MAAM,cAAc;QACpC,kBAAkB,CAAA,GAAA,oCAAS,EACzB,CAAA,GAAA,mDAAe,GACf,sCACA;YAAC,cAAc;QAAS;QAG3B,+BACC,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,mDAAe,GACf;qBAEF,0DAAC,CAAA,GAAA,mCAAQ;QACP,OAAO,gBAAgB,MAAM,CAAC;QAC9B,OAAO,MAAM,SAAS;QACtB,UAAU,MAAM,YAAY;QAC5B,kBAAkB;QAClB,aAAa;QACb,UAAU;QACV,UAAU;QACV,WAAW,MAAM,SAAS;QAC1B,cAAc,MAAM,YAAY;QAChC,WAAU;;AAWhC","sources":["packages/@adobe/react-spectrum/src/datepicker/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDatePickerProps, DateValue, useDatePicker} from 'react-aria/useDatePicker';\nimport {Calendar} from '../calendar/Calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDateFieldBase} from './DateField';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; // HACK: must be included BEFORE inputgroup\nimport {TimeField} from './TimeField';\nimport {useDatePickerState} from 'react-stately/useDatePickerState';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDatePickerBase<T extends DateValue>\n  extends SpectrumDateFieldBase<T>, SpectrumLabelableProps, StyleProps {\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   * Whether the calendar popover should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * A function to create a new\n   * [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a\n   * given calendar identifier. This will be used for the popover calendar. If not provided, the\n   * `createCalendar` function from `@internationalized/date` will be used.\n   */\n  createCalendar?: (identifier: CalendarIdentifier) => ICalendar;\n}\n\nexport interface SpectrumDatePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDatePickerBase<T> {}\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 = React.forwardRef(function DatePicker<T extends DateValue>(\n  props: SpectrumDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isQuiet, isDisabled, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    descriptionProps,\n    errorMessageProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField {...fieldProps} data-testid=\"date-field\" isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': isInvalid}\n                  )}\n                />\n                {showTimeField && (\n                  <div\n                    className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\"\n                    />\n                  </div>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.cjs.map"}

package/dist/private/datepicker/DatePicker.js

@@ -110,7 +110,8 @@ const $b155a4096c914b21$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $2BM5b$react
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $14b5acfdaf2344b2$export$322f4580ccd8dde6)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;

package/dist/private/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEM,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAClD,KAAiC,EACjC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aAAC,SAAS,WAAE,OAAO,cAAE,UAAU,oBAAE,gBAAgB,oBAAE,mBAAmB,GAAE,GAAG;IAC/E,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAyB;IAC9C,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;QAC7B,GAAG,KAAK;QACR,qBAAqB,IAAM,CAAC,MAAM,OAAO;IAC3C;IACA,IAAI,cACF,UAAU,cACV,UAAU,cACV,UAAU,oBACV,gBAAgB,qBAChB,iBAAiB,eACjB,WAAW,eACX,WAAW,iBACX,aAAa,aACb,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAChC,IAAI,UAAC,MAAM,WAAE,OAAO,EAAC,GAAG;IACxB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,SAAS,CAAA,GAAA,yCAAiB,EAAE;IAChC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,8CAAW,GAAG;IAEhE,IAAI,aAAC,SAAS,kBAAE,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QACzD,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,EAAC,WAAW,eAAe,EAAE,YAAY,gBAAgB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC5E,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,YAAY,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG,uBAAuB;QACxD,8BAA8B;QAC9B,gCAAgC,aAAa,CAAC;QAC9C,eAAe;QACf,cAAc;QACd,cAAc;QACd,cAAc,kBAAkB,CAAC;IACnC;IAEA,IAAI,iBAAiB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG,6BAA6B;QACnE,eAAe;QACf,cAAc,aAAa,CAAC;IAC9B;IAEA,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,yCAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,iBAAiB,EAAE,GAAG;IAGxB,IAAI,cAA4C;IAChD,IAAI,kBAAkB,eAAe,UAAU,cAAc,cAAc;IAC3E,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,kBACF,MAAM,WAAW,KAAK,UAAU,MAAM,WAAW,KAAK,YAAY,MAAM,WAAW,KAAK,WACpF,MAAM,WAAW,GACjB;IACN,IAAI,gBAAgB,CAAC,CAAC;IAEtB,IAAI,gBAAgB,CAAA,GAAA,yCAAe,EAAE;IACrC,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE,SAAS;IAEtD,qBACE,gCAAC,CAAA,GAAA,yCAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBAC/C,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,YAAY,WAAW;QAClD,WAAW;QACX,KAAK;qBACL,gCAAC,CAAA,GAAA,yCAAI;QACH,YAAY;QACZ,SAAS;QACT,iBAAiB;QACjB,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAC9B,gBAAgB;QAChB,kBAAA;QACA,UAAU;qBACV,gCAAC,CAAA,GAAA,uCAAc;QAAG,GAAG,UAAU;QAAE,eAAY;QAAa,SAAS;uBAErE,gCAAC,CAAA,GAAA,yCAAY;QACX,MAAK;QACL,YAAW;QACX,WAAW,cAAc,QAAQ,iBAAiB;QAClD,WAAW;QACX,WAAA;QACA,QAAQ;QACR,cAAc;QACd,YAAY,MAAM,UAAU;qBAC5B,gCAAC,CAAA,GAAA,yCAAU;QACR,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,iBAAiB;QAC7C,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACrC,SAAS;QACT,iBAAiB;qBACjB,gCAAC,CAAA,GAAA,oCAAW,yBAEd,gCAAC,CAAA,GAAA,yCAAK;QACJ,kBAAkB,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;QAC9C,GAAG,WAAW;qBACf,gCAAC,CAAA,GAAA,yCAAM,uBACL,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAAE,CAAA,GAAA,8CAAe,GAAG;qBACxC,gCAAC,CAAA,GAAA,yCAAO;QACL,GAAG,aAAa;QACjB,eAAe;QACf,gBAAgB,MAAM,cAAc;QACpC,kBAAkB,CAAA,GAAA,yCAAS,EACzB,CAAA,GAAA,8CAAe,GACf,sCACA;YAAC,cAAc;QAAS;QAG3B,+BACC,gCAAC;QACC,WAAW,CAAA,GAAA,yCAAS,EAClB,CAAA,GAAA,8CAAe,GACf;qBAEF,gCAAC,CAAA,GAAA,yCAAQ;QACP,OAAO,gBAAgB,MAAM,CAAC;QAC9B,OAAO,MAAM,SAAS;QACtB,UAAU,MAAM,YAAY;QAC5B,kBAAkB;QAClB,aAAa;QACb,UAAU;QACV,UAAU;QACV,WAAW,MAAM,SAAS;QAC1B,cAAc,MAAM,YAAY;QAChC,WAAU;;AAWhC","sources":["packages/@adobe/react-spectrum/src/datepicker/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDatePickerProps, DateValue, useDatePicker} from 'react-aria/useDatePicker';\nimport {Calendar} from '../calendar/Calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDateFieldBase} from './DateField';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; // HACK: must be included BEFORE inputgroup\nimport {TimeField} from './TimeField';\nimport {useDatePickerState} from 'react-stately/useDatePickerState';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDatePickerBase<T extends DateValue>\n  extends SpectrumDateFieldBase<T>, SpectrumLabelableProps, StyleProps {\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   * Whether the calendar popover should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * A function to create a new\n   * [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a\n   * given calendar identifier. This will be used for the popover calendar. If not provided, the\n   * `createCalendar` function from `@internationalized/date` will be used.\n   */\n  createCalendar?: (identifier: CalendarIdentifier) => ICalendar;\n}\n\nexport interface SpectrumDatePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDatePickerBase<T> {}\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 = React.forwardRef(function DatePicker<T extends DateValue>(\n  props: SpectrumDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isQuiet, isDisabled, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    descriptionProps,\n    errorMessageProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField {...fieldProps} data-testid=\"date-field\" isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': isInvalid}\n                  )}\n                />\n                {showTimeField && (\n                  <div\n                    className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\"\n                    />\n                  </div>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/datepicker/DatePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDatePickerProps, DateValue, useDatePicker} from 'react-aria/useDatePicker';\nimport {Calendar} from '../calendar/Calendar';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {CalendarIdentifier, Calendar as ICalendar} from '@internationalized/date';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {FocusableRef, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDateFieldBase} from './DateField';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css'; // HACK: must be included BEFORE inputgroup\nimport {TimeField} from './TimeField';\nimport {useDatePickerState} from 'react-stately/useDatePickerState';\nimport '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDatePickerBase<T extends DateValue>\n  extends SpectrumDateFieldBase<T>, SpectrumLabelableProps, StyleProps {\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   * Whether the calendar popover should automatically flip direction when space is limited.\n   *\n   * @default true\n   */\n  shouldFlip?: boolean;\n  /**\n   * A function to create a new\n   * [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a\n   * given calendar identifier. This will be used for the popover calendar. If not provided, the\n   * `createCalendar` function from `@internationalized/date` will be used.\n   */\n  createCalendar?: (identifier: CalendarIdentifier) => ICalendar;\n}\n\nexport interface SpectrumDatePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDatePickerProps<T>, 'isInvalid' | 'validationState' | 'autoComplete'>,\n    SpectrumDatePickerBase<T> {}\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 = React.forwardRef(function DatePicker<T extends DateValue>(\n  props: SpectrumDatePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {autoFocus, isQuiet, isDisabled, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDatePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    groupProps,\n    labelProps,\n    fieldProps,\n    descriptionProps,\n    errorMessageProps,\n    buttonProps,\n    dialogProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDatePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  let approximateWidth = useFormattedDateWidth(state) + 'ch';\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <Input\n          isDisabled={isDisabled}\n          isQuiet={isQuiet}\n          validationState={validationState}\n          className={classNames(styles, 'spectrum-InputGroup-field')}\n          inputClassName={fieldClassName}\n          disableFocusRing\n          minWidth={approximateWidth}>\n          <DatePickerField {...fieldProps} data-testid=\"date-field\" isQuiet={isQuiet} />\n        </Input>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <Calendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': isInvalid}\n                  )}\n                />\n                {showTimeField && (\n                  <div\n                    className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('time')}\n                      value={state.timeValue}\n                      onChange={state.setTimeValue}\n                      placeholderValue={timePlaceholder}\n                      granularity={timeGranularity}\n                      minValue={timeMinValue}\n                      maxValue={timeMaxValue}\n                      hourCycle={props.hourCycle}\n                      hideTimeZone={props.hideTimeZone}\n                      marginTop=\"size-100\"\n                    />\n                  </div>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDatePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"DatePicker.js.map"}

package/dist/private/datepicker/DatePicker.mjs

@@ -110,7 +110,8 @@ const $999bbcd47b903179$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $40WKp$react
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $d24c665d02225161$export$322f4580ccd8dde6)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;

package/dist/private/datepicker/DatePicker.mjs.map

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

package/dist/private/datepicker/DateRangePicker.cjs

@@ -115,7 +115,8 @@ const $0434dd729af2cd0e$export$17334619f3ac2224 = /*#__PURE__*/ (0, ($parcel$int
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $7f5eff3a70a58c6f$exports.useFormatHelpText)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;

package/dist/private/datepicker/DateRangePicker.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/datepicker/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker\n} from 'react-aria/useDateRangePicker';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {Flex} from '../layout/Flex';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {RangeCalendar} from '../calendar/RangeCalendar';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePickerState} from 'react-stately/useDateRangePickerState';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateRangePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>,\n    Omit<SpectrumDatePickerBase<T>, 'validate'> {}\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 = React.forwardRef(function DateRangePicker<T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {isQuiet, isDisabled, autoFocus, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    labelProps,\n    groupProps,\n    buttonProps,\n    dialogProps,\n    startFieldProps,\n    endFieldProps,\n    descriptionProps,\n    errorMessageProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <div style={{overflow: 'hidden', width: '100%'}}>\n          <Input\n            isDisabled={isDisabled}\n            isQuiet={isQuiet}\n            validationState={validationState}\n            className={classNames(styles, 'spectrum-InputGroup-field')}\n            inputClassName={fieldClassName}\n            disableFocusRing\n            minWidth={approximateWidth}>\n            <DatePickerField\n              {...startFieldProps}\n              data-testid=\"start-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')}\n            />\n            <DateRangeDash />\n            <DatePickerField\n              {...endFieldProps}\n              data-testid=\"end-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(\n                styles,\n                'spectrum-Datepicker-endField',\n                classNames(datepickerStyles, 'react-spectrum-Datepicker-endField')\n              )}\n            />\n          </Input>\n        </div>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': validationState === 'invalid'}\n                  )}\n                />\n                {showTimeField && (\n                  <Flex\n                    gap=\"size-100\"\n                    marginTop=\"size-100\"\n                    UNSAFE_className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                  </Flex>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n\nfunction DateRangeDash() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDM,MAAM,0DAAkB,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,gBACvD,KAAsC,EACtC,GAA8B;IAE9B,QAAQ,CAAA,GAAA,0CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,WAAC,OAAO,cAAE,UAAU,aAAE,SAAS,oBAAE,gBAAgB,oBAAE,mBAAmB,GAAE,GAAG;IAC/E,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,iCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAyB;IAC9C,IAAI,QAAQ,CAAA,GAAA,kEAAsB,EAAE;QAClC,GAAG,KAAK;QACR,qBAAqB,IAAM,CAAC,MAAM,OAAO;IAC3C;IACA,IAAI,cACF,UAAU,cACV,UAAU,eACV,WAAW,eACX,WAAW,mBACX,eAAe,iBACf,aAAa,oBACb,gBAAgB,qBAChB,iBAAiB,iBACjB,aAAa,aACb,SAAS,oBACT,gBAAgB,qBAChB,iBAAiB,EAClB,GAAG,CAAA,GAAA,qDAAiB,EAAE,OAAO,OAAO;IACrC,IAAI,UAAC,MAAM,WAAE,OAAO,EAAC,GAAG;IACxB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAC1B,IAAI,SAAS,CAAA,GAAA,4CAAiB,EAAE;IAChC,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAEhE,IAAI,aAAC,SAAS,kBAAE,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QACzD,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,EAAC,WAAW,eAAe,EAAE,YAAY,gBAAgB,EAAC,GAAG,CAAA,GAAA,yCAAW,EAAE;QAC5E,QAAQ;QACR,aAAa;mBACb;IACF;IAEA,IAAI,YAAY,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,uBAAuB;QACxD,8BAA8B;QAC9B,gCAAgC,aAAa,CAAC;QAC9C,eAAe;QACf,cAAc;QACd,cAAc;QACd,cAAc,kBAAkB,CAAC;IACnC;IAEA,IAAI,iBAAiB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,6BAA6B;QACnE,eAAe;QACf,cAAc,aAAa,CAAC;IAC9B;IAEA,uEAAuE;IACvE,wGAAwG;IACxG,IAAI,cAAc,CAAA,GAAA,2CAAgB,EAAE;IACpC,IAAI,eAAe,CAAC,MAAM,WAAW,EACnC,gDAAgD;IAChD,iBAAiB,EAAE,GAAG;IAGxB,IAAI,cAA4C;IAChD,IAAI,kBAAkB,eAAe,UAAU,cAAc,cAAc;IAC3E,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG;IACjF,IAAI,kBACF,MAAM,WAAW,KAAK,UAAU,MAAM,WAAW,KAAK,YAAY,MAAM,WAAW,KAAK,WACpF,MAAM,WAAW,GACjB;IACN,IAAI,gBAAgB,CAAC,CAAC;IAEtB,IAAI,gBAAgB,CAAA,GAAA,0CAAe,EAAE;IACrC,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,YAAY,YAAY,IAAG;IAE3E,gHAAgH;IAChH,IAAI,mBAAmB,CAAC,KAAK,EAAE,CAAA,GAAA,+CAAoB,EAAE,SAAS,IAAI,EAAE,mDAAmD,CAAC;IAExH,qBACE,0DAAC,CAAA,GAAA,+BAAI;QACF,GAAG,KAAK;QACT,KAAK;QACL,aAAY;QACZ,aAAa;QACb,YAAY;QACZ,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBAC/C,0DAAC;QACE,GAAG,CAAA,GAAA,qCAAS,EAAE,YAAY,YAAY,WAAW;QAClD,WAAW;QACX,KAAK;qBACL,0DAAC;QAAI,OAAO;YAAC,UAAU;YAAU,OAAO;QAAM;qBAC5C,0DAAC,CAAA,GAAA,+BAAI;QACH,YAAY;QACZ,SAAS;QACT,iBAAiB;QACjB,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC9B,gBAAgB;QAChB,kBAAA;QACA,UAAU;qBACV,0DAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,eAAe;QACnB,eAAY;QACZ,SAAS,MAAM,OAAO;QACtB,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;sBAE/C,0DAAC,0DACD,0DAAC,CAAA,GAAA,yCAAc;QACZ,GAAG,aAAa;QACjB,eAAY;QACZ,SAAS,MAAM,OAAO;QACtB,gBAAgB,CAAA,GAAA,oCAAS,EACvB,CAAA,GAAA,mDAAK,GACL,gCACA,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;wBAKrC,0DAAC,CAAA,GAAA,uCAAY;QACX,MAAK;QACL,YAAW;QACX,WAAW,cAAc,QAAQ,iBAAiB;QAClD,WAAW;QACX,WAAA;QACA,QAAQ;QACR,cAAc;QACd,YAAY,MAAM,UAAU;qBAC5B,0DAAC,CAAA,GAAA,qCAAU;QACR,GAAG,CAAA,GAAA,qCAAS,EAAE,aAAa,iBAAiB;QAC7C,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,SAAS;QACT,iBAAiB;qBACjB,0DAAC,CAAA,GAAA,8DAAW,yBAEd,0DAAC,CAAA,GAAA,gCAAK;QACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;QAC9C,GAAG,WAAW;qBACf,0DAAC,CAAA,GAAA,iCAAM,uBACL,0DAAC;QACC,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;qBACxC,0DAAC,CAAA,GAAA,uCAAY;QACV,GAAG,aAAa;QACjB,eAAe;QACf,gBAAgB,MAAM,cAAc;QACpC,kBAAkB,CAAA,GAAA,oCAAS,EACzB,CAAA,GAAA,mDAAe,GACf,sCACA;YAAC,cAAc,oBAAoB;QAAS;QAG/C,+BACC,0DAAC,CAAA,GAAA,8BAAG;QACF,KAAI;QACJ,WAAU;QACV,kBAAkB,CAAA,GAAA,oCAAS,EACzB,CAAA,GAAA,mDAAe,GACf;qBAEF,0DAAC,CAAA,GAAA,mCAAQ;QACP,OAAO,gBAAgB,MAAM,CAAC;QAC9B,OAAO,MAAM,SAAS,EAAE,SAAS;QACjC,UAAU,CAAA,IAAK,MAAM,OAAO,CAAC,SAAS;QACtC,kBAAkB;QAClB,aAAa;QACb,UAAU;QACV,UAAU;QACV,WAAW,MAAM,SAAS;QAC1B,cAAc,MAAM,YAAY;QAChC,MAAA;sBAEF,0DAAC,CAAA,GAAA,mCAAQ;QACP,OAAO,gBAAgB,MAAM,CAAC;QAC9B,OAAO,MAAM,SAAS,EAAE,OAAO;QAC/B,UAAU,CAAA,IAAK,MAAM,OAAO,CAAC,OAAO;QACpC,kBAAkB;QAClB,aAAa;QACb,UAAU;QACV,UAAU;QACV,WAAW,MAAM,SAAS;QAC1B,cAAc,MAAM,YAAY;QAChC,MAAA;;AAWtB;AAIA,SAAS;IACP,qBACE,0DAAC;QACC,eAAY;QACZ,eAAY;QACZ,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAe,GAAG;;AAG9C","sources":["packages/@adobe/react-spectrum/src/datepicker/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker\n} from 'react-aria/useDateRangePicker';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {Flex} from '../layout/Flex';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {RangeCalendar} from '../calendar/RangeCalendar';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePickerState} from 'react-stately/useDateRangePickerState';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateRangePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>,\n    Omit<SpectrumDatePickerBase<T>, 'validate'> {}\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 = React.forwardRef(function DateRangePicker<T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {isQuiet, isDisabled, autoFocus, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    labelProps,\n    groupProps,\n    buttonProps,\n    dialogProps,\n    startFieldProps,\n    endFieldProps,\n    descriptionProps,\n    errorMessageProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <div style={{overflow: 'hidden', width: '100%'}}>\n          <Input\n            isDisabled={isDisabled}\n            isQuiet={isQuiet}\n            validationState={validationState}\n            className={classNames(styles, 'spectrum-InputGroup-field')}\n            inputClassName={fieldClassName}\n            disableFocusRing\n            minWidth={approximateWidth}>\n            <DatePickerField\n              {...startFieldProps}\n              data-testid=\"start-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')}\n            />\n            <DateRangeDash />\n            <DatePickerField\n              {...endFieldProps}\n              data-testid=\"end-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(\n                styles,\n                'spectrum-Datepicker-endField',\n                classNames(datepickerStyles, 'react-spectrum-Datepicker-endField')\n              )}\n            />\n          </Input>\n        </div>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': validationState === 'invalid'}\n                  )}\n                />\n                {showTimeField && (\n                  <Flex\n                    gap=\"size-100\"\n                    marginTop=\"size-100\"\n                    UNSAFE_className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                  </Flex>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n\nfunction DateRangeDash() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.cjs.map"}

package/dist/private/datepicker/DateRangePicker.js

@@ -110,7 +110,8 @@ const $62a249cadcc61296$export$17334619f3ac2224 = /*#__PURE__*/ (0, $4amrE$react
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $14b5acfdaf2344b2$export$322f4580ccd8dde6)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;

package/dist/private/datepicker/DateRangePicker.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/datepicker/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker\n} from 'react-aria/useDateRangePicker';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {Flex} from '../layout/Flex';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {RangeCalendar} from '../calendar/RangeCalendar';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePickerState} from 'react-stately/useDateRangePickerState';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateRangePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>,\n    Omit<SpectrumDatePickerBase<T>, 'validate'> {}\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 = React.forwardRef(function DateRangePicker<T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {isQuiet, isDisabled, autoFocus, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    labelProps,\n    groupProps,\n    buttonProps,\n    dialogProps,\n    startFieldProps,\n    endFieldProps,\n    descriptionProps,\n    errorMessageProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <div style={{overflow: 'hidden', width: '100%'}}>\n          <Input\n            isDisabled={isDisabled}\n            isQuiet={isQuiet}\n            validationState={validationState}\n            className={classNames(styles, 'spectrum-InputGroup-field')}\n            inputClassName={fieldClassName}\n            disableFocusRing\n            minWidth={approximateWidth}>\n            <DatePickerField\n              {...startFieldProps}\n              data-testid=\"start-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')}\n            />\n            <DateRangeDash />\n            <DatePickerField\n              {...endFieldProps}\n              data-testid=\"end-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(\n                styles,\n                'spectrum-Datepicker-endField',\n                classNames(datepickerStyles, 'react-spectrum-Datepicker-endField')\n              )}\n            />\n          </Input>\n        </div>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': validationState === 'invalid'}\n                  )}\n                />\n                {showTimeField && (\n                  <Flex\n                    gap=\"size-100\"\n                    marginTop=\"size-100\"\n                    UNSAFE_className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                  </Flex>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n\nfunction DateRangeDash() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.js.map"}
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/datepicker/DateRangePicker.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker\n} from 'react-aria/useDateRangePicker';\nimport CalendarIcon from '@spectrum-icons/workflow/Calendar';\nimport {classNames} from '../utils/classNames';\nimport {Content} from '../view/Content';\nimport {DatePickerField} from './DatePickerField';\nimport datepickerStyles from './styles.css';\nimport {Dialog} from '../dialog/Dialog';\nimport {DialogTrigger} from '../dialog/DialogTrigger';\nimport {Field} from '../label/Field';\nimport {FieldButton} from '../button/FieldButton';\nimport {Flex} from '../layout/Flex';\nimport {FocusableRef} from '@react-types/shared';\nimport {Input} from './Input';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {RangeCalendar} from '../calendar/RangeCalendar';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TimeField} from './TimeField';\nimport {useDateRangePickerState} from 'react-stately/useDateRangePickerState';\nimport {\n  useFocusManagerRef,\n  useFormatHelpText,\n  useFormattedDateWidth,\n  useVisibleMonths\n} from './utils';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useFormProps} from '../form/Form';\nimport {useHover} from 'react-aria/useHover';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\n\nexport interface SpectrumDateRangePickerProps<T extends DateValue>\n  extends\n    Omit<AriaDateRangePickerProps<T>, 'isInvalid' | 'validationState'>,\n    Omit<SpectrumDatePickerBase<T>, 'validate'> {}\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 = React.forwardRef(function DateRangePicker<T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T>,\n  ref: FocusableRef<HTMLElement>\n) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {isQuiet, isDisabled, autoFocus, placeholderValue, maxVisibleMonths = 1} = props;\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let targetRef = useRef<HTMLDivElement | null>(null);\n  let state = useDateRangePickerState({\n    ...props,\n    shouldCloseOnSelect: () => !state.hasTime\n  });\n  let {\n    labelProps,\n    groupProps,\n    buttonProps,\n    dialogProps,\n    startFieldProps,\n    endFieldProps,\n    descriptionProps,\n    errorMessageProps,\n    calendarProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  } = useDateRangePicker(props, state, targetRef);\n  let {isOpen, setOpen} = state;\n  let {direction} = useLocale();\n  let domRef = useFocusManagerRef(ref);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');\n\n  let {isFocused, isFocusVisible, focusProps} = useFocusRing({\n    within: true,\n    isTextInput: true,\n    autoFocus\n  });\n\n  let {isFocused: isFocusedButton, focusProps: focusPropsButton} = useFocusRing({\n    within: false,\n    isTextInput: false,\n    autoFocus\n  });\n\n  let className = classNames(styles, 'spectrum-InputGroup', {\n    'spectrum-InputGroup--quiet': isQuiet,\n    'spectrum-InputGroup--invalid': isInvalid && !isDisabled,\n    'is-disabled': isDisabled,\n    'is-hovered': isHovered,\n    'is-focused': isFocused,\n    'focus-ring': isFocusVisible && !isFocusedButton\n  });\n\n  let fieldClassName = classNames(styles, 'spectrum-InputGroup-input', {\n    'is-disabled': isDisabled,\n    'is-invalid': isInvalid && !isDisabled\n  });\n\n  // Note: this description is intentionally not passed to useDatePicker.\n  // The format help text is unnecessary for screen reader users because each segment already has a label.\n  let description = useFormatHelpText(props);\n  if (description && !props.description) {\n    // oxlint-disable-next-line react/react-compiler\n    descriptionProps.id = undefined;\n  }\n\n  let placeholder: DateValue | null | undefined = placeholderValue;\n  let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;\n  let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;\n  let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;\n  let timeGranularity =\n    state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second'\n      ? state.granularity\n      : null;\n  let showTimeField = !!timeGranularity;\n\n  let visibleMonths = useVisibleMonths(maxVisibleMonths);\n  let validationState = state.validationState || (isInvalid ? 'invalid' : null);\n\n  // Multiplying by two for the two dates, adding one character for the dash, and then the padding around the dash\n  let approximateWidth = `calc(${useFormattedDateWidth(state) * 2 + 1}ch + 2 * var(--spectrum-global-dimension-size-100))`;\n\n  return (\n    <Field\n      {...props}\n      ref={domRef}\n      elementType=\"span\"\n      description={description}\n      labelProps={labelProps}\n      descriptionProps={descriptionProps}\n      errorMessageProps={errorMessageProps}\n      validationState={validationState}\n      isInvalid={isInvalid}\n      validationErrors={validationErrors}\n      validationDetails={validationDetails}\n      wrapperClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-fieldWrapper')}>\n      <div\n        {...mergeProps(groupProps, hoverProps, focusProps)}\n        className={className}\n        ref={targetRef}>\n        <div style={{overflow: 'hidden', width: '100%'}}>\n          <Input\n            isDisabled={isDisabled}\n            isQuiet={isQuiet}\n            validationState={validationState}\n            className={classNames(styles, 'spectrum-InputGroup-field')}\n            inputClassName={fieldClassName}\n            disableFocusRing\n            minWidth={approximateWidth}>\n            <DatePickerField\n              {...startFieldProps}\n              data-testid=\"start-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(datepickerStyles, 'react-spectrum-Datepicker-startField')}\n            />\n            <DateRangeDash />\n            <DatePickerField\n              {...endFieldProps}\n              data-testid=\"end-date\"\n              isQuiet={props.isQuiet}\n              inputClassName={classNames(\n                styles,\n                'spectrum-Datepicker-endField',\n                classNames(datepickerStyles, 'react-spectrum-Datepicker-endField')\n              )}\n            />\n          </Input>\n        </div>\n        <DialogTrigger\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement={direction === 'rtl' ? 'bottom right' : 'bottom left'}\n          targetRef={targetRef}\n          hideArrow\n          isOpen={isOpen}\n          onOpenChange={setOpen}\n          shouldFlip={props.shouldFlip}>\n          <FieldButton\n            {...mergeProps(buttonProps, focusPropsButton)}\n            UNSAFE_className={classNames(styles, 'spectrum-FieldButton')}\n            isQuiet={isQuiet}\n            validationState={validationState}>\n            <CalendarIcon />\n          </FieldButton>\n          <Dialog\n            UNSAFE_className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialog')}\n            {...dialogProps}>\n            <Content>\n              <div\n                className={classNames(datepickerStyles, 'react-spectrum-Datepicker-dialogContent')}>\n                <RangeCalendar\n                  {...calendarProps}\n                  visibleMonths={visibleMonths}\n                  createCalendar={props.createCalendar}\n                  UNSAFE_className={classNames(\n                    datepickerStyles,\n                    'react-spectrum-Datepicker-calendar',\n                    {'is-invalid': validationState === 'invalid'}\n                  )}\n                />\n                {showTimeField && (\n                  <Flex\n                    gap=\"size-100\"\n                    marginTop=\"size-100\"\n                    UNSAFE_className={classNames(\n                      datepickerStyles,\n                      'react-spectrum-Datepicker-timeFields'\n                    )}>\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                    <TimeField\n                      label={stringFormatter.format('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                      flex\n                    />\n                  </Flex>\n                )}\n              </div>\n            </Content>\n          </Dialog>\n        </DialogTrigger>\n      </div>\n    </Field>\n  );\n}) as <T extends DateValue>(\n  props: SpectrumDateRangePickerProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n\nfunction DateRangeDash() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-testid=\"date-range-dash\"\n      className={classNames(datepickerStyles, 'react-spectrum-Datepicker-rangeDash')}\n    />\n  );\n}\n"],"names":[],"version":3,"file":"DateRangePicker.js.map"}

package/dist/private/datepicker/DateRangePicker.mjs

@@ -109,7 +109,8 @@ const $2c014dcb8f84bd90$export$17334619f3ac2224 = /*#__PURE__*/ (0, $6sl3d$react
     // Note: this description is intentionally not passed to useDatePicker.
     // The format help text is unnecessary for screen reader users because each segment already has a label.
     let description = (0, $d24c665d02225161$export$322f4580ccd8dde6)(props);
-    if (description && !props.description) descriptionProps.id = undefined;
+    if (description && !props.description) // oxlint-disable-next-line react/react-compiler
+    descriptionProps.id = undefined;
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
     let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;