components/popover/popover.react.tsx

Functions

Imports

It imports components/popover/popover.ts. Imported by components/breadcrumb/breadcrumb.react.tsx.

Source

1import { createContext, useContext, useEffect, useId, useRef, type ComponentProps, type ReactNode } from "react";
2import { enhance, type Align, type Side } from "./popover.ts";
3
4// Renders the HTML contract in popover.md: the content is in the markup, hidden by the
5// popover attribute, so it server-renders. Open or closed is the platform's popover state
6// (the behaviour module shows, hides, places and returns focus), not React state.
7type Kind = "dialog" | "tooltip";
8const Ctx = createContext<{ id: string; kind: Kind }>({ id: "", kind: "dialog" });
9
10export interface PopoverProps {
11  // "dialog" (default): a click popover. "tooltip": detail on hover and keyboard focus.
12  kind?: Kind;
13  children: ReactNode;
14}
15
16export function Popover({ kind = "dialog", children }: PopoverProps) {
17  const id = useId();
18  const ref = useRef<HTMLSpanElement>(null);
19  useEffect(() => (ref.current ? enhance(ref.current) : undefined), []);
20  return (
21    <Ctx.Provider value={{ id, kind }}>
22      <span data-cap="popover" ref={ref}>
23        {children}
24      </span>
25    </Ctx.Provider>
26  );
27}
28
29export function PopoverTrigger({ className = "cap-btn", type = "button", ...props }: ComponentProps<"button">) {
30  const { id, kind } = useContext(Ctx);
31  return kind === "tooltip" ? (
32    <button type={type} className={className} aria-describedby={id} data-popover-trigger="" {...props} />
33  ) : (
34    <button type={type} className={className} popoverTarget={id} aria-haspopup="dialog" aria-expanded="false" {...props} />
35  );
36}
37
38export interface PopoverContentProps extends Omit<ComponentProps<"div">, "popover"> {
39  side?: Side;
40  align?: Align;
41  // Gap from the trigger in px. Default 4.
42  offset?: number;
43  size?: "sm" | "md" | "lg" | "auto";
44  // Draws the arrow pointing at the trigger.
45  arrow?: boolean;
46}
47
48export function PopoverContent({ side, align, offset, size, arrow, className, children, ...props }: PopoverContentProps) {
49  const { id, kind } = useContext(Ctx);
50  const tip = kind === "tooltip";
51  return (
52    <div
53      className={className ? `cap-popover ${className}` : "cap-popover"}
54      id={id}
55      popover={tip ? "manual" : "auto"}
56      role={tip ? "tooltip" : "dialog"}
57      aria-labelledby={tip || props["aria-label"] ? undefined : `${id}-title`}
58      data-variant={tip ? "tooltip" : undefined}
59      data-side={side}
60      data-align={align}
61      data-offset={offset}
62      data-size={size}
63      {...props}
64    >
65      {children}
66      {arrow ? <span className="cap-popover-arrow" aria-hidden="true" /> : null}
67    </div>
68  );
69}
70
71export function PopoverHeader({ className, ...props }: ComponentProps<"div">) {
72  return <div className={className ? `cap-popover-header ${className}` : "cap-popover-header"} {...props} />;
73}
74
75// Names the dialog: PopoverContent points aria-labelledby at it.
76export function PopoverTitle({ className, ...props }: ComponentProps<"h2">) {
77  const { id } = useContext(Ctx);
78  return <h2 className={className ? `cap-popover-title ${className}` : "cap-popover-title"} id={`${id}-title`} {...props} />;
79}
80
81export function PopoverDescription({ className, ...props }: ComponentProps<"p">) {
82  return <p className={className ? `cap-popover-description ${className}` : "cap-popover-description"} {...props} />;
83}