@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/List/List.css

@@ -0,0 +1,224 @@
+/* List — the ListPanel / CGamesListPanel row well.
+ *
+ * Everything here is a value from `docs/components/List.md`; the only colours
+ * allowed are `var(--vgui-*)` (see `src/styles/tokens.css`). `steam.styles`
+ * style blocks outrank the `.Scheme` keys, so the interior is `DarkGreenBG`
+ * painted by `render_bg` and the selection is `BorderDark` — not `GrayBG` and
+ * `DarkGreenBG` as the `.Scheme` keys would suggest.
+ */
+
+.vgui-list {
+  position: relative;
+  color: var(--vgui-text-strong);
+  font-size: 14px;
+  overflow: hidden; /* the interior scrolls, not the frame */
+  /* PerPixelScrolling "1": the browser already scrolls by pixels. Do NOT add
+     scroll-snap — it re-introduces the row-jumping this metric exists to
+     avoid. */
+}
+
+/* Recessed: ListPanel — top/left dark, bottom/right lit. */
+.vgui-list--recessed > .vgui-list__interior {
+  background-color: var(--vgui-list-bg, #3e4637);
+  border-top: 1px solid var(--vgui-bevel-dark);
+  border-left: 1px solid var(--vgui-bevel-dark);
+  border-right: 1px solid var(--vgui-bevel-light);
+  border-bottom: 1px solid var(--vgui-bevel-light);
+  overflow-y: auto;
+  /* ListPanelInterior inset "0 0 0 1" — one pixel reserved at the bottom. */
+  padding-bottom: 1px;
+}
+
+/* Raised: CGamesListPanel — the same four lines with the sides swapped. */
+.vgui-list--raised > .vgui-list__interior {
+  background-color: var(--vgui-list-bg, #3e4637);
+  border-top: 1px solid var(--vgui-bevel-light);
+  border-left: 1px solid var(--vgui-bevel-light);
+  border-right: 1px solid var(--vgui-bevel-dark);
+  border-bottom: 1px solid var(--vgui-bevel-dark);
+  overflow-y: auto;
+}
+
+/* ListpanelCorner — the square where the two native scrollbars meet. */
+.vgui-list__interior::-webkit-scrollbar-corner {
+  background-color: var(--vgui-scrollbar-corner, #4c4c4c);
+}
+
+/* The one `role="listbox"` of a flat list, or one per section when grouped.
+   `aria-required-children` only permits `option`/`group` inside a listbox, so
+   section headers and collapsers live outside this element. */
+.vgui-list__rows {
+  display: flex;
+  flex-direction: column;
+}
+
+/* A collapsed section is `hidden`; the author `display` above would otherwise
+   beat the user-agent `[hidden] { display: none }`. */
+.vgui-list__rows[hidden] {
+  display: none;
+}
+
+.vgui-list__section {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* PostSectionLeading: 10px of air before each new section. */
+.vgui-list__section + .vgui-list__section {
+  margin-top: var(--vgui-list-post-section-leading, 10px);
+}
+
+.vgui-list__section-header {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.vgui-list__section-title {
+  color: var(--vgui-text-section, #c4b550);
+  font-size: 14px;
+  padding: 0 4px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* `ListPanelSectionHeader:hover` sets the same value as its base state, so
+     there is deliberately no hover rule here: adding one would invent a state
+     the corpus does not have. */
+}
+
+.vgui-list__row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--vgui-list-row-height, 17px);
+  padding: 0 4px;
+  cursor: default;
+  /* No transitions: VGUI selection is instantaneous. */
+}
+
+.vgui-list__label {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* The games list has a dedicated, brighter row colour. */
+.vgui-list--raised .vgui-list__row {
+  color: var(--vgui-text-list-strong, #e6ece0);
+}
+
+/* Selection is "pushed in": the fill is *darker* than the interior, 1.41:1
+   against it. That fails WCAG 1.4.11 on its own, so the state also carries a
+   leading marker and a 1px inset shadow — both non-colour cues. */
+.vgui-list__row[aria-selected='true'] {
+  background-color: var(--vgui-list-selected-bg, #282e22);
+  color: var(--vgui-text-strong);
+  box-shadow: inset 1px 1px 0 var(--vgui-bevel-dark);
+}
+
+.vgui-list__row[aria-selected='true']::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  width: 2px;
+  background-color: var(--vgui-text-strong);
+}
+
+.vgui-list__row[aria-disabled='true'] {
+  color: var(--vgui-text-list-disabled, #5a6a50);
+  text-shadow: 1px 1px 0 var(--vgui-bevel-dark);
+}
+
+/* Roving tabindex: the arrow keys move focus, so the ring marks the *active*
+   row — which in a multi-select list is a different row from the selected
+   ones. */
+.vgui-list__row:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+/* Valve's fallback ring: a 1px dashed inner outline. */
+.vgui-crisp .vgui-list__row:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-list__collapser {
+  position: relative;
+  flex: 0 0 var(--vgui-collapser-width, 16px);
+  width: var(--vgui-collapser-width, 16px);
+  height: 16px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+/* The 16px slot is under --vgui-min-target-size (24px), so the target is grown
+   invisibly without moving the glyph. */
+.vgui-list__collapser::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--vgui-min-target-size, 24px);
+  height: var(--vgui-min-target-size, 24px);
+  transform: translate(-50%, -50%);
+}
+
+.vgui-list__collapser:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-list__collapser:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* ListPanelSectionCollapser: inset "-4 0 0 0", padding-top/-bottom "-2" — the
+   14x9 glyph overhangs its 16px slot by 4px on the left, and the port ships no
+   `.tga` assets (`docs/assets.md`), so the sprite is drawn as a triangle. */
+.vgui-list__collapser-glyph {
+  display: block;
+  width: 14px;
+  height: 9px;
+  margin-left: calc(-1 * var(--vgui-collapser-overhang, 4px));
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid var(--vgui-text-section, #c4b550);
+}
+
+.vgui-list__collapser-glyph[data-state='expanded'] {
+  border-top: 7px solid var(--vgui-text-section, #c4b550);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+}
+
+.vgui-list__empty {
+  margin: 0;
+  padding: 4px;
+  color: var(--vgui-text);
+  font-size: 14px;
+}
+
+/* The selection live region: audible, never visible. */
+.vgui-list__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/List/List.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/List/List.d.ts

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './List.css';
+import '../../styles/scrollbars.css';
+export interface ListRow {
+    /** Stable identity; also the React key. */
+    id: string;
+    /** Row content when used flat; see Table for named columns. */
+    content: ReactNode;
+    /** Renders as non-interactive and dimmed. */
+    disabled?: boolean;
+    /** Arbitrary payload returned by onSelectedChange. */
+    data?: unknown;
+}
+export interface ListSection {
+    /** Stable identity for the section. */
+    id: string;
+    /** Optional heading, rendered in the Over/maize colour. */
+    title?: string;
+    /** Rows in this section. */
+    rows: ListRow[];
+}
+export interface ListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Rows, or sections when `grouped` is set. */
+    items: ListRow[] | ListSection[];
+    /** Treats `items` as `ListSection[]` and renders collapsers. */
+    grouped?: boolean;
+    /** Uses the raised `CGamesListPanel` bevel instead of the recessed well. */
+    raised?: boolean;
+    /** Controlled selection. Use `string[]` when `multi` is set. */
+    selected?: string | string[];
+    /** Initial selection when uncontrolled. */
+    defaultSelected?: string | string[];
+    /** Allows Ctrl/Shift multi-selection. */
+    multi?: boolean;
+    /** Called with the new selection. */
+    onSelectedChange?: (ids: string | string[]) => void;
+    /** Message rendered when there are no rows. */
+    emptyMessage?: string;
+    /** Row pitch in pixels. Defaults to 17. */
+    rowHeight?: number;
+    /**
+     * Accessible name for the listbox, used when neither `aria-label` nor
+     * `aria-labelledby` is given. ARIA requires a listbox to be named, so it
+     * falls back to `"List"`.
+     */
+    label?: string;
+}
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=List.d.ts.map

package/dist/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,cAAc,EAGd,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,YAAY,CAAA;AACnB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,OAAO;IACtB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,+DAA+D;IAC/D,OAAO,EAAE,SAAS,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4BAA4B;IAC5B,IAAI,EAAE,OAAO,EAAE,CAAA;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjF,+CAA+C;IAC/C,KAAK,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAAA;IAChC,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACnC,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IACnD,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAoBD,eAAO,MAAM,IAAI,sGAwXf,CAAA"}

package/dist/components/List/List.js

@@ -0,0 +1,300 @@
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./List.css";
+//#region src/components/List/List.tsx
+/** `PerPixelScrolling "1"` implies the pitch is a runtime value; 17px is the doc's guess. */
+var DEFAULT_ROW_PITCH = 17;
+/** How long a run of typed characters keeps building a typeahead query. */
+var TYPEAHEAD_RESET_MS = 600;
+/** A flat list is one unnamed section; it never renders a collapser. */
+var FLAT_SECTION_ID = "__list";
+function toIdArray(value) {
+	if (value === void 0) return [];
+	return Array.isArray(value) ? value.slice() : [value];
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+var List = forwardRef(function List(props, forwardedRef) {
+	const { className, items, grouped = false, raised = false, selected, defaultSelected, multi = false, onSelectedChange, emptyMessage, rowHeight, label, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = props;
+	const baseId = useId();
+	const rowRefs = useRef(/* @__PURE__ */ new Map());
+	/**
+	* Shift+click anchors on the row that was focused when the range started.
+	* It lives in a ref because a pointer press moves DOM focus before the click
+	* lands, which would otherwise overwrite the anchor with the clicked row.
+	*/
+	const anchorRef = useRef(null);
+	const typeaheadRef = useRef({
+		query: "",
+		timer: null
+	});
+	const sections = useMemo(() => {
+		if (grouped) return items.map((section) => ({
+			id: section.id,
+			title: section.title,
+			rows: Array.isArray(section.rows) ? section.rows : []
+		}));
+		return [{
+			id: FLAT_SECTION_ID,
+			rows: items
+		}];
+	}, [grouped, items]);
+	const [collapsedSections, setCollapsedSections] = useState([]);
+	const [uncontrolledSelected, setUncontrolledSelected] = useState(() => toIdArray(defaultSelected));
+	const [activeId, setActiveId] = useState(null);
+	const [announcement, setAnnouncement] = useState("");
+	const allRows = useMemo(() => sections.flatMap((section) => section.rows), [sections]);
+	const selectedIds = selected === void 0 ? uncontrolledSelected : toIdArray(selected);
+	const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const navigableRows = useMemo(() => sections.filter((section) => !collapsedSections.includes(section.id)).flatMap((section) => section.rows), [collapsedSections, sections]);
+	const fallbackActiveId = navigableRows.find((row) => selectedSet.has(row.id))?.id ?? navigableRows[0]?.id ?? null;
+	const activeRowId = activeId !== null && navigableRows.some((row) => row.id === activeId) ? activeId : fallbackActiveId;
+	useEffect(() => {
+		const typeahead = typeaheadRef.current;
+		return () => {
+			if (typeahead.timer !== null) clearTimeout(typeahead.timer);
+		};
+	}, []);
+	const setRowRef = useCallback((id, node) => {
+		if (node) rowRefs.current.set(id, node);
+		else rowRefs.current.delete(id);
+	}, []);
+	const textOf = useCallback((id) => (rowRefs.current.get(id)?.textContent ?? "").trim(), []);
+	const commit = useCallback((next) => {
+		if (selected === void 0) setUncontrolledSelected(next);
+		onSelectedChange?.(multi ? next : next[0] ?? "");
+	}, [
+		multi,
+		onSelectedChange,
+		selected
+	]);
+	const describe = useCallback((id, next) => {
+		const name = textOf(id).slice(0, 60);
+		const position = allRows.findIndex((row) => row.id === id) + 1;
+		const state = next.includes(id) ? "selected" : "not selected";
+		return [`${name || "Row"}, ${state}`, `${position} of ${allRows.length}`].join(", ");
+	}, [allRows, textOf]);
+	const focusRow = useCallback((id) => {
+		setActiveId(id);
+		anchorRef.current = id;
+		const node = rowRefs.current.get(id);
+		if (!node) return;
+		/**
+		* jsdom has no layout engine, so `scrollIntoView` may be a stub or missing
+		* entirely; `PerPixelScrolling` only asks that the active row be brought
+		* into view, so a missing implementation is not fatal.
+		*/
+		if (typeof node.scrollIntoView === "function") node.scrollIntoView({ block: "nearest" });
+		node.focus();
+	}, []);
+	const moveActive = useCallback((step) => {
+		const ids = navigableRows.map((row) => row.id);
+		if (ids.length === 0) return;
+		const current = activeRowId === null ? -1 : ids.indexOf(activeRowId);
+		const next = step === "first" ? 0 : step === "last" ? ids.length - 1 : clamp((current < 0 ? 0 : current) + step, 0, ids.length - 1);
+		focusRow(ids[next]);
+	}, [
+		activeRowId,
+		focusRow,
+		navigableRows
+	]);
+	const typeahead = useCallback((character) => {
+		const state = typeaheadRef.current;
+		const buffer = (state.query + character).toLowerCase();
+		state.query = buffer;
+		if (state.timer !== null) clearTimeout(state.timer);
+		state.timer = setTimeout(() => {
+			state.query = "";
+		}, TYPEAHEAD_RESET_MS);
+		const ids = navigableRows.map((row) => row.id);
+		if (ids.length === 0) return;
+		const targets = navigableRows.filter((row) => !row.disabled).map((row) => row.id);
+		if (targets.length === 0) return;
+		const start = activeRowId === null ? -1 : ids.indexOf(activeRowId);
+		for (let offset = 1; offset <= ids.length; offset += 1) {
+			const id = ids[(start + offset + ids.length) % ids.length];
+			if (!targets.includes(id)) continue;
+			if (textOf(id).toLowerCase().startsWith(buffer)) {
+				focusRow(id);
+				return;
+			}
+		}
+	}, [
+		activeRowId,
+		focusRow,
+		navigableRows,
+		textOf
+	]);
+	const selectRow = useCallback((id, mode) => {
+		const anchor = anchorRef.current ?? activeRowId;
+		let next;
+		if (mode === "range" && anchor !== null && anchor !== id) {
+			const ids = allRows.map((row) => row.id);
+			const from = ids.indexOf(anchor);
+			const to = ids.indexOf(id);
+			next = ids.slice(Math.min(from, to), Math.max(from, to) + 1);
+		} else if (mode === "range" || mode === "replace") next = [id];
+		else next = selectedSet.has(id) ? selectedIds.filter((entry) => entry !== id) : [...selectedIds, id];
+		if (mode !== "range") anchorRef.current = id;
+		setAnnouncement(describe(id, next));
+		commit(next);
+	}, [
+		activeRowId,
+		allRows,
+		commit,
+		describe,
+		selectedIds,
+		selectedSet
+	]);
+	const activate = useCallback((id) => {
+		const row = allRows.find((entry) => entry.id === id);
+		if (!row || row.disabled) return;
+		selectRow(id, multi ? "toggle" : "replace");
+	}, [
+		allRows,
+		multi,
+		selectRow
+	]);
+	const handleKeyDown = useCallback((event) => {
+		const { key } = event;
+		if (key === "ArrowDown" || key === "ArrowUp") {
+			event.preventDefault();
+			moveActive(key === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if (key === "Home" || key === "End") {
+			event.preventDefault();
+			moveActive(key === "Home" ? "first" : "last");
+			return;
+		}
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			if (activeRowId !== null) activate(activeRowId);
+			return;
+		}
+		if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) typeahead(key);
+	}, [
+		activate,
+		activeRowId,
+		moveActive,
+		typeahead
+	]);
+	const handleRowClick = useCallback((event, id) => {
+		const row = allRows.find((entry) => entry.id === id);
+		if (!row || row.disabled) return;
+		setActiveId(id);
+		if (!multi) {
+			selectRow(id, "replace");
+			return;
+		}
+		if (event.shiftKey) {
+			selectRow(id, "range");
+			return;
+		}
+		selectRow(id, event.ctrlKey || event.metaKey ? "toggle" : "replace");
+	}, [
+		allRows,
+		multi,
+		selectRow
+	]);
+	const toggleSection = useCallback((id) => {
+		setCollapsedSections((previous) => previous.includes(id) ? previous.filter((entry) => entry !== id) : [...previous, id]);
+	}, []);
+	const classes = ["vgui-list"];
+	classes.push(raised ? "vgui-list--raised" : "vgui-list--recessed");
+	if (grouped) classes.push("vgui-list--sectioned");
+	if (multi) classes.push("vgui-list--multi");
+	if (allRows.length === 0) classes.push("vgui-list--empty");
+	if (className) classes.push(className);
+	const listStyle = {
+		...style,
+		"--vgui-list-row-height": `${rowHeight ?? DEFAULT_ROW_PITCH}px`
+	};
+	const isEmpty = allRows.length === 0;
+	const renderRow = (row) => {
+		const isSelected = selectedSet.has(row.id);
+		const rowClasses = ["vgui-list__row"];
+		if (isSelected) rowClasses.push("vgui-list__row--selected");
+		if (row.disabled) rowClasses.push("vgui-list__row--disabled");
+		return /* @__PURE__ */ jsx("div", {
+			id: `${baseId}-row-${row.id}`,
+			ref: (node) => setRowRef(row.id, node),
+			className: rowClasses.join(" "),
+			role: "option",
+			"aria-selected": isSelected,
+			"aria-disabled": row.disabled ? true : void 0,
+			tabIndex: row.id === activeRowId ? 0 : -1,
+			onClick: (event) => handleRowClick(event, row.id),
+			onFocus: () => setActiveId(row.id),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "vgui-list__label",
+				children: row.content
+			})
+		}, row.id);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		className: classes.join(" "),
+		style: listStyle,
+		...rest,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "vgui-list__interior vgui-scroll-surface",
+			children: isEmpty ? /* @__PURE__ */ jsx("p", {
+				className: "vgui-list__empty",
+				role: "status",
+				children: emptyMessage
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [sections.map((section, index) => {
+				const titled = grouped && section.title !== void 0;
+				const titleId = `${baseId}-${section.id}-title`;
+				const rowsId = `${baseId}-${section.id}-rows`;
+				const collapsed = collapsedSections.includes(section.id);
+				const sectionName = grouped && label !== void 0 ? `${label}: ${section.title ?? index + 1}` : label;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "vgui-list__section",
+					children: [grouped ? /* @__PURE__ */ jsxs("div", {
+						className: "vgui-list__section-header",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "vgui-list__collapser",
+							"aria-expanded": !collapsed,
+							"aria-controls": rowsId,
+							"aria-label": section.title === void 0 ? `${collapsed ? "Expand" : "Collapse"} section ${index + 1}` : `${collapsed ? "Expand" : "Collapse"} ${section.title}`,
+							onClick: () => toggleSection(section.id),
+							children: /* @__PURE__ */ jsx("span", {
+								className: "vgui-list__collapser-glyph",
+								"data-state": collapsed ? "collapsed" : "expanded",
+								"aria-hidden": "true"
+							})
+						}), section.title !== void 0 ? /* @__PURE__ */ jsx("span", {
+							className: "vgui-list__section-title",
+							id: titleId,
+							"aria-hidden": "true",
+							children: section.title
+						}) : null]
+					}) : null, /* @__PURE__ */ jsx("div", {
+						id: rowsId,
+						className: "vgui-list__rows",
+						role: "listbox",
+						"aria-labelledby": titled ? titleId : ariaLabelledBy,
+						"aria-label": titled || ariaLabelledBy ? void 0 : grouped ? sectionName ?? "List" : ariaLabel ?? sectionName ?? "List",
+						"aria-multiselectable": multi ? true : void 0,
+						hidden: grouped ? collapsed : void 0,
+						onKeyDown: handleKeyDown,
+						children: section.rows.map(renderRow)
+					})]
+				}, section.id);
+			}), /* @__PURE__ */ jsx("div", {
+				className: "vgui-list__live",
+				role: "status",
+				children: announcement
+			})] })
+		})
+	});
+});
+List.displayName = "List";
+//#endregion
+export { List };
+
+//# sourceMappingURL=List.js.map

