| 84 | * A popover is an overlay element positioned relative to a trigger. |
| 85 | */ |
| 86 | export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria { |
| 87 | let { |
| 88 | triggerRef, |
| 89 | popoverRef, |
| 90 | groupRef, |
| 91 | isNonModal, |
| 92 | isKeyboardDismissDisabled, |
| 93 | shouldCloseOnInteractOutside, |
| 94 | ...otherProps |
| 95 | } = props; |
| 96 | |
| 97 | let isSubmenu = otherProps['trigger'] === 'SubmenuTrigger'; |
| 98 | |
| 99 | let {overlayProps, underlayProps} = useOverlay( |
| 100 | { |
| 101 | isOpen: state.isOpen, |
| 102 | onClose: state.close, |
| 103 | shouldCloseOnBlur: true, |
| 104 | isDismissable: !isNonModal || isSubmenu, |
| 105 | isKeyboardDismissDisabled, |
| 106 | shouldCloseOnInteractOutside |
| 107 | }, |
| 108 | groupRef ?? popoverRef |
| 109 | ); |
| 110 | |
| 111 | let { |
| 112 | overlayProps: positionProps, |
| 113 | arrowProps, |
| 114 | placement, |
| 115 | triggerAnchorPoint: origin |
| 116 | } = useOverlayPosition({ |
| 117 | ...otherProps, |
| 118 | targetRef: triggerRef, |
| 119 | overlayRef: popoverRef, |
| 120 | isOpen: state.isOpen, |
| 121 | onClose: isNonModal && !isSubmenu ? state.close : null |
| 122 | }); |
| 123 | |
| 124 | usePreventScroll({ |
| 125 | isDisabled: isNonModal || !state.isOpen |
| 126 | }); |
| 127 | |
| 128 | useEffect(() => { |
| 129 | if (state.isOpen && popoverRef.current) { |
| 130 | if (isNonModal) { |
| 131 | return keepVisible(groupRef?.current ?? popoverRef.current); |
| 132 | } else { |
| 133 | return ariaHideOutside([groupRef?.current ?? popoverRef.current], {shouldUseInert: true}); |
| 134 | } |
| 135 | } |
| 136 | }, [isNonModal, state.isOpen, popoverRef, groupRef]); |
| 137 | |
| 138 | return { |
| 139 | popoverProps: mergeProps(overlayProps, positionProps), |
| 140 | arrowProps, |
| 141 | underlayProps, |
| 142 | placement, |
| 143 | triggerAnchorPoint: origin |