@adobe/react-spectrum 3.47.0 → 3.47.1

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AA4BM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UAA+B,KAAgC,EAAE,GAA8B;IAChJ,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,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;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAyB;IAC7C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,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,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,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/TimeField.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 {AriaTimeFieldProps, MappedTimeValue, TimeValue, useTimeField} from 'react-aria/useTimeField';\nimport {classNames} from '../utils/classNames';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {FocusableRef, InputDOMProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useTimeFieldState} from 'react-stately/useTimeFieldState';\n\nexport interface SpectrumTimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumFieldValidation<MappedTimeValue<T>>, SpectrumLabelableProps, StyleProps, InputDOMProps {\n  /**\n   * Whether the time field should be displayed with a quiet style.\n   * @default false\n   */\n  isQuiet?: boolean\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nexport const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\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      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-TimeField-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-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"TimeField.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AA8CM,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;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAyB;IAC7C,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,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,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/TimeField.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  AriaTimeFieldProps,\n  MappedTimeValue,\n  TimeValue,\n  useTimeField\n} from 'react-aria/useTimeField';\nimport {classNames} from '../utils/classNames';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  InputDOMProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useTimeFieldState} from 'react-stately/useTimeFieldState';\n\nexport interface SpectrumTimeFieldProps<T extends TimeValue>\n  extends\n    Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<MappedTimeValue<T>>,\n    SpectrumLabelableProps,\n    StyleProps,\n    InputDOMProps {\n  /**\n   * Whether the time field should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nexport const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(\n  props: SpectrumTimeFieldProps<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 = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef<HTMLDivElement | 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  } = useTimeField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\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      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-TimeField-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-TimeField')}>\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 TimeValue>(\n  props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"TimeField.js.map"}

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AA4BM,MAAM,0DAAY,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,UAA+B,KAAgC,EAAE,GAA8B;IAChJ,QAAQ,CAAA,GAAA,yCAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,aACF,SAAS,cACT,UAAU,cACV,UAAU,cACV,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,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;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAyB;IAC7C,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,oBAAE,gBAAgB,qBAAE,iBAAiB,aAAE,SAAS,oBAAE,gBAAgB,qBAAE,iBAAiB,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;QAC3I,GAAG,KAAK;kBACR;IACF,GAAG,OAAO;IAEV,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,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,kBAC3B,gCAAC,CAAA,GAAA,yCAAgB;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,YAAY;YACZ,YAAY;YACZ,YAAY;2BAEhB,gCAAC;QAAO,GAAG,UAAU;QAAE,KAAK;;AAIpC","sources":["packages/@adobe/react-spectrum/src/datepicker/TimeField.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 {AriaTimeFieldProps, MappedTimeValue, TimeValue, useTimeField} from 'react-aria/useTimeField';\nimport {classNames} from '../utils/classNames';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {FocusableRef, InputDOMProps, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useTimeFieldState} from 'react-stately/useTimeFieldState';\n\nexport interface SpectrumTimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>, SpectrumFieldValidation<MappedTimeValue<T>>, SpectrumLabelableProps, StyleProps, InputDOMProps {\n  /**\n   * Whether the time field should be displayed with a quiet style.\n   * @default false\n   */\n  isQuiet?: boolean\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nexport const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  let {\n    autoFocus,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    isQuiet\n  } = props;\n\n  let domRef = useFocusManagerRef(ref);\n  let {locale} = useLocale();\n  let state = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({\n    ...props,\n    inputRef\n  }, state, fieldRef);\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      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-TimeField-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-TimeField')}>\n        {state.segments.map((segment, i) =>\n          (<DatePickerSegment\n            key={i}\n            segment={segment}\n            state={state}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isRequired={isRequired} />)\n        )}\n        <input {...inputProps} ref={inputRef} />\n      </Input>\n    </Field>\n  );\n}) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"TimeField.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AA8CM,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;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,aAAK,EAAyB;IAC7C,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,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,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/TimeField.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  AriaTimeFieldProps,\n  MappedTimeValue,\n  TimeValue,\n  useTimeField\n} from 'react-aria/useTimeField';\nimport {classNames} from '../utils/classNames';\nimport {DatePickerSegment} from './DatePickerSegment';\nimport datepickerStyles from './styles.css';\nimport {Field} from '../label/Field';\nimport {\n  FocusableRef,\n  InputDOMProps,\n  SpectrumFieldValidation,\n  SpectrumLabelableProps,\n  StyleProps\n} from '@react-types/shared';\nimport {Input} from './Input';\nimport React, {ReactElement, useRef} from 'react';\nimport {useFocusManagerRef, useFormattedDateWidth} from './utils';\nimport {useFormProps} from '../form/Form';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProviderProps} from '../provider/Provider';\nimport {useTimeFieldState} from 'react-stately/useTimeFieldState';\n\nexport interface SpectrumTimeFieldProps<T extends TimeValue>\n  extends\n    Omit<AriaTimeFieldProps<T>, 'isInvalid' | 'validationState'>,\n    SpectrumFieldValidation<MappedTimeValue<T>>,\n    SpectrumLabelableProps,\n    StyleProps,\n    InputDOMProps {\n  /**\n   * Whether the time field should be displayed with a quiet style.\n   *\n   * @default false\n   */\n  isQuiet?: boolean;\n}\n\n/**\n * TimeFields allow users to enter and edit time values using a keyboard.\n * Each part of the time is displayed in an individually editable segment.\n */\nexport const TimeField = React.forwardRef(function TimeField<T extends TimeValue>(\n  props: SpectrumTimeFieldProps<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 = useTimeFieldState({\n    ...props,\n    locale\n  });\n\n  let fieldRef = useRef<HTMLDivElement | 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  } = useTimeField(\n    {\n      ...props,\n      inputRef\n    },\n    state,\n    fieldRef\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      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-TimeField-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-TimeField')}>\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 TimeValue>(\n  props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}\n) => ReactElement;\n"],"names":[],"version":3,"file":"TimeField.mjs.map"}

