UNPKG

@react-aria/overlays

Version:
103 lines (97 loc) 4.96 kB
import {isElementInChildOfActiveScope as $jtpZv$isElementInChildOfActiveScope} from "@react-aria/focus"; import {useEffect as $jtpZv$useEffect} from "react"; import {useInteractOutside as $jtpZv$useInteractOutside, useFocusWithin as $jtpZv$useFocusWithin} from "@react-aria/interactions"; /* * 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. */ const $a11501f3d1d39e6c$var$visibleOverlays = []; function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) { let { onClose: onClose, shouldCloseOnBlur: shouldCloseOnBlur, isOpen: isOpen, isDismissable: isDismissable = false, isKeyboardDismissDisabled: isKeyboardDismissDisabled = false, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside } = props; // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount. (0, $jtpZv$useEffect)(()=>{ if (isOpen && !$a11501f3d1d39e6c$var$visibleOverlays.includes(ref)) { $a11501f3d1d39e6c$var$visibleOverlays.push(ref); return ()=>{ let index = $a11501f3d1d39e6c$var$visibleOverlays.indexOf(ref); if (index >= 0) $a11501f3d1d39e6c$var$visibleOverlays.splice(index, 1); }; } }, [ isOpen, ref ]); // Only hide the overlay when it is the topmost visible overlay in the stack let onHide = ()=>{ if ($a11501f3d1d39e6c$var$visibleOverlays[$a11501f3d1d39e6c$var$visibleOverlays.length - 1] === ref && onClose) onClose(); }; let onInteractOutsideStart = (e)=>{ if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) { if ($a11501f3d1d39e6c$var$visibleOverlays[$a11501f3d1d39e6c$var$visibleOverlays.length - 1] === ref) { e.stopPropagation(); e.preventDefault(); } } }; let onInteractOutside = (e)=>{ if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target)) { if ($a11501f3d1d39e6c$var$visibleOverlays[$a11501f3d1d39e6c$var$visibleOverlays.length - 1] === ref) { e.stopPropagation(); e.preventDefault(); } onHide(); } }; // Handle the escape key let onKeyDown = (e)=>{ if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) { e.stopPropagation(); e.preventDefault(); onHide(); } }; // Handle clicking outside the overlay to close it (0, $jtpZv$useInteractOutside)({ ref: ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart: onInteractOutsideStart }); let { focusWithinProps: focusWithinProps } = (0, $jtpZv$useFocusWithin)({ isDisabled: !shouldCloseOnBlur, onBlurWithin: (e)=>{ // Do not close if relatedTarget is null, which means focus is lost to the body. // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation. // Clicking on the body to close the overlay should already be handled by useInteractOutside. // https://github.com/adobe/react-spectrum/issues/4130 // https://github.com/adobe/react-spectrum/issues/4922 // // If focus is moving into a child focus scope (e.g. menu inside a dialog), // do not close the outer overlay. At this point, the active scope should // still be the outer overlay, since blur events run before focus. if (!e.relatedTarget || (0, $jtpZv$isElementInChildOfActiveScope)(e.relatedTarget)) return; if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose === null || onClose === void 0 ? void 0 : onClose(); } }); let onPointerDownUnderlay = (e)=>{ // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846 if (e.target === e.currentTarget) e.preventDefault(); }; return { overlayProps: { onKeyDown: onKeyDown, ...focusWithinProps }, underlayProps: { onPointerDown: onPointerDownUnderlay } }; } export {$a11501f3d1d39e6c$export$ea8f71083e90600f as useOverlay}; //# sourceMappingURL=useOverlay.module.js.map