@react-aria/select 3.17.3 → 3.18.0

package/dist/useSelect.mjs

@@ -1,172 +0,0 @@
-import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain, nodeContains as $aUnai$nodeContains} from "@react-aria/utils";
-import {useMemo as $aUnai$useMemo} from "react";
-import {ListKeyboardDelegate as $aUnai$ListKeyboardDelegate, useTypeSelect as $aUnai$useTypeSelect} from "@react-aria/selection";
-import {setInteractionModality as $aUnai$setInteractionModality} from "@react-aria/interactions";
-import {useCollator as $aUnai$useCollator} from "@react-aria/i18n";
-import {useField as $aUnai$useField} from "@react-aria/label";
-import {useMenuTrigger as $aUnai$useMenuTrigger} from "@react-aria/menu";
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
-
-
-const $58aed456727eb0f3$export$703601b7e90536f8 = new WeakMap();
-function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, form: form, validationBehavior: validationBehavior = 'aria' } = props;
-    // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
-    // When virtualized, the layout object will be passed in as a prop and override this.
-    let collator = (0, $aUnai$useCollator)({
-        usage: 'search',
-        sensitivity: 'base'
-    });
-    let delegate = (0, $aUnai$useMemo)(()=>keyboardDelegate || new (0, $aUnai$ListKeyboardDelegate)(state.collection, state.disabledKeys, ref, collator), [
-        keyboardDelegate,
-        state.collection,
-        state.disabledKeys,
-        collator,
-        ref
-    ]);
-    let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $aUnai$useMenuTrigger)({
-        isDisabled: isDisabled,
-        type: 'listbox'
-    }, state, ref);
-    let onKeyDown = (e)=>{
-        if (state.selectionManager.selectionMode === 'multiple') return;
-        switch(e.key){
-            case 'ArrowLeft':
-                {
-                    var _delegate_getKeyAbove, _delegate_getFirstKey;
-                    // prevent scrolling containers
-                    e.preventDefault();
-                    let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
-                    if (key) state.setSelectedKey(key);
-                    break;
-                }
-            case 'ArrowRight':
-                {
-                    var _delegate_getKeyBelow, _delegate_getFirstKey1;
-                    // prevent scrolling containers
-                    e.preventDefault();
-                    let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
-                    if (key) state.setSelectedKey(key);
-                    break;
-                }
-        }
-    };
-    let { typeSelectProps: typeSelectProps } = (0, $aUnai$useTypeSelect)({
-        keyboardDelegate: delegate,
-        selectionManager: state.selectionManager,
-        onTypeSelect (key) {
-            state.setSelectedKey(key);
-        }
-    });
-    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
-    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $aUnai$useField)({
-        ...props,
-        labelElementType: 'span',
-        isInvalid: isInvalid,
-        errorMessage: props.errorMessage || validationErrors
-    });
-    typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
-    delete typeSelectProps.onKeyDownCapture;
-    if (state.selectionManager.selectionMode === 'multiple') typeSelectProps = {};
-    let domProps = (0, $aUnai$filterDOMProps)(props, {
-        labelable: true
-    });
-    let triggerProps = (0, $aUnai$mergeProps)(typeSelectProps, menuTriggerProps, fieldProps);
-    let valueId = (0, $aUnai$useId)();
-    $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
-        isDisabled: isDisabled,
-        isRequired: isRequired,
-        name: name,
-        form: form,
-        validationBehavior: validationBehavior
-    });
-    return {
-        labelProps: {
-            ...labelProps,
-            onClick: ()=>{
-                if (!props.isDisabled) {
-                    var _ref_current;
-                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
-                    // Show the focus ring so the user knows where focus went
-                    (0, $aUnai$setInteractionModality)('keyboard');
-                }
-            }
-        },
-        triggerProps: (0, $aUnai$mergeProps)(domProps, {
-            ...triggerProps,
-            isDisabled: isDisabled,
-            onKeyDown: (0, $aUnai$chain)(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
-            onKeyUp: props.onKeyUp,
-            'aria-labelledby': [
-                valueId,
-                triggerProps['aria-labelledby'],
-                triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null
-            ].filter(Boolean).join(' '),
-            onFocus (e) {
-                if (state.isFocused) return;
-                if (props.onFocus) props.onFocus(e);
-                if (props.onFocusChange) props.onFocusChange(true);
-                state.setFocused(true);
-            },
-            onBlur (e) {
-                if (state.isOpen) return;
-                if (props.onBlur) props.onBlur(e);
-                if (props.onFocusChange) props.onFocusChange(false);
-                state.setFocused(false);
-            }
-        }),
-        valueProps: {
-            id: valueId
-        },
-        menuProps: {
-            ...menuProps,
-            autoFocus: state.focusStrategy || true,
-            shouldSelectOnPressUp: true,
-            shouldFocusOnHover: true,
-            disallowEmptySelection: true,
-            linkBehavior: 'selection',
-            onBlur: (e)=>{
-                if ((0, $aUnai$nodeContains)(e.currentTarget, e.relatedTarget)) return;
-                if (props.onBlur) props.onBlur(e);
-                if (props.onFocusChange) props.onFocusChange(false);
-                state.setFocused(false);
-            },
-            'aria-labelledby': [
-                fieldProps['aria-labelledby'],
-                triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null
-            ].filter(Boolean).join(' ')
-        },
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps,
-        isInvalid: isInvalid,
-        validationErrors: validationErrors,
-        validationDetails: validationDetails,
-        hiddenSelectProps: {
-            isDisabled: isDisabled,
-            name: name,
-            label: props.label,
-            state: state,
-            triggerRef: ref,
-            form: form
-        }
-    };
-}
-
-
-export {$58aed456727eb0f3$export$703601b7e90536f8 as selectData, $58aed456727eb0f3$export$e64b2f635402ca43 as useSelect};
-//# sourceMappingURL=useSelect.module.js.map

