react-aria/dist/private/select/HiddenSelect.mjs.map

Spectrum UI components in React

{"mappings":"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","sources":["packages/react-aria/src/select/HiddenSelect.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 {FocusableElement, Key, RefObject} from '@react-types/shared';\nimport {getEventTarget} from '../utils/shadowdom/DOMFunctions';\nimport React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';\nimport {selectData} from './useSelect';\nimport {SelectionMode, SelectState} from 'react-stately/useSelectState';\nimport {useFormReset} from '../utils/useFormReset';\nimport {useFormValidation} from '../form/useFormValidation';\nimport {useVisuallyHidden} from '../visually-hidden/VisuallyHidden';\n\nexport interface AriaHiddenSelectProps {\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  /** The text label for the select. */\n  label?: ReactNode;\n\n  /** HTML form input name. */\n  name?: string;\n\n  /**\n   * The `<form>` element to associate the input with.\n   * The value of this attribute must be the id of a `<form>` in the same document.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n   */\n  form?: string;\n\n  /** Sets the disabled state of the select and input. */\n  isDisabled?: boolean;\n}\n\nexport interface HiddenSelectProps<\n  T,\n  M extends SelectionMode = 'single'\n> extends AriaHiddenSelectProps {\n  /** State for the select. */\n  state: SelectState<T, M>;\n\n  /** A ref to the trigger element. */\n  triggerRef: RefObject<FocusableElement | null>;\n}\n\nexport interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {\n  /** A ref to the hidden `<select>` element. */\n  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>;\n}\n\nexport interface HiddenSelectAria {\n  /** Props for the container element. */\n  containerProps: React.HTMLAttributes<FocusableElement>;\n\n  /** Props for the hidden input element. */\n  inputProps: React.InputHTMLAttributes<HTMLInputElement>;\n\n  /** Props for the hidden select element. */\n  selectProps: React.SelectHTMLAttributes<HTMLSelectElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a hidden `<select>` element, which\n * can be used in combination with `useSelect` to support browser form autofill, mobile form\n * navigation, and native HTML form submission.\n */\nexport function useHiddenSelect<T, M extends SelectionMode = 'single'>(\n  props: AriaHiddenSelectOptions,\n  state: SelectState<T, M>,\n  triggerRef: RefObject<FocusableElement | null>\n): HiddenSelectAria {\n  let data = selectData.get(state) || {};\n  let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;\n  let {validationBehavior, isRequired} = data;\n  let {visuallyHiddenProps} = useVisuallyHidden({\n    style: {\n      // Prevent page scrolling.\n      position: 'fixed',\n      top: 0,\n      left: 0\n    }\n  });\n\n  useFormReset(props.selectRef, state.defaultValue, state.setValue);\n  useFormValidation(\n    {\n      validationBehavior,\n      focus: () => triggerRef.current?.focus()\n    },\n    state,\n    props.selectRef\n  );\n\n  let setValue = state.setValue;\n  let onChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      let eventTarget = getEventTarget(e);\n      if (eventTarget.multiple) {\n        setValue(Array.from(eventTarget.selectedOptions, option => option.value) as any);\n      } else {\n        setValue(e.currentTarget.value as any);\n      }\n    },\n    [setValue]\n  );\n\n  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.\n  // In Firefox, there must be a <label> to identify the <select> whereas other browsers\n  // seem to identify it just by surrounding text.\n  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a\n  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>\n  // non tabbable with tabIndex={-1}.\n  return {\n    containerProps: {\n      ...visuallyHiddenProps,\n      'aria-hidden': true,\n      // @ts-ignore\n      ['data-react-aria-prevent-focus']: true,\n      // @ts-ignore\n      ['data-a11y-ignore']: 'aria-hidden-focus'\n    },\n    inputProps: {\n      style: {display: 'none'}\n    },\n    selectProps: {\n      tabIndex: -1,\n      autoComplete,\n      disabled: isDisabled,\n      multiple: state.selectionManager.selectionMode === 'multiple',\n      required: validationBehavior === 'native' && isRequired,\n      name,\n      form,\n      value: (state.value as string | string[]) ?? '',\n      onChange,\n      onInput: onChange\n    }\n  };\n}\n\n/**\n * Renders a hidden native `<select>` element, which can be used to support browser\n * form autofill, mobile form navigation, and native form submission.\n */\nexport function HiddenSelect<T, M extends SelectionMode = 'single'>(\n  props: HiddenSelectProps<T, M>\n): JSX.Element | null {\n  let {state, triggerRef, label, name, form, isDisabled} = props;\n  let selectRef = useRef(null);\n  let inputRef = useRef(null);\n  let {containerProps, selectProps} = useHiddenSelect(\n    {...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef},\n    state,\n    triggerRef\n  );\n\n  let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];\n\n  // If used in a <form>, use a hidden input so the value can be submitted to a server.\n  // If the collection isn't too big, use a hidden <select> element for this so that browser\n  // autofill will work. Otherwise, use an <input type=\"hidden\">.\n  if (state.collection.size <= 300) {\n    return (\n      <div {...containerProps} data-testid=\"hidden-select-container\">\n        <label>\n          {label}\n          <select {...selectProps} ref={selectRef}>\n            <option value=\"\" label={'\\u00A0'}>\n              {'\\u00A0'}\n            </option>\n            {[...state.collection.getKeys()].map(key => {\n              let item = state.collection.getItem(key);\n              if (item && item.type === 'item') {\n                return (\n                  <option key={item.key} value={item.key}>\n                    {item.textValue}\n                  </option>\n                );\n              }\n            })}\n            {/* The collection may be empty during the initial render. */}\n            {/* Rendering options for the current values ensures the select has a value immediately, */}\n            {/* making FormData reads consistent. */}\n            {state.collection.size === 0 &&\n              name &&\n              values.map((value, i) => <option key={i} value={value ?? ''} />)}\n          </select>\n        </label>\n      </div>\n    );\n  } else if (name) {\n    let data = selectData.get(state) || {};\n    let {validationBehavior} = data;\n\n    // Always render at least one hidden input to ensure required form submission.\n    if (values.length === 0) {\n      values = [null];\n    }\n\n    let res = values.map((value, i) => {\n      let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n        type: 'hidden',\n        autoComplete: selectProps.autoComplete,\n        name,\n        form,\n        disabled: isDisabled,\n        value: value ?? ''\n      };\n\n      if (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        return (\n          <input\n            key={i}\n            {...inputProps}\n            ref={i === 0 ? inputRef : null}\n            style={{display: 'none'}}\n            type=\"text\"\n            required={i === 0 ? selectProps.required : false}\n            onChange={() => {\n              /** Ignore react warning. */\n            }}\n          />\n        );\n      }\n\n      return <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />;\n    });\n\n    return <>{res}</>;\n  }\n\n  return null;\n}\n"],"names":[],"version":3,"file":"HiddenSelect.mjs.map"}