package/dist/private/datepicker/styles.css

@@ -1,53 +1,54 @@
-.yoC59W_react-spectrum-Datepicker-fieldWrapper.yoC59W_react-spectrum-Datepicker-fieldWrapper.yoC59W_react-spectrum-Datepicker-fieldWrapper {
+.CBy5TW_react-spectrum-Datepicker-fieldWrapper.CBy5TW_react-spectrum-Datepicker-fieldWrapper.CBy5TW_react-spectrum-Datepicker-fieldWrapper {
   width: auto;
   min-width: var(--spectrum-global-dimension-size-2000);
   max-width: 100%;
 }
 
-.yoC59W_react-spectrum-Datepicker-startField {
+.CBy5TW_react-spectrum-Datepicker-startField {
   width: auto;
   padding-inline-end: var(--spectrum-global-dimension-size-100);
 }
 
-.yoC59W_react-spectrum-Datepicker-endField {
+.CBy5TW_react-spectrum-Datepicker-endField {
   width: auto;
   flex: 1;
   padding-inline-start: var(--spectrum-global-dimension-size-100);
 }
 
-.yoC59W_react-spectrum-Datepicker-field ~ .yoC59W_react-spectrum-Datepicker-endField > .yoC59W_react-spectrum-Datepicker-input {
+.CBy5TW_react-spectrum-Datepicker-field ~ .CBy5TW_react-spectrum-Datepicker-endField > .CBy5TW_react-spectrum-Datepicker-input {
   border-inline-start-width: 0;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
-.yoC59W_react-spectrum-Datepicker-field.yoC59W_react-spectrum-Datepicker-field {
+.CBy5TW_react-spectrum-Datepicker-field.CBy5TW_react-spectrum-Datepicker-field {
   width: 100%;
 }
 
-.yoC59W_react-spectrum-Datepicker-field .yoC59W_react-spectrum-DateField-Input {
+.CBy5TW_react-spectrum-Datepicker-field .CBy5TW_react-spectrum-DateField-Input {
   line-height: var(--spectrum-body-4-text-line-height, var(--spectrum-alias-body-text-line-height));
 }
 
-.yoC59W_react-spectrum-DateField.yoC59W_react-spectrum-DateField.yoC59W_react-spectrum-DateField.yoC59W_react-spectrum-DateField {
+.CBy5TW_react-spectrum-DateField.CBy5TW_react-spectrum-DateField.CBy5TW_react-spectrum-DateField.CBy5TW_react-spectrum-DateField {
   min-width: var(--spectrum-global-dimension-size-2000);
 }
 
-.yoC59W_react-spectrum-TimeField.yoC59W_react-spectrum-TimeField.yoC59W_react-spectrum-TimeField.yoC59W_react-spectrum-TimeField {
+.CBy5TW_react-spectrum-TimeField.CBy5TW_react-spectrum-TimeField.CBy5TW_react-spectrum-TimeField.CBy5TW_react-spectrum-TimeField {
   min-width: var(--spectrum-global-dimension-size-1250);
 }
 
-.yoC59W_react-spectrum-TimeField-fieldWrapper.yoC59W_react-spectrum-TimeField-fieldWrapper.yoC59W_react-spectrum-TimeField-fieldWrapper {
+.CBy5TW_react-spectrum-TimeField-fieldWrapper.CBy5TW_react-spectrum-TimeField-fieldWrapper.CBy5TW_react-spectrum-TimeField-fieldWrapper {
   width: auto;
   min-width: var(--spectrum-global-dimension-size-1250);
 }
 
-.yoC59W_react-spectrum-Datepicker-input.yoC59W_react-spectrum-Datepicker-input.yoC59W_react-spectrum-Datepicker-input {
+.CBy5TW_react-spectrum-Datepicker-input.CBy5TW_react-spectrum-Datepicker-input.CBy5TW_react-spectrum-Datepicker-input {
   cursor: text;
-  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
+  padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) +
+      var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
 }
 
-.yoC59W_react-spectrum-Datepicker-inputContents {
+.CBy5TW_react-spectrum-Datepicker-inputContents {
   scrollbar-width: none;
   -ms-overflow-style: none;
   align-items: center;
@@ -56,34 +57,34 @@
   overflow-x: auto;
 }
 
-.yoC59W_react-spectrum-Datepicker-inputContents::-webkit-scrollbar {
+.CBy5TW_react-spectrum-Datepicker-inputContents::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
 
-.yoC59W_react-spectrum-Datepicker-inputSized {
+.CBy5TW_react-spectrum-Datepicker-inputSized {
   align-items: center;
   display: inline;
 }
 
-.yoC59W_react-spectrum-Datepicker-rangeDash:before {
+.CBy5TW_react-spectrum-Datepicker-rangeDash:before {
   content: "–";
 }
 
-.yoC59W_react-spectrum-Datepicker-segments {
+.CBy5TW_react-spectrum-Datepicker-segments {
   align-items: center;
   display: inline-block;
 }
 
-.yoC59W_react-spectrum-Datepicker-literal {
+.CBy5TW_react-spectrum-Datepicker-literal {
   white-space: pre;
   -webkit-user-select: none;
   user-select: none;
   color: var(--spectrum-textfield-text-color, var(--spectrum-alias-text-color));
 }
 
-.yoC59W_react-spectrum-DatePicker-cell {
+.CBy5TW_react-spectrum-DatePicker-cell {
   border-radius: var(--spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25));
   font-variant-numeric: tabular-nums;
   text-align: end;
@@ -95,64 +96,65 @@
   padding: 0 2px;
 }
 
-.yoC59W_react-spectrum-DatePicker-cell::selection {
+.CBy5TW_react-spectrum-DatePicker-cell::selection {
   background: none;
 }
 
-.yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-placeholder {
+.CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-placeholder {
   color: var(--spectrum-gray-600);
 }
 
-.yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-placeholder .yoC59W_react-spectrum-DatePicker-placeholder {
+.CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-placeholder .CBy5TW_react-spectrum-DatePicker-placeholder {
   text-align: center;
   pointer-events: none;
 }
 
-.yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-placeholder ~ .yoC59W_react-spectrum-Datepicker-literal {
+.CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-placeholder ~ .CBy5TW_react-spectrum-Datepicker-literal {
   color: var(--spectrum-global-color-gray-600);
 }
 
-.yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-read-only {
+.CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-read-only {
   color: var(--spectrum-global-color-gray-700);
 }
 
-.yoC59W_react-spectrum-DatePicker-cell:focus {
+.CBy5TW_react-spectrum-DatePicker-cell:focus {
   background-color: var(--spectrum-accent-background-color-default);
   color: #fff;
   caret-color: #0000;
   outline: none;
 }
 
-.yoC59W_react-spectrum-Datepicker-dialog.yoC59W_react-spectrum-Datepicker-dialog {
+.CBy5TW_react-spectrum-Datepicker-dialog.CBy5TW_react-spectrum-Datepicker-dialog {
   width: auto;
 }
 
-.yoC59W_react-spectrum-Datepicker-dialogContent {
+.CBy5TW_react-spectrum-Datepicker-dialogContent {
   flex-direction: column;
   display: flex;
 }
 
-.yoC59W_react-spectrum-Datepicker-dialogContent .yoC59W_react-spectrum-Datepicker-calendar.yoC59W_is-invalid {
+.CBy5TW_react-spectrum-Datepicker-dialogContent .CBy5TW_react-spectrum-Datepicker-calendar.CBy5TW_is-invalid {
   display: contents;
 }
 
-.yoC59W_react-spectrum-Datepicker-dialogContent .spectrum-Calendar-helpText {
-  margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding, 4px) 0 var(--spectrum-calendar-day-padding, 4px);
+.CBy5TW_react-spectrum-Datepicker-dialogContent .spectrum-Calendar-helpText {
+  margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding, 4px) 0
+      var(--spectrum-calendar-day-padding, 4px);
   order: 10;
 }
 
 @media (width <= 700px) {
-  .yoC59W_react-spectrum-Datepicker-dialog {
+  .CBy5TW_react-spectrum-Datepicker-dialog {
     --spectrum-dialog-padding-x: 8px;
   }
 
-  .yoC59W_react-spectrum-Datepicker-dialog .yoC59W_react-spectrum-Datepicker-dialogContent {
+  .CBy5TW_react-spectrum-Datepicker-dialog .CBy5TW_react-spectrum-Datepicker-dialogContent {
     max-width: calc((var(--spectrum-calendar-day-width, var(--spectrum-global-dimension-size-400)) * 7) + (var(--spectrum-calendar-day-padding, 4px) * 12));
     margin: 0 auto;
   }
 }
 
-.yoC59W_react-spectrum-Datepicker-timeFields {
+.CBy5TW_react-spectrum-Datepicker-timeFields {
   width: 100%;
   min-width: calc(var(--spectrum-calendar-day-width, var(--spectrum-global-dimension-size-400)) * 7);
   max-width: calc((var(--spectrum-calendar-day-width, var(--spectrum-global-dimension-size-400)) * 7) + (var(--spectrum-calendar-day-padding, 4px) * 12));
@@ -161,25 +163,25 @@
 }
 
 @media (forced-colors: active) {
-  .yoC59W_react-spectrum-DatePicker-cell:focus {
+  .CBy5TW_react-spectrum-DatePicker-cell:focus {
     forced-color-adjust: none;
     color: highlighttext;
     background-color: highlight;
   }
 
-  .yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-read-only {
+  .CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-read-only {
     color: buttontext;
   }
 
-  .yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-read-only:focus {
+  .CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-read-only:focus {
     color: highlighttext;
   }
 
-  .yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-placeholder {
+  .CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-placeholder {
     color: buttontext;
   }
 
-  .yoC59W_react-spectrum-DatePicker-cell.yoC59W_is-placeholder:focus {
+  .CBy5TW_react-spectrum-DatePicker-cell.CBy5TW_is-placeholder:focus {
     color: highlighttext;
   }
 }

package/dist/private/datepicker/styles.css.map

@@ -1 +1 @@
-{"mappings":"AAYA;;;;;;AAMA;;;;;AAKA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAMA;;;;;;;;;AAQE;;;;;;AAOF;;;;;AAME;;;;AAKF;;;;;AAKA;;;;;;;AAMA;;;;;;;;;;;;AAWE;;;;AAOF;;;;AAGE;;;;;AAMF;;;;AAIA;;;;AAIA;;;;;;;AAOA;;;;AAIA;;;;;AAIE;;;;AAQA;;;;;AAQF;EACE;;;;EAGE;;;;;;AAOJ;;;;;;;;AAQA;EACE;;;;;;EAKA;;;;EAEE;;;;EAIF;;;;EAEE","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n   width: auto;\n   min-width: var(--spectrum-global-dimension-size-2000);\n   max-width: 100%;\n }\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors:active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles.css.map"}
+{"mappings":"AAYA;;;;;;AAMA;;;;;AAKA;;;;;;AAMA;;;;;;AAQA;;;;AAIA;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-2000);\n  max-width: 100%;\n}\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field\n  ~ .react-spectrum-Datepicker-endField\n  > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(\n    var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) +\n      var(--spectrum-textfield-icon-margin-left)\n  );\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0\n      var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc(\n        (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n      );\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc(\n    (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n  );\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles.css.map"}

package/dist/private/datepicker/styles_css.cjs

@@ -49,29 +49,29 @@ var $25dd6e69bdd309d3$export$eec05853f5fc7ef8;
 var $25dd6e69bdd309d3$export$8d47712a13573e39;
 var $25dd6e69bdd309d3$export$61c201f1ba261729;
 var $25dd6e69bdd309d3$export$3008240fa163ee96;
-$25dd6e69bdd309d3$export$14a30de2866685fa = `yoC59W_is-invalid`;
-$25dd6e69bdd309d3$export$e5b2f5233e4e5194 = `yoC59W_is-placeholder`;
-$25dd6e69bdd309d3$export$dddce3ae23a6e3ea = `yoC59W_is-read-only`;
-$25dd6e69bdd309d3$export$c96d01b692101b8a = `yoC59W_react-spectrum-DateField`;
-$25dd6e69bdd309d3$export$d57270210c079fad = `yoC59W_react-spectrum-DateField-Input`;
-$25dd6e69bdd309d3$export$947f5cb8a73639a4 = `yoC59W_react-spectrum-DatePicker-cell`;
-$25dd6e69bdd309d3$export$d7b1df8540d8ce55 = `yoC59W_react-spectrum-DatePicker-placeholder`;
-$25dd6e69bdd309d3$export$640bfc6f7362791a = `yoC59W_react-spectrum-Datepicker-calendar`;
-$25dd6e69bdd309d3$export$7c3cb625bb792356 = `yoC59W_react-spectrum-Datepicker-dialog`;
-$25dd6e69bdd309d3$export$94c97d6b6a927921 = `yoC59W_react-spectrum-Datepicker-dialogContent`;
-$25dd6e69bdd309d3$export$b41789438b49c852 = `yoC59W_react-spectrum-Datepicker-endField`;
-$25dd6e69bdd309d3$export$8cbece9fb909350d = `yoC59W_react-spectrum-Datepicker-field`;
-$25dd6e69bdd309d3$export$48501287c6ce4708 = `yoC59W_react-spectrum-Datepicker-fieldWrapper`;
-$25dd6e69bdd309d3$export$4cdb39b006dc840a = `yoC59W_react-spectrum-Datepicker-input`;
-$25dd6e69bdd309d3$export$609545772ae0466a = `yoC59W_react-spectrum-Datepicker-inputContents`;
-$25dd6e69bdd309d3$export$ebb52994026bc71c = `yoC59W_react-spectrum-Datepicker-inputSized`;
-$25dd6e69bdd309d3$export$24a265734c16a355 = `yoC59W_react-spectrum-Datepicker-literal`;
-$25dd6e69bdd309d3$export$1ae39afd2cf49425 = `yoC59W_react-spectrum-Datepicker-rangeDash`;
-$25dd6e69bdd309d3$export$b9c34f0306ac2ffc = `yoC59W_react-spectrum-Datepicker-segments`;
-$25dd6e69bdd309d3$export$eec05853f5fc7ef8 = `yoC59W_react-spectrum-Datepicker-startField`;
-$25dd6e69bdd309d3$export$8d47712a13573e39 = `yoC59W_react-spectrum-Datepicker-timeFields`;
-$25dd6e69bdd309d3$export$61c201f1ba261729 = `yoC59W_react-spectrum-TimeField`;
-$25dd6e69bdd309d3$export$3008240fa163ee96 = `yoC59W_react-spectrum-TimeField-fieldWrapper`;
+$25dd6e69bdd309d3$export$14a30de2866685fa = `CBy5TW_is-invalid`;
+$25dd6e69bdd309d3$export$e5b2f5233e4e5194 = `CBy5TW_is-placeholder`;
+$25dd6e69bdd309d3$export$dddce3ae23a6e3ea = `CBy5TW_is-read-only`;
+$25dd6e69bdd309d3$export$c96d01b692101b8a = `CBy5TW_react-spectrum-DateField`;
+$25dd6e69bdd309d3$export$d57270210c079fad = `CBy5TW_react-spectrum-DateField-Input`;
+$25dd6e69bdd309d3$export$947f5cb8a73639a4 = `CBy5TW_react-spectrum-DatePicker-cell`;
+$25dd6e69bdd309d3$export$d7b1df8540d8ce55 = `CBy5TW_react-spectrum-DatePicker-placeholder`;
+$25dd6e69bdd309d3$export$640bfc6f7362791a = `CBy5TW_react-spectrum-Datepicker-calendar`;
+$25dd6e69bdd309d3$export$7c3cb625bb792356 = `CBy5TW_react-spectrum-Datepicker-dialog`;
+$25dd6e69bdd309d3$export$94c97d6b6a927921 = `CBy5TW_react-spectrum-Datepicker-dialogContent`;
+$25dd6e69bdd309d3$export$b41789438b49c852 = `CBy5TW_react-spectrum-Datepicker-endField`;
+$25dd6e69bdd309d3$export$8cbece9fb909350d = `CBy5TW_react-spectrum-Datepicker-field`;
+$25dd6e69bdd309d3$export$48501287c6ce4708 = `CBy5TW_react-spectrum-Datepicker-fieldWrapper`;
+$25dd6e69bdd309d3$export$4cdb39b006dc840a = `CBy5TW_react-spectrum-Datepicker-input`;
+$25dd6e69bdd309d3$export$609545772ae0466a = `CBy5TW_react-spectrum-Datepicker-inputContents`;
+$25dd6e69bdd309d3$export$ebb52994026bc71c = `CBy5TW_react-spectrum-Datepicker-inputSized`;
+$25dd6e69bdd309d3$export$24a265734c16a355 = `CBy5TW_react-spectrum-Datepicker-literal`;
+$25dd6e69bdd309d3$export$1ae39afd2cf49425 = `CBy5TW_react-spectrum-Datepicker-rangeDash`;
+$25dd6e69bdd309d3$export$b9c34f0306ac2ffc = `CBy5TW_react-spectrum-Datepicker-segments`;
+$25dd6e69bdd309d3$export$eec05853f5fc7ef8 = `CBy5TW_react-spectrum-Datepicker-startField`;
+$25dd6e69bdd309d3$export$8d47712a13573e39 = `CBy5TW_react-spectrum-Datepicker-timeFields`;
+$25dd6e69bdd309d3$export$61c201f1ba261729 = `CBy5TW_react-spectrum-TimeField`;
+$25dd6e69bdd309d3$export$3008240fa163ee96 = `CBy5TW_react-spectrum-TimeField-fieldWrapper`;
 
 
 //# sourceMappingURL=styles_css.cjs.map

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA2D,CAAC,6CAA6C,CAAC;AAC1G,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA0D,CAAC,4CAA4C,CAAC","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n   width: auto;\n   min-width: var(--spectrum-global-dimension-size-2000);\n   max-width: 100%;\n }\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors:active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles_css.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA2D,CAAC,6CAA6C,CAAC;AAC1G,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA0D,CAAC,4CAA4C,CAAC","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-2000);\n  max-width: 100%;\n}\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field\n  ~ .react-spectrum-Datepicker-endField\n  > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(\n    var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) +\n      var(--spectrum-textfield-icon-margin-left)\n  );\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0\n      var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc(\n        (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n      );\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc(\n    (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n  );\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles_css.cjs.map"}

package/dist/private/datepicker/styles_css.mjs

@@ -50,29 +50,29 @@ var $1e588bdcdb6acc82$export$eec05853f5fc7ef8;
 var $1e588bdcdb6acc82$export$8d47712a13573e39;
 var $1e588bdcdb6acc82$export$61c201f1ba261729;
 var $1e588bdcdb6acc82$export$3008240fa163ee96;
-$1e588bdcdb6acc82$export$14a30de2866685fa = `yoC59W_is-invalid`;
-$1e588bdcdb6acc82$export$e5b2f5233e4e5194 = `yoC59W_is-placeholder`;
-$1e588bdcdb6acc82$export$dddce3ae23a6e3ea = `yoC59W_is-read-only`;
-$1e588bdcdb6acc82$export$c96d01b692101b8a = `yoC59W_react-spectrum-DateField`;
-$1e588bdcdb6acc82$export$d57270210c079fad = `yoC59W_react-spectrum-DateField-Input`;
-$1e588bdcdb6acc82$export$947f5cb8a73639a4 = `yoC59W_react-spectrum-DatePicker-cell`;
-$1e588bdcdb6acc82$export$d7b1df8540d8ce55 = `yoC59W_react-spectrum-DatePicker-placeholder`;
-$1e588bdcdb6acc82$export$640bfc6f7362791a = `yoC59W_react-spectrum-Datepicker-calendar`;
-$1e588bdcdb6acc82$export$7c3cb625bb792356 = `yoC59W_react-spectrum-Datepicker-dialog`;
-$1e588bdcdb6acc82$export$94c97d6b6a927921 = `yoC59W_react-spectrum-Datepicker-dialogContent`;
-$1e588bdcdb6acc82$export$b41789438b49c852 = `yoC59W_react-spectrum-Datepicker-endField`;
-$1e588bdcdb6acc82$export$8cbece9fb909350d = `yoC59W_react-spectrum-Datepicker-field`;
-$1e588bdcdb6acc82$export$48501287c6ce4708 = `yoC59W_react-spectrum-Datepicker-fieldWrapper`;
-$1e588bdcdb6acc82$export$4cdb39b006dc840a = `yoC59W_react-spectrum-Datepicker-input`;
-$1e588bdcdb6acc82$export$609545772ae0466a = `yoC59W_react-spectrum-Datepicker-inputContents`;
-$1e588bdcdb6acc82$export$ebb52994026bc71c = `yoC59W_react-spectrum-Datepicker-inputSized`;
-$1e588bdcdb6acc82$export$24a265734c16a355 = `yoC59W_react-spectrum-Datepicker-literal`;
-$1e588bdcdb6acc82$export$1ae39afd2cf49425 = `yoC59W_react-spectrum-Datepicker-rangeDash`;
-$1e588bdcdb6acc82$export$b9c34f0306ac2ffc = `yoC59W_react-spectrum-Datepicker-segments`;
-$1e588bdcdb6acc82$export$eec05853f5fc7ef8 = `yoC59W_react-spectrum-Datepicker-startField`;
-$1e588bdcdb6acc82$export$8d47712a13573e39 = `yoC59W_react-spectrum-Datepicker-timeFields`;
-$1e588bdcdb6acc82$export$61c201f1ba261729 = `yoC59W_react-spectrum-TimeField`;
-$1e588bdcdb6acc82$export$3008240fa163ee96 = `yoC59W_react-spectrum-TimeField-fieldWrapper`;
+$1e588bdcdb6acc82$export$14a30de2866685fa = `CBy5TW_is-invalid`;
+$1e588bdcdb6acc82$export$e5b2f5233e4e5194 = `CBy5TW_is-placeholder`;
+$1e588bdcdb6acc82$export$dddce3ae23a6e3ea = `CBy5TW_is-read-only`;
+$1e588bdcdb6acc82$export$c96d01b692101b8a = `CBy5TW_react-spectrum-DateField`;
+$1e588bdcdb6acc82$export$d57270210c079fad = `CBy5TW_react-spectrum-DateField-Input`;
+$1e588bdcdb6acc82$export$947f5cb8a73639a4 = `CBy5TW_react-spectrum-DatePicker-cell`;
+$1e588bdcdb6acc82$export$d7b1df8540d8ce55 = `CBy5TW_react-spectrum-DatePicker-placeholder`;
+$1e588bdcdb6acc82$export$640bfc6f7362791a = `CBy5TW_react-spectrum-Datepicker-calendar`;
+$1e588bdcdb6acc82$export$7c3cb625bb792356 = `CBy5TW_react-spectrum-Datepicker-dialog`;
+$1e588bdcdb6acc82$export$94c97d6b6a927921 = `CBy5TW_react-spectrum-Datepicker-dialogContent`;
+$1e588bdcdb6acc82$export$b41789438b49c852 = `CBy5TW_react-spectrum-Datepicker-endField`;
+$1e588bdcdb6acc82$export$8cbece9fb909350d = `CBy5TW_react-spectrum-Datepicker-field`;
+$1e588bdcdb6acc82$export$48501287c6ce4708 = `CBy5TW_react-spectrum-Datepicker-fieldWrapper`;
+$1e588bdcdb6acc82$export$4cdb39b006dc840a = `CBy5TW_react-spectrum-Datepicker-input`;
+$1e588bdcdb6acc82$export$609545772ae0466a = `CBy5TW_react-spectrum-Datepicker-inputContents`;
+$1e588bdcdb6acc82$export$ebb52994026bc71c = `CBy5TW_react-spectrum-Datepicker-inputSized`;
+$1e588bdcdb6acc82$export$24a265734c16a355 = `CBy5TW_react-spectrum-Datepicker-literal`;
+$1e588bdcdb6acc82$export$1ae39afd2cf49425 = `CBy5TW_react-spectrum-Datepicker-rangeDash`;
+$1e588bdcdb6acc82$export$b9c34f0306ac2ffc = `CBy5TW_react-spectrum-Datepicker-segments`;
+$1e588bdcdb6acc82$export$eec05853f5fc7ef8 = `CBy5TW_react-spectrum-Datepicker-startField`;
+$1e588bdcdb6acc82$export$8d47712a13573e39 = `CBy5TW_react-spectrum-Datepicker-timeFields`;
+$1e588bdcdb6acc82$export$61c201f1ba261729 = `CBy5TW_react-spectrum-TimeField`;
+$1e588bdcdb6acc82$export$3008240fa163ee96 = `CBy5TW_react-spectrum-TimeField-fieldWrapper`;
 
 
 export {$1e588bdcdb6acc82$exports as default};

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA2D,CAAC,6CAA6C,CAAC;AAC1G,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA0D,CAAC,4CAA4C,CAAC","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n   width: auto;\n   min-width: var(--spectrum-global-dimension-size-2000);\n   max-width: 100%;\n }\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field ~ .react-spectrum-Datepicker-endField > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) + var(--spectrum-textfield-icon-margin-left));\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar { /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0 var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors:active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles_css.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAtBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAA0D,CAAC,4CAA4C,CAAC;AACxG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA2D,CAAC,6CAA6C,CAAC;AAC1G,4CAAoD,CAAC,sCAAsC,CAAC;AAC5F,4CAA4D,CAAC,8CAA8C,CAAC;AAC5G,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAsD,CAAC,wCAAwC,CAAC;AAChG,4CAAwD,CAAC,0CAA0C,CAAC;AACpG,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAAyD,CAAC,2CAA2C,CAAC;AACtG,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA0D,CAAC,4CAA4C,CAAC","sources":["packages/@adobe/react-spectrum/src/datepicker/styles.css"],"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\n.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-2000);\n  max-width: 100%;\n}\n\n.react-spectrum-Datepicker-startField {\n  width: auto;\n  padding-inline-end: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-endField {\n  width: auto;\n  flex: 1;\n  padding-inline-start: var(--spectrum-global-dimension-size-100);\n}\n\n.react-spectrum-Datepicker-field\n  ~ .react-spectrum-Datepicker-endField\n  > .react-spectrum-Datepicker-input {\n  border-inline-start-width: 0;\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.react-spectrum-Datepicker-field.react-spectrum-Datepicker-field {\n  width: 100%;\n}\n\n.react-spectrum-Datepicker-field .react-spectrum-DateField-Input {\n  line-height: var(--spectrum-body-4-text-line-height);\n}\n\n/* specificity war with .spectrum-Field--positionSide etc. */\n.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField.react-spectrum-DateField {\n  min-width: var(--spectrum-global-dimension-size-2000);\n}\n\n.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField.react-spectrum-TimeField {\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper.react-spectrum-TimeField-fieldWrapper {\n  width: auto;\n  min-width: var(--spectrum-global-dimension-size-1250);\n}\n\n.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input.react-spectrum-Datepicker-input {\n  /* always reserve space for the validation icon */\n  padding-inline-end: calc(\n    var(--spectrum-textfield-padding-x) + var(--spectrum-icon-alert-medium-width) +\n      var(--spectrum-textfield-icon-margin-left)\n  );\n  cursor: text;\n}\n\n.react-spectrum-Datepicker-inputContents {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    /* WebKit */\n    width: 0;\n    height: 0;\n    display: none;\n  }\n}\n\n.react-spectrum-Datepicker-inputSized {\n  display: inline;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-rangeDash {\n  &:before {\n    content: '–';\n  }\n}\n\n.react-spectrum-Datepicker-segments {\n  display: inline-block;\n  align-items: center;\n}\n\n.react-spectrum-Datepicker-literal {\n  white-space: pre;\n  user-select: none;\n  color: var(--spectrum-textfield-text-color);\n}\n\n.react-spectrum-DatePicker-cell {\n  border: none;\n  background: none;\n  padding: 0 2px;\n  border-radius: var(--spectrum-alias-border-radius-small);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  box-sizing: content-box;\n  white-space: nowrap;\n  color: var(--spectrum-textfield-text-color);\n\n  &::selection {\n    /* hide the selection because there is no way to fully prevent it in Firefox */\n    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 */\n    background: transparent;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder {\n  color: var(--spectrum-gray-600);\n\n  .react-spectrum-DatePicker-placeholder {\n    text-align: center;\n    pointer-events: none;\n  }\n}\n\n.react-spectrum-DatePicker-cell.is-placeholder ~ .react-spectrum-Datepicker-literal {\n  color: var(--spectrum-global-color-gray-600);\n}\n\n.react-spectrum-DatePicker-cell.is-read-only {\n  color: var(--spectrum-global-color-gray-700);\n}\n\n.react-spectrum-DatePicker-cell:focus {\n  background-color: var(--spectrum-accent-background-color-default);\n  color: white;\n  caret-color: transparent;\n  outline: none;\n}\n\n.react-spectrum-Datepicker-dialog.react-spectrum-Datepicker-dialog {\n  width: auto;\n}\n\n.react-spectrum-Datepicker-dialogContent {\n  display: flex;\n  flex-direction: column;\n\n  .react-spectrum-Datepicker-calendar.is-invalid {\n    /* Only apply display: contents when the calendar is invalid, which allows us to move the\n     * error message below the time fields. Otherwise, don't do this because it breaks dragging\n     * the selected range on Android. */\n    display: contents;\n  }\n\n  /* Push the help text within the calendar down to the bottom of the dialog, below the time fields. */\n  :global(.spectrum-Calendar-helpText) {\n    order: 10;\n    margin: var(--spectrum-global-dimension-size-200) var(--spectrum-calendar-day-padding) 0\n      var(--spectrum-calendar-day-padding);\n  }\n}\n\n/* when displayed in a tray, reduce the padding of the dialog */\n@media (max-width: 700px) {\n  .react-spectrum-Datepicker-dialog {\n    --spectrum-dialog-padding-x: 8px;\n\n    .react-spectrum-Datepicker-dialogContent {\n      margin: 0 auto;\n      max-width: calc(\n        (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n      );\n    }\n  }\n}\n\n.react-spectrum-Datepicker-timeFields {\n  width: 100%;\n  min-width: calc(var(--spectrum-calendar-day-width) * 7);\n  max-width: calc(\n    (var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12)\n  );\n  padding: 0 var(--spectrum-calendar-day-padding);\n  box-sizing: border-box;\n}\n\n@media (forced-colors: active) {\n  .react-spectrum-DatePicker-cell:focus {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n  .react-spectrum-DatePicker-cell.is-read-only {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n  .react-spectrum-DatePicker-cell.is-placeholder {\n    color: ButtonText;\n    &:focus {\n      color: HighlightText;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"styles_css.mjs.map"}

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAeM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,iDAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,gEAAc;IACjC,OAAO,CAAA,GAAA,oBAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OACE,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,GAAG;YAC1C,IAAI,EAAE,IAAI,KAAK,aAAa,EAAE,IAAI,KAAK,aAAa,AAAC,EAAE,IAAI,KAAgB,YACzE,qBAAO,0DAAC;gBAAK,KAAK;eAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;YAGtC,IAAI,OAAO,EAAE,IAAI,KAAe,gBAAgB,SAAS,EAAE,IAAI;YAC/D,qBAAO,0DAAC;gBAAK,KAAK;gBAAG,OAAO;oBAAC,aAAa;oBAAS,WAAW;gBAAK;eAAI,aAAa,EAAE,CAAC;QACzF;QAIJ,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,qCAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,2DAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,sCAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yDAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAA6F;IACjI,IAAI,SAAS,CAAA,GAAA,sCAAQ,KAAK;IAC1B,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAAM,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GAAG,MAAM,CAAC;IAC1F,IAAI,kBAAmB,aAAa,MAAM;IAE1C,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAQ,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACtE","sources":["packages/@adobe/react-spectrum/src/datepicker/utils.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 */\nimport {createDOMRef} from '../utils/useDOMRef';\n\nimport {createFocusManager} from 'react-aria/private/focus/FocusScope';\nimport {DateFormatter} from '@internationalized/date';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormatterOptions} from 'react-stately/private/datepicker/utils';\nimport React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDisplayNames} from 'react-aria/private/datepicker/useDisplayNames';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider} from '../provider/Provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>): ReactNode {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return (\n        formatter.formatToParts(new Date()).map((s, i) => {\n          if (s.type === 'literal' || s.type === 'unknown' || (s.type as string) === 'yearName') {\n            return <span key={i}>{` ${s.value} `}</span>;\n          }\n\n          let type = s.type as string === 'relatedYear' ? 'year' : s.type;\n          return <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>{displayNames.of(type)}</span>;\n        })\n      );\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number): number {\n  let {scale} = useProvider()!;\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>): React.RefObject<HTMLElement | null> {\n  let domRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state: {getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter}): number {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate);\n  let totalCharacters =  formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));\n}\n"],"names":[],"version":3,"file":"utils.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAeM,SAAS,0CACd,KAA8E;IAE9E,IAAI,YAAY,CAAA,GAAA,iDAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,gEAAc;IACjC,OAAO,CAAA,GAAA,oBAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,GAAG;YACjD,IAAI,EAAE,IAAI,KAAK,aAAa,EAAE,IAAI,KAAK,aAAa,AAAC,EAAE,IAAI,KAAgB,YACzE,qBAAO,0DAAC;gBAAK,KAAK;eAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;YAGtC,IAAI,OAAO,AAAC,EAAE,IAAI,KAAgB,gBAAgB,SAAS,EAAE,IAAI;YACjE,qBACE,0DAAC;gBAAK,KAAK;gBAAG,OAAO;oBAAC,aAAa;oBAAS,WAAW;gBAAK;eACzD,aAAa,EAAE,CAAC;QAGvB;QAGF,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,qCAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,2DAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CACd,GAA8B;IAE9B,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,sCAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yDAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAErC;IACC,IAAI,SAAS,CAAA,GAAA,sCAAQ,KAAK;IAC1B,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAChB,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GACvD,MAAM,CAAC;IACV,IAAI,kBAAkB,aAAa,MAAM;IAEzC,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAO,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACrE","sources":["packages/@adobe/react-spectrum/src/datepicker/utils.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 */\nimport {createDOMRef} from '../utils/useDOMRef';\n\nimport {createFocusManager} from 'react-aria/private/focus/FocusScope';\nimport {DateFormatter} from '@internationalized/date';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormatterOptions} from 'react-stately/private/datepicker/utils';\nimport React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDisplayNames} from 'react-aria/private/datepicker/useDisplayNames';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider} from '../provider/Provider';\n\nexport function useFormatHelpText(\n  props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>\n): ReactNode {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map((s, i) => {\n        if (s.type === 'literal' || s.type === 'unknown' || (s.type as string) === 'yearName') {\n          return <span key={i}>{` ${s.value} `}</span>;\n        }\n\n        let type = (s.type as string) === 'relatedYear' ? 'year' : s.type;\n        return (\n          <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>\n            {displayNames.of(type)}\n          </span>\n        );\n      });\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number): number {\n  let {scale} = useProvider()!;\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(\n  ref: FocusableRef<HTMLElement>\n): React.RefObject<HTMLElement | null> {\n  let domRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state: {\n  getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter;\n}): number {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state\n    .getDateFormatter(locale, {shouldForceLeadingZeros: true})\n    .format(currentDate);\n  let totalCharacters = formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2);\n}\n"],"names":[],"version":3,"file":"utils.cjs.map"}

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

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAeM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OACE,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,GAAG;YAC1C,IAAI,EAAE,IAAI,KAAK,aAAa,EAAE,IAAI,KAAK,aAAa,AAAC,EAAE,IAAI,KAAgB,YACzE,qBAAO,gCAAC;gBAAK,KAAK;eAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;YAGtC,IAAI,OAAO,EAAE,IAAI,KAAe,gBAAgB,SAAS,EAAE,IAAI;YAC/D,qBAAO,gCAAC;gBAAK,KAAK;gBAAG,OAAO;oBAAC,aAAa;oBAAS,WAAW;gBAAK;eAAI,aAAa,EAAE,CAAC;QACzF;QAIJ,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,yCAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yCAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAA6F;QACpH;IAAb,IAAI,UAAS,aAAA,CAAA,GAAA,gBAAQ,iBAAR,iCAAA,WAAa,MAAM;IAChC,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAAM,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GAAG,MAAM,CAAC;IAC1F,IAAI,kBAAmB,aAAa,MAAM;IAE1C,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAQ,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACtE","sources":["packages/@adobe/react-spectrum/src/datepicker/utils.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 */\nimport {createDOMRef} from '../utils/useDOMRef';\n\nimport {createFocusManager} from 'react-aria/private/focus/FocusScope';\nimport {DateFormatter} from '@internationalized/date';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormatterOptions} from 'react-stately/private/datepicker/utils';\nimport React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDisplayNames} from 'react-aria/private/datepicker/useDisplayNames';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider} from '../provider/Provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>): ReactNode {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return (\n        formatter.formatToParts(new Date()).map((s, i) => {\n          if (s.type === 'literal' || s.type === 'unknown' || (s.type as string) === 'yearName') {\n            return <span key={i}>{` ${s.value} `}</span>;\n          }\n\n          let type = s.type as string === 'relatedYear' ? 'year' : s.type;\n          return <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>{displayNames.of(type)}</span>;\n        })\n      );\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number): number {\n  let {scale} = useProvider()!;\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>): React.RefObject<HTMLElement | null> {\n  let domRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state: {getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter}): number {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate);\n  let totalCharacters =  formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));\n}\n"],"names":[],"version":3,"file":"utils.js.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAeM,SAAS,0CACd,KAA8E;IAE9E,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,GAAG;YACjD,IAAI,EAAE,IAAI,KAAK,aAAa,EAAE,IAAI,KAAK,aAAa,AAAC,EAAE,IAAI,KAAgB,YACzE,qBAAO,gCAAC;gBAAK,KAAK;eAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;YAGtC,IAAI,OAAO,AAAC,EAAE,IAAI,KAAgB,gBAAgB,SAAS,EAAE,IAAI;YACjE,qBACE,gCAAC;gBAAK,KAAK;gBAAG,OAAO;oBAAC,aAAa;oBAAS,WAAW;gBAAK;eACzD,aAAa,EAAE,CAAC;QAGvB;QAGF,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,yCAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CACd,GAA8B;IAE9B,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yCAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAErC;QACc;IAAb,IAAI,UAAS,aAAA,CAAA,GAAA,gBAAQ,iBAAR,iCAAA,WAAa,MAAM;IAChC,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAChB,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GACvD,MAAM,CAAC;IACV,IAAI,kBAAkB,aAAa,MAAM;IAEzC,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAO,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACrE","sources":["packages/@adobe/react-spectrum/src/datepicker/utils.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 */\nimport {createDOMRef} from '../utils/useDOMRef';\n\nimport {createFocusManager} from 'react-aria/private/focus/FocusScope';\nimport {DateFormatter} from '@internationalized/date';\nimport {FocusableRef} from '@react-types/shared';\nimport {FormatterOptions} from 'react-stately/private/datepicker/utils';\nimport React, {ReactNode, useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {SpectrumDatePickerBase} from './DatePicker';\nimport {useDateFormatter} from 'react-aria/useDateFormatter';\nimport {useDisplayNames} from 'react-aria/private/datepicker/useDisplayNames';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useProvider} from '../provider/Provider';\n\nexport function useFormatHelpText(\n  props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>\n): ReactNode {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map((s, i) => {\n        if (s.type === 'literal' || s.type === 'unknown' || (s.type as string) === 'yearName') {\n          return <span key={i}>{` ${s.value} `}</span>;\n        }\n\n        let type = (s.type as string) === 'relatedYear' ? 'year' : s.type;\n        return (\n          <span key={i} style={{unicodeBidi: 'embed', direction: 'ltr'}}>\n            {displayNames.of(type)}\n          </span>\n        );\n      });\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number): number {\n  let {scale} = useProvider()!;\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(\n  ref: FocusableRef<HTMLElement>\n): React.RefObject<HTMLElement | null> {\n  let domRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state: {\n  getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter;\n}): number {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state\n    .getDateFormatter(locale, {shouldForceLeadingZeros: true})\n    .format(currentDate);\n  let totalCharacters = formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2);\n}\n"],"names":[],"version":3,"file":"utils.js.map"}