Popover

1import { Popover } from '@/ui/Overlay'23<Popover4  side="bottom"5  align="start"6  width="15rem"7  trigger={({ toggle, open }) => (8    <Button9      variant="outlined"10      // "dialog", not "menu": the announced role sets the keyboard expectation.11      aria-haspopup="dialog"12      aria-expanded={open}13      onClick={toggle}14    >15      Display options16    </Button>17  )}18>19  <ColumnSettings />20</Popover>2122// Hover card: BOTH delays, or it is a flicker that cannot be reached.23const enter = React.useRef<number>()24const leave = React.useRef<number>()2526const onEnter = () => {27  clearTimeout(leave.current)28  enter.current = window.setTimeout(() => setOpen(true), 500)29}30const onLeave = () => {31  clearTimeout(enter.current)32  // The 300ms is the pointer's travel time from the link into the card.33  leave.current = window.setTimeout(() => setOpen(false), 300)34}3536// Opening on focus too is what makes the card exist without a mouse.37<a onMouseEnter={onEnter} onMouseLeave={onLeave}38   onFocus={() => setOpen(true)} onBlur={() => setOpen(false)}>39  @ada40</a>4142// Collision: flip to the opposite side first, then shift along the cross-axis.43// Both preserve the anchor; clipping destroys it.44const placement = fits(preferred) ? preferred : opposite(preferred)45const shift = clampToViewport(rect, 8)

<button
  type="button"
  id="opts-trigger"
  aria-haspopup="dialog"
  aria-expanded="true"
  aria-controls="opts-panel"
>
  Display options
</button>

<div
  id="opts-panel"
  role="dialog"
  aria-modal="false"
  aria-labelledby="opts-title"
>
  <h2 id="opts-title" class="sr-only">Display options</h2>

  <fieldset>
    <legend>Columns</legend>
    <label><input type="checkbox" checked /> Status</label>
    <label><input type="checkbox" /> Region</label>
  </fieldset>

  <hr />

  <label><input type="checkbox" /> Compact rows</label>
</div>

.ds-popover {
  position: absolute;
  z-index: 80;                       /* above the page, below a dialog */
  /* Sized by content, not by the trigger: a popover from a 32px icon
     button is still 15rem wide. */
  inline-size: max-content;
  min-inline-size: 12rem;
  max-inline-size: 20rem;
  /* Past half the viewport this is a dialog wearing an anchor. */
  max-block-size: 50vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-overlay);
  box-shadow: var(--shadow-e4);
  /* Scaling from the anchor edge reads as emerging FROM the trigger. */
  transform-origin: var(--popover-origin, top center);
  animation: popover-in 120ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes popover-in {
  from { opacity: 0; scale: 0.96; }
  to   { opacity: 1; scale: 1; }
}

/* Header and footer stay put while the body scrolls. */
.ds-popover__head,
.ds-popover__foot { position: sticky; z-index: 1; }
.ds-popover__head { inset-block-start: 0; background: var(--ds-surface-overlay); }
.ds-popover__foot { inset-block-end: 0;  background: var(--ds-surface-inset); }

@media (prefers-reduced-motion: reduce) {
  .ds-popover { animation: none; }
}

/* No hover, and the lower half of a phone screen is hard to reach: past a
   couple of controls this should be a Drawer. */
@media (pointer: coarse) {
  .ds-popover { max-block-size: 40vh; }
}