Popover

TS

import { … } from "@fungi.computer/caps/components/popover";

Hero

TSX

import {
  Popover,
  PopoverAnchor,
  PopoverOption,
} from "@fungi.computer/caps/components/popover";

export default function Hero() {
  return (
    <div className="min-h-32">
      <PopoverAnchor>
        Nearby patches
        <Popover open side="bottom">
          <PopoverOption active>Creek bend</PopoverOption>
          <PopoverOption active={false}>Old orchard</PopoverOption>
        </Popover>
      </PopoverAnchor>
    </div>
  );
}

Sides

TSX

import {
  Popover,
  PopoverAnchor,
  PopoverOption,
} from "@fungi.computer/caps/components/popover";

export default function Sides() {
  return (
    <div className="flex gap-3xl py-2xl">
      <PopoverAnchor>
        Opens up
        <Popover open side="top">
          <PopoverOption active>Above the anchor</PopoverOption>
        </Popover>
      </PopoverAnchor>
      <PopoverAnchor>
        Opens down
        <Popover open side="bottom">
          <PopoverOption active>Below the anchor</PopoverOption>
        </Popover>
      </PopoverAnchor>
    </div>
  );
}

Keyboard select

TSX

import {
  Popover,
  PopoverAnchor,
  PopoverOption,
} from "@fungi.computer/caps/components/popover";
import { useState } from "react";

const options = ["Creek bend", "Old orchard", "North ridge"];

export default function KeyboardSelect() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  return (
    <div className="min-h-40">
      <PopoverAnchor>
        <input
          className="input"
          aria-label="Search patches"
          placeholder="Search patches"
          onFocus={() => {
            setOpen(true);
          }}
          onBlur={() => {
            setOpen(false);
          }}
          onKeyDown={(event) => {
            if (event.key === "ArrowDown")
              setActive((value) => (value + 1) % options.length);
            if (event.key === "ArrowUp")
              setActive(
                (value) => (value - 1 + options.length) % options.length,
              );
          }}
        />
        <Popover open={open} side="bottom">
          {options.map((option, index) => (
            <PopoverOption
              key={option}
              active={active === index}
              onMouseDown={() => {
                setActive(index);
              }}
            >
              {option}
            </PopoverOption>
          ))}
        </Popover>
      </PopoverAnchor>
    </div>
  );
}

Props

PopoverProps

Prop	Type	Description
open	boolean	Whether the popover is shown.
side?	"top" | "bottom"	Which edge of the anchor it opens from.

• openboolean

  Whether the popover is shown.

• side?"top" | "bottom"

  Which edge of the anchor it opens from.

PopoverOptionProps

Prop	Type	Description
active	boolean	Whether keyboard navigation currently highlights this option.

• activeboolean

  Whether keyboard navigation currently highlights this option.

Full types: API reference.