package/dist/components/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport type {\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react'\n\nimport './List.css'\nimport '../../styles/scrollbars.css'\n\nexport interface ListRow {\n  /** Stable identity; also the React key. */\n  id: string\n  /** Row content when used flat; see Table for named columns. */\n  content: ReactNode\n  /** Renders as non-interactive and dimmed. */\n  disabled?: boolean\n  /** Arbitrary payload returned by onSelectedChange. */\n  data?: unknown\n}\n\nexport interface ListSection {\n  /** Stable identity for the section. */\n  id: string\n  /** Optional heading, rendered in the Over/maize colour. */\n  title?: string\n  /** Rows in this section. */\n  rows: ListRow[]\n}\n\nexport interface ListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Rows, or sections when `grouped` is set. */\n  items: ListRow[] | ListSection[]\n  /** Treats `items` as `ListSection[]` and renders collapsers. */\n  grouped?: boolean\n  /** Uses the raised `CGamesListPanel` bevel instead of the recessed well. */\n  raised?: boolean\n  /** Controlled selection. Use `string[]` when `multi` is set. */\n  selected?: string | string[]\n  /** Initial selection when uncontrolled. */\n  defaultSelected?: string | string[]\n  /** Allows Ctrl/Shift multi-selection. */\n  multi?: boolean\n  /** Called with the new selection. */\n  onSelectedChange?: (ids: string | string[]) => void\n  /** Message rendered when there are no rows. */\n  emptyMessage?: string\n  /** Row pitch in pixels. Defaults to 17. */\n  rowHeight?: number\n  /**\n   * Accessible name for the listbox, used when neither `aria-label` nor\n   * `aria-labelledby` is given. ARIA requires a listbox to be named, so it\n   * falls back to `\"List\"`.\n   */\n  label?: string\n}\n\n/** `PerPixelScrolling \"1\"` implies the pitch is a runtime value; 17px is the doc's guess. */\nconst DEFAULT_ROW_PITCH = 17\n\n/** How long a run of typed characters keeps building a typeahead query. */\nconst TYPEAHEAD_RESET_MS = 600\n\n/** A flat list is one unnamed section; it never renders a collapser. */\nconst FLAT_SECTION_ID = '__list'\n\nfunction toIdArray(value: string | string[] | undefined): string[] {\n  if (value === undefined) return []\n  return Array.isArray(value) ? value.slice() : [value]\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\nexport const List = forwardRef<HTMLDivElement, ListProps>(function List(props, forwardedRef) {\n  const {\n    className,\n    items,\n    grouped = false,\n    raised = false,\n    selected,\n    defaultSelected,\n    multi = false,\n    onSelectedChange,\n    emptyMessage,\n    rowHeight,\n    label,\n    style,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  } = props\n\n  const baseId = useId()\n  const rowRefs = useRef(new Map<string, HTMLDivElement>())\n  /**\n   * Shift+click anchors on the row that was focused when the range started.\n   * It lives in a ref because a pointer press moves DOM focus before the click\n   * lands, which would otherwise overwrite the anchor with the clicked row.\n   */\n  const anchorRef = useRef<string | null>(null)\n  const typeaheadRef = useRef<{ query: string; timer: ReturnType<typeof setTimeout> | null }>({\n    query: '',\n    timer: null,\n  })\n\n  // Sections are always materialised so the flat and grouped paths share one\n  // renderer; a flat list is a single section with no header.\n  const sections = useMemo<ListSection[]>(() => {\n    if (grouped) {\n      return (items as ListSection[]).map((section) => ({\n        id: section.id,\n        title: section.title,\n        rows: Array.isArray(section.rows) ? section.rows : [],\n      }))\n    }\n    return [{ id: FLAT_SECTION_ID, rows: items as ListRow[] }]\n  }, [grouped, items])\n\n  const [collapsedSections, setCollapsedSections] = useState<string[]>([])\n  const [uncontrolledSelected, setUncontrolledSelected] = useState<string[]>(() =>\n    toIdArray(defaultSelected),\n  )\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [announcement, setAnnouncement] = useState('')\n\n  const allRows = useMemo(() => sections.flatMap((section) => section.rows), [sections])\n  const selectedIds = selected === undefined ? uncontrolledSelected : toIdArray(selected)\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])\n\n  // Rows inside a collapsed section stay mounted but out of the a11y tree, so\n  // they drop out of arrow-key navigation too.\n  const navigableRows = useMemo(\n    () =>\n      sections\n        .filter((section) => !collapsedSections.includes(section.id))\n        .flatMap((section) => section.rows),\n    [collapsedSections, sections],\n  )\n\n  // Roving tabindex: exactly one row is the tab stop. A stale active row (its\n  // section collapsed, or its row removed) falls back to the selection and then\n  // to the first row.\n  const fallbackActiveId =\n    navigableRows.find((row) => selectedSet.has(row.id))?.id ?? navigableRows[0]?.id ?? null\n  const activeRowId =\n    activeId !== null && navigableRows.some((row) => row.id === activeId)\n      ? activeId\n      : fallbackActiveId\n\n  useEffect(() => {\n    const typeahead = typeaheadRef.current\n    return () => {\n      if (typeahead.timer !== null) clearTimeout(typeahead.timer)\n    }\n  }, [])\n\n  const setRowRef = useCallback((id: string, node: HTMLDivElement | null) => {\n    if (node) rowRefs.current.set(id, node)\n    else rowRefs.current.delete(id)\n  }, [])\n\n  const textOf = useCallback(\n    (id: string) => (rowRefs.current.get(id)?.textContent ?? '').trim(),\n    [],\n  )\n\n  const commit = useCallback(\n    (next: string[]) => {\n      if (selected === undefined) setUncontrolledSelected(next)\n      onSelectedChange?.(multi ? next : (next[0] ?? ''))\n    },\n    [multi, onSelectedChange, selected],\n  )\n\n  const describe = useCallback(\n    (id: string, next: string[]) => {\n      const name = textOf(id).slice(0, 60)\n      const position = allRows.findIndex((row) => row.id === id) + 1\n      const state = next.includes(id) ? 'selected' : 'not selected'\n      return [`${name || 'Row'}, ${state}`, `${position} of ${allRows.length}`].join(', ')\n    },\n    [allRows, textOf],\n  )\n\n  const focusRow = useCallback((id: string) => {\n    setActiveId(id)\n    anchorRef.current = id\n    const node = rowRefs.current.get(id)\n    if (!node) return\n    /**\n     * jsdom has no layout engine, so `scrollIntoView` may be a stub or missing\n     * entirely; `PerPixelScrolling` only asks that the active row be brought\n     * into view, so a missing implementation is not fatal.\n     */\n    if (typeof node.scrollIntoView === 'function') node.scrollIntoView({ block: 'nearest' })\n    node.focus()\n  }, [])\n\n  const moveActive = useCallback(\n    (step: number | 'first' | 'last') => {\n      const ids = navigableRows.map((row) => row.id)\n      if (ids.length === 0) return\n\n      const current = activeRowId === null ? -1 : ids.indexOf(activeRowId)\n      const base = current < 0 ? 0 : current\n      const next =\n        step === 'first' ? 0 : step === 'last' ? ids.length - 1 : clamp(base + step, 0, ids.length - 1)\n      focusRow(ids[next])\n    },\n    [activeRowId, focusRow, navigableRows],\n  )\n\n  const typeahead = useCallback(\n    (character: string) => {\n      const state = typeaheadRef.current\n      const buffer = (state.query + character).toLowerCase()\n      state.query = buffer\n      if (state.timer !== null) clearTimeout(state.timer)\n      state.timer = setTimeout(() => {\n        state.query = ''\n      }, TYPEAHEAD_RESET_MS)\n\n      const ids = navigableRows.map((row) => row.id)\n      if (ids.length === 0) return\n\n      // Disabled rows advertise their existence but are not typeahead targets.\n      const targets = navigableRows.filter((row) => !row.disabled).map((row) => row.id)\n      if (targets.length === 0) return\n\n      const start = activeRowId === null ? -1 : ids.indexOf(activeRowId)\n      for (let offset = 1; offset <= ids.length; offset += 1) {\n        const id = ids[(start + offset + ids.length) % ids.length]\n        if (!targets.includes(id)) continue\n        if (textOf(id).toLowerCase().startsWith(buffer)) {\n          focusRow(id)\n          return\n        }\n      }\n    },\n    [activeRowId, focusRow, navigableRows, textOf],\n  )\n\n  const selectRow = useCallback(\n    (id: string, mode: 'replace' | 'toggle' | 'range') => {\n      const anchor = anchorRef.current ?? activeRowId\n      let next: string[]\n\n      if (mode === 'range' && anchor !== null && anchor !== id) {\n        const ids = allRows.map((row) => row.id)\n        const from = ids.indexOf(anchor)\n        const to = ids.indexOf(id)\n        next = ids.slice(Math.min(from, to), Math.max(from, to) + 1)\n      } else if (mode === 'range' || mode === 'replace') {\n        next = [id]\n      } else {\n        next = selectedSet.has(id) ? selectedIds.filter((entry) => entry !== id) : [...selectedIds, id]\n      }\n\n      // A range keeps its original anchor; every other gesture moves it.\n      if (mode !== 'range') anchorRef.current = id\n\n      setAnnouncement(describe(id, next))\n      commit(next)\n    },\n    [activeRowId, allRows, commit, describe, selectedIds, selectedSet],\n  )\n\n  const activate = useCallback(\n    (id: string) => {\n      const row = allRows.find((entry) => entry.id === id)\n      if (!row || row.disabled) return\n      selectRow(id, multi ? 'toggle' : 'replace')\n    },\n    [allRows, multi, selectRow],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      const { key } = event\n\n      if (key === 'ArrowDown' || key === 'ArrowUp') {\n        event.preventDefault()\n        moveActive(key === 'ArrowDown' ? 1 : -1)\n        return\n      }\n\n      if (key === 'Home' || key === 'End') {\n        event.preventDefault()\n        moveActive(key === 'Home' ? 'first' : 'last')\n        return\n      }\n\n      if (key === 'Enter' || key === ' ') {\n        event.preventDefault()\n        if (activeRowId !== null) activate(activeRowId)\n        return\n      }\n\n      if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n        typeahead(key)\n      }\n    },\n    [activate, activeRowId, moveActive, typeahead],\n  )\n\n  const handleRowClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>, id: string) => {\n      const row = allRows.find((entry) => entry.id === id)\n      if (!row || row.disabled) return\n\n      // Roving tabindex means the pointer must move the active row too.\n      setActiveId(id)\n\n      if (!multi) {\n        selectRow(id, 'replace')\n        return\n      }\n      if (event.shiftKey) {\n        selectRow(id, 'range')\n        return\n      }\n      selectRow(id, event.ctrlKey || event.metaKey ? 'toggle' : 'replace')\n    },\n    [allRows, multi, selectRow],\n  )\n\n  const toggleSection = useCallback((id: string) => {\n    setCollapsedSections((previous) =>\n      previous.includes(id) ? previous.filter((entry) => entry !== id) : [...previous, id],\n    )\n  }, [])\n\n  const classes = ['vgui-list']\n  classes.push(raised ? 'vgui-list--raised' : 'vgui-list--recessed')\n  if (grouped) classes.push('vgui-list--sectioned')\n  if (multi) classes.push('vgui-list--multi')\n  if (allRows.length === 0) classes.push('vgui-list--empty')\n  if (className) classes.push(className)\n\n  const listStyle = {\n    ...style,\n    '--vgui-list-row-height': `${rowHeight ?? DEFAULT_ROW_PITCH}px`,\n  } as CSSProperties\n\n  const isEmpty = allRows.length === 0\n\n  const renderRow = (row: ListRow) => {\n    const isSelected = selectedSet.has(row.id)\n    const rowClasses = ['vgui-list__row']\n    if (isSelected) rowClasses.push('vgui-list__row--selected')\n    if (row.disabled) rowClasses.push('vgui-list__row--disabled')\n\n    return (\n      <div\n        key={row.id}\n        id={`${baseId}-row-${row.id}`}\n        ref={(node) => setRowRef(row.id, node)}\n        className={rowClasses.join(' ')}\n        role=\"option\"\n        aria-selected={isSelected}\n        aria-disabled={row.disabled ? true : undefined}\n        // Roving tabindex: the active row is the listbox's single tab stop.\n        tabIndex={row.id === activeRowId ? 0 : -1}\n        onClick={(event) => handleRowClick(event, row.id)}\n        onFocus={() => setActiveId(row.id)}\n      >\n        <span className=\"vgui-list__label\">{row.content}</span>\n      </div>\n    )\n  }\n\n  return (\n    <div ref={forwardedRef} className={classes.join(' ')} style={listStyle} {...rest}>\n      <div className=\"vgui-list__interior vgui-scroll-surface\">\n        {isEmpty ? (\n          // An empty `listbox` is itself an `aria-required-children` violation,\n          // so the empty state drops the widget and announces through a status\n          // region instead of a dangling `aria-describedby`.\n          <p className=\"vgui-list__empty\" role=\"status\">\n            {emptyMessage}\n          </p>\n        ) : (\n          <>\n            {sections.map((section, index) => {\n              const titled = grouped && section.title !== undefined\n              const titleId = `${baseId}-${section.id}-title`\n              const rowsId = `${baseId}-${section.id}-rows`\n              const collapsed = collapsedSections.includes(section.id)\n              const sectionName =\n                grouped && label !== undefined ? `${label}: ${section.title ?? index + 1}` : label\n\n              return (\n                <div key={section.id} className=\"vgui-list__section\">\n                  {grouped ? (\n                    <div className=\"vgui-list__section-header\">\n                      <button\n                        type=\"button\"\n                        className=\"vgui-list__collapser\"\n                        aria-expanded={!collapsed}\n                        aria-controls={rowsId}\n                        aria-label={\n                          section.title === undefined\n                            ? `${collapsed ? 'Expand' : 'Collapse'} section ${index + 1}`\n                            : `${collapsed ? 'Expand' : 'Collapse'} ${section.title}`\n                        }\n                        onClick={() => toggleSection(section.id)}\n                      >\n                        <span\n                          className=\"vgui-list__collapser-glyph\"\n                          data-state={collapsed ? 'collapsed' : 'expanded'}\n                          aria-hidden=\"true\"\n                        />\n                      </button>\n                      {section.title !== undefined ? (\n                        <span className=\"vgui-list__section-title\" id={titleId} aria-hidden=\"true\">\n                          {section.title}\n                        </span>\n                      ) : null}\n                    </div>\n                  ) : null}\n                  <div\n                    id={rowsId}\n                    className=\"vgui-list__rows\"\n                    role=\"listbox\"\n                    aria-labelledby={titled ? titleId : ariaLabelledBy}\n                    aria-label={\n                      titled || ariaLabelledBy\n                        ? undefined\n                        : grouped\n                          ? (sectionName ?? 'List')\n                          : (ariaLabel ?? sectionName ?? 'List')\n                    }\n                    aria-multiselectable={multi ? true : undefined}\n                    hidden={grouped ? collapsed : undefined}\n                    onKeyDown={handleKeyDown}\n                  >\n                    {section.rows.map(renderRow)}\n                  </div>\n                </div>\n              )\n            })}\n            <div className=\"vgui-list__live\" role=\"status\">\n              {announcement}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nList.displayName = 'List'\n"],"mappings":"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"}

package/dist/components/List/index.d.ts

@@ -0,0 +1,3 @@
+export { List } from './List';
+export type { ListProps, ListRow, ListSection } from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA"}