UNPKG

@react-aria/listbox

Version:
85 lines (75 loc) 3.73 kB
var $87beb89ab4a308fd$exports = require("./utils.main.js"); var $eCULP$reactariautils = require("@react-aria/utils"); var $eCULP$reactariainteractions = require("@react-aria/interactions"); var $eCULP$reactarialabel = require("@react-aria/label"); var $eCULP$reactariaselection = require("@react-aria/selection"); function $parcel$export(e, n, v, s) { Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); } $parcel$export(module.exports, "useListBox", () => $a3ce5bb3074610af$export$50eacbbf140a3141); /* * 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 $a3ce5bb3074610af$export$50eacbbf140a3141(props, state, ref) { let domProps = (0, $eCULP$reactariautils.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, $eCULP$reactariaselection.useSelectableList)({ ...props, ref: ref, selectionManager: state.selectionManager, collection: state.collection, disabledKeys: state.disabledKeys, linkBehavior: linkBehavior }); let { focusWithinProps: focusWithinProps } = (0, $eCULP$reactariainteractions.useFocusWithin)({ onFocusWithin: props.onFocus, onBlurWithin: props.onBlur, onFocusWithinChange: props.onFocusChange }); // Share list id and some props with child options. let id = (0, $eCULP$reactariautils.useId)(props.id); (0, $87beb89ab4a308fd$exports.listData).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, $eCULP$reactarialabel.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, $eCULP$reactariautils.mergeProps)(domProps, focusWithinProps, state.selectionManager.selectionMode === 'multiple' ? { 'aria-multiselectable': 'true' } : {}, { role: 'listbox', ...(0, $eCULP$reactariautils.mergeProps)(fieldProps, listProps) }) }; } //# sourceMappingURL=useListBox.main.js.map