@procore/core-react
Version:
React library of Procore Design Guidelines
35 lines (34 loc) • 2.59 kB
JavaScript
import { useFocusManager } from '@react-aria/focus';
import { useEffect } from 'react';
import { useModalChildRegistryContext } from './ChildRegistry.context';
export function useInitializeModalFocus(_ref) {
var modalContainerRef = _ref.modalContainerRef,
hasOnClose = _ref.hasOnClose;
var focusManager = useFocusManager();
var childrenRegistryStatus = useModalChildRegistryContext();
useEffect(function () {
var _modalContainerRef$cu, _childrenRegistryStat, _childrenRegistryStat2, _childrenRegistryStat3, _childrenRegistryStat6;
// the same reason that Modal has a FocusScope with autoFocus={!!onClose}
if (!hasOnClose) return;
var closeButtonElement = modalContainerRef === null || modalContainerRef === void 0 ? void 0 : (_modalContainerRef$cu = modalContainerRef.current) === null || _modalContainerRef$cu === void 0 ? void 0 : _modalContainerRef$cu.querySelector('[data-internal="close-button"]');
var anyFocusedItem = (_childrenRegistryStat = childrenRegistryStatus.body) === null || _childrenRegistryStat === void 0 ? void 0 : (_childrenRegistryStat2 = _childrenRegistryStat.current) === null || _childrenRegistryStat2 === void 0 ? void 0 : _childrenRegistryStat2.querySelector(':focus');
if (closeButtonElement == null) {
// if no focus header button is represented then no need to change focus on next elements
return;
}
if ((_childrenRegistryStat3 = childrenRegistryStatus.body) !== null && _childrenRegistryStat3 !== void 0 && _childrenRegistryStat3.current) {
// if nothing has been focused within body then focus in the scrollable body
if (anyFocusedItem == null) {
var _childrenRegistryStat4, _childrenRegistryStat5;
(_childrenRegistryStat4 = childrenRegistryStatus.body) === null || _childrenRegistryStat4 === void 0 ? void 0 : (_childrenRegistryStat5 = _childrenRegistryStat4.current) === null || _childrenRegistryStat5 === void 0 ? void 0 : _childrenRegistryStat5.focus();
}
// if there is a footer section the focus on the left most interactive element
} else if ((_childrenRegistryStat6 = childrenRegistryStatus.closeableButtons) !== null && _childrenRegistryStat6 !== void 0 && _childrenRegistryStat6.current) {
focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext({
from: closeButtonElement !== null && closeButtonElement !== void 0 ? closeButtonElement : undefined
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childrenRegistryStatus]);
}
//# sourceMappingURL=useInitializeModalFocus.js.map