Popover

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"
/>

Popover API reference