import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Stateless from "examples/popover/stateless.tsx";
import StatefulClick from "examples/popover/stateful-click.tsx";
import Link from "examples/popover/link.tsx";
import StatefulHover from "examples/popover/stateful-hover.tsx";
import Placements from "examples/popover/placements.tsx";
import WithArrow from "examples/popover/with-arrow.tsx";
import Dismiss from "examples/popover/dismiss.tsx";
import Clipping from "examples/popover/clipping.tsx";
import Customization from "examples/popover/overrides.tsx";
import AnchorRefHandling from "examples/popover/ref-handling.tsx";
import SSRRenderAll from "examples/popover/ssr-render-all.tsx";

import { Popover, PLACEMENT } from "baseui/popover";
import * as PopoverExports from "baseui/popover";
import { Block } from "baseui/block";
import { ParagraphSmall, LabelSmall } from "baseui/typography";

import Yard from "../../components/yard/index";
import popoverYardConfig from "../../components/yard/config/popover";

export default Layout;

# Popover

<Yard placeholderHeight={20} {...popoverYardConfig} />

Popovers provide the container and styles to overlay menus, tooltips, controls or text. They’re
visually represented as a layer above other components and objects in a view, and float above a
content view after being triggered by a click-event (or hover) such as a button, link, menu or
icon. Popovers can contain range of content from simple text strings to inputs, or lightly
structured content and imagery/illustration. It’s usage depends on the context.

Note that autofocus should be managed using Popover's autoFocus prop. Avoid adding autofocus
directly to Popover's contents, as this will cause unexpected behavior.

## When to use

- Describe the difference between visually similar elements.
- Hide information that's irrelevant once the user if familiar with the UI.

## Accessibility

- Upon opening, focus will be transferred to the first interactive element (unless `autofocus` is set to false)
- The anchor will be focusable and user can tab to it using their keyboard.
- When triggerType="hover" focusing on the anchor will open the tooltip automatically
- When triggerType="click" a focused tooltip can be triggered via spacebar (assuming the anchor is a button)
- Both the escape key and clicking outside the popover will close it
- Supports a prop `accessibilityType: 'none' | 'menu' | 'tooltip'` that defaults to `menu`
- When used as a `menu`, the anchor will have `aria-haspopup="true" aria-expanded="true" aria-controls="popover-id"` and the popover will have `id="popover-id"`
- When used as a `tooltip`, the anchor will have `id="jzowpv-anchor" aria-describedby="jzowpv-popover"` and the popover will have `id="jzowpv-popover" aria-ownedby="jzowpv-anchor" role="tooltip"` (note that `jzowpv` is a random uuid generated at runtime).
- When `accessibilityType` is set to `none`, nothing will be added so the user can do whatever they wish.

## Examples

<Example title="Popover stateless example" path="popover/stateless.tsx">
  <Stateless />
</Example>

<Example title="Popover opens on Click" path="popover/stateful-click.tsx">
  <StatefulClick />
</Example>

<Example title="Popover opens on link Click" path="popover/link.tsx">
  <Link />
</Example>

<Example title="Popover Opens on Hover" path="popover/stateful-hover.tsx">
  <StatefulHover />
</Example>

<Example title="Popover Available Placements" path="popover/placements.tsx">
  <Placements />
</Example>

<Example title="Popover With Arrow" path="popover/with-arrow.tsx">
  <WithArrow />
</Example>

<Example title="Popover Close from Content" path="popover/dismiss.tsx">
  <Dismiss />
</Example>

<Example title="Anchor ref handling example" path="popover/ref-handling.tsx">
  <AnchorRefHandling />
</Example>

<Example title="Clipping Avoidance" path="popover/clipping.tsx">
  <Clipping />
</Example>

<Example title="Popover with Overrides" path="popover/overrides.tsx">
  <Customization />
</Example>

<Example title="SSR Popover" path="popover/ssr-render-all.tsx">
  <SSRRenderAll />
</Example>

<Exports
  component={PopoverExports}
  title="Popover exports"
  path="baseui/popover"
/>