react-aria/dist/private/datepicker/useDateField.mjs.map

Spectrum UI components in React

{"mappings":"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","sources":["packages/react-aria/src/datepicker/useDateField.ts"],"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  AriaLabelingProps,\n  DOMAttributes,\n  DOMProps,\n  GroupDOMAttributes,\n  InputDOMProps,\n  KeyboardEvent,\n  RefObject,\n  ValidationResult\n} from '@react-types/shared';\nimport {createFocusManager, FocusManager} from '../focus/FocusScope';\nimport {DateFieldProps, DateFieldState, DateValue} from 'react-stately/useDateFieldState';\nimport {filterDOMProps} from '../utils/filterDOMProps';\nimport {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react';\nimport intlMessages from '../../intl/datepicker/*.json';\nimport {mergeProps} from '../utils/mergeProps';\nimport {TimeFieldState, TimePickerProps, TimeValue} from 'react-stately/useTimeFieldState';\nimport {useDatePickerGroup} from './useDatePickerGroup';\n// @ts-ignore\nimport {useDescription} from '../utils/useDescription';\nimport {useField} from '../label/useField';\nimport {useFocusWithin} from '../interactions/useFocusWithin';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useFormValidation} from '../form/useFormValidation';\nimport {useLocalizedStringFormatter} from '../i18n/useLocalizedStringFormatter';\n\nexport interface AriaDateFieldProps<T extends DateValue>\n  extends DateFieldProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {\n  /**\n   * Describes the type of autocomplete functionality the input should provide if any. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).\n   */\n  autoComplete?: string;\n}\n\n// Allows this hook to also be used with TimeField\nexport interface AriaDateFieldOptions<T extends DateValue> extends Omit<\n  AriaDateFieldProps<T>,\n  'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'\n> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nexport interface DateFieldAria extends ValidationResult {\n  /** Props for the field's visible label element, if any. */\n  labelProps: DOMAttributes;\n  /** Props for the field grouping element. */\n  fieldProps: GroupDOMAttributes;\n  /** Props for the hidden input element for HTML form submission. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes;\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes;\n}\n\n// Data that is passed between useDateField and useDateSegment.\ninterface HookData {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedBy?: string;\n  focusManager: FocusManager;\n}\n\nexport const hookData: WeakMap<DateFieldState, HookData> = new WeakMap<DateFieldState, HookData>();\n\n// Private props that we pass from useDatePicker/useDateRangePicker.\n// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552\n// These need to be stable across server and client module evaluation for SSR hydration.\nexport const roleSymbol: string = '__reactAriaDateFieldRole';\nexport const focusManagerSymbol: string = '__reactAriaDateFieldFocusManager';\n\n/**\n * Provides the behavior and accessibility implementation for a date field component.\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport function useDateField<T extends DateValue>(\n  props: AriaDateFieldOptions<T>,\n  state: DateFieldState,\n  ref: RefObject<Element | null>\n): DateFieldAria {\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let valueOnFocus = useRef<DateValue | null>(null);\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    onFocusWithin(e) {\n      valueOnFocus.current = state.value;\n      props.onFocus?.(e);\n    },\n    onBlurWithin: e => {\n      state.confirmPlaceholder();\n      if (state.value !== valueOnFocus.current) {\n        state.commitValidation();\n      }\n      props.onBlur?.(e);\n    },\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n  let message =\n    state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';\n  let field = state.maxGranularity === 'hour' ? 'time' : 'date';\n  let description = state.value\n    ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})})\n    : '';\n  let descProps = useDescription(description);\n\n  // If within a date picker or date range picker, the date field will have role=\"presentation\" and an aria-describedby\n  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.\n  let describedBy =\n    props[roleSymbol] === 'presentation'\n      ? fieldProps['aria-describedby']\n      : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') ||\n        undefined;\n  let propsFocusManager = props[focusManagerSymbol];\n  let focusManager = useMemo(\n    () => propsFocusManager || createFocusManager(ref),\n    [propsFocusManager, ref]\n  );\n  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');\n\n  // Pass labels and other information to segments.\n  hookData.set(state, {\n    ariaLabel: props['aria-label'],\n    ariaLabelledBy:\n      [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,\n    ariaDescribedBy: describedBy,\n    focusManager\n  });\n\n  let autoFocusRef = useRef(props.autoFocus);\n\n  // When used within a date picker or date range picker, the field gets role=\"presentation\"\n  // rather than role=\"group\". Since the date picker/date range picker already has a role=\"group\"\n  // with a label and description, and the segments are already labeled by this as well, this\n  // avoids very verbose duplicate announcements.\n  let fieldDOMProps: GroupDOMAttributes;\n  if (props[roleSymbol] === 'presentation') {\n    fieldDOMProps = {\n      role: 'presentation'\n    };\n  } else {\n    fieldDOMProps = mergeProps(fieldProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || undefined,\n      'aria-describedby': describedBy\n    });\n  }\n\n  useEffect(() => {\n    if (autoFocusRef.current) {\n      focusManager.focusFirst();\n    }\n    autoFocusRef.current = false;\n  }, [focusManager]);\n\n  useFormReset(props.inputRef, state.defaultValue, state.setValue);\n  useFormValidation(\n    {\n      ...props,\n      focus() {\n        focusManager.focusFirst();\n      }\n    },\n    state,\n    props.inputRef\n  );\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name: props.name,\n    form: props.form,\n    value: state.value?.toString() || '',\n    disabled: props.isDisabled\n  };\n\n  if (props.validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = props.isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  let domProps = filterDOMProps(props);\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {\n      onKeyDown(e: KeyboardEvent) {\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      },\n      style: {\n        unicodeBidi: 'isolate'\n      }\n    }),\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n\nexport interface AriaTimeFieldProps<T extends TimeValue>\n  extends TimePickerProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {}\n\nexport interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a time field component.\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport function useTimeField<T extends TimeValue>(\n  props: AriaTimeFieldOptions<T>,\n  state: TimeFieldState,\n  ref: RefObject<Element | null>\n): DateFieldAria {\n  let res = useDateField(props, state, ref);\n  res.inputProps.value = state.timeValue?.toString() || '';\n  return res;\n}\n"],"names":[],"version":3,"file":"useDateField.mjs.map"}