@base-ui-components/react
Version:
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
44 lines (43 loc) • 1.44 kB
JavaScript
import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
import { usePopoverRootContext } from '../root/PopoverRootContext.js';
export function usePopoverPopup(params) {
const {
getProps,
titleId,
descriptionId,
initialFocus
} = params;
const {
popupRef,
openMethod
} = usePopoverRootContext();
const getPopupProps = React.useCallback((externalProps = {}) => {
return mergeReactProps(getProps(externalProps), {
'aria-labelledby': titleId,
'aria-describedby': descriptionId
});
}, [getProps, titleId, descriptionId]);
// Default initial focus logic:
// If opened by touch, focus the popup element to prevent the virtual keyboard from opening
// (this is required for Android specifically as iOS handles this automatically).
const defaultInitialFocus = React.useCallback(interactionType => {
if (interactionType === 'touch') {
return popupRef;
}
return 0;
}, [popupRef]);
const resolvedInitialFocus = React.useMemo(() => {
if (initialFocus == null) {
return defaultInitialFocus(openMethod ?? '');
}
if (typeof initialFocus === 'function') {
return initialFocus(openMethod ?? '');
}
return initialFocus;
}, [defaultInitialFocus, initialFocus, openMethod]);
return React.useMemo(() => ({
getPopupProps,
resolvedInitialFocus
}), [getPopupProps, resolvedInitialFocus]);
}