UNPKG

@react-aria/listbox

Version:
80 lines (72 loc) 3.59 kB
import {listData as $b1f0cad8af73213b$export$3585ede4d035bf14} from "./utils.mjs"; import {filterDOMProps as $by1yQ$filterDOMProps, useId as $by1yQ$useId, mergeProps as $by1yQ$mergeProps} from "@react-aria/utils"; import {useFocusWithin as $by1yQ$useFocusWithin} from "@react-aria/interactions"; import {useLabel as $by1yQ$useLabel} from "@react-aria/label"; import {useSelectableList as $by1yQ$useSelectableList} from "@react-aria/selection"; /* * 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. */ function $c132121280ec012d$export$50eacbbf140a3141(props, state, ref) { let domProps = (0, $by1yQ$filterDOMProps)(props, { labelable: true }); // Use props instead of state here. We don't want this to change due to long press. let selectionBehavior = props.selectionBehavior || 'toggle'; let linkBehavior = props.linkBehavior || (selectionBehavior === 'replace' ? 'action' : 'override'); if (selectionBehavior === 'toggle' && linkBehavior === 'action') // linkBehavior="action" does not work with selectionBehavior="toggle" because there is no way // to initiate selection (checkboxes are not allowed inside a listbox). Link items will not be // selectable in this configuration. linkBehavior = 'override'; let { listProps: listProps } = (0, $by1yQ$useSelectableList)({ ...props, ref: ref, selectionManager: state.selectionManager, collection: state.collection, disabledKeys: state.disabledKeys, linkBehavior: linkBehavior }); let { focusWithinProps: focusWithinProps } = (0, $by1yQ$useFocusWithin)({ onFocusWithin: props.onFocus, onBlurWithin: props.onBlur, onFocusWithinChange: props.onFocusChange }); // Share list id and some props with child options. let id = (0, $by1yQ$useId)(props.id); (0, $b1f0cad8af73213b$export$3585ede4d035bf14).set(state, { id: id, shouldUseVirtualFocus: props.shouldUseVirtualFocus, shouldSelectOnPressUp: props.shouldSelectOnPressUp, shouldFocusOnHover: props.shouldFocusOnHover, isVirtualized: props.isVirtualized, onAction: props.onAction, linkBehavior: linkBehavior, // @ts-ignore UNSTABLE_itemBehavior: props['UNSTABLE_itemBehavior'] }); let { labelProps: labelProps, fieldProps: fieldProps } = (0, $by1yQ$useLabel)({ ...props, id: id, // listbox is not an HTML input element so it // shouldn't be labeled by a <label> element. labelElementType: 'span' }); return { labelProps: labelProps, listBoxProps: (0, $by1yQ$mergeProps)(domProps, focusWithinProps, state.selectionManager.selectionMode === 'multiple' ? { 'aria-multiselectable': 'true' } : {}, { role: 'listbox', ...(0, $by1yQ$mergeProps)(fieldProps, listProps) }) }; } export {$c132121280ec012d$export$50eacbbf140a3141 as useListBox}; //# sourceMappingURL=useListBox.module.js.map