This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@wedgekit/popover-wip

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