@react-aria/listbox
Version:
Spectrum UI components in React
121 lines (111 loc) • 6.91 kB
JavaScript
var $87beb89ab4a308fd$exports = require("./utils.main.js");
var $bOFHO$reactariautils = require("@react-aria/utils");
var $bOFHO$reactstatelycollections = require("@react-stately/collections");
var $bOFHO$reactariainteractions = require("@react-aria/interactions");
var $bOFHO$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, "useOption", () => $c164f9f79f4cef2d$export$497855f14858aa34);
/*
* 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 $c164f9f79f4cef2d$export$497855f14858aa34(props, state, ref) {
var _item_props, _item_props1;
let { key: key } = props;
let data = (0, $87beb89ab4a308fd$exports.listData).get(state);
var _props_isDisabled;
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.selectionManager.isDisabled(key);
var _props_isSelected;
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : state.selectionManager.isSelected(key);
var _props_shouldSelectOnPressUp;
let shouldSelectOnPressUp = (_props_shouldSelectOnPressUp = props.shouldSelectOnPressUp) !== null && _props_shouldSelectOnPressUp !== void 0 ? _props_shouldSelectOnPressUp : data === null || data === void 0 ? void 0 : data.shouldSelectOnPressUp;
var _props_shouldFocusOnHover;
let shouldFocusOnHover = (_props_shouldFocusOnHover = props.shouldFocusOnHover) !== null && _props_shouldFocusOnHover !== void 0 ? _props_shouldFocusOnHover : data === null || data === void 0 ? void 0 : data.shouldFocusOnHover;
var _props_shouldUseVirtualFocus;
let shouldUseVirtualFocus = (_props_shouldUseVirtualFocus = props.shouldUseVirtualFocus) !== null && _props_shouldUseVirtualFocus !== void 0 ? _props_shouldUseVirtualFocus : data === null || data === void 0 ? void 0 : data.shouldUseVirtualFocus;
var _props_isVirtualized;
let isVirtualized = (_props_isVirtualized = props.isVirtualized) !== null && _props_isVirtualized !== void 0 ? _props_isVirtualized : data === null || data === void 0 ? void 0 : data.isVirtualized;
let labelId = (0, $bOFHO$reactariautils.useSlotId)();
let descriptionId = (0, $bOFHO$reactariautils.useSlotId)();
let optionProps = {
role: 'option',
'aria-disabled': isDisabled || undefined,
'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined
};
// Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text".
// We should not map slots to the label and description on Safari and instead just have VoiceOver read the textContent.
// https://bugs.webkit.org/show_bug.cgi?id=209279
if (!((0, $bOFHO$reactariautils.isMac)() && (0, $bOFHO$reactariautils.isWebKit)())) {
optionProps['aria-label'] = props['aria-label'];
optionProps['aria-labelledby'] = labelId;
optionProps['aria-describedby'] = descriptionId;
}
let item = state.collection.getItem(key);
if (isVirtualized) {
let index = Number(item === null || item === void 0 ? void 0 : item.index);
optionProps['aria-posinset'] = Number.isNaN(index) ? undefined : index + 1;
optionProps['aria-setsize'] = (0, $bOFHO$reactstatelycollections.getItemCount)(state.collection);
}
let onAction = (data === null || data === void 0 ? void 0 : data.onAction) ? ()=>{
var _data_onAction;
return data === null || data === void 0 ? void 0 : (_data_onAction = data.onAction) === null || _data_onAction === void 0 ? void 0 : _data_onAction.call(data, key);
} : undefined;
let id = (0, $87beb89ab4a308fd$exports.getItemId)(state, key);
let { itemProps: itemProps, isPressed: isPressed, isFocused: isFocused, hasAction: hasAction, allowsSelection: allowsSelection } = (0, $bOFHO$reactariaselection.useSelectableItem)({
selectionManager: state.selectionManager,
key: key,
ref: ref,
shouldSelectOnPressUp: shouldSelectOnPressUp,
allowsDifferentPressOrigin: shouldSelectOnPressUp && shouldFocusOnHover,
isVirtualized: isVirtualized,
shouldUseVirtualFocus: shouldUseVirtualFocus,
isDisabled: isDisabled,
onAction: onAction || (item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.onAction) ? (0, $bOFHO$reactariautils.chain)(item === null || item === void 0 ? void 0 : (_item_props1 = item.props) === null || _item_props1 === void 0 ? void 0 : _item_props1.onAction, onAction) : undefined,
linkBehavior: data === null || data === void 0 ? void 0 : data.linkBehavior,
// @ts-ignore
UNSTABLE_itemBehavior: data === null || data === void 0 ? void 0 : data['UNSTABLE_itemBehavior'],
id: id
});
let { hoverProps: hoverProps } = (0, $bOFHO$reactariainteractions.useHover)({
isDisabled: isDisabled || !shouldFocusOnHover,
onHoverStart () {
if (!(0, $bOFHO$reactariainteractions.isFocusVisible)()) {
state.selectionManager.setFocused(true);
state.selectionManager.setFocusedKey(key);
}
}
});
let domProps = (0, $bOFHO$reactariautils.filterDOMProps)(item === null || item === void 0 ? void 0 : item.props);
delete domProps.id;
let linkProps = (0, $bOFHO$reactariautils.useLinkProps)(item === null || item === void 0 ? void 0 : item.props);
return {
optionProps: {
...optionProps,
...(0, $bOFHO$reactariautils.mergeProps)(domProps, itemProps, hoverProps, linkProps),
id: id
},
labelProps: {
id: labelId
},
descriptionProps: {
id: descriptionId
},
isFocused: isFocused,
isFocusVisible: isFocused && state.selectionManager.isFocused && (0, $bOFHO$reactariainteractions.isFocusVisible)(),
isSelected: isSelected,
isDisabled: isDisabled,
isPressed: isPressed,
allowsSelection: allowsSelection,
hasAction: hasAction
};
}
//# sourceMappingURL=useOption.main.js.map