Popover
The Popover relies on a ref from the toggle element being passed in as a prop. From there, align, offset, and position are calculated using the toggleRef to position the popover without it passing out of the bounds of the window. Additionally, the Popover fires an onExit callback when a scroll or resize event occurs while the component is mount.
Caveat: This is a copy/paste job from @wedgekit/core
. The Juneau team makes no guarantees that this component works as documented. The component will be updated in JUN-865. All complaints should go to Nick Bauer
Usage
import Popover from '@wedgekit/popover';
const Test = () => {
const [popoverOpen, setPopoverOpen] = useState(false);
const buttonRef = useRef();
return (
<div>
<Button
onClick={() => setPopoverOpen(true)}
ref={buttonRef}
>
Open Popover
</Button>
{
popoverOpen &&
<Popover
toggleRef={buttonRef.current}
onExit={() => setPopoverOpen(false)}
clickOutsideExits
escapeExits
position="bottom"
align="left"
offset={16}
>
<p style={{ padding: '24px', fontSize: '16px' }}>
Here is some content.
</p>
</Popover>
}
</div>
);
};
Props
Prop | Type | Required? | default | description |
---|---|---|---|---|
align | 'top' | 'bottom' | 'left' | 'right' | 'center' |
left | Alignment of popover relative to the toggle element | |
bodyScrollLock | boolean |
false | Whether the popover should disable scrolling on the document body. | |
children | React$Element<*> |
The contents of the popover | ||
className | string |
|||
clickOutsideExits | boolean |
false | Whether a click outside of the popover should close the popover | |
escapeExits | boolean |
false | Whether hitting the escape key should close the popover | |
focusTrap | boolean |
false | Whether focus should be trapped inside the popover while mounted. Focus trap will fail without a focusable element inside the popover. | |
focusTrapOptions | Object |
null | Additional focus trap options https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions | |
offset | number |
16 | Number of pixels offsetting the popover element from the toggle. Defaults to 16px. | |
popoverContentClassName | string |
Custom styling for popover content container | ||
position | 'top' | 'bottom' | 'left' | 'right' | 'center' |
bottom | Position of popover relative to the toggle element | |
resizeExits | boolean |
true | Whether a resize event should exit the popover. Defaults to true. If set to false, the component will recalculate the popover's position on window resize. | |
scrollExits | boolean |
true | Whether a scroll event should exit the popover. Defaults to true. | |
toggleRef | ?HTMLDivElement |
The ref of the element that toggles the popover component. | ||
onExit | (event: SyntheticEvent<*>) => void |
A callback that fires when an exit action is taken |