components/disclosure/disclosure.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import { useId, useState, type ReactNode } from "react";
2
3export interface DisclosureProps {
4  summary: ReactNode;
5  children: ReactNode;
6  // Sections that share a name open one at a time.
7  name?: string;
8  defaultOpen?: boolean;
9  // "accordion": shadcn's flat look, a rule between items and the chevron at the end.
10  variant?: "accordion";
11}
12
13// A show/hide section: native <details>, so it works before JavaScript and with none.
14export function Disclosure({ summary, children, name, defaultOpen = false, variant }: DisclosureProps) {
15  return (
16    <details className="cap-disclosure" data-variant={variant} name={name} open={defaultOpen || undefined}>
17      <summary>{summary}</summary>
18      <div className="cap-disclosure-body">{children}</div>
19    </details>
20  );
21}
22
23export interface GroupProps {
24  // What the rows are: "Notices".
25  label: string;
26  // How many rows it holds; read as "Notices, 4".
27  count: number;
28  // The grouped rows, as <li> elements.
29  children: ReactNode;
30  defaultExpanded?: boolean;
31  // Critical rows are never collapsed: true keeps the group open.
32  holdsCritical?: boolean;
33  // Puts the button in a heading of this level, so a person moving by heading finds the group.
34  headingLevel?: 2 | 3 | 4;
35}
36
37// A group row in a list: a button that shows or hides the rows it groups.
38export function Group({ label, count, children, defaultExpanded = false, holdsCritical = false, headingLevel }: GroupProps) {
39  const id = useId();
40  const [open, setOpen] = useState(defaultExpanded || holdsCritical);
41  const expanded = open || holdsCritical;
42  const Heading = headingLevel === 2 ? "h2" : headingLevel === 3 ? "h3" : "h4";
43  const toggle = (
44    <button type="button" className="cap-group-toggle" aria-expanded={expanded} aria-controls={id} onClick={() => setOpen(!expanded)}>
45      <span className="cap-group-label">{label}</span>
46      <span className="cap-sr-only">, </span>
47      <span className="cap-group-count">{count}</span>
48    </button>
49  );
50  return (
51    <div className="cap-group" data-cap="disclosure">
52      {headingLevel ? <Heading className="cap-group-heading">{toggle}</Heading> : toggle}
53      <ul className="cap-group-rows" id={id} hidden={!expanded}>
54        {children}
55      </ul>
56    </div>
57  );
58}