Popover

Positions floating content next to an anchor, portaled above the page.

Positions floating content next to an anchor, portaled above the page. It is built on Modal, so it inherits the portal, optional backdrop, focus management, scroll lock, and Escape / click-away close - then adds anchor positioning (anchorOrigin / transformOrigin / marginThreshold).

import { useState } from 'react'
import { Popover } from '@soroush.tech/design-system/Popover'
import { Button } from '@soroush.tech/design-system/Button'

function Example() {
  const [anchor, setAnchor] = useState<HTMLElement | null>(null)
  return (
    <>
      <Button onClick={(event) => setAnchor(event.currentTarget)}>Open</Button>
      <Popover
        open={Boolean(anchor)}
        anchorEl={anchor}
        onClose={() => setAnchor(null)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
      >
        <p>Popover content</p>
      </Popover>
    </>
  )
}

Examples

Default

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="bottom"
  anchorOriginHorizontal="left"
  transformOriginVertical="top"
  transformOriginHorizontal="left"
  marginThreshold={2}
  elevation={8}
  hasBackdrop={false}
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>

With Backdrop

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="bottom"
  anchorOriginHorizontal="left"
  transformOriginVertical="top"
  transformOriginHorizontal="left"
  marginThreshold={2}
  elevation={8}
  hasBackdrop
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>

Bottom

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="bottom"
  anchorOriginHorizontal="left"
  transformOriginVertical="top"
  transformOriginHorizontal="left"
  marginThreshold={2}
  elevation={8}
  hasBackdrop={false}
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>

Top

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="top"
  anchorOriginHorizontal="left"
  transformOriginVertical="bottom"
  transformOriginHorizontal="left"
  marginThreshold={2}
  elevation={8}
  hasBackdrop={false}
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>

Right

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="top"
  anchorOriginHorizontal="right"
  transformOriginVertical="top"
  transformOriginHorizontal="left"
  marginThreshold={2}
  elevation={8}
  hasBackdrop={false}
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>

Left

<Popover
  anchorReference="anchorEl"
  anchorOriginVertical="top"
  anchorOriginHorizontal="left"
  transformOriginVertical="top"
  transformOriginHorizontal="right"
  marginThreshold={2}
  elevation={8}
  hasBackdrop={false}
  disableScrollLock={false}
  disableAriaHidden={false}
  shouldAutoFocus
  shouldTrapFocus
  shouldEnforceFocus
  shouldRestoreFocus
  shouldKeepMounted={false}
  layer="modal"
/>