package/dist/useSelect.module.js

@@ -1,172 +0,0 @@
-import {filterDOMProps as $aUnai$filterDOMProps, mergeProps as $aUnai$mergeProps, useId as $aUnai$useId, chain as $aUnai$chain, nodeContains as $aUnai$nodeContains} from "@react-aria/utils";
-import {useMemo as $aUnai$useMemo} from "react";
-import {ListKeyboardDelegate as $aUnai$ListKeyboardDelegate, useTypeSelect as $aUnai$useTypeSelect} from "@react-aria/selection";
-import {setInteractionModality as $aUnai$setInteractionModality} from "@react-aria/interactions";
-import {useCollator as $aUnai$useCollator} from "@react-aria/i18n";
-import {useField as $aUnai$useField} from "@react-aria/label";
-import {useMenuTrigger as $aUnai$useMenuTrigger} from "@react-aria/menu";
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
-
-
-const $58aed456727eb0f3$export$703601b7e90536f8 = new WeakMap();
-function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-    let { keyboardDelegate: keyboardDelegate, isDisabled: isDisabled, isRequired: isRequired, name: name, form: form, validationBehavior: validationBehavior = 'aria' } = props;
-    // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
-    // When virtualized, the layout object will be passed in as a prop and override this.
-    let collator = (0, $aUnai$useCollator)({
-        usage: 'search',
-        sensitivity: 'base'
-    });
-    let delegate = (0, $aUnai$useMemo)(()=>keyboardDelegate || new (0, $aUnai$ListKeyboardDelegate)(state.collection, state.disabledKeys, ref, collator), [
-        keyboardDelegate,
-        state.collection,
-        state.disabledKeys,
-        collator,
-        ref
-    ]);
-    let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $aUnai$useMenuTrigger)({
-        isDisabled: isDisabled,
-        type: 'listbox'
-    }, state, ref);
-    let onKeyDown = (e)=>{
-        if (state.selectionManager.selectionMode === 'multiple') return;
-        switch(e.key){
-            case 'ArrowLeft':
-                {
-                    var _delegate_getKeyAbove, _delegate_getFirstKey;
-                    // prevent scrolling containers
-                    e.preventDefault();
-                    let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
-                    if (key) state.setSelectedKey(key);
-                    break;
-                }
-            case 'ArrowRight':
-                {
-                    var _delegate_getKeyBelow, _delegate_getFirstKey1;
-                    // prevent scrolling containers
-                    e.preventDefault();
-                    let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
-                    if (key) state.setSelectedKey(key);
-                    break;
-                }
-        }
-    };
-    let { typeSelectProps: typeSelectProps } = (0, $aUnai$useTypeSelect)({
-        keyboardDelegate: delegate,
-        selectionManager: state.selectionManager,
-        onTypeSelect (key) {
-            state.setSelectedKey(key);
-        }
-    });
-    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
-    let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $aUnai$useField)({
-        ...props,
-        labelElementType: 'span',
-        isInvalid: isInvalid,
-        errorMessage: props.errorMessage || validationErrors
-    });
-    typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
-    delete typeSelectProps.onKeyDownCapture;
-    if (state.selectionManager.selectionMode === 'multiple') typeSelectProps = {};
-    let domProps = (0, $aUnai$filterDOMProps)(props, {
-        labelable: true
-    });
-    let triggerProps = (0, $aUnai$mergeProps)(typeSelectProps, menuTriggerProps, fieldProps);
-    let valueId = (0, $aUnai$useId)();
-    $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
-        isDisabled: isDisabled,
-        isRequired: isRequired,
-        name: name,
-        form: form,
-        validationBehavior: validationBehavior
-    });
-    return {
-        labelProps: {
-            ...labelProps,
-            onClick: ()=>{
-                if (!props.isDisabled) {
-                    var _ref_current;
-                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
-                    // Show the focus ring so the user knows where focus went
-                    (0, $aUnai$setInteractionModality)('keyboard');
-                }
-            }
-        },
-        triggerProps: (0, $aUnai$mergeProps)(domProps, {
-            ...triggerProps,
-            isDisabled: isDisabled,
-            onKeyDown: (0, $aUnai$chain)(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
-            onKeyUp: props.onKeyUp,
-            'aria-labelledby': [
-                valueId,
-                triggerProps['aria-labelledby'],
-                triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null
-            ].filter(Boolean).join(' '),
-            onFocus (e) {
-                if (state.isFocused) return;
-                if (props.onFocus) props.onFocus(e);
-                if (props.onFocusChange) props.onFocusChange(true);
-                state.setFocused(true);
-            },
-            onBlur (e) {
-                if (state.isOpen) return;
-                if (props.onBlur) props.onBlur(e);
-                if (props.onFocusChange) props.onFocusChange(false);
-                state.setFocused(false);
-            }
-        }),
-        valueProps: {
-            id: valueId
-        },
-        menuProps: {
-            ...menuProps,
-            autoFocus: state.focusStrategy || true,
-            shouldSelectOnPressUp: true,
-            shouldFocusOnHover: true,
-            disallowEmptySelection: true,
-            linkBehavior: 'selection',
-            onBlur: (e)=>{
-                if ((0, $aUnai$nodeContains)(e.currentTarget, e.relatedTarget)) return;
-                if (props.onBlur) props.onBlur(e);
-                if (props.onFocusChange) props.onFocusChange(false);
-                state.setFocused(false);
-            },
-            'aria-labelledby': [
-                fieldProps['aria-labelledby'],
-                triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null
-            ].filter(Boolean).join(' ')
-        },
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps,
-        isInvalid: isInvalid,
-        validationErrors: validationErrors,
-        validationDetails: validationDetails,
-        hiddenSelectProps: {
-            isDisabled: isDisabled,
-            name: name,
-            label: props.label,
-            state: state,
-            triggerRef: ref,
-            form: form
-        }
-    };
-}
-
-
-export {$58aed456727eb0f3$export$703601b7e90536f8 as selectData, $58aed456727eb0f3$export$e64b2f635402ca43 as useSelect};
-//# sourceMappingURL=useSelect.module.js.map

