components/tabs/tabs.react.tsx

Functions

Imports

It imports components/tabs/tabs.ts. Imported by components/media-library/media-library.react.tsx, components/mentions-list/mentions-list.react.tsx, components/posts-list/posts-list.react.tsx, components/tabs/examples.tsx.

Source

1import { createContext, useContext, useId, useState, type ComponentProps, type KeyboardEvent, type ReactNode } from "react";
2import { nextTab, type Activation, type Orientation } from "./tabs.ts";
3
4// Renders the HTML contract in tabs.md. The chosen tab, the roving tabindex and the hidden
5// panels are React state, so the markup a server renders is the markup a client hydrates.
6// Every panel is rendered (the inactive ones `hidden`), so the page's content is in the HTML.
7// Tab values are short tokens (letters, digits, dashes): they become part of the ids.
8interface TabsContext {
9  base: string;
10  value: string;
11  stop: string;
12  orientation: Orientation;
13  activation: Activation;
14  choose: (value: string) => void;
15  setStop: (value: string) => void;
16}
17const Ctx = createContext<TabsContext | null>(null);
18function useTabs(): TabsContext {
19  const c = useContext(Ctx);
20  if (!c) throw new Error("Tabs parts go inside <Tabs>");
21  return c;
22}
23
24export interface TabsProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue"> {
25  // Controlled: the chosen tab, with onValueChange. Or uncontrolled: defaultValue.
26  value?: string;
27  defaultValue?: string;
28  onValueChange?: (value: string) => void;
29  orientation?: Orientation;
30  // "automatic" (default): an arrow key chooses the tab it lands on. "manual": it only moves
31  // focus, and Enter or Space chooses (for panels that are slow to show).
32  activation?: Activation;
33}
34
35export function Tabs({ value, defaultValue = "", onValueChange, orientation = "horizontal", activation = "automatic", className, children, ...props }: TabsProps) {
36  const base = useId();
37  const [own, setOwn] = useState(defaultValue);
38  const chosen = value ?? own;
39  const [moved, setMoved] = useState<string | null>(null);
40  const choose = (v: string) => {
41    setOwn(v);
42    setMoved(null);
43    if (v !== chosen) onValueChange?.(v);
44  };
45  return (
46    <Ctx.Provider value={{ base, value: chosen, stop: moved ?? chosen, orientation, activation, choose, setStop: setMoved }}>
47      <div className={className ? `cap-tabs ${className}` : "cap-tabs"} data-orientation={orientation === "vertical" ? "vertical" : undefined} data-activation={activation === "manual" ? "manual" : undefined} {...props}>
48        {children}
49      </div>
50    </Ctx.Provider>
51  );
52}
53
54export interface TabsListProps extends ComponentProps<"div"> {
55  // The list needs a name: "Posts", "Settings sections".
56  "aria-label": string;
57  variant?: "default" | "line";
58  size?: "sm" | "default" | "lg";
59  fill?: boolean;
60}
61
62export function TabsList({ variant = "default", size = "default", fill, className, onKeyDown, onBlur, children, ...props }: TabsListProps) {
63  const c = useTabs();
64  const keys = (e: KeyboardEvent<HTMLDivElement>) => {
65    onKeyDown?.(e);
66    if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
67    const tabs = [...e.currentTarget.querySelectorAll<HTMLElement>(":scope > [role='tab']")];
68    const enabled = tabs.flatMap((t, i) => (t.getAttribute("aria-disabled") === "true" ? [] : [i]));
69    const current = tabs.findIndex((t) => t === document.activeElement);
70    const to = nextTab(enabled, current, e.key, c.orientation, getComputedStyle(e.currentTarget).direction === "rtl");
71    const target = to === null ? undefined : tabs[to];
72    if (!target) return;
73    e.preventDefault();
74    target.focus();
75    if (c.activation === "automatic") target.click();
76    else c.setStop(target.id.slice(`${c.base}-tab-`.length));
77  };
78  return (
79    <div
80      role="tablist"
81      aria-orientation={c.orientation === "vertical" ? "vertical" : undefined}
82      className={className ? `cap-tabs-list ${className}` : "cap-tabs-list"}
83      data-variant={variant === "line" ? "line" : undefined}
84      data-size={size === "default" ? undefined : size}
85      data-fill={fill ? "" : undefined}
86      onKeyDown={keys}
87      onBlur={(e) => {
88        onBlur?.(e);
89        if (!e.currentTarget.contains(e.relatedTarget)) c.setStop(c.value);
90      }}
91      {...props}
92    >
93      {children}
94    </div>
95  );
96}
97
98export interface TabsTriggerProps extends Omit<ComponentProps<"button">, "value"> {
99  value: string;
100  // A number beside the label. The accessible name reads "Open 12".
101  count?: number;
102  disabled?: boolean;
103}
104
105export function TabsTrigger({ value, count, disabled, className, onClick, children, ...props }: TabsTriggerProps) {
106  const c = useTabs();
107  const on = c.value === value;
108  return (
109    <button
110      type="button"
111      role="tab"
112      id={`${c.base}-tab-${value}`}
113      aria-selected={on}
114      aria-controls={`${c.base}-panel-${value}`}
115      aria-disabled={disabled ? true : undefined}
116      tabIndex={c.stop === value ? 0 : -1}
117      className={className ? `cap-tab ${className}` : "cap-tab"}
118      onClick={(e) => {
119        onClick?.(e);
120        if (!e.defaultPrevented && !disabled) c.choose(value);
121      }}
122      {...props}
123    >
124      {children}
125      {count != null ? <span className="cap-tab-count">{count}</span> : null}
126    </button>
127  );
128}
129
130export function TabsContent({ value, className, children, ...props }: ComponentProps<"div"> & { value: string }) {
131  const c = useTabs();
132  return (
133    <div role="tabpanel" id={`${c.base}-panel-${value}`} aria-labelledby={`${c.base}-tab-${value}`} tabIndex={0} hidden={c.value !== value} className={className ? `cap-tabs-panel ${className}` : "cap-tabs-panel"} {...props}>
134      {children}
135    </div>
136  );
137}
138
139// Tabs that are pages: a nav of links, the current one `aria-current="page"`. No tab roles,
140// no arrow keys: each link is a tab stop, as links are.
141// What a router's link component is given: a plain `<a>`'s props with `href` always set, the
142// tab's class and `aria-current` already on it. Return the router's `<Link to={props.href} {...props} />`.
143export type RenderTabLink = (props: ComponentProps<"a"> & { href: string }) => ReactNode;
144
145const NavLinks = createContext<RenderTabLink | undefined>(undefined);
146
147export interface TabsNavProps extends ComponentProps<"nav"> {
148  "aria-label": string;
149  variant?: "default" | "line";
150  size?: "sm" | "default" | "lg";
151  fill?: boolean;
152  // The link slot for every `TabLink` inside: how an app's router draws a link (a client-side
153  // navigation), so a tab link is a router link and still carries the tab's look and state.
154  renderLink?: RenderTabLink;
155}
156
157export function TabsNav({ variant = "default", size = "default", fill, className, children, renderLink, ...props }: TabsNavProps) {
158  const nav = (
159    <nav className={className ? `cap-tabs-list ${className}` : "cap-tabs-list"} data-variant={variant === "line" ? "line" : undefined} data-size={size === "default" ? undefined : size} data-fill={fill ? "" : undefined} {...props}>
160      {children}
161    </nav>
162  );
163  return renderLink ? <NavLinks.Provider value={renderLink}>{nav}</NavLinks.Provider> : nav;
164}
165
166export interface TabLinkProps extends Omit<ComponentProps<"a">, "href"> {
167  href: string;
168  current?: boolean;
169  count?: number;
170  children: ReactNode;
171  // This link only: how the router draws it. Wins over the nav's `renderLink`.
172  renderLink?: RenderTabLink;
173}
174
175export function TabLink({ current, count, className, children, renderLink, ...props }: TabLinkProps) {
176  const inherited = useContext(NavLinks);
177  const draw = renderLink ?? inherited;
178  const inner = (
179    <>
180      {children}
181      {count != null ? <span className="cap-tab-count">{count}</span> : null}
182    </>
183  );
184  const linkProps = { className: className ? `cap-tab ${className}` : "cap-tab", "aria-current": current ? ("page" as const) : undefined, ...props, children: inner };
185  return draw ? <>{draw(linkProps)}</> : <a {...linkProps} />;
186}