package/dist/useSelect.module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/@react-aria/select/src/useSelect.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 {AriaButtonProps} from '@react-types/button';\nimport {AriaListBoxOptions} from '@react-aria/listbox';\nimport {AriaSelectProps, SelectionMode} from '@react-types/select';\nimport {chain, filterDOMProps, mergeProps, nodeContains, useId} from '@react-aria/utils';\nimport {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';\nimport {FocusEvent, useMemo} from 'react';\nimport {HiddenSelectProps} from './HiddenSelect';\nimport {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';\nimport {SelectState} from '@react-stately/select';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useCollator} from '@react-aria/i18n';\nimport {useField} from '@react-aria/label';\nimport {useMenuTrigger} from '@react-aria/menu';\n\nexport interface AriaSelectOptions<T, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, 'children'> {\n  /**\n   * An optional keyboard delegate implementation for type to select,\n   * to override the default.\n   */\n  keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface SelectAria<T, M extends SelectionMode = 'single'> extends ValidationResult {\n  /** Props for the label element. */\n  labelProps: DOMAttributes,\n\n  /** Props for the popup trigger element. */\n  triggerProps: AriaButtonProps,\n\n  /** Props for the element representing the selected value. */\n  valueProps: DOMAttributes,\n\n  /** Props for the popup. */\n  menuProps: AriaListBoxOptions<T>,\n\n  /** Props for the select's description element, if any. */\n  descriptionProps: DOMAttributes,\n\n  /** Props for the select's error message element, if any. */\n  errorMessageProps: DOMAttributes,\n\n  /** Props for the hidden select element. */\n  hiddenSelectProps: HiddenSelectProps<T, M>\n}\n\ninterface SelectData {\n  isDisabled?: boolean,\n  isRequired?: boolean,\n  name?: string,\n  form?: string,\n  validationBehavior?: 'aria' | 'native'\n}\n\nexport const selectData: WeakMap<SelectState<any, any>, SelectData> = new WeakMap<SelectState<any>, SelectData>();\n\n/**\n * Provides the behavior and accessibility implementation for a select component.\n * A select displays a collapsible list of options and allows a user to select one of them.\n * @param props - Props for the select.\n * @param state - State for the select, as returned by `useListState`.\n */\nexport function useSelect<T, M extends SelectionMode = 'single'>(props: AriaSelectOptions<T, M>, state: SelectState<T, M>, ref: RefObject<HTMLElement | null>): SelectAria<T, M> {\n  let {\n    keyboardDelegate,\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior = 'aria'\n  } = props;\n\n  // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n  // When virtualized, the layout object will be passed in as a prop and override this.\n  let collator = useCollator({usage: 'search', sensitivity: 'base'});\n  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(state.collection, state.disabledKeys, ref, collator), [keyboardDelegate, state.collection, state.disabledKeys, collator, ref]);\n\n  let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n    {\n      isDisabled,\n      type: 'listbox'\n    },\n    state,\n    ref\n  );\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    if (state.selectionManager.selectionMode === 'multiple') {\n      return;\n    }\n    \n    switch (e.key) {\n      case 'ArrowLeft': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyAbove?.(state.selectedKey) : delegate.getFirstKey?.();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        // prevent scrolling containers\n        e.preventDefault();\n\n        let key = state.selectedKey != null ? delegate.getKeyBelow?.(state.selectedKey) : delegate.getFirstKey?.();\n        if (key) {\n          state.setSelectedKey(key);\n        }\n        break;\n      }\n    }\n  };\n\n  let {typeSelectProps} = useTypeSelect({\n    keyboardDelegate: delegate,\n    selectionManager: state.selectionManager,\n    onTypeSelect(key) {\n      state.setSelectedKey(key);\n    }\n  });\n\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  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;\n  delete typeSelectProps.onKeyDownCapture;\n  if (state.selectionManager.selectionMode === 'multiple') {\n    typeSelectProps = {};\n  }\n\n  let domProps = filterDOMProps(props, {labelable: true});\n  let triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);\n\n  let valueId = useId();\n\n  selectData.set(state, {\n    isDisabled,\n    isRequired,\n    name,\n    form,\n    validationBehavior\n  });\n\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        if (!props.isDisabled) {\n          ref.current?.focus();\n\n          // Show the focus ring so the user knows where focus went\n          setInteractionModality('keyboard');\n        }\n      }\n    },\n    triggerProps: mergeProps(domProps, {\n      ...triggerProps,\n      isDisabled,\n      onKeyDown: chain(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),\n      onKeyUp: props.onKeyUp,\n      'aria-labelledby': [\n        valueId,\n        triggerProps['aria-labelledby'],\n        triggerProps['aria-label'] && !triggerProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' '),\n      onFocus(e: FocusEvent) {\n        if (state.isFocused) {\n          return;\n        }\n\n        if (props.onFocus) {\n          props.onFocus(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(true);\n        }\n\n        state.setFocused(true);\n      },\n      onBlur(e: FocusEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      }\n    }),\n    valueProps: {\n      id: valueId\n    },\n    menuProps: {\n      ...menuProps,\n      autoFocus: state.focusStrategy || true,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      disallowEmptySelection: true,\n      linkBehavior: 'selection',\n      onBlur: (e) => {\n        if (nodeContains(e.currentTarget, e.relatedTarget as Node)) {\n          return;\n        }\n\n        if (props.onBlur) {\n          props.onBlur(e);\n        }\n\n        if (props.onFocusChange) {\n          props.onFocusChange(false);\n        }\n\n        state.setFocused(false);\n      },\n      'aria-labelledby': [\n        fieldProps['aria-labelledby'],\n        triggerProps['aria-label'] && !fieldProps['aria-labelledby'] ? triggerProps.id : null\n      ].filter(Boolean).join(' ')\n    },\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails,\n    hiddenSelectProps: {\n      isDisabled,\n      name,\n      label: props.label,\n      state,\n      triggerRef: ref,\n      form\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useSelect.module.js.map"}

package/src/HiddenSelect.tsx

@@ -1,224 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {FocusableElement, Key, RefObject} from '@react-types/shared';
-import {getEventTarget, useFormReset} from '@react-aria/utils';
-import React, {InputHTMLAttributes, JSX, ReactNode, useCallback, useRef} from 'react';
-import {selectData} from './useSelect';
-import {SelectionMode} from '@react-types/select';
-import {SelectState} from '@react-stately/select';
-import {useFormValidation} from '@react-aria/form';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-export interface AriaHiddenSelectProps {
-  /**
-   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
-   */
-  autoComplete?: string,
-
-  /** The text label for the select. */
-  label?: ReactNode,
-
-  /** HTML form input name. */
-  name?: string,
-
-  /**
-   * The `<form>` element to associate the input with.
-   * The value of this attribute must be the id of a `<form>` in the same document.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
-   */
-  form?: string,
-
-  /** Sets the disabled state of the select and input. */
-  isDisabled?: boolean
-}
-
-export interface HiddenSelectProps<T, M extends SelectionMode = 'single'> extends AriaHiddenSelectProps {
-  /** State for the select. */
-  state: SelectState<T, M>,
-
-  /** A ref to the trigger element. */
-  triggerRef: RefObject<FocusableElement | null>
-}
-
-export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
-  /** A ref to the hidden `<select>` element. */
-  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>
-}
-
-export interface HiddenSelectAria {
-  /** Props for the container element. */
-  containerProps: React.HTMLAttributes<FocusableElement>,
-
-  /** Props for the hidden input element. */
-  inputProps: React.InputHTMLAttributes<HTMLInputElement>,
-
-  /** Props for the hidden select element. */
-  selectProps: React.SelectHTMLAttributes<HTMLSelectElement>
-}
-
-/**
- * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
- * can be used in combination with `useSelect` to support browser form autofill, mobile form
- * navigation, and native HTML form submission.
- */
-export function useHiddenSelect<T, M extends SelectionMode = 'single'>(props: AriaHiddenSelectOptions, state: SelectState<T, M>, triggerRef: RefObject<FocusableElement | null>): HiddenSelectAria {
-  let data = selectData.get(state) || {};
-  let {autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled} = props;
-  let {validationBehavior, isRequired} = data;
-  let {visuallyHiddenProps} = useVisuallyHidden({
-    style: {
-      // Prevent page scrolling.
-      position: 'fixed',
-      top: 0,
-      left: 0
-    }
-  });
-
-  useFormReset(props.selectRef, state.defaultValue, state.setValue);
-  useFormValidation({
-    validationBehavior,
-    focus: () => triggerRef.current?.focus()
-  }, state, props.selectRef);
-
-  let setValue = state.setValue;
-  let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    let eventTarget = getEventTarget(e);
-    if (eventTarget.multiple) {
-      setValue(Array.from(
-        eventTarget.selectedOptions,
-        (option) => option.value
-      ) as any);
-    } else {
-      setValue(e.currentTarget.value as any);
-    }
-  }, [setValue]);
-
-  // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
-  // In Firefox, there must be a <label> to identify the <select> whereas other browsers
-  // seem to identify it just by surrounding text.
-  // The solution is to use <VisuallyHidden> to hide the elements, which clips the elements to a
-  // 1px rectangle. In addition, we hide from screen readers with aria-hidden, and make the <select>
-  // non tabbable with tabIndex={-1}.
-  return {
-    containerProps: {
-      ...visuallyHiddenProps,
-      'aria-hidden': true,
-      // @ts-ignore
-      ['data-react-aria-prevent-focus']: true,
-      // @ts-ignore
-      ['data-a11y-ignore']: 'aria-hidden-focus'
-    },
-    inputProps: {
-      style: {display: 'none'}
-    },
-    selectProps: {
-      tabIndex: -1,
-      autoComplete,
-      disabled: isDisabled,
-      multiple: state.selectionManager.selectionMode === 'multiple',
-      required: validationBehavior === 'native' && isRequired,
-      name,
-      form,
-      value: (state.value as string | string[]) ?? '',
-      onChange,
-      onInput: onChange
-    }
-  };
-}
-
-/**
- * Renders a hidden native `<select>` element, which can be used to support browser
- * form autofill, mobile form navigation, and native form submission.
- */
-export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: HiddenSelectProps<T, M>): JSX.Element | null {
-  let {state, triggerRef, label, name, form, isDisabled} = props;
-  let selectRef = useRef(null);
-  let inputRef = useRef(null);
-  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef}, state, triggerRef);
-
-  let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];
-
-  // If used in a <form>, use a hidden input so the value can be submitted to a server.
-  // If the collection isn't too big, use a hidden <select> element for this so that browser
-  // autofill will work. Otherwise, use an <input type="hidden">.
-  if (state.collection.size <= 300) {
-    return (
-      <div {...containerProps} data-testid="hidden-select-container">
-        <label>
-          {label}
-          <select {...selectProps} ref={selectRef}>
-            <option />
-            {[...state.collection.getKeys()].map(key => {
-              let item = state.collection.getItem(key);
-              if (item && item.type === 'item') {
-                return (
-                  <option
-                    key={item.key}
-                    value={item.key}>
-                    {item.textValue}
-                  </option>
-                );
-              }
-            })}
-            {/* The collection may be empty during the initial render. */}
-            {/* Rendering options for the current values ensures the select has a value immediately, */}
-            {/* making FormData reads consistent. */}
-            {state.collection.size === 0 && name && values.map((value, i) => <option key={i} value={value ?? ''} />)}
-          </select>
-        </label>
-      </div>
-    );
-  } else if (name) {
-    let data = selectData.get(state) || {};
-    let {validationBehavior} = data;
-
-    // Always render at least one hidden input to ensure required form submission.
-    if (values.length === 0) {
-      values = [null];
-    }
-
-    let res = values.map((value, i) => {
-      let inputProps: InputHTMLAttributes<HTMLInputElement> = {
-        type: 'hidden',
-        autoComplete: selectProps.autoComplete,
-        name,
-        form,
-        disabled: isDisabled,
-        value: value ?? ''
-      };
-
-      if (validationBehavior === 'native') {
-        // Use a hidden <input type="text"> rather than <input type="hidden">
-        // so that an empty value blocks HTML form submission when the field is required.
-        return (
-          <input
-            key={i}
-            {...inputProps}
-            ref={i === 0 ? inputRef : null}
-            style={{display: 'none'}}
-            type="text"
-            required={i === 0 ? selectProps.required : false}
-            onChange={() => {/** Ignore react warning. */}} />
-        );
-      }
-
-      return (
-        <input key={i} {...inputProps} ref={i === 0 ? inputRef : null} />
-      );
-    });
-
-    return <>{res}</>;
-  }
-
-  return null;
-}